/* ============================================================
   THEME TOKENS
   Role-based: --c-ink is always the page background, --c-cream is
   always the primary text. Both invert between themes, so the
   Tailwind utilities in the markup never need a `dark:` variant.
   ============================================================ */
:root {
  color-scheme: dark;

  --c-ink: 20 11 5;
  --c-surface: 43 22 8;
  --c-surface2: 30 16 6;
  --c-cream: 244 239 232;
  --c-muted: 138 155 176;
  /* Brand primary #3C64A8. Used for fills (buttons, badges, bars, focus rings).
     --c-accent-text is the same blue lifted for legibility as small text on near-black:
     #3C64A8 on this background is only 3.3:1, #7DA2E2 is 7.4:1. */
  --c-accent: 60 100 168;
  --c-accent-hover: 48 82 140;
  --c-accent-text: 125 162 226;
  --c-wave: 125 162 226;
  --c-success: 26 122 74;
  --c-btn-text: 255 255 255;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.30);
  --tint: rgba(255, 255, 255, 0.03);
  --tint-strong: rgba(255, 255, 255, 0.07);

  --card-bg: rgba(43, 22, 8, 0.45);
  --card-bg-hover: rgba(43, 22, 8, 0.60);
  --card-solid: #1B0F06;

  --noise-opacity: 0.035;
  --shot-brightness: 0.48;
  --sphere-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --nav-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --wordmark-alpha: 0.12;
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Cool near-white paper, tuned to sit with the #3C64A8 primary rather than against it. */
  --c-ink: 246 248 252;
  --c-surface: 236 241 249;
  --c-surface2: 255 255 255;
  --c-cream: 15 23 38;
  --c-muted: 90 101 122;
  /* On paper the brand blue already clears AA (5.5:1); the text tint just adds headroom. */
  --c-accent: 60 100 168;
  --c-accent-hover: 45 76 130;
  --c-accent-text: 47 79 133;
  --c-wave: 60 100 168;
  --c-success: 21 100 60;
  --c-btn-text: 255 255 255;

  --line: rgba(15, 23, 38, 0.12);
  --line-strong: rgba(15, 23, 38, 0.34);
  --tint: rgba(15, 23, 38, 0.03);
  --tint-strong: rgba(15, 23, 38, 0.06);

  --card-bg: rgba(255, 255, 255, 0.80);
  --card-bg-hover: rgba(255, 255, 255, 1);
  --card-solid: #FFFFFF;

  --noise-opacity: 0.018;
  --shot-brightness: 0.55;
  --sphere-shadow: 0 24px 60px rgba(30, 50, 90, 0.18);
  --nav-shadow: 0 10px 40px rgba(30, 50, 90, 0.10);
  --wordmark-alpha: 0.14;
}

