/* ═══════════════════════════════════════════
   COASTMOTIVE — Nautico design system (dark galaxy)
═══════════════════════════════════════════ */
:root {
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-card: #0A0A0A;
  --bg-card-hover: #121212;
  --border: rgba(126,200,227,0.10);
  --border-hover: rgba(126,200,227,0.28);
  --text-primary: #F2F6FF;
  --text-secondary: #9AA8BE;
  --text-muted: #5A6678;
  --accent: #8FD3F4;
  --accent-glow: rgba(143,211,244,0.14);
  --green: #2ECC9A;
  --intro-accent: #8FD3F4;
  --intro-accent-2: #A78BFA;
  --radius: 16px;
  --radius-sm: 10px;
  --max-width: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #060912; }
html, body { min-height: 100%; overflow-x: clip; max-width: 100vw; }

/* ONE universal page background — no per-section fills, no seams */
body {
  font-family: 'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  background:
    linear-gradient(180deg,
      #060912 0%,
      #04060d 30%,
      #020308 60%,
      #000000 100%) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: #9DD8EF; }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(126,200,227,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(126,200,227,0.4); }

/* ══ FLOATING PARTICLES — fixed full-page canvas behind everything ══ */
#cc-particles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
#app-content, footer { position: relative; z-index: 1; }

/* ══ PAGE AURORAS — two huge colour fields drifting behind every section ══ */
.page-aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.page-aurora div { position: absolute; width: 90vw; height: 90vw; border-radius: 50%; opacity: 0.16; will-change: transform; }
.page-aurora .pa1 { top: 8%; left: -45%; background: radial-gradient(circle, rgba(126,200,227,0.5), rgba(126,200,227,0) 64%); animation: paDrift 26s ease-in-out infinite; }
.page-aurora .pa2 { bottom: -20%; right: -45%; background: radial-gradient(circle, rgba(167,139,250,0.5), rgba(167,139,250,0) 64%); animation: paDrift 32s ease-in-out infinite reverse; }
@keyframes paDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-50px) scale(1.12); } }

/* ══ NAVBAR — no bar, no logo. Floating liquid-glass pills ══ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent; border: none;
  padding: 14px 16px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  pointer-events: none;
}
.nav-inner {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.nav-inner > * { pointer-events: auto; }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-link {
  color: var(--text-secondary); font-size: 0.84rem; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; text-align: center;
  background: transparent; border: 1px solid transparent;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.nav-link.active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.20);
}
.nav-cta-link { color: var(--accent); }
.nav-cta-link:hover { color: var(--accent); background: rgba(126,200,227,0.14); }
/* fade + drift in on first load, staggered */
.nav-link { animation: navItemIn 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.nav-links .nav-link:nth-child(1) { animation-delay: 0.05s; }
.nav-links .nav-link:nth-child(2) { animation-delay: 0.12s; }
.nav-links .nav-link:nth-child(3) { animation-delay: 0.19s; }
.nav-links .nav-link:nth-child(4) { animation-delay: 0.26s; }
.nav-links .nav-link:nth-child(5) { animation-delay: 0.33s; }
@keyframes navItemIn { from { opacity: 0; transform: translateY(-10px) scale(0.88); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ══ COMMAND-CENTER HERO — full-screen, in-flow ══ */
.cc-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
  padding: 64px 24px 170px;
  background: transparent;
}
/* Starfield (twinkling) */
.cc-stars, .cc-stars2, .cc-stars3 { position: absolute; inset: 0; pointer-events: none; }
.cc-stars  { background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #cfe9ff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 25%, #bfe3ff, transparent), radial-gradient(1px 1px at 55% 15%, #fff, transparent); background-repeat: repeat; background-size: 320px 320px; opacity: 0.5; animation: ccTwinkle 4s ease-in-out infinite; }
.cc-stars2 { background-image: radial-gradient(1px 1px at 15% 70%, #9fd8ff, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(1px 1px at 90% 80%, #cfe9ff, transparent), radial-gradient(1px 1px at 35% 50%, #fff, transparent); background-repeat: repeat; background-size: 480px 480px; opacity: 0.35; animation: ccTwinkle 6s ease-in-out infinite 1s; }
.cc-stars3 { background-image: radial-gradient(2px 2px at 25% 20%, rgba(167,139,250,0.9), transparent), radial-gradient(2px 2px at 80% 65%, rgba(143,211,244,0.9), transparent); background-repeat: repeat; background-size: 600px 600px; opacity: 0.5; animation: ccDrift 30s linear infinite; }
@keyframes ccTwinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 0.6; } }
@keyframes ccDrift { from { transform: translateY(0); } to { transform: translateY(-600px); } }

/* Soft aurora colour glows — cyan + violet */
.cc-aurora { position: absolute; width: 74vw; height: 74vw; border-radius: 50%; opacity: 0.55; pointer-events: none; will-change: transform; }
.cc-aurora.a1 { top: -26%; left: -20%; background: radial-gradient(circle, rgba(126,200,227,0.55), rgba(126,200,227,0) 66%); animation: ccFloat 16s ease-in-out infinite; }
.cc-aurora.a2 { top: 4%; right: -24%; background: radial-gradient(circle, rgba(167,139,250,0.55), rgba(167,139,250,0) 66%); animation: ccFloat 20s ease-in-out infinite reverse; }
@keyframes ccFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }

/* fade stars + aurora out before the fold — seamless transition */
.cc-hero .cc-stars, .cc-hero .cc-stars2, .cc-hero .cc-stars3, .cc-hero .cc-aurora {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 72%);
}
/* big soft feather straddling the hero fold */
.cc-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 280px; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(2,4,10,0) 0%, rgba(2,4,10,0.55) 55%, rgba(2,4,10,0) 100%);
}

