@import "tailwindcss";
@config "../tailwind.config.js";

/* ══════════════════════════════════════════════════════════════
   THEME CONFIGURATION
   All site-wide design tokens live here. Edit these values to
   rebrand the entire site colors, accents, and fonts.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-base:     #08080a;
  --bg-surface:  #0d0d11;
  --bg-elevated: #111116;

  /* ── Brand / Accent ──────────────────────────────────────── */
  --accent:        #9333ea;
  --accent-hover:  #a855f7;
  --accent-text:   #c084fc;
  --accent-glow:   #7e22ce;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-base:    #ffffff;
  --text-dim:     #a1a1aa;
  --text-muted:   #71717a;
  --text-subtle:  #52525b;
  --text-faint:   #3f3f46;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-base:  #27272a;
  --border-hover: #3f3f46;

  /* ── Status ──────────────────────────────────────────────── */
  --status-success: #10b981;
  --status-warning: #f97316;
  --status-danger:  #ef4444;

  /* ── Fonts ────────────────────────────────────────────────── */
  --font-family-sans: "Figtree";
  --font-family-mono: "JetBrains Mono";

  /* Surface depth */
  --depth-highlight: rgba(255, 255, 255, 0.12);
  --depth-highlight-strong: rgba(255, 255, 255, 0.22);
  --depth-shadow-soft: rgba(0, 0, 0, 0.28);
  --depth-shadow-deep: rgba(0, 0, 0, 0.48);
  --depth-accent-shadow: rgba(61, 18, 118, 0.72);
  --depth-accent-glow: rgba(147, 51, 234, 0.2);
  --depth-surface-top: rgba(255, 255, 255, 0.055);
  --depth-surface-bottom: rgba(0, 0, 0, 0.18);
  --depth-control-top: rgba(255, 255, 255, 0.07);
  --depth-control-bottom: rgba(0, 0, 0, 0.22);
  --depth-surface-shadow: 0 18px 45px var(--depth-shadow-soft), 0 1px 0 var(--depth-highlight) inset, 0 -1px 0 var(--depth-surface-bottom) inset;
  --depth-surface-shadow-hover: 0 22px 58px var(--depth-shadow-deep), 0 1px 0 var(--depth-highlight) inset, 0 -1px 0 var(--depth-surface-bottom) inset;
  --depth-control-shadow: 0 3px 0 rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 var(--depth-highlight) inset;
  --depth-control-shadow-hover: 0 4px 0 rgba(0, 0, 0, 0.46), 0 14px 28px rgba(0, 0, 0, 0.26), 0 1px 0 var(--depth-highlight-strong) inset;
  --depth-accent-shadow-stack: 0 4px 0 var(--depth-accent-shadow), 0 14px 30px var(--depth-accent-glow), 0 1px 0 var(--depth-highlight-strong) inset, 0 -1px 0 rgba(35, 8, 68, 0.46) inset;
  --depth-accent-shadow-hover: 0 6px 0 var(--depth-accent-shadow), 0 18px 38px var(--depth-accent-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 -1px 0 rgba(35, 8, 68, 0.5) inset;
  --depth-pressed-shadow: 0 1px 0 rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset;

  /* Border beam ray */
  --border-beam-size: 500px;
  --border-beam-width: 1px;
  --border-beam-color-from: var(--accent-text);
  --border-beam-color-to: var(--accent);
  --border-beam-opacity: 0.85;
  --border-beam-blur: 0px;

  --_b0: "true";
  --_b1: "20bbb16e02a9f69b21759c22defbcadf";
  --_b2: "227074";
  --_b3: "Gabox";
}

