/* Skinloop Dark Teal Theme Override */

/*
 * Beta landing mode
 *
 * The complete imported landing page remains in index.html. During beta we
 * expose only its navbar shell and hero so restoring the full page later is a
 * stylesheet-only change.
 */
body > template#B\:0 + div {
  display: none !important;
}

body > #S\:0[hidden] {
  display: block !important;
}

body:not([data-skinloop-app]) {
  height: 100svh;
  overflow: hidden;
}

body:not([data-skinloop-app]) header nav div[class~="h-16"] > :not(:first-child) {
  display: none !important;
}

body:not([data-skinloop-app]) header nav div[class~="h-16"] {
  justify-content: flex-start !important;
}

body:not([data-skinloop-app]) main > section:not(:first-child),
body:not([data-skinloop-app]) main ~ section,
body:not([data-skinloop-app]) footer {
  display: none !important;
}

/* Core background and text */
body, html, .min-h-screen {
  background-color: #0C0C0C !important;
  color: #FFFFFF !important;
}

/* Typography Overrides */
.text-\[\#000000\],
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-black {
  color: #FFFFFF !important;
}

.text-\[\#777777\],
.text-\[\#999\],
.text-gray-600,
.text-gray-500,
.text-gray-400 {
  color: #A3A3A3 !important;
}

.text-blue-600 {
  color: #3AD8C2 !important;
}

/* Background Overrides */
.bg-white,
.bg-\[\#FFFFFF\],
.bg-gray-50 {
  background-color: #151515 !important;
}

.bg-\[\#F5F5F5\] {
  background-color: #0C0C0C !important;
}

/* Header blur / specific transparent backgrounds */
.bg-white\/50 {
  background-color: rgba(21, 21, 21, 0.7) !important;
  border-color: #2A2A2A !important;
}

/* Gradients */
.from-white {
  --tw-gradient-from: #0C0C0C var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(12, 12, 12, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\)_0\%\,\#ffffff_100\%\)\] {
  background: radial-gradient(circle at center, rgba(12, 12, 12, 0) 0%, #0c0c0c 100%) !important;
}

/* Accent Colors - Primary to Teal */
.bg-primary-500,
.bg-blue,
.bg-\[\#0055FF\] {
  background-color: #3AD8C2 !important;
  color: #0C0C0C !important;
}

.bg-\[\#EDF3FF\] {
  background-color: rgba(58, 216, 194, 0.1) !important;
}

/* Borders */
.border-\[\#DEDEDE\],
.border-\[\#E0E0E0\],
.border-\[\#EBEBEB\],
.border-gray-100,
.border-gray-200,
.border-border {
  border-color: #2A2A2A !important;
}

.border-\[\#DBE8FF\] {
  border-color: rgba(58, 216, 194, 0.3) !important;
}

/* Remove the imported gradient-based section guides without affecting cards. */
.border-dashed,
.border-dashed.b-top,
.border-dashed.b-bottom,
.border-dashed.b-left,
.border-dashed.b-right,
.border-dashed.b-right-responsive,
.border-dashed.b-left.b-right,
.b-right-and-bottom,
.dark-border,
.light-border {
  border-color: transparent !important;
  border-image: none !important;
  background-image: none !important;
}

/* Remove the complete Why Choose Us heading and interactive benefit block. */
main > section:has(.why-choose-grid),
main > section:has(+ section .why-choose-grid) {
  display: none !important;
}

/* Interactive Hover States */
.hover\:bg-\[\#F5F5F5\]:hover {
  background-color: #222222 !important;
  color: #FFFFFF !important;
}

.hover\:text-gray-900:hover {
  color: #3AD8C2 !important;
}

/* Canvas Rive Animations - Recolor Blue to Teal */
canvas {
  /* Darken built-in white artboards while shifting original blue toward teal. */
  filter: invert(0.92) hue-rotate(130deg) saturate(1.2) contrast(1.08) !important;
}

/* SVGs with blue fill/stroke */
[style*="fill:#0357F0"],
[fill="#0357F0"],
[fill="#0055FF"] {
  fill: #3AD8C2 !important;
}

[stroke="#0357F0"],
[stroke="#0055FF"] {
  stroke: #3AD8C2 !important;
}

[stroke="#DBE8FF"] {
  stroke: rgba(58, 216, 194, 0.3) !important;
}

[fill="#DBE8FF"] {
  fill: rgba(58, 216, 194, 0.3) !important;
}

/* Keep the original header wordmark legible on the dark navigation surface. */
header nav a.block > svg path[fill="#010133"] {
  fill: #FFFFFF !important;
}

header nav a.block > svg path[style*="fill:#010133"] {
  fill: #FFFFFF !important;
}

/* Use the Skinloop wordmark in the navigation and footer. */
header nav a.block {
  display: block;
  width: 136px;
  height: 32px;
  background: url("./skinloop-logo.png") center / contain no-repeat;
}

header nav a.block > svg {
  display: none !important;
}

footer div[class*="max-w-[400px]"] > div:first-child {
  width: 160px;
  height: 38px;
  flex: 0 0 auto;
  background: url("./skinloop-logo.png") left center / contain no-repeat;
  opacity: 1 !important;
}

footer div[class*="max-w-[400px]"] > div:first-child > * {
  display: none !important;
}

/* Shadows -> Borders/Glows for dark mode */
.shadow-\[0px_3px_8px_0px_rgba\(0\,0\,0\,0\.08\)\] {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #2A2A2A !important;
}
.shadow-\[0px_2px_4px_0px_rgba\(0\,0\,0\,0\.11\)\] {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #2A2A2A !important;
}
.shadow-\[inset_0_0_8px_3px_\#FFFFFF66\] {
  box-shadow: inset 0 0 8px 1px rgba(58, 216, 194, 0.2) !important;
}

/* Preserve the hero CTA's original layered border and inset-light treatment. */
main > section:first-child a.bg-primary-500,
header nav a.bg-primary-500 {
  background: #7C6FF6 !important;
  border-color: #D3CEFF !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 0 8px 3px #FFFFFF66,
    0 0 18px rgba(124, 111, 246, 0.2) !important;
  padding: 8px 14px !important;
}

header nav a.bg-primary-500 {
  border-width: 2px !important;
  padding: 7px 13px !important;
  gap: 0 !important;
}

header nav a.bg-primary-500 svg {
  display: none !important;
}

main > section:first-child a.bg-primary-500 > span > svg {
  display: none !important;
}

main > section:first-child a.bg-primary-500 > span::after {
  content: "";
  width: 17px;
  height: 15px;
  flex: 0 0 17px;
  background: url("./cta-skins-icon.png") center / contain no-repeat;
  transform: scale(1.12);
  transform-origin: center;
}

/* Keep the complete hero in the initial viewport; following sections start below it. */
main > section:first-child {
  min-height: calc(100svh - 96px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

main > section:first-child > div.relative.z-10 {
  transform: translateY(-62px) scale(1.05);
  transform-origin: center;
}

/* Match the selected hero description spacing exactly. */
main > section:first-child h1 + p {
  max-width: 458px !important;
  margin: 0 !important;
  padding: 3px 0 !important;
}

/* Tighten the hero's title, description, and CTA rhythm. */
main > section:first-child > div.relative.z-10 > div.flex.max-w-4xl {
  gap: 11px !important;
}

main > section:first-child
  > div.relative.z-10
  > div.flex.max-w-4xl
  > div:first-child {
  gap: 11px !important;
}

/* Use the supplied crown artwork in the hero trust pill. */
main > section:first-child
  > div.relative.z-10
  > div.flex.max-w-4xl
  > div:first-child
  > div:first-child {
  padding: 5px 14px !important;
  gap: 6px !important;
  font-size: 14px !important;
}

main > section:first-child
  > div.relative.z-10
  > div.flex.max-w-4xl
  > div:first-child
  > div:first-child
  > svg {
  display: none !important;
}

main > section:first-child
  > div.relative.z-10
  > div.flex.max-w-4xl
  > div:first-child
  > div:first-child::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  background: url("./crown-pill.webp") center / contain no-repeat;
}
.shadow-\[0px_4px_20px_0px_rgba\(0\,0\,0\,0\.12\)\] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #2A2A2A !important;
}
.shadow-\[0px_4px_20px_2px_rgba\(0\,0\,0\,0\.12\)\] {
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #2A2A2A !important;
}
.shadow-\[0px_4px_10px_0px_rgba\(0\,0\,0\,0\.12\)\] {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #2A2A2A !important;
}
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #2A2A2A !important;
}

/* Image treatments */

/* 1) The light-mode dashboard UI image. We invert it and shift its hue from yellow (inverted blue) to teal */
img[alt="Dashboard preview"] {
  filter: invert(0.92) hue-rotate(130deg) saturate(1.2) contrast(1.1) !important;
  border-radius: 12px;
  border: 1px solid #2A2A2A;
}

/* Keep partner logos in their original brand colors. */
img[src*="logo-"] {
  filter: none !important;
}

/* Restore the hero grid as a subtle teal atmospheric layer. */
main > section:first-child > div.absolute.inset-0.-z-10 {
  z-index: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  height: min(620px, 76svh) !important;
  transform: translateY(calc(-50% - 62px));
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-position: center;
  background-repeat: repeat;
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(
    ellipse 44% 50% at 50% 48%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 31%,
    rgba(0, 0, 0, 0.7) 52%,
    rgba(0, 0, 0, 0.28) 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 44% 50% at 50% 48%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 31%,
    rgba(0, 0, 0, 0.7) 52%,
    rgba(0, 0, 0, 0.28) 70%,
    transparent 100%
  );
}

/* Soft, deliberately irregular skin collage around the hero's text-safe center. */
main > section:first-child::before,
main > section:first-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: min(620px, 76svh);
  transform: translateY(calc(-50% - 62px));
  background-repeat: no-repeat;
  filter: blur(2.5px) saturate(0.92) brightness(1.05);
  opacity: 0;
  pointer-events: none;
}

main > section:first-child::before {
  background-image:
    url("./skin-awp.png"),
    url("./skin-bayonet.png"),
    url("./skin-rifle.png");
  background-position:
    18% 7%,
    7% 52%,
    21% 98%;
  background-size:
    260px auto,
    210px auto,
    150px auto;
}

main > section:first-child::after {
  background-image:
    url("./skin-butterfly.png"),
    url("./skin-mask.png"),
    url("./skin-karambit.png");
  background-position:
    82% 3%,
    93% 47%,
    79% 96%;
  background-size:
    205px auto,
    140px auto,
    190px auto;
}

html.hero-skins-ready main > section:first-child::before {
  animation: hero-skins-left-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

html.hero-skins-ready main > section:first-child::after {
  animation: hero-skins-right-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

@keyframes hero-skins-left-in {
  from {
    opacity: 0;
    translate: -18px 0;
  }
  to {
    opacity: 0.58;
    translate: 0 0;
  }
}

@keyframes hero-skins-right-in {
  from {
    opacity: 0;
    translate: 18px 0;
  }
  to {
    opacity: 0.58;
    translate: 0 0;
  }
}

img[alt="Background Grid"] {
  display: none !important;
}

/* The source grid already contains its own soft elliptical fade. */
main > section:first-child > div.absolute.inset-0.-z-10 > div.absolute.inset-0 {
  display: none !important;
}

@media (max-width: 640px) {
  header nav a.block {
    width: 112px;
    height: 27px;
  }

  footer div[class*="max-w-[400px]"] > div:first-child {
    width: 140px;
    height: 34px;
    margin-inline: auto;
    background-position: center;
  }

  main > section:first-child {
    min-height: calc(100svh - 76px) !important;
  }

  main > section:first-child > div.relative.z-10 {
    transform: translateY(-30px) scale(1.02);
  }

  main > section:first-child > div.absolute.inset-0.-z-10 {
    height: min(460px, 72svh) !important;
    transform: translateY(calc(-50% - 30px));
  }

  main > section:first-child::before,
  main > section:first-child::after {
    height: min(460px, 72svh);
    transform: translateY(calc(-50% - 30px));
    filter: blur(2px) saturate(0.88) brightness(1.05);
  }

  main > section:first-child::before {
    background-position:
      -16px 7%,
      -42px 52%,
      14% 97%;
    background-size:
      160px auto,
      145px auto,
      100px auto;
  }

  main > section:first-child::after {
    background-position:
      calc(100% + 16px) 3%,
      calc(100% + 12px) 47%,
      calc(100% - 18px) 95%;
    background-size:
      132px auto,
      92px auto,
      132px auto;
  }

  @keyframes hero-skins-left-in {
    from {
      opacity: 0;
      translate: -12px 0;
    }
    to {
      opacity: 0.46;
      translate: 0 0;
    }
  }

  @keyframes hero-skins-right-in {
    from {
      opacity: 0;
      translate: 12px 0;
    }
    to {
      opacity: 0.46;
      translate: 0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.hero-skins-ready main > section:first-child::before,
  html.hero-skins-ready main > section:first-child::after {
    animation: none;
    opacity: 0.58;
    translate: 0 0;
  }
}

/* Remove the dashboard preview, its glow, and all floating hero icons. */
.hero-div {
  display: none !important;
}

/* Remove the animated company-logo strip below the hero. */
section.icon-slide {
  display: none !important;
}

/* Keep the mobile menu icon readable without styling it as hero artwork. */
img[src*="lines"]:not([alt="Background Grid"]) {
  filter: invert(1) opacity(0.72) !important;
}

/* Fix any white text inside primary buttons (primary button text was white, but now button is teal, so text should be dark) */
.bg-primary-500.text-\[\#FFFFFF\],
.bg-primary-500.text-white {
  color: #0C0C0C !important;
}

main > section:first-child a.bg-primary-500,
header nav a.bg-primary-500,
header nav a.bg-primary-500.text-\[\#FFFFFF\] {
  color: #FFFFFF !important;
}