.cc-hero-inner { position: relative; z-index: 5; }
.cc-brand {
  font-size: 15px; font-weight: 700; letter-spacing: 12px; text-transform: uppercase;
  color: var(--text-primary); opacity: 0;
  animation: ccUp 1s ease-out 0.2s forwards;
  margin-bottom: 18px; padding-left: 12px;
  text-shadow: 0 0 30px rgba(126,200,227,0.4);
}

/* ── 3D SLOT — hero. Drop your 3D element/canvas inside #hero3d.
   Fully transparent: no box, no backing. ── */
.cc-hero-3d {
  position: relative; z-index: 2;
  width: min(960px, 96vw);
  height: clamp(340px, 52vh, 640px);
  margin: 4px auto 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
  background: transparent !important; border: none !important;
}
.cc-hero-3d.hero3d-loaded { opacity: 1; transform: translateY(0); }
.cc-hero-3d canvas { width: 100% !important; height: 100% !important; display: block; background: transparent !important; }
.cc-hero-3d-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  animation: ccPulse 1.4s ease-in-out infinite;
}
/* hide the Loading… label on ANY 3D slot once its model is in */
.hero3d-loaded .cc-hero-3d-loading { display: none !important; }
@keyframes ccPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }

.cc-tagline {
  font-family: 'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-size: clamp(28px, 6vw, 52px); font-weight: 700; line-height: 1.08;
  letter-spacing: 0.5px; color: var(--text-primary);
  opacity: 0; animation: ccUp 1s ease-out 0.45s forwards; margin-bottom: 22px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.cc-tagline .cc-grad {
  background: linear-gradient(120deg, var(--intro-accent), var(--intro-accent-2), var(--intro-accent));
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px var(--accent-glow));
  animation: gradDrift 7s ease-in-out infinite;
}
@keyframes gradDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cc-hero-sub {
  max-width: 540px; margin: 0 auto 32px; color: var(--text-secondary);
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6;
  opacity: 0; animation: ccUp 1s ease-out 0.6s forwards;
}

/* Enter button — glass shimmer */
.cc-enter-btn {
  display: inline-block; text-decoration: none;
  position: relative; overflow: hidden; cursor: pointer;
  padding: 18px 52px; border-radius: 50px;
  background: rgba(126,200,227,0.10);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  color: var(--text-primary); font-family: inherit; font-weight: 600; font-size: 15px;
  letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--border-hover);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
  opacity: 0; animation: ccUp 1s ease-out 0.8s forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.cc-enter-btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: ccShimmer 3s ease-in-out infinite;
}
@keyframes ccShimmer { 0% { left: -100%; } 100% { left: 100%; } }
.cc-enter-btn:hover {
  transform: scale(1.07) translateY(-2px);
  background: rgba(126,200,227,0.18);
  border-color: var(--intro-accent);
  box-shadow: 0 8px 44px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 60px var(--accent-glow);
}
.cc-enter-btn:active { transform: scale(1.0); }