html { background: rgb(var(--c-ink)); }
body {
  background: rgb(var(--c-ink));
  color: rgb(var(--c-cream));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
::selection { background: rgb(var(--c-accent)); color: rgb(var(--c-btn-text)); }

/* ---------- themed utilities (replace hardcoded white/x) ---------- */
.border-line { border-color: var(--line); }
.divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
.bg-track { background-color: var(--line); }
.hover-tint:hover { background-color: var(--tint-strong); }
.hover-line-strong:hover { border-color: var(--line-strong); }
.border-l-line-lg { border-left: 0 solid var(--line); }
@media (min-width: 1024px) { .border-l-line-lg { border-left-width: 1px; } }
.dot-idle { background-color: var(--line-strong); }

/* ---------- typography helpers ---------- */
.h-display { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.word { display: inline-block; will-change: transform, filter, opacity; }
[data-reveal] .word { opacity: 0; filter: blur(8px); transform: translateY(14px); }
.no-motion [data-reveal] .word { opacity: 1; filter: none; transform: none; }
[data-fade] { opacity: 0; transform: translateY(18px); }
.no-motion [data-fade] { opacity: 1; transform: none; }

/* ---------- cards ---------- */
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; transition: border-color .35s ease, transform .35s ease, background .35s ease; }
.card:hover { border-color: var(--line-strong); background: var(--card-bg-hover); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 9999px; font-weight: 600; font-size: 14px; padding: .8rem 1.35rem; transition: background .25s, border-color .25s, color .25s, transform .25s; white-space: nowrap; }
.btn .arr { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr { transform: translateX(5px); }
.btn-primary { background: rgb(var(--c-accent)); color: rgb(var(--c-btn-text)); }
.btn-primary:hover { background: rgb(var(--c-accent-hover)); }
.btn-ghost { border: 1px solid var(--line); color: rgb(var(--c-cream)); background: var(--tint); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--tint-strong); }

/* ---------- nav ---------- */
.nav-link { position: relative; color: rgb(var(--c-muted)); transition: color .25s ease; }
.nav-link:hover { color: rgb(var(--c-cream)); }
.nav-link.active { color: rgb(var(--c-cream)); }
.nav-link.active::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgb(var(--c-accent-text)); box-shadow: 0 0 8px rgb(var(--c-accent-text)); }
.m-link.active { color: rgb(var(--c-accent-text)); }
#nav { box-shadow: var(--nav-shadow); }

/* ---------- theme toggle ---------- */
#theme-toggle .to-light { display: inline-block; }
#theme-toggle .to-dark { display: none; }
:root[data-theme="light"] #theme-toggle .to-light { display: none; }
:root[data-theme="light"] #theme-toggle .to-dark { display: inline-block; }

/* ---------- section eyebrow: leading rule + tracked label ----------
   Left-aligned sections get a rule before the label; anything inside a centred
   block gets a matching rule after it, so the label stays balanced. */
.rule-label { display: inline-flex; align-items: center; gap: .8rem; color: rgb(var(--c-accent-text)); }
.rule-label::before { content: ''; flex: none; width: 2.5rem; height: 1px; background: currentColor; opacity: .5; }
.text-center .rule-label::after { content: ''; flex: none; width: 2.5rem; height: 1px; background: currentColor; opacity: .5; }
@media (max-width: 640px) {
  .rule-label { gap: .6rem; }
  .rule-label::before, .text-center .rule-label::after { width: 1.6rem; }
}

/* ---------- corner markers ---------- */
.corner { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .35; }
.corner::before, .corner::after { content: ''; position: absolute; background: rgb(var(--c-cream)); }
.corner::before { width: 14px; height: 1px; top: 6.5px; left: 0; }
.corner::after { width: 1px; height: 14px; left: 6.5px; top: 0; }
.corner.tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.tr { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.corner.br { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee var(--dur, 40s) linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- glass spheres ---------- */
.sphere { position: absolute; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 14%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 70% 78%, rgba(60,100,168,0.60) 0%, rgba(60,100,168,0) 40%),
    radial-gradient(circle at 50% 50%, rgba(205,222,250,0.10) 0%, rgba(40,70,122,0.18) 55%, rgba(12,18,32,0.62) 100%);
  box-shadow: inset 0 -18px 40px rgba(60,100,168,0.25), inset 0 12px 30px rgba(255,255,255,0.12), var(--sphere-shadow), 0 0 0 1px var(--line);
  backdrop-filter: blur(2px);
}
.sphere::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 115%, rgba(60,100,168,0.35), transparent 55%); }
.sphere-link { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(60,100,168,0), rgba(60,100,168,0.5), rgba(60,100,168,0)); transform-origin: left center; }

