/* ==========================================================================
   VOROQ — styles.css
   1. Tokens   2. Base   3. Logo   4. Buttons   5. Header   6. Hero
   7. Sections + problem   8. Bento (what we do)   8b. See It Built   9. How It Works
   10. Our Work   11. Pricing   12. Proof   13. FAQ   14. Contact
   15. Footer   16. Motion extras   17. Reduced motion
   ========================================================================== */

/* 1. TOKENS — EDIT: change the palette here ------------------------------ */
:root {
  --night: #070B1F;       /* dark sections */
  --panel: #0F1630;       /* panels on dark */
  --blue: #2F6BFF;        /* primary brand colour */
  --cyan: #22D3EE;        /* highlights and glows */
  --violet: #7C3AED;      /* gradient partner */
  --grad: linear-gradient(120deg, #2F6BFF, #7C3AED 50%, #22D3EE);
  --grad-text: linear-gradient(100deg, #5B8CFF, #A78BFA 45%, #22D3EE);
  --accent: #22D3EE;      /* pricing accent: Growth border, badge, ticks in the table. Change it here */
  --cta: #FF7A1A;         /* call-to-action buttons ONLY */
  --cta-hover: #FF8F3D;
  --light: #F5F8FF;       /* light sections */
  --ink: #0B1020;         /* text on light */

  --head: "Plus Jakarta Sans", system-ui, sans-serif;   /* headings only: 700/800 */
  --body: "Inter", system-ui, sans-serif;               /* body, buttons, labels, nav, small print: 400/500/600 */

  --header-h: 72px;
  --radius: 22px;
  --pad: clamp(20px, 5vw, 48px);
  --section: clamp(84px, 11vw, 150px);
  --ease: cubic-bezier(.22, 1, .36, 1);     /* ~power3.out */
  --ease-expo: cubic-bezier(.16, 1, .3, 1); /* ~expo.out */
}
/* Each section sets its own text colours */
.dark, body { --fg: #FFFFFF; --fg2: #CBD5E1; --line: rgba(170, 180, 214, .16); --link: var(--cyan); }
.light { --fg: var(--ink); --fg2: #485375; --line: rgba(11, 16, 32, .12); --link: #1D4FD8; }

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; overflow-x: clip; background: var(--night); color: var(--fg);
  font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased;
}
.dark, .light { color: var(--fg); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3, summary, .tile__big, .step__num, .stats dd { font-family: var(--head); }
h1, h2, h3, .pb__title, .next-page__title { text-wrap: balance; }
ul, ol { list-style: none; }
a { color: var(--link); text-decoration: none; }
p a, .cta-row__alt a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.light :focus-visible { outline-color: var(--blue); }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

.eyebrow { font-size: 15px; font-weight: 600; color: var(--link); margin-bottom: 18px; }
.h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--fg2); max-width: 56ch; margin-top: 24px; }
.micro { font-size: 14px; color: var(--fg2); margin-top: 14px; }
.hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.light .hl { background-image: linear-gradient(100deg, #2F6BFF, #7C3AED); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.wi { display: inline-block; }

/* 3. LOGO — white on dark; add .logo--dark for black on a light section --- */
.logo { font-family: var(--body); display: inline-flex; flex-direction: column; align-items: center; width: 178px; color: #fff; line-height: 1; }
.logo__word { font-size: 24px; font-weight: 400; letter-spacing: .42em; padding-left: .42em; white-space: nowrap; }
.logo__rule { width: 100%; height: 1px; background: currentColor; margin: 7px 0 6px; }
.logo__tag { font-size: 9px; font-weight: 500; letter-spacing: .42em; padding-left: .42em; white-space: nowrap; }
.logo--dark { color: #000; }
/* Load animation: the wordmark opens out to its wide spacing */
.logo--intro .logo__word { animation: logo-space 1.2s var(--ease-expo) .75s both; }
.logo--intro .logo__rule { animation: logo-rule 1.1s var(--ease-expo) .9s both; }
.logo--intro .logo__tag { animation: fade 1s var(--ease) 1.2s both; }
@keyframes logo-space { from { letter-spacing: .1em; padding-left: .1em; opacity: 0; } }
@keyframes logo-rule { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }

/* 4. BUTTONS — orange is reserved for these ------------------------------ */
.btn {
  white-space: nowrap; position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 12px 30px; border: 0; border-radius: 999px;
  font: 600 17px/1.25 var(--body); cursor: pointer; text-decoration: none;
  transition: background-color .4s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--cta); color: var(--ink); box-shadow: 0 10px 34px -10px rgba(255, 122, 26, .7); }
.btn--primary:hover { background: var(--cta-hover); color: var(--ink); box-shadow: 0 14px 44px -8px rgba(255, 122, 26, .9); }
.btn--sm { min-height: 44px; padding: 8px 20px; font-size: 16px; }
.btn--lg { min-height: 64px; padding: 16px 38px; font-size: 18px; }
.btn--block { width: 100%; }
.btn .ripple {
  position: absolute; z-index: -1; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: #fff; opacity: .4; pointer-events: none; animation: ripple .8s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(28); opacity: 0; } }

.cta-row { margin-top: 56px; }
.cta-row--center { text-align: center; margin-top: 64px; }
.cta-row__alt { margin-top: 26px; color: var(--fg2); }

/* V MOTIF ---------------------------------------------------------------- */
/* Loading animation: a V draws itself, then lifts away. Pure CSS, about one second,
   never blocks clicks, and is skipped entirely for reduced motion. */
.vload { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--night); pointer-events: none; animation: vload-out .45s var(--ease) .8s forwards; }
.vload svg { width: 84px; height: 84px; overflow: visible; filter: drop-shadow(0 0 18px rgba(47, 107, 255, .8)); }
.vload polygon { fill: url(#vload-g); fill-opacity: 0; stroke: url(#vload-g); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vload-draw .6s var(--ease) .05s forwards, vload-fill .35s var(--ease) .5s forwards; }
@keyframes vload-draw { to { stroke-dashoffset: 0; } }
@keyframes vload-fill { to { fill-opacity: 1; } }
@keyframes vload-out { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
.form.is-sending .btn::after { content: ""; width: 18px; height: 18px; margin-left: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='2,8 28,8 50,60 72,8 98,8 61,94 39,94' fill='%230B1020'/%3E%3C/svg%3E") center/contain no-repeat; animation: vpulse .7s ease-in-out infinite alternate; }
@keyframes vpulse { from { opacity: .25; transform: translateY(-2px); } to { opacity: 1; transform: translateY(2px); } }

/* Cursor accent: the normal system cursor everywhere, and a V-shaped pointer over anything clickable */
a, button, summary, select, .btn { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232F6BFF'/%3E%3Cstop offset='1' stop-color='%2322D3EE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate%28135 50 50%29'%3E%3Cpolygon points='2,8 28,8 50,60 72,8 98,8 61,94 39,94' fill='url%28%23g%29' stroke='%23fff' stroke-width='7' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 6 6, pointer; }

/* Section dividers: a thin rule with the V at its centre, at the top of each section */
.vrule { position: absolute; z-index: 1; top: clamp(26px, 4vw, 52px); left: 50%; width: min(1200px - 2 * var(--pad), 100% - 2 * var(--pad)); transform: translateX(-50%); height: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--line) calc(50% + 26px), var(--line) 88%, transparent) center / 100% 1px no-repeat; }
.vrule::before { content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232F6BFF'/%3E%3Cstop offset='1' stop-color='%2322D3EE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='2,8 28,8 50,60 72,8 98,8 61,94 39,94' fill='url%28%23g%29'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 5. HEADER -------------------------------------------------------------- */
/* Drone flight-path scroll indicator (replaces the plain progress bar) */
.flight { position: fixed; left: 0; right: 0; top: calc(var(--header-h) - 10px); height: 20px; z-index: 120; pointer-events: none; }
.flight__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flight__svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.flight__route { stroke: rgba(170, 180, 214, .55); stroke-width: 2.5; stroke-dasharray: .1 9; }                       /* dotted path still to fly */
.flight__svg--done { clip-path: inset(-10px 100% -10px 0); }                                                          /* flown part, revealed by main.js */
.flight__svg--done path { stroke: var(--cyan); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--cyan)); }
.flight__drone { display: none; position: absolute; left: 0; top: 0; width: 36px; height: 20px; margin: -13px 0 0 -18px; overflow: visible; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .9)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); transition: transform .28s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.js .flight__drone { display: block; }
.flight__drone .rotor { fill: var(--cyan); opacity: .85; transform-box: fill-box; transform-origin: center; animation: rotor .16s linear infinite alternate; }
.flight__drone .eye { fill: var(--blue); }
@keyframes rotor { from { transform: scaleX(1); } to { transform: scaleX(.25); } }

.header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(7, 11, 31, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.header.is-stuck { border-bottom-color: rgba(170, 180, 214, .16); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.nav { display: flex; gap: 6px; }
/* Menu links highlight as pill buttons on hover (the pill lights up, not the text) */
.nav a { color: #fff; font-size: 16px; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent; transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.nav a:hover, .nav a:focus-visible { background: rgba(47, 107, 255, .22); border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 22px -6px rgba(34, 211, 238, .7); }
.nav a[aria-current="page"] { background: rgba(47, 107, 255, .16); border-color: rgba(34, 211, 238, .35); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .nav { display: none; }
  .js .nav-toggle { display: block; }
  .js .nav.is-open {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--night); border-bottom: 1px solid rgba(170, 180, 214, .16); padding: 8px var(--pad) 20px;
  }
  .nav.is-open a { font-size: 18px; padding: 14px 16px; margin: 3px 0; }
  .logo { width: 148px; }
  .logo__word { font-size: 20px; }
  .logo__tag { font-size: 7.5px; }
  .header .btn--sm { padding: 8px 14px; font-size: 14px; }
}
/* Phones: the sticky bottom button does this job, so the header stays uncluttered */
@media (max-width: 479px) {
  .header .btn--sm { display: none; }
}

/* Dark-section atmosphere: grid lines + coloured glows (parallax layers) */
.bg-grid {
  position: absolute; inset: -10% 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(170, 180, 214, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 180, 214, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}
.glow { position: absolute; z-index: 0; width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .55; }
.glow--blue { right: -120px; top: 4%; background: radial-gradient(circle, rgba(47, 107, 255, .75), transparent 65%); }
.glow--violet { left: -260px; top: 38%; background: radial-gradient(circle, rgba(124, 58, 237, .6), transparent 65%); }
.glow--cyan { right: -240px; top: 10%; background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 65%); }
.glow--left { left: -280px; top: 8%; }

/* 6. HERO ---------------------------------------------------------------- */
/* Centred, type-led hero: the headline is the visual. A soft spotlight sits behind it
   and a glowing "horizon" arc rises under the button. */
.hero { position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) 0 44px; min-height: min(calc(100svh - var(--header-h)), 980px); display: grid; align-content: center; gap: clamp(64px, 8vw, 110px); }
.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.hero__copy { position: relative; z-index: 2; display: grid; justify-items: center; }
.hero__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 18px 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #DCE3FF; background: rgba(47, 107, 255, .1); border: 1px solid rgba(124, 150, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 30px -10px rgba(47, 107, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade 1s var(--ease) .6s both; }
.hero__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); } }
.hero__title { font-size: clamp(40px, 4.9vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em; max-width: 15ch; }
@media (min-width: 900px) { .hero__title { max-width: none; } }
@media (max-width: 899px) { .hero__br { display: none; } }
.hero__title .wi { animation: rise 1.1s var(--ease-expo) both; animation-delay: calc(var(--i) * 70ms + 800ms); }
.hero__title .hl { background-size: 200% 100%; animation: rise 1.1s var(--ease-expo) both, sheen 8s ease-in-out 2s infinite alternate; animation-delay: calc(var(--i) * 70ms + 800ms), 2s; }
@keyframes sheen { to { background-position: 100% 0; } }
@keyframes rise { from { transform: translateY(118%); } }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); color: var(--fg2); max-width: 44ch; margin: 28px auto 0; animation: fade 1.2s var(--ease) 1.2s both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .hero__cta { justify-content: center; margin-top: 38px; animation: fade 1.2s var(--ease) 1.35s both; }
.hero .micro { animation: fade 1.2s var(--ease) 1.45s both; }

/* Spotlight behind the headline */
.hero__spot { position: absolute; z-index: 1; left: 50%; top: 42%; width: min(1100px, 120vw); height: 620px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(47, 107, 255, .32), rgba(124, 58, 237, .16) 40%, transparent 70%); filter: blur(30px); pointer-events: none; }
/* Horizon: a huge circle whose top edge glows, rising from below the fold */
.hero__horizon { position: absolute; z-index: 1; left: 50%; top: calc(100% - 180px); width: max(1600px, 170vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--night) 97%, transparent 100%);
  box-shadow: 0 -2px 0 0 rgba(140, 200, 255, .55), 0 -18px 60px -6px rgba(47, 107, 255, .7), 0 -60px 160px -20px rgba(124, 58, 237, .55), inset 0 30px 80px -40px rgba(34, 211, 238, .35);
  animation: horizon 1.8s var(--ease-expo) .4s both; }
@keyframes horizon { from { opacity: 0; transform: translateX(-50%) translateY(80px); } }
.hero .glow--blue { right: auto; left: 58%; top: -10%; }
.hero .container:last-child { position: relative; z-index: 2; }
.hero .trust { justify-content: center; border-top: 0; padding-top: 0; }
@media (max-width: 899px) { .hero__horizon { top: calc(100% - 180px); } }

.scene__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(47, 107, 255, .7), transparent 55%), radial-gradient(circle at 70% 65%, rgba(34, 211, 238, .45), transparent 55%), radial-gradient(circle at 55% 30%, rgba(124, 58, 237, .6), transparent 60%); filter: blur(60px); }
/* CSS "AI core": instant static hero art, and the fallback on phones / reduced motion / no WebGL */
.aicore { position: absolute; inset: 12%; perspective: 900px; transition: opacity 1.2s var(--ease); }
.aicore::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(rgba(140, 170, 255, .55) 1px, transparent 1.6px) 0 0 / 16px 16px; -webkit-mask: radial-gradient(circle, transparent 38%, #000 52%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 52%, transparent 70%); animation: spin 60s linear infinite; }
.aicore__orb { position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8), transparent 16%), radial-gradient(circle at 70% 75%, rgba(34, 211, 238, .9), transparent 45%), radial-gradient(circle at 45% 45%, #7C3AED, #2F6BFF 58%, #0B1440 100%); box-shadow: 0 0 80px rgba(47, 107, 255, .7), 0 0 30px rgba(34, 211, 238, .45), inset -12px -18px 40px rgba(7, 11, 31, .7); animation: orbpulse 5s ease-in-out infinite alternate; }
.aicore__ring { position: absolute; inset: 2%; border-radius: 50%; border: 1px solid rgba(34, 211, 238, .4); transform: rotateX(72deg) rotateY(-14deg); }
.aicore__ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.aicore__ring { animation: ring1 16s linear infinite; }
.aicore__ring--2 { inset: -6%; border-color: rgba(124, 58, 237, .45); animation: ring2 24s linear infinite reverse; }
.aicore__ring--2::after { background: #A78BFA; box-shadow: 0 0 12px #A78BFA; }
@keyframes ring1 { from { transform: rotateX(72deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(72deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes ring2 { from { transform: rotateX(66deg) rotateY(22deg) rotateZ(0); } to { transform: rotateX(66deg) rotateY(22deg) rotateZ(360deg); } }
@keyframes orbpulse { from { transform: scale(.96); filter: hue-rotate(-12deg); } to { transform: scale(1.04); filter: hue-rotate(14deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Floating cards around the AI core */
.fc { position: absolute; z-index: 3; }
.fc__in { background: linear-gradient(160deg, rgba(27, 37, 78, .92), rgba(12, 18, 40, .92)); border: 1px solid rgba(170, 180, 214, .22); border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(47, 107, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.fc--chat { right: -6%; top: 2%; width: 46%; }
.fc--chat .fc__in { padding: 12px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.fc__head { display: flex; align-items: center; gap: 9px; line-height: 1.25; font-size: 13px; }
.fc__head small { display: flex; align-items: center; gap: 5px; color: var(--fg2); font-size: 11px; }
.fc__head small i { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.fc__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, transparent 30%), var(--grad); box-shadow: 0 0 14px rgba(34, 211, 238, .55); }
.fc__msg { margin: 0; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.fc__msg--me { justify-self: end; border-radius: 12px 4px 12px 12px; background: rgba(47, 107, 255, .28); border-color: rgba(47, 107, 255, .35); }
/* Reply loop: typing dots, then the answer. Without animation the answer just shows. */
.fc__reply { display: grid; }
.fc__reply > * { grid-area: 1 / 1; }
.fc__reply .fc__msg { animation: reply-in 7s ease infinite; }
.fc__typing { justify-self: start; align-self: start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: rgba(255, 255, 255, .07); opacity: 0; animation: typing-show 7s ease infinite; }
.fc__typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: typing 1s ease-in-out infinite; }
.fc__typing i:nth-child(2) { animation-delay: .15s; }
.fc__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes typing-show { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes reply-in { 0%, 32% { opacity: 0; transform: translateY(4px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fc--pin { left: -3%; top: 16%; }
.fc--pin .fc__in { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; font-size: 14px; font-weight: 500; border-radius: 999px; animation-duration: 9s; }
.fc--pin svg { width: 20px; height: 20px; color: var(--cyan); }
.fc--lead { left: 2%; bottom: 7%; }
.fc--lead .fc__in { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; font-size: 16px; line-height: 1.35; animation-duration: 6s; animation-delay: -2s; }
.fc--lead small, .stage__obj--lead small { display: block; color: var(--fg2); font-size: 12.5px; }
.dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 5px rgba(52, 211, 153, .22); }

.trust { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 16px; }
.trust li { position: relative; padding-left: 28px; }
/* The V is the bullet everywhere */
.trust li::before, .ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235B8CFF'/%3E%3Cstop offset='1' stop-color='%2322D3EE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='2,8 28,8 50,60 72,8 98,8 61,94 39,94' fill='url%28%23g%29'/%3E%3C/svg%3E") center/contain no-repeat; }

@media (max-width: 899px) {
  .hero { min-height: 0; gap: 40px; }
  .hero__cta .btn { width: 100%; }
  .fc--lead .fc__in { font-size: 14px; padding: 10px 16px 10px 12px; }
  .fc--pin .fc__in { font-size: 12px; }
  .fc--chat { right: -4%; width: 60%; }
  .fc--chat .fc__in { font-size: 11px; padding: 10px; gap: 6px; }
}

/* 6b. PAGE HEADER (inner pages) + NEXT PAGE LINK ---------------------------- */
.page-hero { position: relative; overflow: clip; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(transparent, var(--night)); pointer-events: none; }
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.page-hero__title { font-size: clamp(38px, 5vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em; max-width: 16ch; text-wrap: balance; }
.page-hero__sub { font-size: clamp(18px, 1.6vw, 20px); color: var(--fg2); max-width: 46ch; margin-top: 22px; }
.page-hero__art { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; }
.page-hero__art .aicore { inset: 6%; }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--fg2); margin-bottom: 22px; }
.crumbs a { color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
@media (min-width: 900px) { .page-hero__inner { grid-template-columns: 1.25fr .75fr; gap: 64px; } .page-hero__art { margin-right: 0; } }
@media (max-width: 899px) { .page-hero__art { display: none; } .page-hero .hero__cta .btn { width: 100%; } }

.next-page { padding: clamp(40px, 6vw, 72px) 0; }
.next-page__link { display: grid; gap: 6px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(47, 107, 255, .06), rgba(124, 58, 237, .06) 50%, rgba(34, 211, 238, .06)); color: var(--fg); text-decoration: none; transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.next-page__link:hover { border-color: rgba(47, 107, 255, .5); transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(47, 107, 255, .45); }
.next-page__label { font-size: 14px; font-weight: 600; color: var(--link); text-transform: uppercase; letter-spacing: .2em; }
.next-page__title { display: flex; align-items: center; gap: 14px; font-family: var(--head); font-size: clamp(30px, 4vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.next-page__title svg { width: 1em; height: 1em; color: var(--blue); transition: transform .4s var(--ease); }
.next-page__link:hover svg { transform: translateX(8px); }
.next-page__line { color: var(--fg2); }

/* 7. SECTIONS + PROBLEM -------------------------------------------------- */
.section, .how, .contact { position: relative; padding: var(--section) 0; overflow: clip; }
/* Light sections sit on the dark page as rounded panels, so dark/light changes feel like layers */
.light { background: var(--light); border-radius: clamp(24px, 4vw, 48px); }
.light + .light { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.light:has(+ .light) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--grad); color: #fff; box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .7); }
.icon svg { width: 28px; height: 28px; }
.pains { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 800px) { .pains { grid-template-columns: repeat(3, 1fr); } }
.pain { display: grid; gap: 28px; align-content: start; padding: 36px 30px 40px; background: #fff; border: 1px solid rgba(47, 107, 255, .12); border-radius: var(--radius); box-shadow: 0 20px 50px -30px rgba(47, 107, 255, .35); }
.pain h3 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.3; letter-spacing: -.01em; }
.fixlink { display: grid; justify-items: center; gap: 12px; margin: 44px auto 0; width: max-content; color: var(--ink); font-size: clamp(20px, 2vw, 24px); font-weight: 600; }
.fixlink > svg { width: 24px; height: 48px; color: var(--blue); animation: nudge 1.8s var(--ease) infinite alternate; }
.fixlink > span { border-bottom: 2px solid var(--blue); padding-bottom: 2px; }

/* "Sound familiar?" on deep navy: glowing cards, extruded 3D icon tiles, gradient pill */
.problem { background:
  radial-gradient(ellipse 45% 40% at 6% 8%, rgba(79, 70, 229, .38), transparent 70%),
  radial-gradient(ellipse 50% 45% at 96% 96%, rgba(139, 92, 246, .34), transparent 70%),
  radial-gradient(circle at 88% 10%, rgba(34, 211, 238, .2), transparent 18%),
  #070A1F; }
.problem__bar { display: block; width: 72px; height: 6px; margin-bottom: 22px; border-radius: 6px; background: linear-gradient(90deg, #60A5FA, #A78BFA, #F0ABFC); box-shadow: 0 0 22px rgba(167, 139, 250, .65); }
.problem .h2 { font-size: clamp(42px, 5.9vw, 84px); font-weight: 800; line-height: 1.05; letter-spacing: -.024em; max-width: none; }
.problem .hl { background-image: linear-gradient(100deg, #60A5FA, #A78BFA 50%, #F0ABFC); }
.problem .pains { gap: 24px; margin-top: 64px; }
@media (min-width: 800px) { .problem .pains { gap: 32px; } }
.pain--blue { --c: #3B82F6; --t1: #60A5FA; --t2: #6D28D9; --edge: #2A1F86; }
.pain--violet { --c: #8B5CF6; --t1: #A78BFA; --t2: #DB2777; --edge: #5B1A6E; }
.pain--cyan { --c: #22D3EE; --t1: #22D3EE; --t2: #4338CA; --edge: #1E2A78; }
.problem .pain { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 40px 34px 42px; border: 2px solid transparent; border-radius: 30px;
  background: linear-gradient(160deg, #141A40, #0A0E27) padding-box, linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 18%, transparent) 55%, var(--c)) border-box;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 34px 90px -34px var(--c), 0 0 70px -26px var(--c); }
@media (min-width: 800px) { .problem .pain { min-height: 440px; } }
.pain__num { position: absolute; top: 36px; right: 34px; font: 600 14px var(--body); letter-spacing: .22em; color: var(--c); }
.problem .pain h3 { margin-top: auto; color: #fff; font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }

.tile3d { position: relative; flex: none; width: 116px; height: 116px; margin-bottom: 60px; perspective: 600px; }
.tile3d::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -30px; height: 30px; border-radius: 50%; background: var(--c); filter: blur(22px); opacity: .6; }
.tile3d__face { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; border-radius: 30px;
  background: linear-gradient(145deg, var(--t1), var(--t2)); transform: rotateX(16deg) rotateY(-16deg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -8px 16px rgba(0, 0, 0, .22),
    1px 2px 0 var(--edge), 2px 4px 0 var(--edge), 3px 6px 0 var(--edge), 4px 8px 0 var(--edge), 5px 10px 0 var(--edge),
    6px 12px 0 color-mix(in srgb, var(--edge) 70%, #000), 0 26px 44px -12px var(--c); }
.tile3d__face::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 30px 30px 60% 60% / 30px 30px 22px 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .04)); }
.tile3d__face svg { position: relative; width: 58px; height: 58px; overflow: visible; }

/* Shared by the "Why us" cards (our-work.html): colours per card, smaller 3D tile */
.pain--pink { --c: #EC4899; --t1: #F472B6; --t2: #9333EA; --edge: #6B1650; }
.tile3d--sm { width: 84px; height: 84px; margin-bottom: 34px; perspective: 500px; }
.tile3d--sm::after { bottom: -22px; height: 22px; filter: blur(18px); }
.tile3d--sm .tile3d__face { border-radius: 22px; }
.tile3d--sm .tile3d__face::before { border-radius: 22px 22px 60% 60% / 22px 22px 16px 16px; }
.tile3d--sm .tile3d__face svg { width: 42px; height: 42px; }

/* SHOWCASE: "Websites built to bring in customers" (our-work.html), 3D browser windows */
.showcase { background:
  radial-gradient(ellipse 45% 40% at 6% 6%, rgba(79, 70, 229, .36), transparent 70%),
  radial-gradient(ellipse 40% 55% at 100% 55%, rgba(139, 92, 246, .3), transparent 70%),
  radial-gradient(circle at 90% 8%, rgba(34, 211, 238, .18), transparent 16%),
  #070A1F; }
.showcase__title { font-size: clamp(40px, 5.9vw, 84px); font-weight: 800; line-height: 1.05; letter-spacing: -.024em; max-width: none; }
.showcase__title > span { display: block; }
.showcase__title .hl { background-image: linear-gradient(100deg, #60A5FA, #A78BFA 50%, #F0ABFC); padding-bottom: .06em; }
.showcase .work__grid { gap: 72px; margin-top: 72px; }
@media (min-width: 900px) { .showcase .work__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.showcase .work__item { gap: 0; perspective: 1400px; }
.frame--blue { --c: #3B82F6; --edge: #23307A; }
.frame--violet { --c: #8B5CF6; --edge: #3E1F84; }
.frame.frame--3d { border: 2px solid transparent; border-radius: 28px; overflow: hidden;
  background: linear-gradient(#0B1028, #0B1028) padding-box, linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 20%, transparent) 55%, var(--c)) border-box;
  box-shadow: 0 3px 0 var(--edge), 0 6px 0 var(--edge), 0 9px 0 var(--edge), 0 12px 0 var(--edge), 0 15px 0 color-mix(in srgb, var(--edge) 65%, #000), 0 50px 90px -34px var(--c), 0 0 60px -26px var(--c);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.frame--blue.frame--3d { transform: rotateX(4deg) rotateY(7deg); }
.frame--violet.frame--3d { transform: rotateX(4deg) rotateY(-7deg); }
.showcase .work__item:hover .frame--3d { transform: rotateX(2deg) rotateY(0) translateY(-6px); }
@media (max-width: 899px) { .frame--blue.frame--3d, .frame--violet.frame--3d { transform: rotateX(4deg); } }
.frame--3d .frame__bar { position: relative; gap: 8px; padding: 14px 18px; background: linear-gradient(180deg, #232B55, #121838); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(0, 0, 0, .5); }
.frame--3d .frame__bar i { width: 13px; height: 13px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 45%), var(--dot); box-shadow: 0 2px 0 color-mix(in srgb, var(--dot) 55%, #000); }
.frame--3d .frame__bar i:nth-child(1) { --dot: #FF5F57; }
.frame--3d .frame__bar i:nth-child(2) { --dot: #FEBC2E; }
.frame--3d .frame__bar i:nth-child(3) { --dot: #28C840; }
.frame--3d .frame__bar span { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 22px; font-size: 13px; color: #CBD5E1; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.showcase .work__item figcaption { gap: 8px; margin-top: 44px; }
.showcase .work__item figcaption strong { color: #fff; font: 700 clamp(26px, 2.4vw, 34px)/1.2 var(--head); letter-spacing: -.015em; }
.showcase .work__item figcaption span { color: #CBD5E1; font-size: clamp(17px, 1.4vw, 20px); }

.work__cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 88px; padding: clamp(30px, 4vw, 48px) clamp(26px, 4.5vw, 60px); border-radius: 36px;
  background: linear-gradient(110deg, #111A4A, #2A1C6E 55%, #4C1D95);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(167, 139, 250, .3), 0 4px 0 #2A1A6A, 0 8px 0 #24165C, 0 12px 0 #1E124E, 0 16px 0 #170E3F, 0 60px 110px -40px rgba(139, 92, 246, .9); }
.work__cta::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 36px 36px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); pointer-events: none; }
.work__cta-text { position: relative; display: grid; gap: 6px; }
.work__cta-title { color: #fff; font: 700 clamp(26px, 2.6vw, 38px)/1.2 var(--head); letter-spacing: -.02em; }
.work__cta-sub { color: #CBD5E1; font-size: 18px; }
@media (max-width: 560px) { .work__cta .btn { width: 100%; white-space: normal; } }

/* PROOF: "What our clients say" (our-work.html), 3D testimonial slabs angled inwards */
.proof { background:
  radial-gradient(ellipse 45% 45% at 94% 8%, rgba(79, 70, 229, .36), transparent 70%),
  radial-gradient(ellipse 50% 45% at 4% 96%, rgba(139, 92, 246, .32), transparent 70%),
  radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .16), transparent 18%),
  #070A1F; }
.proof__pill { display: inline-block; padding: 8px 18px; border-radius: 999px; font: 600 13px/1.2 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #C7D2FE;
  background: rgba(129, 140, 248, .12); border: 1px solid rgba(165, 180, 252, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(67, 56, 202, .7), 0 0 26px -4px rgba(129, 140, 248, .65); backdrop-filter: blur(8px); }
.proof__title { margin-top: 24px; }
.proof__title > span { display: inline; }
.quotes3d { display: grid; gap: 28px; margin-top: 72px; perspective: 1400px; }
@media (min-width: 900px) { .quotes3d { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.quotes3d > div { display: flex; }
.quote3d { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 32px 34px; border: 2px solid transparent; border-radius: 30px;
  background: linear-gradient(165deg, #151B42, #0A0E27) padding-box, linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 18%, transparent) 55%, var(--c)) border-box;
  transform: perspective(1000px) rotateX(6deg); transform-origin: 50% 100%;
  box-shadow: 0 3px 0 var(--edge), 0 6px 0 var(--edge), 0 9px 0 var(--edge), 0 12px 0 color-mix(in srgb, var(--edge) 70%, #000), 0 44px 80px -32px var(--c), 0 0 56px -24px var(--c);
  transition: transform .6s var(--ease); }
@media (min-width: 900px) {
  .quote3d { min-height: 400px; }
  .quotes3d > div:first-child .quote3d { transform: perspective(1000px) rotateX(6deg) rotateY(5deg); }
  .quotes3d > div:last-child .quote3d { transform: perspective(1000px) rotateX(6deg) rotateY(-5deg); }
}
.quotes3d > div:hover .quote3d { transform: perspective(1000px) rotateX(2deg) translateY(-4px); }
.quote3d blockquote { color: #E2E8F0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; }
.quote3d figcaption { display: grid; gap: 4px; width: 100%; margin-top: auto; padding-top: 28px; }
.quote3d figcaption::before { content: ""; display: block; height: 1px; margin-bottom: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), transparent); }
.quote3d figcaption strong { color: #fff; font: 700 19px/1.3 var(--head); }
.quote3d figcaption span { color: #CBD5E1; font-size: 15px; }

/* WHY US + PRICING BANNER (our-work.html) */
.why { background:
  radial-gradient(ellipse 45% 45% at 94% 6%, rgba(79, 70, 229, .36), transparent 70%),
  radial-gradient(ellipse 50% 45% at 4% 96%, rgba(139, 92, 246, .32), transparent 70%),
  #070A1F; }
.why__grid { display: grid; gap: 28px; }
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }
.why__grid > li { display: flex; }
.why__card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 28px 38px; border: 2px solid transparent; border-radius: 28px;
  background: linear-gradient(165deg, #151B42, #0A0E27) padding-box, linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 18%, transparent) 55%, var(--c)) border-box;
  transform: perspective(900px) rotateX(7deg); transform-origin: 50% 100%;
  box-shadow: 0 3px 0 var(--edge), 0 6px 0 var(--edge), 0 9px 0 var(--edge), 0 12px 0 color-mix(in srgb, var(--edge) 70%, #000), 0 40px 70px -30px var(--c), 0 0 50px -24px var(--c);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.why__card:hover { transform: perspective(900px) rotateX(3deg) translateY(-4px); }
.why__card h3 { color: #fff; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.why__card p { margin-top: 10px; color: #CBD5E1; font-size: 18px; line-height: 1.5; }

.pb { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 88px; padding: clamp(34px, 5vw, 60px) clamp(28px, 5.5vw, 76px);
  border-radius: 40px; color: #fff; text-decoration: none; background: linear-gradient(100deg, #2563EB, #7C3AED 52%, #C026D3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 #4A23B0, 0 8px 0 #401E9C, 0 12px 0 #361987, 0 16px 0 #2B1470, 0 60px 110px -34px rgba(139, 92, 246, .95);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pb::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 40px 40px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none; }
.pb:hover { transform: translateY(-4px); }
.pb:focus-visible { outline: 3px solid #F0ABFC; outline-offset: 6px; }
.pb__text { position: relative; display: grid; gap: 10px; }
.pb__label { font: 600 14px var(--body); letter-spacing: .28em; text-transform: uppercase; color: #C7D2FE; }
.pb__title { font: 800 clamp(52px, 6.7vw, 96px)/1.05 var(--head); letter-spacing: -.021em; text-shadow: 0 2px 0 rgba(46, 16, 120, .45), 0 6px 0 rgba(46, 16, 120, .22), 0 18px 40px rgba(20, 8, 80, .45); }
.pb__line { font-size: clamp(18px, 1.6vw, 22px); color: rgba(255, 255, 255, .94); }
.pb__btn { position: relative; display: grid; place-items: center; width: clamp(76px, 8vw, 116px); aspect-ratio: 1; border-radius: 50%; color: #4338CA;
  background: linear-gradient(160deg, #FFFFFF, #C7D2FE); transform: perspective(500px) rotateX(14deg) rotateY(-14deg);
  box-shadow: inset 0 2px 0 #fff, inset 0 -6px 12px rgba(67, 56, 202, .18), 0 3px 0 #A5B4FC, 0 6px 0 #8B9CF5, 0 9px 0 #7C83E8, 0 12px 0 #6366F1, 0 30px 50px -14px rgba(30, 20, 90, .7); }
.pb__btn svg { width: 42%; height: 42%; transition: transform .4s var(--ease); }
.pb:hover .pb__btn svg { transform: translateX(5px); }

.problem .fixlink { gap: 18px; margin-top: 72px; color: #fff; }
.problem .fixlink > svg { color: #A78BFA; }
.problem .fixlink > span { border: 0; padding: 16px 40px; }
.fixlink__pill { display: inline-flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 40px; border-radius: 999px; font: 600 clamp(20px, 1.9vw, 26px)/1.2 var(--body); color: #fff;
  background: linear-gradient(100deg, #3B82F6, #8B5CF6 52%, #D946EF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 54px -12px rgba(139, 92, 246, .9);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.fixlink__pill svg { width: 26px; height: 26px; transition: transform .4s var(--ease); }
.fixlink:hover .fixlink__pill { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 22px 64px -10px rgba(167, 139, 250, 1); }
.fixlink:hover .fixlink__pill svg { transform: translateX(4px); }
.fixlink:focus-visible { outline: 0; }
.fixlink:focus-visible .fixlink__pill { outline: 3px solid #F0ABFC; outline-offset: 4px; }
@media (max-width: 560px) { .tile3d { width: 96px; height: 96px; margin-bottom: 48px; } .tile3d__face { border-radius: 26px; } .tile3d__face svg { width: 48px; height: 48px; } .problem .fixlink > .fixlink__pill { padding: 14px 30px; min-height: 64px; } }
@keyframes nudge { to { transform: translateY(8px); } }

/* Glass panel used for tiles, plans and steps on dark */
.tile, .step, .form, .form__success {
  position: relative; border: 1px solid transparent; border-radius: var(--radius);
  background: linear-gradient(160deg, #141D40, #0B1128) padding-box,
              linear-gradient(140deg, rgba(47, 107, 255, .7), rgba(124, 58, 237, .25) 45%, rgba(34, 211, 238, .55)) border-box;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* 8. BENTO (what we do) -------------------------------------------------- */
.bento { display: grid; gap: 20px; margin-top: 60px; perspective: 1400px; }
.bento > div { display: flex; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento__a { grid-column: span 6; grid-row: span 2; }
  .bento__b, .bento__c { grid-column: span 6; }
  .bento__d { grid-column: span 12; }
}
.tile { width: 100%; display: flex; flex-direction: column; gap: 28px; padding: 34px 32px; overflow: hidden; transform-style: preserve-3d; transition: box-shadow .6s var(--ease); }
.tile:hover, .plan:hover { box-shadow: 0 30px 70px -26px rgba(47, 107, 255, .65); }
.tile h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.015em; }
.tile__text > p { color: var(--fg2); margin-top: 10px; max-width: 44ch; }
.tile__text > .tile__result { color: #fff; font-weight: 500; margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--cyan); }
.bento__b .tile, .bento__c .tile { flex-direction: row; align-items: center; }
.bento__b .tile__text, .bento__c .tile__text { flex: 1; }
@media (max-width: 560px) { .bento__b .tile, .bento__c .tile { flex-direction: column; align-items: stretch; } }
/* Cursor glare on tiltable panels (position set by main.js) */
.tile::after, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(120, 160, 255, .22), transparent 60%); transition: opacity .6s var(--ease); }
.tile.is-tilting::after, .plan.is-tilting::after { opacity: 1; }

/* Mini visuals inside tiles */
.viz--site { margin-top: auto; border-radius: 14px 14px 0 0; background: #fff; margin-bottom: -34px; box-shadow: 0 -10px 60px -10px rgba(47, 107, 255, .6); transform: perspective(900px) rotateX(10deg); transform-origin: 50% 100%; }
.viz__bar { display: flex; gap: 5px; padding: 12px 14px; border-bottom: 1px solid rgba(11, 16, 32, .1); }
.viz__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CBD3EA; }
.viz__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 22px 26px; }
.viz__body b { grid-column: 1 / -1; height: 20px; width: 78%; border-radius: 6px; background: var(--ink); }
.viz__body b.s { width: 50%; }
.viz__body span { grid-column: 1 / -1; height: 20px; width: 64%; background: repeating-linear-gradient(180deg, #DDE3F5 0 6px, transparent 6px 12px); }
.viz__body em { grid-column: 1 / -1; justify-self: start; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--grad); padding: 8px 16px; border-radius: 999px; }
.viz__body u { height: 56px; border-radius: 10px; background: #EEF2FF; }
.viz--page { flex: none; width: 104px; padding: 14px 12px; border-radius: 12px; background: #fff; display: grid; gap: 9px; transform: rotate(5deg); box-shadow: 0 0 50px -6px rgba(124, 58, 237, .8); }
.viz--page b { height: 12px; border-radius: 4px; background: var(--ink); }
.viz--page span { height: 34px; background: repeating-linear-gradient(180deg, #DDE3F5 0 5px, transparent 5px 10px); }
.viz--page em { height: 22px; border-radius: 999px; background: var(--grad); }
.viz--google { flex: none; display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #fff; color: var(--ink); width: 190px; box-shadow: 0 0 50px -6px rgba(34, 211, 238, .7); }
.viz--google svg { flex: none; width: 24px; height: 24px; color: var(--blue); }
.viz--google div { display: grid; gap: 7px; flex: 1; min-width: 0; }
.viz--google b { font-size: 13px; }
.viz--google span { height: 6px; border-radius: 3px; background: #DDE3F5; width: 80%; }
.viz--google p { display: flex; gap: 4px; flex-wrap: wrap; }
.viz--google i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--blue); background: #E8EEFF; padding: 3px 7px; border-radius: 999px; }

.tile--cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 36px 40px; }
.tile__big { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.tile--cta .micro { margin-top: 10px; text-align: center; }

.ticks { display: grid; gap: 12px; margin-top: 24px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; }

/* 8b. SEE IT BUILT ------------------------------------------------------- */
.build { position: relative; padding: var(--section) 0 0; overflow: clip; }
.build__head { margin-bottom: 20px; }
.build__pin { position: relative; padding: 0 0 var(--section); }
.build__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .build__inner { grid-template-columns: 1.3fr .7fr; gap: 56px; } }

.build__stage { position: relative; height: min(46vh, 360px); min-height: 260px; }
@media (min-width: 900px) { .build__stage { height: min(66vh, 600px); } }
/* Soft brand glow behind the stage (CSS, so the 3D scene needs no post-processing) */
.build__stage::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(47, 107, 255, .5), transparent 60%), radial-gradient(circle at 68% 60%, rgba(124, 58, 237, .45), transparent 60%); filter: blur(60px); pointer-events: none; }
.build__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.build__stage.is-3d canvas { opacity: 1; }
.build__stage.is-3d .b2d { opacity: 0; }

/* 2D art: the default, static picture is the finished site */
.b2d { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; transition: opacity .6s var(--ease); }
.b2d__art { width: auto; height: 100%; max-width: 100%; overflow: visible; filter: drop-shadow(0 30px 50px rgba(47, 107, 255, .45)); }
.b2d__page { fill: #0B1128; stroke: rgba(170, 180, 214, .25); }
.b2d__cta { fill: var(--cta); filter: drop-shadow(0 0 8px rgba(255, 122, 26, .9)); }
.b2d__wire rect { fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .35; }
.b2d__pin { position: absolute; left: 50%; top: 2%; width: 52px; height: 52px; margin-left: -20px; color: var(--cyan); filter: drop-shadow(0 0 14px rgba(34, 211, 238, .9)); }
.b2d__ripple { position: absolute; left: 50%; top: 2%; width: 52px; height: 52px; margin: 30px 0 0 -20px; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; }

.build__biz { position: absolute; right: 0; top: 4%; z-index: 2; }
.build__lead { position: absolute; left: 0; bottom: 4%; z-index: 2; }
.build__leadcard { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; font-size: 16px; line-height: 1.35; border-radius: 16px; background: linear-gradient(160deg, #1B254E, #0C1228); border: 1px solid rgba(52, 211, 153, .5); box-shadow: 0 0 44px -6px rgba(52, 211, 153, .55), 0 24px 50px -18px rgba(0, 0, 0, .8); }
.build__leadcard small { display: block; color: var(--fg2); font-size: 13px; }
.build__leadcard .dot { animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 12px rgba(52, 211, 153, 0); } }
@media (max-width: 899px) {
  .build__biz { top: 4%; transform-origin: 100% 0; scale: .82; }
  .build__lead { bottom: 0; }
  .build__leadcard { font-size: 14px; padding: 10px 16px 10px 12px; }
}

/* Captions. Default (no JS / reduced motion): a plain numbered list */
.build__list { counter-reset: build; display: grid; gap: 18px; }
.build__name { counter-increment: build; white-space: nowrap; }
.build__name { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--head); }
.build__name::before { content: counter(build); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(34, 211, 238, .6); font-size: 14px; color: var(--cyan); }
.build__list p { color: var(--fg2); margin-top: 6px; max-width: 46ch; }
.build__cta { margin-top: 28px; }
.build__skip { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; padding: 4px 0; }

/* Live (scroll-driven) version: class added by main.js only when motion is allowed */
.build.is-live .build__pin { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding: 14px 0 18px; display: grid; align-content: center; }
.build.is-live .build__head .lead { margin-top: 12px; }
@media (min-width: 900px) { .build.is-live .build__stage { height: min(54vh, 520px); } }
.build.is-live .build__list { grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px 8px; }
.build.is-live .build__list li { display: contents; }
.build.is-live .build__name { grid-row: 1; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; color: var(--fg2); transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); }
.build.is-live .is-done .build__name::before { background: rgba(34, 211, 238, .2); }
.build.is-live .is-active .build__name { color: #fff; background: rgba(47, 107, 255, .28); border-color: var(--cyan); box-shadow: 0 0 22px -8px var(--cyan); }
.build.is-live .is-active .build__name::before { background: var(--cyan); color: var(--night); }
/* The old caption fades out fully before the new one fades in, so two never overlap */
.build.is-live .build__list p { grid-row: 2; grid-column: 1 / -1; margin: 0; max-width: 26ch; font: 700 clamp(20px, 2vw, 26px)/1.35 var(--head); color: #fff; opacity: 0; transition: opacity .18s linear; }
.build.is-live .is-active p { opacity: 1; transition: opacity .4s var(--ease) .2s; }
@media (max-width: 1100px) {
  .build.is-live .build__name { padding: 5px; }
  .build.is-live li:not(.is-active) .build__name span { display: none; }
  .build.is-live .is-active .build__name { padding-right: 14px; }
}
@media (max-width: 899px) {
  .build.is-live .build__pin { padding: 10px 0 96px; align-content: start; }
  .build.is-live .build__head { margin-bottom: 6px; }
  .build.is-live .build__head .eyebrow, .build.is-live .build__head .lead { display: none; }
  .build.is-live .build__head .h2 { font-size: 28px; }
  .build.is-live .build__stage { height: 34svh; min-height: 220px; }
  .build.is-live .build__list p { max-width: none; font-size: 19px; min-height: 3.2em; }
  .build.is-live .build__cta { margin-top: 14px; }
  .build.is-live .build__cta .btn { width: 100%; min-height: 50px; }
  .build.is-live .build__cta .micro { display: none; }
  .build.is-live .build__skip { margin-top: 8px; }
}

/* 9. HOW IT WORKS -------------------------------------------------------- */
.how__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.steps { display: grid; gap: 18px; margin-top: 48px; }
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 26px 24px 28px; }
.step__num { display: block; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; }
.step h3 { font-size: 24px; letter-spacing: -.015em; line-height: 1.2; }
.step dl { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.step dt { font-size: 15px; font-weight: 600; color: var(--cyan); margin-bottom: 2px; }
.step dd { font-size: 18px; color: var(--fg2); }

/* 10. OUR WORK ----------------------------------------------------------- */
/* Two projects side by side at the same size, with an invitation banner underneath */
.work__grid { display: grid; gap: 32px; margin-top: 56px; }
@media (min-width: 900px) { .work__grid { grid-template-columns: 1fr 1fr; gap: 40px 36px; } }
.work__next { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.work__next > p:first-child { margin: 0 !important; }
.work__next .micro { display: none; }
.work__item { display: grid; gap: 18px; min-width: 0; align-content: start; }
.work__item figcaption { display: grid; gap: 2px; font-size: 18px; }
.work__item figcaption strong { font: 700 24px/1.3 var(--head); }
.work__item--main figcaption strong { font-size: 26px; }
.work__item figcaption span { color: var(--fg2); }
/* Browser frame around each video */
.frame { border-radius: 16px; overflow: hidden; background: var(--ink); border: 1px solid rgba(11, 16, 32, .9); box-shadow: 0 34px 70px -30px rgba(47, 107, 255, .65), 0 10px 24px -14px rgba(11, 16, 32, .5); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.work__item:hover .frame { transform: translateY(-6px); box-shadow: 0 44px 80px -30px rgba(47, 107, 255, .85), 0 10px 24px -14px rgba(11, 16, 32, .5); }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #131A33; }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A4468; }
.frame__bar span { margin: 0 auto; transform: translateX(-20px); font-size: 12px; color: #CBD5E1; background: rgba(255, 255, 255, .07); padding: 2px 18px; border-radius: 999px; }
.frame__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, #2F6BFF, #7C3AED 55%, #22D3EE); }
.frame__screen--b { background: linear-gradient(135deg, #0F1630, #2F6BFF 70%, #22D3EE); }
.frame__screen--c { background: linear-gradient(135deg, #7C3AED, #2F6BFF 60%, #0F1630); }
.frame__screen > span { color: #fff; font-size: 16px; font-weight: 500; }
/* Still image: sized so the recording's own browser toolbar is cropped off the top */
.work__still { position: absolute; left: 0; bottom: 0; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: center bottom; }
.work__next { padding: 28px; border-radius: var(--radius); color: #fff; background: radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .5), transparent 60%), linear-gradient(140deg, #16204D, #0B1128); box-shadow: 0 30px 60px -30px rgba(47, 107, 255, .7); }
.work__next > p:first-child { font: 700 22px/1.3 var(--head); margin-bottom: 18px; }
.work__next .micro { color: #CBD5E1; }
@media (max-width: 560px) { .work__next .btn { width: 100%; } }
.work__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--ink); }

/* 11. PRICING ------------------------------------------------------------ */
/* Cards, table and lists are built by pricing.js from pricing-data.js */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pricing__noscript { margin-top: 40px; color: var(--fg2); }

/* What I do strip */
.does { display: grid; gap: 12px; margin-top: 40px; }
@media (min-width: 760px) { .does { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.does li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font: 700 clamp(17px, 1.6vw, 19px)/1.3 var(--head); }
.does__num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }

/* Package cards: stacked on mobile with Premium first (so Growth sits in the middle), three across from 900px */
.pkgs { display: flex; flex-direction: column-reverse; gap: 32px; margin-top: 56px; }
@media (min-width: 900px) { .pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } }
.pkg { position: relative; display: flex; flex-direction: column; padding: 36px 28px 30px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, #141D40, #0B1128); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.pkg--popular { border: 2px solid var(--accent); background: linear-gradient(160deg, #1A2658, #0E1638); box-shadow: 0 0 70px -18px var(--accent), 0 30px 60px -30px rgba(0, 0, 0, .8); }
@media (min-width: 900px) { .pkg--popular { margin: -16px 0; padding-top: 52px; } }
.pkg__badge { position: absolute; top: -15px; left: 26px; padding: 5px 14px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 600 14px/1.3 var(--body); }
.pkg h3 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.pkg__for { margin-top: 8px; color: var(--fg2); font-size: 18px; }
@media (min-width: 900px) { .pkg__for { min-height: 4.8em; } }
.pkg__price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 28px; padding: 20px 0; border-block: 1px solid var(--line); }
.pkg__price dt { font: 600 13px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); }
.pkg__price dd { margin: 8px 0 0; font: 700 clamp(32px, 3vw, 40px)/1 var(--head); letter-spacing: -.02em; }
.pkg__price dd span { display: block; margin-top: 8px; font: 400 15px var(--body); letter-spacing: 0; color: var(--fg2); }
.pkg h4 { font: 600 14px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pkg__plus { margin-top: 12px; font-size: 16px; font-weight: 600; }
.pkg .ticks { gap: 10px; margin-top: 14px; }
.pkg .ticks li { font-size: 16px; }
.pkg h4.pkg__no-title { margin-top: 28px; color: var(--fg2); }
.pkg__no { display: grid; gap: 8px; margin-top: 12px; color: var(--fg2); font-size: 15px; }
.pkg__no li { position: relative; padding-left: 30px; }
.pkg__no li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 11px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.pkg__btn { width: 100%; margin-top: auto; }
.pkg > :nth-last-child(2) { margin-bottom: 32px; }

.pkg-notes { display: grid; gap: 12px; max-width: 74ch; margin: 44px auto 0; text-align: center; color: var(--fg2); font-size: 16px; }
.pkg-notes p:last-child { color: var(--fg); }
.pkg-h3 { margin-top: 96px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }

/* Comparison table: scrolls sideways on small screens, row labels stay put */
.compare-wrap { margin-top: 24px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: #0B1128; }
.compare-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.compare { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
@media (min-width: 900px) { .compare { font-size: 16px; } }
.compare-hint { margin-top: 12px; color: var(--fg2); font-size: 15px; }
@media (min-width: 700px) { .compare-hint { display: none; } }
.compare th, .compare td { padding: 12px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 700 19px var(--head); }
.compare thead td, .compare tbody th { position: sticky; left: 0; z-index: 1; width: 118px; background: #0B1128; }
.compare tbody th { font-weight: 500; color: var(--fg2); box-shadow: 1px 0 0 var(--line); }
@media (min-width: 900px) { .compare thead td, .compare tbody th { width: 26%; } .compare th, .compare td { padding: 14px 16px; } }
.compare .is-popular { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare thead .is-popular { color: var(--accent); }
.compare__price td { font: 700 22px var(--head); }
.compare__yes { color: var(--accent); font-size: 19px; font-weight: 700; }
.compare__no { color: var(--fg2); }

/* Not sure which one? */
.notsure { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 900px) { .notsure { grid-template-columns: repeat(3, 1fr); } }
.notsure li { display: grid; align-content: start; gap: 6px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--fg2); font-size: 17px; }
.notsure li.is-popular { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.notsure strong { font: 700 20px var(--head); color: var(--fg); }

/* Final call to action */
.pkg-cta { display: grid; justify-items: center; gap: 16px; margin-top: 96px; padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 48px); text-align: center; border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: radial-gradient(ellipse 80% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), rgba(255, 255, 255, .02); }
.pkg-cta h3 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.pkg-cta p { max-width: 52ch; color: var(--fg2); font-size: 18px; }
.pkg-cta .cta-row__alt { margin-top: 0; }
.pkg-cta .cta-row__alt a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; }
@media (max-width: 560px) { .pkg-cta .btn { width: 100%; white-space: normal; } }

/* 12. PROOF -------------------------------------------------------------- */
.quotes { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 34px 30px; background: #fff; border: 1px solid rgba(47, 107, 255, .12); border-radius: var(--radius); box-shadow: 0 20px 50px -28px rgba(47, 107, 255, .45); }
.quote blockquote { font-size: 19px; line-height: 1.55; }
.quote figcaption { display: grid; gap: 2px; font-size: 15px; }
.quote figcaption span { color: var(--fg2); }
.stats { display: grid; gap: 32px; margin-top: 80px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats > div { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 22px; }
.stats dd { font-size: clamp(52px, 7vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-height: 1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats dt { color: var(--fg2); margin-top: 12px; }
.strip { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); margin-top: 80px; }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip li { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); padding-top: 18px; }
.strip strong { font-weight: 600; font-size: 19px; }
.strip span { color: var(--fg2); font-size: 16px; }

/* 13. FAQ ---------------------------------------------------------------- */
.faq__top { display: grid; gap: 32px; align-items: end; }
.faq__top > * { min-width: 0; }
@media (min-width: 900px) { .faq__top { grid-template-columns: 1.2fr .8fr; gap: 64px; } }
/* "Still have a question?" card */
.faq__ask { padding: 28px; border-radius: var(--radius); color: #fff; background: radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .35), transparent 55%), linear-gradient(140deg, #16204D, #0B1128); box-shadow: 0 30px 60px -30px rgba(47, 107, 255, .7); }
.faq__ask h3 { font-size: 24px; }
.faq__ask > p { color: #CBD5E1; margin: 6px 0 20px; }
.faq__ask .btn { gap: 10px; }
.faq__ask .btn svg { width: 24px; height: 24px; flex: none; }
.faq__ask .faq__mail { margin: 16px 0 0; font-size: 16px; }
.faq__ask .faq__mail a { color: #fff; }
@media (max-width: 560px) { .faq__ask .btn { width: 100%; } }

/* Question cards: big gradient number, question, answer */
.faq__tiles { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 700px) { .faq__tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .faq__tiles { grid-template-columns: repeat(3, 1fr); } }
.qa { position: relative; padding: 30px 28px 32px; border: 1px solid transparent; border-radius: var(--radius); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, rgba(47, 107, 255, .22), rgba(124, 58, 237, .1) 50%, rgba(34, 211, 238, .25)) border-box; box-shadow: 0 20px 50px -30px rgba(47, 107, 255, .55); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.qa:hover { box-shadow: 0 28px 60px -28px rgba(47, 107, 255, .8); }
.qa__num { display: block; font: 700 44px/1 var(--head); letter-spacing: -.03em; background: linear-gradient(100deg, #2F6BFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; margin-bottom: 18px; }
.qa h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.qa p { color: var(--fg2); margin-top: 10px; font-size: 18px; }

/* 14. CONTACT (dark, glowing) -------------------------------------------- */
.contact { background: radial-gradient(ellipse 70% 60% at 80% 40%, rgba(47, 107, 255, .28), transparent 70%), radial-gradient(ellipse 60% 60% at 10% 90%, rgba(124, 58, 237, .3), transparent 70%), var(--night); }
.contact__orb { position: absolute; right: -6%; top: 50%; width: min(70vw, 720px); aspect-ratio: 1; margin-top: calc(min(70vw, 720px) / -2); z-index: 0; pointer-events: none; }
.contact__orb span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 140deg, #2F6BFF, #7C3AED, #22D3EE, #2F6BFF); filter: blur(70px); opacity: .5; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.contact__grid { display: grid; gap: 56px; align-items: center; }
.contact__grid > *, .field select { min-width: 0; max-width: 100%; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr minmax(380px, 460px); gap: 72px; } }
.contact__copy .h2 { max-width: 15ch; }
.contact__direct { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact__direct > p { font: 700 20px/1.3 var(--head); color: #fff; margin-bottom: 16px; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__btns .btn { gap: 10px; }
.contact__btns svg { width: 24px; height: 24px; flex: none; }
/* WhatsApp green and an outlined email button: clear, but orange stays reserved for the main action */
.btn--wa { background: #25D366; color: #06200F; box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .7); }
.btn--wa:hover { background: #3BE07A; color: #06200F; box-shadow: 0 14px 40px -8px rgba(37, 211, 102, .9); }
.btn--line { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, .7); }
.btn--line:hover { background: rgba(34, 211, 238, .16); color: #fff; box-shadow: inset 0 0 0 1.5px var(--cyan), 0 0 26px -6px rgba(34, 211, 238, .8); }
@media (max-width: 560px) { .contact__btns .btn { width: 100%; } }

.form, .form__success { padding: clamp(26px, 4vw, 40px); color-scheme: dark; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(47, 107, 255, .5); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 7px; }
.field label span { color: var(--fg2); font-weight: 400; }
.field input, .field select {
  width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid rgba(170, 180, 214, .3); border-radius: 12px;
  background-color: rgba(7, 11, 31, .7); color: #fff; font: inherit; font-size: 17px; appearance: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder { color: #7783A8; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23CBD5E1' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 42px; }
.field input:focus, .field select:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .2); }
.field.is-invalid input, .field.is-invalid select { border-color: #FF8FA3; }
.field__err, .form__error { color: #FF8FA3; font-size: 14px; margin-top: 6px; }
.form__notice { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .45); font-size: 16px; }
.form__error a { color: #fff; }
.form .micro + .micro { margin-top: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { margin-top: 8px; }
.form .micro { text-align: center; }
.form.is-sending .btn { opacity: .7; pointer-events: none; }
.form__success { text-align: center; }
.form__success h3 { font-size: 26px; margin: 20px 0 10px; }
.form__success p { color: var(--fg2); margin-bottom: 18px; }
.form__check { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(52, 211, 153, .16); color: #34D399; font-size: 26px; }

/* 15. FOOTER ------------------------------------------------------------- */
.footer { background: #050816; padding: 72px 0 40px; font-size: 16px; border-top: 1px solid rgba(170, 180, 214, .12); }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; } .footer__grid > :first-child { grid-column: auto; } }
.footer__line { margin-top: 24px; max-width: 30ch; color: var(--fg2); }
.footer h4 { font-size: 15px; font-weight: 600; color: var(--fg2); margin-bottom: 16px; }
.footer nav a, .footer__grid div > a:not(.logo), .footer__grid div > p:not(.footer__line) { display: block; color: #fff; padding: 5px 0; }
.footer a:not(.btn):not(.logo):hover { color: var(--cyan); }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 15px; }
.footer__base a:not(.btn) { color: #fff; text-decoration: none; font-weight: 400; }
.footer__base .btn { margin-left: auto; }

.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; gap: 4px; justify-items: center;
    padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(7, 11, 31, .92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(170, 180, 214, .18);
    transition: transform .6s var(--ease);
  }
  .mobile-cta span { font-size: 12px; color: #CBD5E1; }
  .mobile-cta .btn { min-height: 50px; font-size: 16px; }
  .mobile-cta.is-hidden { transform: translateY(110%); }
  .footer { padding-bottom: 130px; }
  .footer__base .btn { display: none; }
}

/* 16. MOTION EXTRAS ------------------------------------------------------ */
/* Privacy page */
.legal { padding: 72px 0 120px; }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.legal h2 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--fg2); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }

/* 16b. THEME TOGGLE + LIGHT THEME -------------------------------------------
   Dark is the default. The sun/moon button (theme.js) sets data-theme="light" on <html>.
   Everything below only applies in light mode. Coloured slabs (pricing banner, CTA bars,
   browser windows, gradient buttons) stay as they are, because they work on both. */
.theme-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  border: 1px solid rgba(170, 180, 214, .3); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 rgba(47, 107, 255, .35), 0 0 22px -8px rgba(34, 211, 238, .7);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.theme-toggle:hover { border-color: rgba(34, 211, 238, .6); background: rgba(47, 107, 255, .2); transform: translateY(-1px); }
.theme-toggle svg { position: absolute; width: 21px; height: 21px; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: none; }
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }

:root[data-theme="light"] { --night: #F3F6FD; --panel: #FFFFFF; --accent: #0E7490; color-scheme: light; }
:root[data-theme="light"] .dark, :root[data-theme="light"] body { --fg: var(--ink); --fg2: #475569; --line: rgba(11, 16, 32, .12); --link: #1D4FD8; }
:root[data-theme="light"] .light { background: #FFFFFF; }
:root[data-theme="light"] :focus-visible { outline-color: var(--blue); }
:root[data-theme="light"] .hl, :root[data-theme="light"] .problem .hl, :root[data-theme="light"] .showcase__title .hl, :root[data-theme="light"] .light .hl { background-image: linear-gradient(100deg, #2563EB, #7C3AED 50%, #C026D3); }

/* Header, logo, menu */
:root[data-theme="light"] .logo { color: var(--ink); }
:root[data-theme="light"] .header { background: rgba(255, 255, 255, .9); }
:root[data-theme="light"] .header.is-stuck { border-bottom-color: rgba(11, 16, 32, .1); }
:root[data-theme="light"] .nav a { color: var(--ink); }
:root[data-theme="light"] .nav a:hover, :root[data-theme="light"] .nav a:focus-visible { background: rgba(47, 107, 255, .1); border-color: rgba(47, 107, 255, .4); box-shadow: none; }
:root[data-theme="light"] .nav a[aria-current="page"] { background: rgba(47, 107, 255, .08); border-color: rgba(47, 107, 255, .3); }
:root[data-theme="light"] .nav-toggle span { background: var(--ink); }
:root[data-theme="light"] .js .nav.is-open { border-bottom-color: rgba(11, 16, 32, .1); box-shadow: 0 20px 40px -20px rgba(11, 16, 32, .25); }
:root[data-theme="light"] .theme-toggle { color: #4338CA; border-color: rgba(67, 56, 202, .25); background: #FFFFFF; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #C7D2FE, 0 8px 18px -10px rgba(67, 56, 202, .5); }
:root[data-theme="light"] .theme-toggle:hover { background: #EEF2FF; border-color: rgba(67, 56, 202, .45); }
:root[data-theme="light"] .flight__route { stroke: rgba(71, 85, 105, .4); }
:root[data-theme="light"] .mobile-cta { background: rgba(255, 255, 255, .94); border-top-color: rgba(11, 16, 32, .1); }
:root[data-theme="light"] .mobile-cta span { color: #475569; }

/* Atmosphere: softer glows on a light page */
:root[data-theme="light"] .glow { opacity: .22; }
:root[data-theme="light"] .bg-grid { background-image: linear-gradient(rgba(11, 16, 32, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .05) 1px, transparent 1px); }
:root[data-theme="light"] .hero__spot { opacity: .5; }
:root[data-theme="light"] .hero__pill { color: #3730A3; background: rgba(79, 70, 229, .08); border-color: rgba(79, 70, 229, .25); box-shadow: none; }
:root[data-theme="light"] .crumbs a:hover, :root[data-theme="light"] .crumbs [aria-current] { color: var(--ink); }
:root[data-theme="light"] .problem, :root[data-theme="light"] .showcase, :root[data-theme="light"] .proof, :root[data-theme="light"] .why { background:
  radial-gradient(ellipse 45% 40% at 6% 8%, rgba(99, 102, 241, .12), transparent 70%),
  radial-gradient(ellipse 50% 45% at 96% 96%, rgba(139, 92, 246, .12), transparent 70%),
  radial-gradient(circle at 88% 10%, rgba(34, 211, 238, .1), transparent 18%),
  #F3F6FD; }

/* 3D cards: white slabs, lighter edges, dark text */
:root[data-theme="light"] :is(.pain--blue, .pain--violet, .pain--cyan, .pain--pink, .frame--blue, .frame--violet) { --edge: color-mix(in srgb, var(--c) 45%, #fff); }
:root[data-theme="light"] .problem .pain, :root[data-theme="light"] .why__card, :root[data-theme="light"] .quote3d { background: linear-gradient(165deg, #FFFFFF, #F1F4FF) padding-box, linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent) 55%, var(--c)) border-box; }
:root[data-theme="light"] .problem .pain h3, :root[data-theme="light"] .why__card h3, :root[data-theme="light"] .quote3d figcaption strong, :root[data-theme="light"] .showcase .work__item figcaption strong { color: var(--ink); }
:root[data-theme="light"] .why__card p, :root[data-theme="light"] .quote3d blockquote, :root[data-theme="light"] .quote3d figcaption span, :root[data-theme="light"] .showcase .work__item figcaption span { color: #475569; }
:root[data-theme="light"] .pain__num { color: color-mix(in srgb, var(--c) 70%, #000); }
:root[data-theme="light"] .problem .fixlink { color: var(--ink); }
:root[data-theme="light"] .proof__pill { color: #4338CA; background: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .35); box-shadow: 0 2px 0 rgba(99, 102, 241, .25); }

/* Glass panels: tiles, steps, form */
:root[data-theme="light"] :is(.tile, .plan, .step, .form, .form__success) { background: linear-gradient(160deg, #FFFFFF, #F4F6FF) padding-box, linear-gradient(140deg, rgba(47, 107, 255, .45), rgba(124, 58, 237, .18) 45%, rgba(34, 211, 238, .4)) border-box; box-shadow: 0 30px 60px -34px rgba(47, 107, 255, .4); }
:root[data-theme="light"] .tile__text > .tile__result { color: var(--ink); }
:root[data-theme="light"] .step dt { color: #0E7490; }
:root[data-theme="light"] .build__leadcard { background: #FFFFFF; box-shadow: 0 0 40px -10px rgba(52, 211, 153, .55), 0 24px 50px -24px rgba(11, 16, 32, .3); }
:root[data-theme="light"] .build.is-live .build__list p, :root[data-theme="light"] .build.is-live .is-active .build__name { color: var(--ink); }
:root[data-theme="light"] .build.is-live .is-active .build__name { background: rgba(47, 107, 255, .1); }
:root[data-theme="light"] .build.is-live .is-active .build__name::before { color: var(--ink); }

/* Pricing page */
:root[data-theme="light"] .pkg, :root[data-theme="light"] .pkg--popular { background: linear-gradient(160deg, #FFFFFF, #F4F6FF); box-shadow: 0 30px 60px -34px rgba(11, 16, 32, .3); }
:root[data-theme="light"] .pkg--popular { box-shadow: 0 0 60px -22px var(--accent), 0 30px 60px -34px rgba(11, 16, 32, .3); }
:root[data-theme="light"] .pkg__badge { color: #FFFFFF; }
:root[data-theme="light"] .compare-wrap, :root[data-theme="light"] .compare thead td, :root[data-theme="light"] .compare tbody th { background: #FFFFFF; }
:root[data-theme="light"] .does li, :root[data-theme="light"] .notsure li { background: #FFFFFF; }

/* Buttons that were white-on-dark */
:root[data-theme="light"] .btn--line { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, .55); }
:root[data-theme="light"] .btn--line:hover { background: #EEF2FF; color: var(--ink); box-shadow: inset 0 0 0 1.5px #2563EB; }

/* Contact and form */
:root[data-theme="light"] .contact { background: radial-gradient(ellipse 70% 60% at 80% 40%, rgba(47, 107, 255, .1), transparent 70%), radial-gradient(ellipse 60% 60% at 10% 90%, rgba(124, 58, 237, .1), transparent 70%), var(--night); }
:root[data-theme="light"] .contact__orb span { opacity: .18; }
:root[data-theme="light"] .contact__direct > p { color: var(--ink); }
:root[data-theme="light"] .form, :root[data-theme="light"] .form__success { color-scheme: light; }
:root[data-theme="light"] .field input, :root[data-theme="light"] .field select { background-color: #FFFFFF; color: var(--ink); border-color: rgba(11, 16, 32, .2); }
:root[data-theme="light"] .field input::placeholder { color: #64748B; }
:root[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23475569' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .field__err, :root[data-theme="light"] .form__error { color: #BE123C; }
:root[data-theme="light"] .field.is-invalid input, :root[data-theme="light"] .field.is-invalid select { border-color: #BE123C; }
:root[data-theme="light"] .form__error a { color: var(--ink); }

/* Footer */
:root[data-theme="light"] .footer { background: #FFFFFF; border-top-color: rgba(11, 16, 32, .1); }
:root[data-theme="light"] .footer nav a, :root[data-theme="light"] .footer__grid div > a:not(.logo), :root[data-theme="light"] .footer__grid div > p:not(.footer__line), :root[data-theme="light"] .footer__base a:not(.btn) { color: var(--ink); }
:root[data-theme="light"] .footer a:not(.btn):not(.logo):hover { color: #1D4FD8; }

/* 17. REDUCED MOTION — clean static version ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .vload { display: none; }
}