/* Scroll cue */
.cc-scroll-cue {
  position: absolute; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; margin: 0 auto;
}
/* Desktop: tighter hero so the scroll arrow is always clearly visible */
@media (min-width: 769px) {
  .cc-hero { padding: 36px 24px 150px; }
  .cc-hero-3d { height: clamp(280px, 40vh, 480px); margin: 0 auto; }
  .cc-tagline { font-size: clamp(26px, 4.6vw, 46px); margin-bottom: 16px; }
  .cc-hero-sub { margin-bottom: 24px; }
  .cc-brand { margin-bottom: 10px; }
  .cc-scroll-cue { bottom: 34px; }
}
.cc-scroll-cue {
  width: max-content; z-index: 6; text-decoration: none;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; animation: ccCueIn 1s ease-out 1.3s forwards;
}
@keyframes ccCueIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cc-arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; margin: 0 auto; }
.cc-arrows svg { width: 26px; height: 26px; stroke: var(--intro-accent); fill: none; stroke-width: 2; }
.cc-arrows .cc-ar { animation: ccArrow 1.8s ease-in-out infinite; }
.cc-arrows .cc-ar:nth-child(2) { animation-delay: 0.2s; margin-top: -14px; opacity: 0.6; }
.cc-arrows .cc-ar:nth-child(3) { animation-delay: 0.4s; margin-top: -14px; opacity: 0.3; }
@keyframes ccArrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.cc-hint { margin-top: 8px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
@keyframes ccUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ══ SECTIONS — all transparent, one continuous surface, COMPACT ══ */
.section {
  position: relative; background: transparent;
  padding: 58px 24px;
}
.section-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 2; }
.section-label {
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; text-align: center;
}
.section-title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.3px;
  line-height: 1.15; margin-bottom: 12px; text-align: center;
}
.section-subtitle { color: var(--text-secondary); font-size: 1.02rem; max-width: 620px; margin: 0 auto 36px; text-align: center; }

/* Section fade-in reveal (Rival-style) */
.section-reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.section-reveal.in-view { opacity: 1; transform: translateY(0); }

/* CASCADE — children float up one after another as the section reveals */
.section-reveal .card-grid > div,
.section-reveal .industry-grid > div,
.section-reveal .tier-grid > div,
.section-reveal .work-grid > div {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.section-reveal.in-view .card-grid > div,
.section-reveal.in-view .industry-grid > div,
.section-reveal.in-view .tier-grid > div,
.section-reveal.in-view .work-grid > div { opacity: 1; transform: translateY(0); }
.section-reveal.in-view .card-grid > div:nth-child(2),
.section-reveal.in-view .industry-grid > div:nth-child(2),
.section-reveal.in-view .tier-grid > div:nth-child(2),
.section-reveal.in-view .work-grid > div:nth-child(2) { transition-delay: 0.14s; }
.section-reveal.in-view .card-grid > div:nth-child(3),
.section-reveal.in-view .tier-grid > div:nth-child(3),
.section-reveal.in-view .work-grid > div:nth-child(3) { transition-delay: 0.28s; }
.section-reveal.in-view .card-grid > div:nth-child(4) { transition-delay: 0.42s; }
/* hover transform must win over the cascade transition */
.section-reveal.in-view .card-grid > div, .section-reveal.in-view .tier-grid > div { transition-property: opacity, transform; }

/* icons draw themselves on as they appear */
.section-reveal .card-icon svg * { stroke-dasharray: 90; stroke-dashoffset: 90; }
.section-reveal.in-view .card-icon svg * { animation: drawIn 1.6s cubic-bezier(0.6,0,0.3,1) forwards; }
.section-reveal.in-view .card-grid > div:nth-child(2) .card-icon svg * { animation-delay: 0.15s; }
.section-reveal.in-view .card-grid > div:nth-child(3) .card-icon svg * { animation-delay: 0.3s; }
.section-reveal.in-view .card-grid > div:nth-child(4) .card-icon svg * { animation-delay: 0.45s; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) { .section-reveal, .section-reveal * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } }

/* ══ FLOATING ELEMENTS — no boxes, everything breathes ══ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.glass-card {
  background: transparent; border: none; padding: 8px 4px;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.glass-card:hover { transform: translateY(-10px); }
.glass-card:hover .card-icon { filter: drop-shadow(0 0 18px var(--accent-glow)) drop-shadow(0 0 8px rgba(143,211,244,0.5)); transform: translateY(-2px) scale(1.06); }
.card-icon {
  width: 44px; height: 44px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  animation: floatSoft 7s ease-in-out infinite;
  transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.card-icon svg { width: 34px; height: 34px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.card-grid > div:nth-child(2) .card-icon { animation-delay: 1.2s; }
.card-grid > div:nth-child(3) .card-icon { animation-delay: 2.4s; }
@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.glass-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.2px; }
.glass-card p { color: var(--text-secondary); font-size: 0.93rem; }
.glass-card ul { list-style: none; margin-top: 16px; }
.glass-card li { color: var(--text-secondary); font-size: 0.87rem; padding: 5px 0; position: relative; transition: color 0.4s ease, padding-left 0.5s cubic-bezier(0.16,1,0.3,1); }
.glass-card li:hover { color: var(--text-primary); padding-left: 10px; }

/* Industries — two floating halves */
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.industry-grid .glass-card { padding: 8px 4px; }
.industry-grid h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.4px; }
.chip-row { margin-top: 16px; color: var(--text-muted); font-size: 0.87rem; letter-spacing: 0.4px; line-height: 1.9; }