/* ---------- chrome icon (silver plate reads on both themes) ---------- */
.chrome { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; position: relative;
  background: linear-gradient(145deg, #f7f7f9 0%, #b9bcc4 22%, #6d717b 48%, #d6d8de 62%, #8b8f99 80%, #f2f3f6 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.9), inset 0 -3px 6px rgba(0,0,0,0.45), 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.15);
  will-change: transform; }
.chrome::before { content: ''; position: absolute; inset: 3px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 40%, rgba(0,0,0,0.18) 70%, rgba(255,255,255,0.35)); pointer-events: none; }
.chrome i { font-size: 30px; line-height: 1; color: #1b1d22; text-shadow: 0 1px 0 rgba(255,255,255,0.65); position: relative; }
@media (min-width: 640px) {
  .chrome { width: 92px; height: 92px; border-radius: 26px; }
  .chrome::before { border-radius: 23px; }
  .chrome i { font-size: 40px; }
}

/* ---------- hex badge ---------- */
.hex { width: 46px; height: 52px; display: grid; place-items: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--tint-strong); color: rgb(var(--c-muted)); font-weight: 700; font-size: 13px; font-family: 'Manrope', sans-serif; transition: background .5s, color .5s, box-shadow .5s; }
.hex.lit { background: rgb(var(--c-accent)); color: rgb(var(--c-btn-text)); box-shadow: 0 0 30px rgb(var(--c-accent) / 0.45); }

/* ---------- process ---------- */
/* justify-start keeps the step tight under the 01/04 counter instead of floating mid-stage. */
.step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; will-change: transform, filter, opacity; }
.step:not(:first-child) { opacity: 0; }
.no-motion #process-pin { min-height: 0; }

/* ---------- case studies ---------- */
.case-card { position: sticky; top: 92px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.no-motion .case-card { position: relative; top: auto; }
.shot { position: relative; overflow: hidden; background: #0b1018; }
.shot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) contrast(1.1) brightness(var(--shot-brightness)); transform: scale(1.1); will-change: transform; display: block; }
.shot::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(210deg, rgba(60,100,168,0.45) 0%, rgba(60,100,168,0.10) 35%, rgba(10,16,28,0.35) 60%, rgba(10,16,28,0.85) 100%); pointer-events: none; }
.shot .glow { position: absolute; z-index: 2; width: 60%; height: 60%; right: -20%; top: -20%; background: radial-gradient(circle, rgba(60,100,168,0.5), transparent 65%); filter: blur(30px); pointer-events: none; }
.render { position: absolute; inset: 0; z-index: 0; }

/* ---------- odometer ---------- */
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; line-height: 1; }
.odo-col { display: flex; flex-direction: column; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.odo-col span { height: 1em; line-height: 1; display: block; }

/* ---------- FAQ ---------- */
.faq-body { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.2,.7,.2,1); }
.faq-chev { display: inline-block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.faq-item[data-open="true"] .faq-chev { transform: rotate(180deg); }
.faq-item[data-open="true"] .faq-q { color: rgb(var(--c-accent-text)); }

/* ---------- form ---------- */
.field { width: 100%; background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem; color: rgb(var(--c-cream)); font-size: 14px; transition: border-color .25s ease, background .25s ease; }
.field::placeholder { color: rgb(var(--c-muted)); opacity: .7; }
.field:focus { outline: none; border-color: rgb(var(--c-accent) / 0.6); background: var(--tint-strong); }
.field option { background: rgb(var(--c-surface2)); color: rgb(var(--c-cream)); }
.label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgb(var(--c-muted)); margin-bottom: .5rem; }
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; border-radius: 4px; }

/* ---------- preloader ---------- */
#preloader { position: fixed; inset: 0; z-index: 100; background: rgb(var(--c-ink)); display: flex; align-items: center; justify-content: center; }
.no-motion #preloader { display: none; }

/* ---------- misc ---------- */
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Full-strength dot field; site.js dims it locally around real text boxes. */
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wordmark { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.06em; line-height: .8; font-size: clamp(96px, 22vw, 300px); color: transparent; background: linear-gradient(180deg, rgb(var(--c-cream) / var(--wordmark-alpha)), rgb(var(--c-cream) / 0)); -webkit-background-clip: text; background-clip: text; user-select: none; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.tilt-wrap { perspective: 1200px; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .odo-col { transition: none; }
  .faq-body { transition: none; }
  body { transition: none; }
}