html.light {
  --bg-base:      #f4f4f8;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ebebf2;
  --text-base:    #09090b;
  --text-dim:     #52525b;
  --text-muted:   #71717a;
  --text-subtle:  #71717a;
  --text-faint:   #a1a1aa;
  --border-base:  #e4e4e7;
  --border-hover: #d4d4d8;
  --depth-highlight: rgba(255, 255, 255, 0.92);
  --depth-highlight-strong: rgba(255, 255, 255, 1);
  --depth-shadow-soft: rgba(24, 24, 37, 0.09);
  --depth-shadow-deep: rgba(24, 24, 37, 0.16);
  --depth-accent-shadow: rgba(93, 25, 158, 0.32);
  --depth-accent-glow: rgba(147, 51, 234, 0.16);
  --depth-surface-top: rgba(255, 255, 255, 0.74);
  --depth-surface-bottom: rgba(40, 40, 70, 0.06);
  --depth-control-top: rgba(255, 255, 255, 0.72);
  --depth-control-bottom: rgba(24, 24, 37, 0.08);
  --depth-surface-shadow: 0 18px 42px var(--depth-shadow-soft), 0 1px 0 var(--depth-highlight) inset, 0 -1px 0 var(--depth-surface-bottom) inset;
  --depth-surface-shadow-hover: 0 24px 54px var(--depth-shadow-deep), 0 1px 0 var(--depth-highlight) inset, 0 -1px 0 var(--depth-surface-bottom) inset;
  --depth-control-shadow: 0 3px 0 rgba(24, 24, 37, 0.12), 0 10px 24px rgba(24, 24, 37, 0.08), 0 1px 0 var(--depth-highlight) inset;
  --depth-control-shadow-hover: 0 4px 0 rgba(24, 24, 37, 0.14), 0 14px 28px rgba(24, 24, 37, 0.1), 0 1px 0 var(--depth-highlight-strong) inset;
  --depth-accent-shadow-stack: 0 4px 0 var(--depth-accent-shadow), 0 14px 30px var(--depth-accent-glow), 0 1px 0 rgba(255, 255, 255, 0.38) inset, 0 -1px 0 rgba(69, 12, 122, 0.26) inset;
  --depth-accent-shadow-hover: 0 6px 0 var(--depth-accent-shadow), 0 18px 38px var(--depth-accent-glow), 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -1px 0 rgba(69, 12, 122, 0.3) inset;
  --depth-pressed-shadow: 0 1px 0 rgba(24, 24, 37, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --border-beam-opacity: 0.68;
}

/* ══════════════════════════════════════════════════════════════
   TAILWIND UTILITIES
   Maps the :root CSS vars above to Tailwind class names.
   You should not need to edit this section.
   ══════════════════════════════════════════════════════════════ */

@theme inline {
  --color-base:     var(--bg-base);
  --color-surface:  var(--bg-surface);
  --color-elevated: var(--bg-elevated);
  --color-accent:       var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-text:  var(--accent-text);
  --color-accent-glow:  var(--accent-glow);
  --color-content:        var(--text-base);
  --color-content-dim:    var(--text-dim);
  --color-content-muted:  var(--text-muted);
  --color-content-subtle: var(--text-subtle);
  --color-content-faint:  var(--text-faint);
  --color-border:       var(--border-base);
  --color-border-hover: var(--border-hover);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger:  var(--status-danger);
  --font-sans: var(--font-figtree);
  --font-mono: var(--font-jetbrains-mono);

  --animate-shiny-text: shiny-text 8s infinite;
  --animate-gradient: gradient 8s linear infinite;
  --animate-orbit: orbit calc(var(--duration)*1s) linear infinite;
  --animate-shine: shine var(--duration) infinite linear;
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes shiny-text {
    0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0; }
    30%, 60%      { background-position: calc(100% + var(--shiny-width)) 0; }
  }
  @keyframes gradient {
    to { background-position: var(--bg-size, 300%) 0; }
  }
  @keyframes orbit {
    0%   { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
    100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); }
  }
  @keyframes shine {
    0%  { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    to  { background-position: 0% 0%; }
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--gap))); }
  }
  @keyframes marquee-vertical {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-100% - var(--gap))); }
  }
}

/* ── Base styles ─────────────────────────────────────────────── */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--bg-base);
    color: var(--text-base);
  }

  * {
    border-color: var(--border-base);
  }

  .tech-icon-filter {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  }
}

@layer utilities {
  ::-webkit-scrollbar       { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-base); border-left: 1px solid var(--border-base); }
  ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 9999px; border: 2px solid var(--bg-base); }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }
  * { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-base); }
}

/* Depth language: subtle 3D polish for shared Tailwind patterns. */
:where(button, a, [role="button"]).bg-accent,
:where(button, a, [role="button"])[class*="bg-[#5865F2]"] {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035) 42%, rgba(0, 0, 0, 0.14)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 46%);
  box-shadow: var(--depth-accent-shadow-stack);
}

:where(button, a, [role="button"]).bg-accent:disabled,
:where(button, a, [role="button"])[class*="bg-[#5865F2]"]:disabled {
  box-shadow: 0 1px 0 var(--depth-highlight) inset;
  transform: none;
}