/* Process — 4 floating steps */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.process-num {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 10px;
  background: linear-gradient(150deg, rgba(143,211,244,0.85), rgba(167,139,250,0.45));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: filter 0.6s ease;
}
.glass-card:hover .process-num { filter: drop-shadow(0 0 16px var(--accent-glow)); }

/* Work — soft floating panels */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.work-card {
  aspect-ratio: 4/5; border-radius: 24px; border: none;
  background: linear-gradient(165deg, rgba(143,211,244,0.07), rgba(167,139,250,0.05) 60%, rgba(143,211,244,0.03));
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
  text-align: center; padding: 20px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), box-shadow 0.8s ease, color 0.4s ease;
}
/* light sheen sweeps across on hover */
.work-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: skewX(-12deg); transition: left 0.9s cubic-bezier(0.16,1,0.3,1);
}
.work-card:hover::before { left: 130%; }
.work-card:hover {
  transform: translateY(-8px) scale(1.02); color: var(--text-secondary);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 50px var(--accent-glow);
}

/* ── 3D SLOT — section (about). Drop your second 3D element in #about3d. ── */
.cc-section-3d {
  position: relative; z-index: 2;
  width: min(820px, 94vw);
  height: clamp(280px, 40vh, 460px);
  margin: 28px auto 6px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
  background: transparent !important; border: none !important;
}
.cc-section-3d.hero3d-loaded { opacity: 1; transform: translateY(0); }
.cc-section-3d canvas { width: 100% !important; height: 100% !important; display: block; background: transparent !important; }
.cc-section-3d-cap {
  text-align: center; color: var(--text-muted); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 auto 4px;
}

/* About */
.about-text { max-width: 680px; margin: 0 auto; text-align: center; }
.about-text p { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 16px; }
.about-text strong { color: var(--text-primary); }

/* ══ CTA — soft radial glow behind it (no hard clip lines) ══ */
#cta-section { position: relative; padding-bottom: 130px; }
#cta-section::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(900px, 130vw); height: min(900px, 130vw); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(126,200,227,0.10), rgba(167,139,250,0.05) 38%, rgba(167,139,250,0.0) 62%);
}
#cta-section .section-inner { position: relative; z-index: 1; text-align: center; }
.cta-brand {
  font-size: 13px; font-weight: 700; letter-spacing: 10px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 18px;
}

/* ══ CONTACT ══ */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; max-width: 1000px; margin: 0 auto; text-align: left; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form label { font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); margin-bottom: -6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 12px 2px; color: var(--text-primary); font-family: inherit; font-size: 0.96rem;
  outline: none; transition: border-color 0.5s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--accent); }
.contact-form select option { background: #0A0A0A; }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form button {
  margin-top: 6px; align-self: flex-start;
  position: relative; overflow: hidden; cursor: pointer;
  padding: 15px 44px; border-radius: 50px;
  background: rgba(126,200,227,0.10);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  color: var(--text-primary); font-family: inherit; font-weight: 600; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--border-hover);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.contact-form button:hover {
  transform: scale(1.04) translateY(-1px);
  background: rgba(126,200,227,0.18); border-color: var(--intro-accent);
  box-shadow: 0 8px 44px rgba(0,0,0,0.4), 0 0 60px var(--accent-glow);
}
.contact-aside h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.contact-aside p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 24px; }
.form-success { display: none; color: var(--green); font-weight: 600; margin-top: 6px; font-size: 0.9rem; }

/* ══ FOOTER ══ */
footer { border-top: 1px solid var(--border); padding: 36px 24px; background: transparent; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-brand { font-size: 12px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: var(--text-primary); }
footer p { color: var(--text-muted); font-size: 0.8rem; }
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--text-secondary); font-size: 0.85rem; }
.footer-social a:hover { color: var(--accent); }