:where(button, a, [role="button"]).bg-accent:hover,
:where(button, a, [role="button"])[class*="bg-[#5865F2]"]:hover {
  box-shadow: var(--depth-accent-shadow-hover);
}

:where(button, a, [role="button"]).bg-accent:active,
:where(button, a, [role="button"])[class*="bg-[#5865F2]"]:active {
  box-shadow: var(--depth-pressed-shadow);
}

:where(button, a, [role="button"]).hero-cta-soft.bg-accent {
  box-shadow: 0 3px 0 var(--depth-accent-shadow), 0 8px 18px rgba(147, 51, 234, 0.12), 0 1px 0 var(--depth-highlight-strong) inset, 0 -1px 0 rgba(35, 8, 68, 0.38) inset;
}

:where(button, a, [role="button"]).hero-cta-soft.bg-accent:hover {
  box-shadow: 0 4px 0 var(--depth-accent-shadow), 0 10px 22px rgba(147, 51, 234, 0.16), 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 -1px 0 rgba(35, 8, 68, 0.42) inset;
}

:where(button, a, [role="button"])[class*="rounded"][class*="border"]:not(.bg-accent):not([class*="bg-[#5865F2]"]) {
  background-image:
    linear-gradient(180deg, var(--depth-control-top), transparent 46%, var(--depth-control-bottom)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 48%);
  box-shadow: var(--depth-control-shadow);
}

:where(button, a, [role="button"])[class*="rounded"][class*="border"]:not(.bg-accent):not([class*="bg-[#5865F2]"]):hover {
  box-shadow: var(--depth-control-shadow-hover);
}

:where(button, a, [role="button"])[class*="rounded"][class*="border"]:not(.bg-accent):not([class*="bg-[#5865F2]"]):active {
  box-shadow: var(--depth-pressed-shadow);
}

:where(div, article, section, aside, li)[class*="bg-surface"][class*="rounded"][class*="border"],
:where(div, article, section, aside, li)[class*="bg-elevated"][class*="rounded"][class*="border"],
:where(div, article, section, aside, li)[class*="bg-accent/"][class*="rounded"][class*="border"] {
  background-image:
    linear-gradient(180deg, var(--depth-surface-top), transparent 38%, var(--depth-surface-bottom)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 44%);
  box-shadow: var(--depth-surface-shadow);
}

:where(div, article, section, aside, li)[class*="bg-surface"][class*="rounded"][class*="border"]:hover,
:where(div, article, section, aside, li)[class*="bg-elevated"][class*="rounded"][class*="border"]:hover,
:where(div, article, section, aside, li)[class*="bg-accent/"][class*="rounded"][class*="border"]:hover {
  box-shadow: var(--depth-surface-shadow-hover);
}

:where(input, textarea, select)[class*="bg-surface"][class*="rounded"][class*="border"] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08));
  box-shadow: 0 1px 0 var(--depth-highlight) inset, 0 14px 28px rgba(0, 0, 0, 0.16);
}

:where(input, textarea, select)[class*="bg-surface"][class*="rounded"][class*="border"]:focus {
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.26), 0 0 0 4px rgba(168, 85, 247, 0.1), 0 1px 0 var(--depth-highlight) inset, 0 18px 36px rgba(0, 0, 0, 0.2);
}

:where(.bg-accent, [class*="bg-[#5865F2]"])[class*="rounded"] {
  border-color: rgba(255, 255, 255, 0.14);
}

.game-plan-card {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.26), 0 22px 42px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--depth-highlight);
}

.game-plan-card:hover {
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.24), 0 28px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--depth-highlight-strong);
}

html.light .game-plan-card {
  box-shadow: 0 4px 0 rgba(24, 24, 37, 0.12), 0 22px 42px rgba(24, 24, 37, 0.1), inset 0 1px 0 var(--depth-highlight);
}

html.light .game-plan-card:hover {
  box-shadow: 0 6px 0 rgba(24, 24, 37, 0.13), 0 28px 54px rgba(24, 24, 37, 0.14), inset 0 1px 0 var(--depth-highlight-strong);
}

.product-plan-card {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 14px 32px rgba(0, 0, 0, 0.11), inset 0 1px 0 var(--depth-highlight);
}

.product-plan-card:hover {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 22px 44px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--depth-highlight-strong);
}

html.light .product-plan-card {
  box-shadow: 0 2px 0 rgba(24, 24, 37, 0.08), 0 14px 32px rgba(24, 24, 37, 0.07), inset 0 1px 0 var(--depth-highlight);
}