/* ══ SECTION NEXT-ARROW — same chevron language as the hero cue ══ */
.sec-arrow {
  display: flex; flex-direction: column; align-items: center;
  width: max-content; margin: 34px auto 0; text-decoration: none;
  opacity: 0.55; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.sec-arrow:hover { opacity: 1; transform: translateY(4px); }
.sec-arrow svg { width: 22px; height: 22px; stroke: var(--intro-accent); fill: none; stroke-width: 2; }
.sec-arrow .cc-ar { animation: ccArrow 1.8s ease-in-out infinite; }
.sec-arrow .cc-ar:nth-child(2) { animation-delay: 0.2s; margin-top: -12px; opacity: 0.5; }

/* ══ SERVICES — 4 floating offers with transparent pricing ══ */
.card-grid.cols4 { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.price-tag {
  display: inline-block; margin-top: 14px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
  opacity: 0.85;
}

/* ══ INDUSTRIES — premium interactive halves ══ */
.industry-lede { text-align: center; color: var(--text-secondary); font-size: 1.05rem; max-width: 640px; margin: 0 auto 56px; }
.industry-lede strong { color: var(--text-primary); }
.industry-grid .glass-card { position: relative; padding: 28px 24px; border-radius: 24px; overflow: hidden; cursor: default; }
.industry-grid .glass-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; z-index: -1;
  background: radial-gradient(120% 120% at 30% 0%, rgba(143,211,244,0.10), rgba(167,139,250,0.04) 50%, transparent 80%);
  opacity: 0; transition: opacity 0.8s ease;
}
.industry-grid .glass-card:hover::before { opacity: 1; }
.industry-grid .glass-card:hover { transform: translateY(-8px); }
.industry-grid h3 {
  background: linear-gradient(120deg, var(--text-primary), var(--text-primary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background 0.6s ease;
}
.industry-grid .glass-card:hover h3 {
  background: linear-gradient(120deg, var(--intro-accent), var(--intro-accent-2));
  -webkit-background-clip: text; background-clip: text;
}
.industry-grid .glass-card:hover .chip-row { color: var(--text-secondary); }
.chip-row { transition: color 0.6s ease; }

/* ══ PROCESS — clickable journey, line segments BETWEEN the numbers ══ */
.process-wrap { position: relative; }
.process-track { display: none; }
.process-grid { position: relative; z-index: 1; }
.process-grid .glass-card { position: relative; cursor: pointer; opacity: 0.4; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
/* connector: starts after this card's number, ends before the next one */
.process-grid .glass-card:not(:last-child)::after {
  content: ""; position: absolute; top: 25px; left: 86px; right: -26px; height: 2px;
  background: rgba(143,211,244,0.10); border-radius: 2px;
  transition: background 0.7s ease, box-shadow 0.7s ease;
}
.process-grid .glass-card.lit::after {
  background: linear-gradient(90deg, var(--intro-accent), var(--intro-accent-2));
  box-shadow: 0 0 16px var(--accent-glow);
}
.process-grid .glass-card.active { opacity: 1; transform: translateY(-6px); }
.process-grid .glass-card.active .process-num {
  filter: drop-shadow(0 0 22px rgba(143,211,244,0.65));
}
.process-grid .glass-card.passed { opacity: 0.8; }
@media (max-width: 900px) {
  .process-grid .glass-card::after { display: none; }
}

/* ══ PRICING — floating transparent tiers ══ */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 4px; }
.tier { text-align: left; padding: 8px 4px; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.tier:hover { transform: translateY(-10px); }
.tier-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.tier-price { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.tier-price span { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.tier-desc { color: var(--text-secondary); font-size: 0.92rem; margin-top: 12px; }
.tier ul { list-style: none; margin-top: 14px; }
.tier li { color: var(--text-secondary); font-size: 0.87rem; padding: 4px 0; transition: color 0.4s, padding-left 0.5s cubic-bezier(0.16,1,0.3,1); }
.tier li:hover { color: var(--text-primary); padding-left: 8px; }
.pricing-note { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 40px; }

/* ══ WIZARD — one-question-at-a-time lead form ══ */
.wizard { max-width: 660px; margin: 0 auto; position: relative; min-height: 320px; }
.wiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 34px; }
.wiz-dot { width: 34px; height: 3px; border-radius: 3px; background: rgba(143,211,244,0.15); transition: background 0.5s ease, box-shadow 0.5s ease; }
.wiz-dot.on { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.wiz-step { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.wiz-step.on { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; }
.wiz-q { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.4px; text-align: center; margin-bottom: 8px; }
.wiz-hint { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 34px; }
.wiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wiz-opt {
  padding: 22px 20px; border-radius: 18px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.035); border: 1px solid transparent;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.5s ease;
}
.wiz-opt:hover { transform: translateY(-4px); background: rgba(255,255,255,0.06); }
.wiz-opt.sel {
  background: rgba(126,200,227,0.10); border-color: var(--border-hover);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 30px var(--accent-glow);
}
.wiz-opt h4 { font-size: 1.02rem; font-weight: 700; }
.wiz-opt p { color: var(--text-muted); font-size: 0.83rem; margin-top: 4px; }
.wiz-nav { display: flex; justify-content: center; gap: 14px; margin-top: 36px; }
.wiz-back {
  background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 0.85rem;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 12px 18px;
  transition: color 0.3s ease;
}
.wiz-back:hover { color: var(--text-primary); }
.wiz-fields { display: flex; flex-direction: column; gap: 14px; max-width: 440px; margin: 0 auto; }
.wiz-fields input, .wiz-fields textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  padding: 12px 2px; color: var(--text-primary); font-family: inherit; font-size: 0.98rem; outline: none;
  transition: border-color 0.5s ease;
}
.wiz-fields input:focus, .wiz-fields textarea:focus { border-bottom-color: var(--accent); }
.wiz-success { text-align: center; }
.wiz-success h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.wiz-success p { color: var(--text-secondary); }

/* ══ BOOKING — calendar + live transparent total ══ */
.booking-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; max-width: 1050px; margin: 0 auto; }
.bk-group { margin-bottom: 30px; }
.bk-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.bk-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-pill {
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
  color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid transparent;
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1);
}
.bk-pill:hover { color: var(--text-primary); transform: translateY(-2px); }
.bk-pill.sel { color: var(--text-primary); background: rgba(126,200,227,0.12); border-color: var(--border-hover); box-shadow: 0 0 24px var(--accent-glow); }
.bk-pill small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.bk-cal { user-select: none; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bk-cal-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.3px; }
.bk-cal-btn { background: none; border: none; color: var(--accent); font-size: 1.3rem; cursor: pointer; padding: 4px 12px; transition: transform 0.3s ease; }
.bk-cal-btn:hover { transform: scale(1.25); }
.bk-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.bk-dow span { text-align: center; font-size: 0.7rem; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.bk-day:hover:not(.off):not(.booked) { background: rgba(126,200,227,0.10); color: var(--text-primary); transform: scale(1.08); }
.bk-day.off { opacity: 0.18; cursor: default; }
.bk-day.booked { opacity: 0.25; cursor: not-allowed; text-decoration: line-through; }
.bk-day.sel { background: var(--accent); color: #000; font-weight: 700; box-shadow: 0 0 24px var(--accent-glow); }
.bk-summary { position: sticky; top: 100px; }
.bk-total { font-size: 2.8rem; font-weight: 800; letter-spacing: -1px; margin: 6px 0 2px; }
.bk-breakdown { color: var(--text-muted); font-size: 0.86rem; line-height: 1.8; margin-bottom: 22px; }
.bk-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.bk-fields input {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  padding: 11px 2px; color: var(--text-primary); font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color 0.5s ease;
}
.bk-fields input:focus { border-bottom-color: var(--accent); }
.bk-note { color: var(--text-muted); font-size: 0.78rem; margin-top: 14px; }
.bk-error { color: #E07A5F; font-size: 0.85rem; margin-top: 10px; display: none; }

/* ══ GROWTH ARROW slot in CTA ══ */
.cc-growth-3d {
  position: relative; z-index: 2; width: min(360px, 70vw); height: clamp(200px, 26vh, 300px);
  margin: 0 auto 8px; opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
  background: transparent !important; border: none !important;
}
.cc-growth-3d.hero3d-loaded { opacity: 1; transform: translateY(0); }
.cc-growth-3d canvas { width: 100% !important; height: 100% !important; display: block; background: transparent !important; }


/* step result chips */
.step-stat {
  display: inline-block; margin-top: 12px; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); opacity: 0.85;
}

/* featured pricing tier */
.tier { position: relative; }
.tier.featured {
  padding: 26px 24px; border-radius: 24px;
  background: radial-gradient(130% 130% at 50% 0%, rgba(143,211,244,0.09), rgba(167,139,250,0.04) 55%, transparent 90%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35), 0 0 50px rgba(143,211,244,0.06);
}
.tier-badge {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #000; background: linear-gradient(120deg, var(--intro-accent), var(--intro-accent-2));
  box-shadow: 0 0 24px var(--accent-glow);
}

/* ══ MOBILE — horizontal swipe carousels (boxless, centered) ══ */
@media (max-width: 768px) {
  .card-grid.cols4, .process-grid, .tier-grid, .work-grid {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;          /* swipe never chains to the page */
    gap: 18px; padding: 4px 12vw 18px; margin: 0 -18px; scroll-padding-inline: 12vw;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .card-grid.cols4::-webkit-scrollbar, .process-grid::-webkit-scrollbar,
  .tier-grid::-webkit-scrollbar, .work-grid::-webkit-scrollbar { display: none; }
  .card-grid.cols4 > div, .process-grid > div, .tier-grid > div {
    flex: 0 0 76%; scroll-snap-align: center; text-align: center;
  }
  .work-grid > div { flex: 0 0 62%; scroll-snap-align: center; aspect-ratio: 4/5; }
  .work-grid { padding-left: 19vw !important; padding-right: 19vw !important; scroll-padding-inline: 19vw; }
  .card-icon { margin-left: auto; margin-right: auto; }
  .glass-card ul { display: inline-block; text-align: left; }
  .tier-grid > div { text-align: center; }
  .tier ul { display: inline-block; text-align: left; }
  .process-grid .glass-card { opacity: 1; }
  .process-grid .glass-card::after { display: none; }
}


/* nav icons: text on desktop, compact icon pills on mobile */
.nav-link { display: inline-flex; align-items: center; gap: 7px; }
.nav-link svg { display: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
@media (max-width: 768px) {
  .navbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .nav-links { gap: 5px; }
  .nav-link svg { display: block; }
  .nav-link .nav-txt { display: none; }
  .nav-link { padding: 11px; border-radius: 50%; }
  .nav-link.active { background: rgba(255,255,255,0.14) !important; }
  /* keep the hero brand clear of the single-row icon bar */
  .cc-hero { padding-top: 84px; }
}


/* CTA centering (all devices) */
#cta-section .section-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
#cta-section .section-title, #cta-section .section-subtitle { width: 100%; }
#cta-section .cc-enter-btn { display: inline-block; }
#cta-section .cta-brand { padding-left: 10px; }

.grad-text {
  background: linear-gradient(120deg, var(--intro-accent), var(--intro-accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}


/* ══ BRAND MARQUEE — white silhouettes drifting, color on hover ══ */
.brand-marquee { overflow: hidden; margin-top: 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brand-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: brandScroll 36s linear infinite; }
.brand-marquee:hover .brand-track { animation-play-state: paused; }
.brand-track img {
  height: 40px; width: auto; max-width: 150px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.7;
  transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.brand-track img:hover { filter: none; opacity: 1; transform: scale(1.1); }
.brand-track img.brand-badge { filter: grayscale(1) brightness(1.65); }
.brand-track img.brand-badge:hover { filter: none; }
.brand-track img.brand-color { filter: none; opacity: 0.88; }
.brand-track img.brand-color:hover { opacity: 1; }
.brand-word {
  font-weight: 800; font-size: 1.05rem; letter-spacing: 3px; color: rgba(255,255,255,0.7);
  white-space: nowrap; transition: color 0.5s ease, transform 0.5s ease;
}
.brand-word:hover { color: var(--accent); transform: scale(1.08); }
@keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .brand-track { gap: 44px; } .brand-track img { height: 32px; } }

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .card-grid, .work-grid, .card-grid.cols4, .tier-grid { grid-template-columns: 1fr; }
  .card-grid.cols4 { gap: 44px; }
  .industry-grid { grid-template-columns: 1fr; gap: 44px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-track { display: none; }
  .booking-grid { grid-template-columns: 1fr; gap: 44px; }
  .bk-summary { position: static; }
  .wiz-opts { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .section { padding: 72px 18px; }
}
@media (max-width: 768px) {
  .cc-aurora { opacity: 0.42; }
  /* Bigger on phones: larger 3D, larger type, more presence */
  .cc-hero { min-height: 96vh; padding: 56px 14px 150px; }
  .cc-hero-3d { width: 100%; height: clamp(270px, 42vh, 400px); margin: 2px auto 0; }
  .cc-tagline { font-size: clamp(33px, 9vw, 50px); }
  .cc-hero-sub { font-size: 16.5px; max-width: 92%; }
  .cc-section-3d { width: 100%; height: clamp(250px, 36vh, 360px); margin: 14px auto 4px; }
  .cc-hero-3d, .cc-section-3d, .cc-hero-3d canvas, .cc-section-3d canvas { touch-action: none; }
  .section-title { font-size: clamp(1.9rem, 7.4vw, 2.4rem); }
  .section-subtitle { font-size: 1.06rem; }
  /* scroll cue sits lower — comfortably under the button, above the edge */
  .cc-scroll-cue { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .cc-brand { letter-spacing: 8px; font-size: 13px; }
  .cc-enter-btn { padding: 15px 38px; font-size: 13px; }
  .nav-link { font-size: 0.78rem; padding: 6px 10px; }
}
@media (max-width: 480px) {
  .cc-hero-3d { height: clamp(230px, 34vh, 320px); }
  .cc-section-3d { height: clamp(220px, 32vh, 320px); }
  .process-grid { grid-template-columns: 1fr; }
}

#cta-section .cc-enter-btn { align-self: center; margin-left: auto; margin-right: auto; display: inline-block; }
#cta-section .sec-arrow { align-self: center; }
#cta-section .cc-growth-3d { align-self: center; }

/* wizard Q1 — mini 3D holograms inside the options */
.wiz-opts-3 { grid-template-columns: 1fr 1fr 1fr; }
.wiz-opt-3d { text-align: center; }
.wiz-mini3d { width: 100%; height: 110px; margin-bottom: 8px; pointer-events: none; }
.wiz-mini3d canvas { width: 100% !important; height: 100% !important; display: block; background: transparent !important; }
@media (max-width: 768px) { .wiz-opts-3 { grid-template-columns: 1fr; } .wiz-mini3d { height: 90px; } }

/* pricing: breathing room on the $, tiny icons on every line */
.tier-price { display: flex; align-items: baseline; gap: 7px; }
.tier-price .cur { font-size: 1.25rem; font-weight: 700; color: var(--text-secondary); }
.tier li { display: flex; align-items: center; gap: 10px; }
.tier li svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; opacity: 0.85; }
@media (max-width: 768px) { .tier ul { text-align: left; } .tier li { justify-content: flex-start; } .tier-grid > div { text-align: left; } .tier-price { justify-content: flex-start; } }

/* ══ MOBILE CAROUSEL POLISH — everything centered, swipable, with buttons ══ */
.car-nav { display: none; }
.car-nav { align-items: center; }
.car-nav button {
  position: relative; overflow: hidden;
  width: 52px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(126,200,227,0.18);
  color: var(--accent); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.car-nav button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.car-nav button:active {
  transform: scale(0.88);
  background: rgba(126,200,227,0.22); border-color: var(--accent);
  box-shadow: 0 0 26px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.car-nav button:active svg { transform: scale(1.25); }
.car-dots { display: flex; gap: 7px; padding: 0 6px; }
.car-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(143,211,244,0.22);
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1);
}
.car-dot.on { width: 20px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
@media (max-width: 768px) {
  .section-inner { text-align: center; }
  .car-nav { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
  /* wizard options swipe horizontally (index form + book page) */
  .wiz-opts {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: 14px; padding: 4px 12vw 12px; margin: 0 -18px; scrollbar-width: none;
  }
  .wiz-opts::-webkit-scrollbar { display: none; }
  .wiz-opt { flex: 0 0 76%; scroll-snap-align: center; text-align: center; }
  /* reels: bigger, watchable, centered */
  .work-grid { padding-left: 8vw !important; padding-right: 8vw !important; scroll-padding-inline: 8vw; }
  .work-grid > div { flex: 0 0 84%; }
  /* brand wall: swipable row instead of auto-marquee */
  .brand-marquee {
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 18px -18px 0;
  }
  .brand-marquee::-webkit-scrollbar { display: none; }
  .brand-track { gap: 44px; padding: 6px 10px; }
  /* card contents fully centered */
  .glass-card ul { display: block; text-align: center; }
  .glass-card li { justify-content: center; }
  .tier ul { display: block; text-align: center; }
  .tier li { justify-content: center; }
  .tier-grid > div { text-align: center; }
  .tier-price { justify-content: center; }
  .chip-row, .price-tag, .step-stat { text-align: center; }
}

@media (max-width: 768px) {
  .card-grid.cols4 > div, .process-grid > div, .tier-grid > div, .work-grid > div, .wiz-opts > .wiz-opt {
    transition: none;                 /* JS follows the finger directly — pure liquid */
    will-change: opacity, transform;
  }
}

/* real reel embeds */
.work-card { aspect-ratio: 9/16; }
.work-card.work-embed { padding: 0; cursor: default; position: relative; overflow: hidden; background: #000; aspect-ratio: 9/16; }
/* CROP the Instagram chrome: header (~54px) sliced off the top, caption/footer
   pushed below the clip — only the video region shows */
.work-card.work-embed iframe {
  /* 9:16 card + 142% zoom = the vertical video fills the box EXACTLY at its
     original aspect ratio — no bars, no crop, chrome sliced away */
  position: absolute;
  width: 142.3%; left: -21.15%;
  top: -54px;
  height: calc(100% + 54px + 420px);
  border: 0; display: block; background: #000;
}
.work-card.work-embed::before { display: none; }   /* no sheen over video */
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr 1fr; } }