html.light .product-plan-card:hover {
  box-shadow: 0 4px 0 rgba(24, 24, 37, 0.09), 0 22px 44px rgba(24, 24, 37, 0.1), inset 0 1px 0 var(--depth-highlight-strong);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — HARDCODED CLASS OVERRIDES
   ══════════════════════════════════════════════════════════════ */

html.light .text-white              { color: var(--text-base); }
html.light .hover\:text-white:hover { color: var(--text-base); }
html.light .bg-accent .text-white,
html.light .text-white.bg-accent,
html.light .bg-accent-hover .text-white,
html.light .text-white.bg-accent-hover         { color: #ffffff; }
html.light .bg-accent .hover\:text-white:hover { color: #ffffff; }
html.light .aspect-video .text-white { color: #ffffff; }
html.light .bg-zinc-900        { background-color: var(--bg-elevated); }
html.light .bg-zinc-900\/80    { background-color: rgb(0 0 0 / 0.08); }
html.light .bg-zinc-900\/60    { background-color: rgb(0 0 0 / 0.05); }
html.light .bg-zinc-900\/50    { background-color: rgb(0 0 0 / 0.04); }
html.light .bg-zinc-900\/40    { background-color: rgb(0 0 0 / 0.03); }
html.light .hover\:bg-zinc-900:hover { background-color: var(--bg-elevated); }
html.light .hover\:bg-zinc-800:hover { background-color: rgb(0 0 0 / 0.08); }
html.light .bg-zinc-950        { background-color: var(--bg-elevated); }
html.light .bg-zinc-950\/75    { background-color: rgb(235 235 242 / 0.88); }
html.light .bg-zinc-800             { background-color: var(--bg-elevated); }
html.light .hover\:bg-zinc-800:hover { background-color: var(--bg-elevated); }
html.light .hover\:bg-zinc-800\/60:hover { background-color: rgb(0 0 0 / 0.06); }
html.light .hover\:bg-zinc-800\/50:hover { background-color: rgb(0 0 0 / 0.05); }
html.light .hover\:bg-zinc-800\/40:hover { background-color: rgb(0 0 0 / 0.04); }
html.light .bg-zinc-800\/80               { background-color: rgb(0 0 0 / 0.08); }
html.light .bg-zinc-800\/60               { background-color: rgb(0 0 0 / 0.06); }
html.light .text-zinc-300 { color: var(--text-dim); }
html.light .text-zinc-200 { color: var(--text-dim); }
html.light .hover\:text-zinc-200:hover { color: var(--text-base); }
html.light .text-white\/5 { color: rgb(0 0 0 / 0.08); }
html.light .text-white[class*="bg-[#5865F2]"] { color: #ffffff; }
html.light .trustpilot-svg path[fill="#fff"] { fill: var(--text-base); }
html.light .bg-white\/5   { background-color: rgb(0 0 0 / 0.03); }
html.light .bg-white\/10  { background-color: rgb(0 0 0 / 0.05); }
html.light .border-white\/5  { border-color: rgb(0 0 0 / 0.04); }
html.light .border-white\/6  { border-color: rgb(0 0 0 / 0.06); }
html.light .border-white\/8  { border-color: rgb(0 0 0 / 0.07); }
html.light .border-white\/10 { border-color: rgb(0 0 0 / 0.08); }
html.light .border-white\/12 { border-color: rgb(0 0 0 / 0.09); }
html.light .border-white\/20 { border-color: rgb(0 0 0 / 0.12); }
html.light .hover\:border-white\/12:hover { border-color: rgb(0 0 0 / 0.1); }
html.light .bg-zinc-800\/80 { background-color: var(--border-base); }
html.light .from-zinc-950 {
  --tw-gradient-from: var(--bg-base) var(--tw-gradient-from-position) !important;
}
html.light .via-zinc-950\/50 {
  --tw-gradient-via: rgb(244 244 248 / 0.5) var(--tw-gradient-via-position) !important;
}

html.light .tech-icon-filter {
  filter: brightness(0) opacity(0.6) !important;
}

html.light [class*="shadow-[0_3px_0_rgba(0,0,0,0.5"] { box-shadow: 0 3px 0 rgba(0,0,0,0.12); }
html.light [class*="shadow-[0_4px_0_rgba(0,0,0,0.5"] { box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
html.light [class*="hover:shadow-[0_4px_0_rgba(0,0,0,0.5"]:hover { box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
html.light main > section:nth-of-type(even) { background-color: var(--bg-elevated); }