/* =========================================================================
   CA PRO Toolkit - marketing site (v2)
   Brand tokens mirror the product design-system (cream + teal + green).
   Consistent card system, richer sections, purposeful motion.
   Everything is fully gated by prefers-reduced-motion.
   ========================================================================= */

:root {
  --cream: #f4eedb;
  --cream-soft: #fbf8ee;
  --cream-strong: #e9dfbf;
  --surface: #fffdf7;
  --teal: #177184;
  --teal-dark: #0f5260;
  --teal-deep: #0a3f4b;
  --teal-soft: #deedf0;
  --green: #119d75;
  --green-dark: #0b7155;
  --green-soft: #dff2ea;
  --ink: #16323a;
  --muted: #52646b;
  --line: #cbd9d5;
  --line-soft: #e4dcc4;

  --grad: linear-gradient(135deg, var(--teal) 0%, var(--green) 100%);
  --grad-soft: linear-gradient(135deg, rgba(23,113,132,0.12), rgba(17,157,117,0.12));

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(16,50,58,0.05), 0 6px 16px rgba(16,50,58,0.06);
  --sh-md: 0 14px 34px rgba(16,50,58,0.11);
  --sh-lg: 0 30px 70px rgba(16,50,58,0.16);
  --sh-teal: 0 18px 44px rgba(23,113,132,0.28);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --base: 260ms;
  --slow: 560ms;

  --maxw: 1200px;
  --nav-h: 68px;
  --font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--cream);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: var(--teal-dark); text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
::selection { background: rgba(23,113,132,0.18); color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--teal-dark); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); transition: top var(--fast) var(--ease); }
.skip-link:focus { top: 12px; }

/* Scroll progress bar (scroll-driven, no JS scroll listener) */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 250; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad); }
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: progressGrow linear both; animation-timeline: scroll(root); }
  @keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(60px, 8.5vw, 112px); position: relative; }
.section-tight { padding-block: clamp(44px, 6vw, 76px); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-dark); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }

.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

h1, h2, h3, h4 { line-height: 1.09; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); color: var(--teal-deep); margin-top: 14px; }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
.lead { font-size: clamp(1rem, 1.35vw, 1.14rem); color: var(--muted); margin-top: 16px; }

.grad-text { background: var(--grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hue 8s var(--ease) infinite alternate; }
@keyframes hue { to { background-position: 100% 50%; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: var(--r-pill); padding: 13px 22px; font-weight: 700; font-size: 0.96rem; white-space: nowrap; cursor: pointer; transition: transform var(--fast) var(--ease), box-shadow var(--base) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn i { font-size: 1.15em; }
.btn-primary { background: var(--teal); color: #fffdf7; box-shadow: var(--sh-teal); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 22px 50px rgba(23,113,132,0.34); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--cream-soft); color: var(--teal-dark); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.btn-on-dark { background: #fffdf7; color: var(--teal-deep); box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
.btn-on-dark:hover { background: #fff; transform: translateY(-2px); }
.btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

/* ---------- Aurora background ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform; }
.aurora .a1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(23,113,132,0.42), transparent 62%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora .a2 { width: 40vw; height: 40vw; right: -12vw; top: 8vw; background: radial-gradient(circle, rgba(17,157,117,0.34), transparent 62%); animation: drift2 30s var(--ease) infinite alternate; }
.aurora .a3 { width: 38vw; height: 38vw; left: 32vw; bottom: -18vw; background: radial-gradient(circle, rgba(233,223,191,0.6), transparent 60%); animation: drift3 34s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(8vw, 10vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vw, 8vh) scale(1.08); } }
@keyframes drift3 { to { transform: translate(4vw, -8vh) scale(1.14); } }

/* ---------- Header / nav ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background-color var(--base) var(--ease), box-shadow var(--base) var(--ease), backdrop-filter var(--base) var(--ease); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header.is-scrolled { background: rgba(251,248,238,0.82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 0 rgba(203,217,213,0.9), 0 10px 30px rgba(16,50,58,0.06); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; color: var(--teal-deep); letter-spacing: -0.01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--sh-sm); }
.brand span { font-size: 1.05rem; line-height: 1.05; }
.brand small { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { position: relative; color: var(--ink); font-weight: 650; font-size: 0.92rem; padding: 9px 13px; border-radius: var(--r-sm); transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.nav-links a:hover { color: var(--teal-dark); background: rgba(23,113,132,0.08); }
.nav-links a.active { color: var(--teal-dark); }
.nav-links a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--cream-soft); color: var(--teal-dark); align-items: center; justify-content: center; font-size: 1.4rem; }

/* ---------- Consistent card system ---------- */
.grid { display: grid; gap: 20px; align-items: stretch; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.g-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--sh-sm); overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.g-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), rgba(23,113,132,0.10), transparent 62%); opacity: 0; transition: opacity var(--base) var(--ease); pointer-events: none; }
.g-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: rgba(23,113,132,0.4); }
.g-card:hover::before { opacity: 1; }
.g-card > * { position: relative; }
.g-ico { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; color: var(--teal-dark); background: var(--teal-soft); margin-bottom: 16px; flex: 0 0 auto; }
.g-card h3 { color: var(--teal-deep); }
.g-card p { color: var(--muted); font-size: 0.94rem; margin: 8px 0 0; }
.g-card .tag { position: absolute; top: 20px; right: 20px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); background: var(--green-soft); padding: 4px 9px; border-radius: var(--r-pill); }
.g-card.accent .g-ico { background: var(--green-soft); color: var(--green-dark); }

.chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip-list span { font-size: 0.72rem; font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); padding: 5px 10px; border-radius: var(--r-pill); }

/* ---------- Feature showcase (split, big) ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.showcase.rev .showcase-media { order: -1; }
.showcase h2 { margin-top: 12px; }
.showcase .feature-list { margin-top: 22px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.96rem; color: var(--ink); }
.feature-list li i { color: var(--green-dark); margin-top: 3px; flex: 0 0 auto; }

/* ---------- Product preview card ---------- */
.preview { position: relative; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-lg); padding: 18px; overflow: hidden; }
.preview::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0.7; pointer-events: none; }
.preview > * { position: relative; }
.preview-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.preview-bar b { margin-left: 6px; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.preview-bar .d { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.preview-bar .d:nth-child(1){ background:#e79a8f; } .preview-bar .d:nth-child(2){ background:#e6c56b; } .preview-bar .d:nth-child(3){ background:#8fce9f; }
.result-head { border-radius: var(--r-md); padding: 16px; color: #fff; background: linear-gradient(135deg, var(--teal-dark), var(--teal)); }
.result-head .topic { font-size: 1.24rem; font-weight: 800; letter-spacing: -0.01em; }
.result-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.result-chips .chip { background: rgba(255,255,255,0.22); color: #fff; padding: 5px 11px; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 800; }
.proc-list { margin-top: 14px; display: grid; gap: 8px; }
.proc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--cream-soft); border: 1px solid var(--line-soft); }
.proc .p-name { font-weight: 700; font-size: 0.86rem; color: var(--ink); }
.proc .sa { font-size: 0.72rem; font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.proc .sa.g { color: var(--green-dark); background: var(--green-soft); }
.preview-float { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-md); border: 1px solid var(--line); font-weight: 800; font-size: 0.82rem; color: var(--teal-deep); }
.preview-float i { color: var(--green); }
.float-anim { animation: floaty 5s var(--ease) infinite alternate; }
@keyframes floaty { to { transform: translateY(-10px); } }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(34px, 6vw, 66px)); padding-bottom: clamp(44px, 6vw, 84px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); color: var(--teal-deep); margin-top: 18px; }
.hero .lead { max-width: 31rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); font-size: 0.82rem; font-weight: 700; color: var(--teal-dark); }
.trust-chip i { color: var(--green-dark); }

/* ---------- Marquee ---------- */
.marquee-wrap { border-block: 1px solid var(--line-soft); background: rgba(251,248,238,0.6); padding-block: 22px; overflow: hidden; }
.marquee-label { text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.marquee-fade { position: relative; }
.marquee-fade::before, .marquee-fade::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee-fade::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.marquee-fade::after { right: 0; background: linear-gradient(270deg, var(--cream), transparent); }
.marquee { display: flex; width: max-content; animation: scrollx 34s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee .track { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.marquee .m-item { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--teal-dark); font-size: 0.98rem; white-space: nowrap; }
.marquee .m-item i { color: var(--green); font-size: 0.6rem; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- AI pipeline band ---------- */
.band-dark { position: relative; background: radial-gradient(120% 120% at 12% 0%, var(--teal-dark), var(--teal-deep) 70%); color: #fff; overflow: hidden; }
.band-dark::after { content: ""; position: absolute; right: -10%; top: -20%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(17,157,117,0.32), transparent 62%); filter: blur(30px); pointer-events: none; }
.band-dark .container { position: relative; }
.band-dark .eyebrow { color: #8fd8c6; }
.band-dark .eyebrow::before { background: linear-gradient(90deg, #8fd8c6, transparent); }
.band-dark h2 { color: #fff; }
.band-dark .lead { color: rgba(233,245,245,0.84); }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.pipeline { display: grid; gap: 12px; margin-top: 26px; }
.pl-step { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.pl-step .n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.12); color: #8fd8c6; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.pl-step b { color: #fff; }
.pl-step p { margin: 3px 0 0; color: rgba(233,245,245,0.78); font-size: 0.9rem; }
.pl-step .pulse { margin-left: auto; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(17,157,117,0.6); animation: pulse 2s var(--ease) infinite; }
.pl-step:nth-child(2) .pulse { animation-delay: 0.4s; } .pl-step:nth-child(3) .pulse { animation-delay: 0.8s; } .pl-step:nth-child(4) .pulse { animation-delay: 1.2s; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(17,157,117,0.5); } 70% { box-shadow: 0 0 0 9px rgba(17,157,117,0); } 100% { box-shadow: 0 0 0 0 rgba(17,157,117,0); } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.steps::before { content: ""; position: absolute; top: 46px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px); z-index: 0; }
.step { position: relative; z-index: 1; padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); height: 100%; }
.step .step-n { width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; box-shadow: var(--sh-teal); }
.step h3 { margin-top: 18px; color: var(--teal-deep); }
.step p { color: var(--muted); font-size: 0.94rem; margin-top: 8px; }

/* ---------- Impact stats ---------- */
.impact-band { background: linear-gradient(135deg, var(--cream-soft), var(--surface)); border-block: 1px solid var(--line-soft); }
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.impact .stat { text-align: center; padding: 26px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); height: 100%; }
.impact .stat strong { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; color: var(--teal-deep); letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.impact .stat span { display: block; margin-top: 6px; font-size: 0.9rem; font-weight: 650; color: var(--muted); }

/* ---------- Works with (integrations) ---------- */
.works { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.work-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); text-align: center; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.work-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.work-tile i { font-size: 1.8rem; color: var(--teal-dark); }
.work-tile span { font-size: 0.8rem; font-weight: 700; color: var(--muted); }

/* ---------- Split (firms) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.firm-card { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-md); padding: 26px; }
.firm-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--cream-soft); border: 1px solid var(--line-soft); }
.firm-row + .firm-row { margin-top: 12px; }
.firm-row .av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; }
.firm-row .meta b { display: block; color: var(--ink); font-size: 0.95rem; }
.firm-row .meta span { font-size: 0.8rem; color: var(--muted); }
.firm-row .role { margin-left: auto; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-dark); background: var(--teal-soft); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md); border: 1px dashed var(--teal); background: var(--teal-soft); }
.code-chip code { font-weight: 800; letter-spacing: 0.22em; color: var(--teal-deep); font-size: 1.05rem; }

/* ---------- Before / After ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-col { height: 100%; border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.compare-col.before { background: var(--surface); }
.compare-col.after { background: linear-gradient(160deg, var(--teal-dark), var(--teal-deep)); color: #fff; border-color: transparent; box-shadow: var(--sh-md); }
.compare-col h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.compare-col.before h3 { color: var(--ink); }
.compare-col.after h3 { color: #fff; }
.compare-col ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.compare-col li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.94rem; }
.compare-col.before li { color: var(--muted); }
.compare-col.after li { color: rgba(233,245,245,0.92); }
.compare-col li i { flex: 0 0 auto; margin-top: 2px; }
.compare-col.before li i { color: #b98a8a; }
.compare-col.after li i { color: #8fd8c6; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-sm); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 750; color: var(--teal-deep); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: 0 0 auto; color: var(--teal); transition: transform var(--base) var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 20px 18px; color: var(--muted); font-size: 0.95rem; }

/* ---------- CTA ---------- */
.cta-inner { position: relative; border-radius: var(--r-xl); padding: clamp(38px, 6vw, 72px); text-align: center; background: radial-gradient(120% 140% at 50% 0%, var(--teal), var(--teal-deep) 78%); color: #fff; box-shadow: var(--sh-lg); overflow: hidden; }
.cta-inner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 100%, rgba(17,157,117,0.4), transparent 60%); pointer-events: none; }
.cta-inner > * { position: relative; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: rgba(233,245,245,0.86); max-width: 520px; margin: 14px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-deep); color: rgba(233,245,245,0.72); padding-block: 56px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.site-footer .brand span, .site-footer .brand { color: #fff; }
.site-footer .brand small { color: rgba(233,245,245,0.6); }
.footer-about { max-width: 300px; margin-top: 16px; font-size: 0.9rem; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
.footer-col a { display: block; color: rgba(233,245,245,0.72); padding: 6px 0; font-size: 0.92rem; transition: color var(--fast) var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; }
.footer-bottom .disclaimer { max-width: 620px; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- Legal pages ---------- */
.legal-hero { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 24px; }
.legal-hero .eyebrow { margin-bottom: 10px; }
.legal-wrap { max-width: 820px; margin-inline: auto; }
.legal-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: clamp(24px, 4vw, 46px); margin-bottom: 80px; }
.legal-body h2 { font-size: 1.3rem; color: var(--teal-deep); margin-top: 34px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.02rem; color: var(--teal-dark); margin-top: 22px; }
.legal-body p, .legal-body li { color: var(--ink); font-size: 0.96rem; line-height: 1.75; }
.legal-body ul { padding-left: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--teal); font-weight: 650; }
.legal-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 6px; }
.legal-toc a { font-size: 0.82rem; font-weight: 700; color: var(--teal-dark); background: var(--teal-soft); padding: 6px 12px; border-radius: var(--r-pill); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .band-grid, .split, .showcase { grid-template-columns: 1fr; }
  .showcase.rev .showcase-media { order: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .impact { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about-col { grid-column: span 2; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.menu-open { background: var(--cream-soft); box-shadow: var(--sh-md); }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: var(--nav-h); left: 0; right: 0; padding: 14px 24px 20px; background: var(--cream-soft); border-bottom: 1px solid var(--line); box-shadow: var(--sh-md); }
  .nav-links.open a { padding: 12px; }
  .nav-links.open a.active::after { display: none; }
  .hero h1 { font-size: clamp(2.1rem, 8.4vw, 2.7rem); }
  .grid-2, .grid-3, .grid-4, .compare { grid-template-columns: 1fr; }
  .impact { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-about-col { grid-column: span 1; }
  .nav-cta .btn .hide-sm { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span, .marquee, .grad-text, .float-anim, .pl-step .pulse, .scroll-progress { animation: none !important; }
  .grad-text { background-position: 0 50% !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .g-card, .step, .firm-card, .preview, .legal-body, .compare-col, .work-tile, .impact .stat { border: 1px solid CanvasText; }
}

/* =========================================================================
   v3 - 3D / immersive upgrade layer
   Additive only. Legacy classes above are untouched so privacy/terms keep
   working. Everything here is gated by prefers-reduced-motion further down.
   ========================================================================= */

:root {
  --hero-ink: #02171c;
  --hero-mint: #7fe3cf;
  --hero-line: rgba(255,255,255,0.14);
  --glass-bg: rgba(255,255,255,0.08);
  --glass-brd: rgba(255,255,255,0.16);
  --z-grain: 60;
  --z-nav: 100;
}

/* ---------- Fine grain overlay (fixed, never on scroll containers) ---------- */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Glass utility ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 24px 60px rgba(0,0,0,0.34);
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(4,34,42,0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 3D tilt + magnetic (JS-driven custom props) ---------- */
.tilt { transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transform-style: preserve-3d; transition: transform var(--base) var(--ease); will-change: transform; }
.magnetic { will-change: transform; }

/* =========================================================================
   Immersive 3D hero (dark band, replaces the light hero on the home page)
   ========================================================================= */
.hero-3d {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  min-height: 100dvh; display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(28px, 5vh, 56px));
  padding-bottom: clamp(48px, 8vh, 96px);
  background:
    radial-gradient(1200px 620px at 80% 6%, rgba(17,157,117,0.30), transparent 60%),
    radial-gradient(1000px 720px at 6% 96%, rgba(23,113,132,0.40), transparent 62%),
    linear-gradient(180deg, #06303a 0%, #02171c 58%, #01121a 100%);
}
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-3d::after { /* subtle grounding vignette; flows seamlessly into the dark marquee below */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px, 10vh, 130px);
  z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.22));
}
.hero-3d .container { position: relative; z-index: 2; }
.hero-3d .hero-grid { grid-template-columns: 1.02fr 0.98fr; }

.hero-3d .eyebrow { color: var(--hero-mint); }
.hero-3d .eyebrow::before { background: linear-gradient(90deg, var(--hero-mint), transparent); }
.hero-3d h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.28); }
.hero-3d .lead { color: rgba(226,244,242,0.82); }
.hero-3d .grad-text { background: linear-gradient(110deg, #8ff0da 0%, #46c6a4 45%, #63d2e6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-3d .trust-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: #eafaf6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; }
.hero-3d .trust-chip i { color: var(--hero-mint); }
.hero-3d .btn-primary { background: var(--grad); box-shadow: 0 18px 46px rgba(17,157,117,0.42); }
.hero-3d .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 24px 60px rgba(17,157,117,0.5); }
.hero-3d .btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.26); }
.hero-3d .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.14); box-shadow: none; }

/* Hero product preview floating over the 3D scene */
.hero-visual { position: relative; }
.hero-visual::before { /* glow puddle behind the card */
  content: ""; position: absolute; inset: -8% -6% -14% -6%; z-index: 0;
  background: radial-gradient(60% 60% at 60% 40%, rgba(17,157,117,0.42), transparent 70%);
  filter: blur(26px); opacity: 0.9; pointer-events: none;
}
.hero-visual .preview { position: relative; z-index: 1; }

/* ---------- Header states over the dark hero (home only) ---------- */
.site-header.on-hero:not(.is-scrolled) .brand,
.site-header.on-hero:not(.is-scrolled) .brand span { color: #fff; }
.site-header.on-hero:not(.is-scrolled) .brand small { color: rgba(255,255,255,0.66); }
.site-header.on-hero:not(.is-scrolled) .nav-links a { color: rgba(255,255,255,0.86); }
.site-header.on-hero:not(.is-scrolled) .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.10); }
.site-header.on-hero:not(.is-scrolled) .nav-links a.active { color: #fff; }
.site-header.on-hero:not(.is-scrolled) .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }

/* =========================================================================
   Section depth polish
   ========================================================================= */
/* Soft top hairline glow to separate light sections with rhythm */
.section.glow-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23,113,132,0.35), transparent);
}

/* Feature cards: subtle top accent line that grows on hover */
.g-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad); opacity: 0.9;
  transition: transform var(--base) var(--ease);
}
.g-card:hover::after { transform: scaleX(1); }

/* Marquee is restyled as a dark band in the v4 layer below. */

/* Enhanced dark CTA with orbiting glow already present; add ring */
.cta-inner { border: 1px solid rgba(255,255,255,0.08); }

/* =========================================================================
   GSAP-driven entrance states (safe fallback: visible if JS/GSAP absent)
   These only take effect once <html> gets .gsap-ready from motion.js.
   ========================================================================= */
.gsap-ready [data-anim] { opacity: 0; will-change: transform, opacity; }
.gsap-ready [data-anim="up"] { transform: translateY(34px); }
.gsap-ready [data-anim="scale"] { transform: scale(0.94); }
.gsap-ready [data-anim="left"] { transform: translateX(-40px); }
.gsap-ready [data-anim="right"] { transform: translateX(40px); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .hero-3d { min-height: auto; padding-top: calc(var(--nav-h) + 26px); }
  .hero-3d .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 8px; }
}
@media (max-width: 640px) {
  .hero-3d { padding-bottom: 56px; }
  .hero-visual::before { display: none; }
  .grain { display: none; }
}

/* =========================================================================
   Reduced motion / accessibility additions
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .gsap-ready [data-anim] { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  .hero-3d { background: Canvas; color: CanvasText; }
  .glass { border: 1px solid CanvasText; }
}

/* =========================================================================
   v4 - deeper motion + creative polish
   - Fixes the hero -> content seam (dark marquee, no muddy cream fade)
   - Cinematic 3D tilt-in reveal, richer hovers, animated accents everywhere
   - Additive only; fully gated by prefers-reduced-motion at the very end.
   ========================================================================= */

/* Keep real section content above the decorative section glows added below */
.section > .container { position: relative; z-index: 1; }

/* ---------- Cinematic reveal (upgrades the flat fade-up to a 3D tilt-in) --- */
[data-reveal] {
  opacity: 0;
  transform: perspective(1200px) translateY(48px) rotateX(7deg) scale(0.986);
  transform-origin: 50% 100%;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- Dark marquee: seamless continuation of the hero --------------- */
.marquee-wrap {
  background: linear-gradient(180deg, #01121a 0%, #04202a 100%);
  border-block: 1px solid rgba(255,255,255,0.06);
}
.marquee-wrap .marquee-label { color: rgba(214,238,232,0.55); }
.marquee .m-item { color: #d7f0ea; transition: color var(--fast) var(--ease); }
.marquee .m-item i { color: var(--hero-mint); }
.marquee-fade::before { background: linear-gradient(90deg, #021920, transparent); }
.marquee-fade::after { background: linear-gradient(270deg, #021920, transparent); }

/* ---------- Decorative section glows (depth, zero weight) ----------------- */
#features, #roles, #security, #integrations, #firm { position: relative; overflow: hidden; }
#features::before, #security::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 42vw; height: 42vw; top: -14vw; right: -12vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(23,113,132,0.10), transparent 62%);
}
#roles::before, #integrations::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 44vw; height: 44vw; bottom: -16vw; left: -14vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(17,157,117,0.10), transparent 62%);
}

/* ---------- Nav: animated underline on hover + active --------------------- */
.nav-links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--base) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.site-header.on-hero:not(.is-scrolled) .nav-links a::after { background: linear-gradient(90deg, var(--hero-mint), #63d2e6); }

/* ---------- Buttons: light sweep on hover --------------------------------- */
.btn-primary, .btn-on-dark { position: relative; overflow: hidden; }
.btn-primary::after, .btn-on-dark::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-on-dark:hover::after { animation: btnSweep 0.9s var(--ease); }
@keyframes btnSweep { to { left: 150%; } }

/* ---------- Feature/role/security cards: lively icon + heading ------------ */
.g-card .g-ico { transition: transform var(--base) var(--ease), background var(--base) var(--ease), color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.g-card:hover .g-ico { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: var(--grad); color: #fff; box-shadow: var(--sh-teal); }
.g-card:hover h3 { color: var(--teal); }

/* ---------- Steps: flowing connector + glowing number badge --------------- */
.steps::before {
  background: linear-gradient(90deg, var(--teal), var(--green), var(--teal));
  background-size: 200% 100%; height: 3px; opacity: 0.55;
  animation: flowLine 3.5s linear infinite;
}
@keyframes flowLine { to { background-position: 200% 0; } }
.step { transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.step .step-n { animation: badgeGlow 3s var(--ease) infinite; }
@keyframes badgeGlow { 0%, 100% { box-shadow: var(--sh-teal); } 50% { box-shadow: 0 12px 32px rgba(17,157,117,0.55); } }

/* ---------- Impact stats: hover lift + accent bar ------------------------- */
.impact .stat { position: relative; overflow: hidden; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.impact .stat:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.impact .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0.25); transform-origin: 50%; transition: transform var(--base) var(--ease); }
.impact .stat:hover::before { transform: scaleX(1); }

/* ---------- Work tiles: bouncy icon --------------------------------------- */
.work-tile i { transition: transform var(--base) var(--ease), color var(--base) var(--ease); }
.work-tile:hover i { transform: translateY(-3px) scale(1.16); color: var(--green-dark); }

/* ---------- Preview cards: sheen sweep on hover --------------------------- */
.preview::after {
  content: ""; position: absolute; top: 0; left: -45%; width: 40%; height: 100%; z-index: 4;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-16deg); pointer-events: none; opacity: 0;
}
.preview:hover::after { animation: previewSheen 1.1s var(--ease); }
@keyframes previewSheen { 0% { left: -45%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* ---------- Firm rows: hover slide ---------------------------------------- */
.firm-row { transition: transform var(--base) var(--ease), background var(--base) var(--ease); }
.firm-row:hover { transform: translateX(5px); background: var(--surface); }

/* ---------- Compare after-card glow --------------------------------------- */
.compare-col.after { position: relative; overflow: hidden; }
.compare-col.after::after { content: ""; position: absolute; z-index: 0; right: -20%; bottom: -30%; width: 60%; height: 82%; border-radius: 50%; background: radial-gradient(circle, rgba(17,157,117,0.4), transparent 62%); filter: blur(24px); pointer-events: none; }
.compare-col.after > * { position: relative; z-index: 1; }

/* ---------- FAQ hover ----------------------------------------------------- */
.faq details { transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.faq details:hover { border-color: rgba(23,113,132,0.4); box-shadow: var(--sh-md); }
.faq details[open] { border-color: rgba(23,113,132,0.5); box-shadow: var(--sh-md); }
.faq summary:hover { color: var(--teal); }

/* ---------- CTA: slow rotating light behind the content ------------------- */
.cta-inner { position: relative; overflow: hidden; }
.cta-inner::before { content: ""; position: absolute; z-index: 0; inset: -60%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.08) 40deg, transparent 120deg, transparent 360deg); animation: ctaSpin 16s linear infinite; pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
@keyframes ctaSpin { to { transform: rotate(360deg); } }

/* ---------- Centered section headings: animated gradient underline -------- */
.section-head.center h2 { position: relative; display: inline-block; }
.section-head.center h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px;
  width: 54px; height: 4px; border-radius: 4px; background: var(--grad); background-size: 200% 100%;
  animation: hue 6s var(--ease) infinite alternate;
}

/* =========================================================================
   v4 reduced-motion / accessibility guards
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .steps::before, .step .step-n, .cta-inner::before, .section-head.center h2::after { animation: none !important; }
  .btn-primary::after, .btn-on-dark::after, .preview::after { animation: none !important; display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   v5 - globe hero, deeper motion, and every-scenario hardening
   Additive only. Legacy classes stay intact so privacy/terms keep working.
   ========================================================================= */

/* ---------- Hero composition -------------------------------------------------
   The globe is the hero's single visual. A product card used to sit in the
   right column, but at every width it either covered the globe's centre or got
   crowded by the headline. The same card already appears in the Features
   showcase, so the hero now reads: statement on the left, globe on the right.
   ---------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .hero-3d .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr); align-items: center; }
  .hero-3d .hero-copy { max-width: 660px; }
}

/* Stacked layouts: the globe becomes a planet rising below the copy, so it
   never sits behind the text. The extra bottom padding is its room. */
@media (max-width: 980px) {
  .hero-3d { padding-bottom: clamp(200px, 38vh, 300px); }
  .hero-3d .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Word-by-word headline reveal --------------------------------- */
.hero-3d h1 .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
/* Covers both plain words and the gradient span, which animates as one unit. */
.hero-3d h1 .word > * { display: inline-block; will-change: transform; }

/* ---------- Scroll cue --------------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vh, 30px);
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(226, 244, 242, 0.82);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.scroll-cue:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.12); }
.scroll-cue i { animation: cueBob 1.9s var(--ease) infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 980px) { .scroll-cue { display: none; } }

/* ---------- Section heading rule draws in (GSAP animates --rule) --------- */
.section-head.center h2::after {
  transform: translateX(-50%) scaleX(var(--rule, 1));
  transform-origin: 50% 50%;
}

/* ---------- Answer block: plain, quotable copy for people and for AI ----- */
.answer-block {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface), #fff);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.answer-block > p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.72; }
.answer-block > p strong { color: var(--ink); }
.answer-block dl { display: grid; gap: 14px; margin: 4px 0 0; }
.answer-block dt { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.answer-block dd { margin: 4px 0 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; }

/* ---------- CSS-only globe, used when WebGL is unavailable --------------- */
.globe-fallback { display: none; }
.no-webgl .globe-fallback {
  display: block;
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8%;
  width: min(430px, 62vw);
  aspect-ratio: 1;
  transform: translateY(-52%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(127, 227, 207, 0.28), transparent 42%),
    radial-gradient(circle at 50% 50%, #073540 0%, #04202a 58%, #01151c 100%);
  box-shadow:
    0 0 70px rgba(53, 214, 192, 0.22),
    inset -26px -18px 70px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(127, 227, 207, 0.35);
  overflow: hidden;
}
.no-webgl .globe-fallback::before,
.no-webgl .globe-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* latitude and longitude bands, no images needed */
  background:
    repeating-linear-gradient(to bottom, rgba(127, 227, 207, 0.16) 0 1px, transparent 1px 11%),
    repeating-linear-gradient(to right, rgba(99, 210, 230, 0.12) 0 1px, transparent 1px 9%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
}
.no-webgl .globe-fallback::after {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(127, 227, 207, 0.12) 60deg, transparent 140deg, transparent 360deg);
  animation: globeSweep 18s linear infinite;
}
@keyframes globeSweep { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  .no-webgl .globe-fallback { right: 50%; transform: translate(50%, -50%); width: min(340px, 70vw); }
}

/* ---------- Extra depth on the dark bands -------------------------------- */
.band-dark { background-size: 100% 130%; }
.impact-band { background-size: 100% 130%; }

/* ---------- Focus visibility (keyboard users) ---------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero-3d :where(a, button):focus-visible,
.band-dark :where(a, button):focus-visible,
.cta-inner :where(a, button):focus-visible {
  outline-color: var(--hero-mint);
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i,
  .no-webgl .globe-fallback::after { animation: none !important; }
  .hero-3d h1 .word > * { transform: none !important; }
}

/* ---------- Print: a clean, readable document ---------------------------- */
@media print {
  .site-header, .scroll-progress, .grain, .aurora, .hero-canvas, .scroll-cue,
  .marquee-wrap, .nav-toggle, .globe-fallback { display: none !important; }
  body { background: #fff; color: #000; }
  .hero-3d { min-height: auto; padding: 24px 0; background: #fff !important; color: #000; }
  .hero-3d h1, .hero-3d .lead, .hero-3d .eyebrow { color: #000 !important; }
  .hero-3d .grad-text { -webkit-text-fill-color: #000; color: #000; }
  .section, .section-tight { padding: 18px 0; }
  [data-reveal], [data-anim] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* =========================================================================
   v6 - hero repainted around #2596be, labelled globe, tighter FAQ seam
   ========================================================================= */

:root {
  --hero-primary: #2596be;
  --hero-primary-deep: #14657f;
  --hero-primary-light: #8ad8f0;
  /* Re-point the hero accent (used by eyebrow, chips, cue, focus rings). */
  --hero-mint: #8ad8f0;
  --hero-ink: #041d2b;
}

/* ---------- Hero surface -------------------------------------------------- */
.hero-3d {
  background:
    radial-gradient(1200px 620px at 78% 4%, rgba(37, 150, 190, 0.34), transparent 60%),
    radial-gradient(1000px 720px at 4% 96%, rgba(20, 101, 127, 0.44), transparent 62%),
    linear-gradient(180deg, #0a3a4c 0%, #06283a 56%, #041d2b 100%);
}
.hero-3d .grad-text {
  background: linear-gradient(108deg, #a9e6f8 0%, #4fc3e8 46%, #2596be 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-3d .btn-primary {
  background: linear-gradient(135deg, #2596be 0%, #14657f 100%);
  box-shadow: 0 18px 46px rgba(37, 150, 190, 0.42);
}
.hero-3d .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 24px 60px rgba(37, 150, 190, 0.5);
}
.hero-3d .trust-chip i { color: var(--hero-primary-light); }
.hero-3d .eyebrow::before { background: linear-gradient(90deg, var(--hero-primary-light), transparent); }

/* Marquee continues the hero, so it follows the same blue. */
.marquee-wrap {
  background: linear-gradient(180deg, #041d2b 0%, #072b3c 100%);
}
.marquee-fade::before { background: linear-gradient(90deg, #05222f, transparent); }
.marquee-fade::after { background: linear-gradient(270deg, #05222f, transparent); }
.marquee .m-item i { color: var(--hero-primary-light); }

/* Header over the hero keeps the blue accent. */
.site-header.on-hero:not(.is-scrolled) .nav-links a::after {
  background: linear-gradient(90deg, var(--hero-primary-light), #2596be);
}

/* ---------- Globe labels -------------------------------------------------- */
.globe-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.globe-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: -11px 0 0 -4px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 260ms linear;
  will-change: transform, opacity;
}
.globe-label-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hero-primary-light);
  box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.26), 0 0 12px rgba(138, 216, 240, 0.9);
}
.globe-label-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(4, 26, 38, 0.58);
  border: 1px solid rgba(138, 216, 240, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  line-height: 1.15;
}
.globe-label-text b { font-size: 11.5px; font-weight: 700; color: #eaf7fd; }
.globe-label-text i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hero-primary-light);
}
.globe-label.is-home .globe-label-dot {
  width: 9px;
  height: 9px;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 150, 190, 0.34), 0 0 18px rgba(138, 216, 240, 0.95);
}
.globe-label.is-home .globe-label-text {
  background: rgba(37, 150, 190, 0.32);
  border-color: rgba(255, 255, 255, 0.34);
}
.globe-label.is-home .globe-label-text b { font-size: 12.5px; }
/* Near the right edge the name moves to the other side of its dot. */
.globe-label.is-flipped { flex-direction: row-reverse; margin-left: -4px; transform-origin: 100% 50%; }
.globe-label.is-flipped .globe-label-text { text-align: right; align-items: flex-end; }

/* Too small to label without clutter. */
@media (max-width: 760px) { .globe-labels { display: none; } }

/* ---------- Globe caption ------------------------------------------------- */
/* Sits in the copy column, under the trust chips. It used to float over the
   globe, where it collided with the country labels. */
.globe-caption {
  max-width: 460px;
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid rgba(138, 216, 240, 0.35);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(214, 238, 250, 0.7);
}
.globe-caption strong { display: block; color: #eaf7fd; font-weight: 700; font-size: 0.88rem; margin-bottom: 2px; }

/* ---------- FAQ flows into the closing CTA -------------------------------- */
/* There was a 204px dead band between the last question and the CTA card,
   because a tight section's bottom padding met a full section's top padding. */
#faq { padding-bottom: clamp(18px, 2.6vw, 30px); }
#faq + .section { padding-top: clamp(22px, 3.2vw, 42px); }

@media (prefers-reduced-motion: reduce) {
  .globe-label { transition: none; }
}

/* =========================================================================
   v7 - vertical rhythm, and a 3D audit object for the assurance section
   ========================================================================= */

/* ---------- Collapse doubled section seams -------------------------------
   Every light section paid full top AND bottom padding, so consecutive
   sections stacked 188-386px of empty space between their content. Coloured
   bands (the dark AI band, the stats band) keep their generous padding,
   because that padding is what gives the band its height.
   ------------------------------------------------------------------------- */
.section:not(.band-dark):not(.impact-band):not(.hero)
  + .section:not(.band-dark):not(.impact-band) {
  padding-top: clamp(26px, 3.6vw, 52px);
}
.section:not(.band-dark):not(.impact-band):not(.hero)
  + .section:not(.band-dark):not(.impact-band) {
  /* and trim the seam from the other side too */
  margin-top: 0;
}
.section:not(.band-dark):not(.impact-band):has(+ .section:not(.band-dark):not(.impact-band)) {
  padding-bottom: clamp(26px, 3.6vw, 56px);
}
/* Fallback for browsers without :has() - keeps the tight sections tidy. */
@supports not selector(:has(*)) {
  .section-tight { padding-block: clamp(30px, 4vw, 52px); }
}
/* The marquee sits directly under the hero; give the summary room to breathe. */
.marquee-wrap + .section { padding-top: clamp(44px, 6vw, 84px); }

/* ---------- Assurance section: copy beside a 3D audit object -------------- */
.assurance-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.audit-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  min-height: 260px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(37, 150, 190, 0.16), transparent 70%),
    linear-gradient(160deg, var(--surface), #f4fafb);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.audit-3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* Shown only when the 3D object cannot run. */
.audit-3d-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--teal);
  text-align: center;
  padding: 24px;
}
.audit-3d-fallback i { font-size: 44px; }
.audit-3d-fallback span { font-size: 0.9rem; font-weight: 650; color: var(--ink-2); }
.audit-3d-canvas { position: absolute; inset: 0; z-index: 1; }
.no-audit-3d .audit-3d-fallback { display: flex; }
.no-audit-3d .audit-3d-canvas { display: none; }

.audit-caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 82, 96, 0.55);
}

@media (max-width: 900px) {
  .assurance-split { grid-template-columns: 1fr; }
  .audit-3d { min-height: 240px; aspect-ratio: 1 / 0.7; }
}

/* =========================================================================
   v8 - one vertical rhythm for the whole page
   The original sections each paid up to 112px top AND bottom, so content
   blocks sat 190-390px apart and the page read as mostly empty. This sets a
   single scale: normal sections, slightly roomier colour bands, and a tight
   seam where two plain sections meet.
   ========================================================================= */

.section:not(.hero) { padding-block: clamp(38px, 5vw, 68px); }

/* Colour bands keep a little more, because their padding is the band. */
.section.band-dark,
.impact-band { padding-block: clamp(46px, 6.2vw, 86px); }

/* Two plain sections in a row only need one gap, not two. */
.section:not(.band-dark):not(.impact-band):not(.hero)
  + .section:not(.band-dark):not(.impact-band) {
  padding-top: clamp(20px, 2.8vw, 38px);
}

/* Centred section headings had 48px under them on top of all of the above. */
.section-head { margin-bottom: clamp(26px, 3.4vw, 40px); }

/* First section after the marquee keeps a touch more air. */
.marquee-wrap + .section { padding-top: clamp(40px, 5.4vw, 74px); }

/* =========================================================================
   v9 - hold-and-turn on both 3D objects, and a frameless audit model
   ========================================================================= */

/* ---------- Globe: circular grab surface over the sphere ------------------ */
.globe-grab {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  cursor: grab;
  /* Vertical swipes still scroll the page; horizontal drags turn the globe. */
  touch-action: pan-y;
}
.globe-grab.is-grabbing { cursor: grabbing; }
/* Above the hero copy layer (z-index 2) so it actually receives the pointer.
   It is a circle over the globe only, so it never sits on the CTAs. */
.hero-3d > .globe-grab { z-index: 3; pointer-events: auto; }

/* ---------- Audit object: no panel, just the white model ----------------- */
.audit-3d {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.audit-3d-canvas {
  cursor: grab;
  touch-action: pan-y;
}
.audit-3d-canvas.is-grabbing { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .globe-grab,
  .audit-3d-canvas { cursor: default; }
}

/* =========================================================================
   v10 - animated workflow explainer
   ========================================================================= */

.workflow {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface) 0%, #f3fafb 100%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.workflow-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.94;
  min-height: 300px;
}
.workflow-canvas { position: absolute; inset: 0; }
.workflow-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.workflow-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 64px;
  opacity: 0.35;
}
.no-workflow-3d .workflow-fallback { display: flex; }
.no-workflow-3d .workflow-canvas { display: none; }

/* ---------- The written steps beside the stage ---------------------------- */
.workflow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  counter-reset: none;
}
.workflow-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--base) var(--ease), border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.workflow-steps li:hover { background: rgba(37, 150, 190, 0.06); }
.workflow-steps li.is-active {
  background: #ffffff;
  border-color: rgba(37, 150, 190, 0.34);
  box-shadow: var(--sh-sm);
  transform: translateX(3px);
}

.wf-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--teal-deep);
  background: var(--teal-soft);
  transition: background var(--base) var(--ease), color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.workflow-steps li.is-active .wf-n {
  background: linear-gradient(135deg, #2596be, #14657f);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 150, 190, 0.42);
}

.wf-copy { display: grid; gap: 3px; min-width: 0; }
.wf-copy b { font-size: 0.97rem; color: var(--ink); font-weight: 750; }
.wf-copy small {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-2);
  /* Only the active step needs the detail; the rest stay compact. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--base) var(--ease), opacity var(--base) var(--ease);
}
.workflow-steps li.is-active .wf-copy small { max-height: 5.2em; opacity: 1; }

.workflow-tools-head { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0 0 6px; }

@media (max-width: 900px) {
  .workflow { grid-template-columns: 1fr; }
  .workflow-stage { order: -1; min-height: 280px; aspect-ratio: 1 / 0.86; }
  /* On small screens every step shows its detail: there is no hover to explore. */
  .workflow-steps li { cursor: default; }
  .wf-copy small { max-height: 6em; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-steps li,
  .wf-copy small,
  .wf-n { transition: none; }
  .wf-copy small { max-height: 6em; opacity: 1; }
}

/* =========================================================================
   v11 - mobile-first hardening
   Dedicated globe space, compact phone rhythm, touch-safe interactions, and
   reliable navigation from narrow phones through tablets.
   ========================================================================= */

:root { --mobile-gutter: 24px; }
html { overflow-x: clip; }
body { min-width: 0; }

/* Globe placement now follows this real layout slot instead of viewport
   aspect-ratio guesses. Canvas remains full-hero; this slot supplies its
   exact centre and available diameter to hero3d.js. */
.hero-globe-slot {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: clamp(360px, 56vh, 560px);
  pointer-events: none;
}
.no-webgl .hero-globe-slot .globe-fallback {
  inset: 50% auto auto 50%;
  width: min(420px, 90%);
  transform: translate(-50%, -50%);
}

/* Prevent intrinsic content from forcing responsive grid tracks wider than
   their containers. */
.workflow > *,
.workflow-stage,
.workflow-steps,
.showcase > *,
.band-grid > *,
.split > *,
.assurance-split > *,
.proc .p-name,
.firm-row .meta { min-width: 0; }
.workflow-stage { overflow: hidden; }
.proc .p-name { overflow-wrap: anywhere; }

/* Header becomes a menu before desktop links can crush the brand. */
@media (max-width: 900px) {
  .site-header .container { gap: 12px; }
  .brand { flex: 0 0 auto; }
  .nav-cta { margin-left: auto; gap: 8px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; flex: 0 0 auto; }
  .nav-links.open {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: 14px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
    background: rgba(251, 248, 238, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 11px 12px;
    color: var(--ink);
  }
  .nav-links.open a::after { display: none; }
  .site-header.menu-open {
    background: rgba(251, 248, 238, 0.98);
    box-shadow: 0 1px 0 var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .site-header.on-hero.menu-open:not(.is-scrolled) .brand,
  .site-header.on-hero.menu-open:not(.is-scrolled) .brand span,
  .site-header.on-hero.menu-open:not(.is-scrolled) .nav-links a { color: var(--ink); }
  .site-header.on-hero.menu-open:not(.is-scrolled) .brand small { color: var(--muted); }
  .site-header.on-hero.menu-open:not(.is-scrolled) .nav-toggle {
    color: var(--teal-dark);
    border-color: var(--line);
    background: var(--surface);
  }
  html.menu-is-open,
  html.menu-is-open body { overflow: hidden; }
}

@media (max-width: 980px) {
  .hero-3d {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-bottom: clamp(28px, 5vw, 48px);
    align-items: flex-start;
  }
  .hero-3d .hero-grid { gap: clamp(12px, 2.5vw, 24px); }
  .hero-globe-slot {
    height: clamp(300px, 52vw, 440px);
    min-height: 0;
  }
}

@media (max-width: 640px) {
  :root { --mobile-gutter: 18px; }
  .container {
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
  }
  .section:not(.hero) { padding-block: clamp(32px, 9vw, 48px); }
  .section.band-dark,
  .impact-band { padding-block: clamp(40px, 10vw, 56px); }
  .section-head { margin-bottom: 24px; }
  .section-head.center { text-align: left; margin-inline: 0; }
  .section-head.center .eyebrow { justify-content: flex-start; }
  .section-head.center h2 { display: block; }
  .section-head.center h2::after { left: 0; transform: scaleX(var(--rule, 1)); transform-origin: 0 50%; }

  .hero-3d {
    padding-top: calc(var(--nav-h) + 20px);
    padding-bottom: 20px;
  }
  .hero-3d .hero-grid { gap: 8px; }
  .hero-3d .hero-copy { max-width: none; }
  .hero-3d .eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; }
  .hero-3d h1 {
    margin-top: 14px;
    font-size: clamp(2rem, 10vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .hero-3d .lead { margin-top: 14px; font-size: 0.96rem; line-height: 1.55; }
  .hero-3d .hero-actions { margin-top: 20px; gap: 10px; }
  .hero-3d .trust-row {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 16px calc(-1 * var(--mobile-gutter)) 0;
    padding: 2px var(--mobile-gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-3d .trust-row::-webkit-scrollbar { display: none; }
  .hero-3d .trust-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 7px 11px;
    font-size: 0.76rem;
  }
  .globe-caption {
    max-width: 34rem;
    margin-top: 12px;
    padding-left: 11px;
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .globe-caption strong { font-size: 0.8rem; }
  .hero-globe-slot {
    height: clamp(240px, 72vw, 300px);
    min-height: 0;
  }

  .preview { padding: 14px; border-radius: var(--r-lg); }
  .preview-float {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin: 12px 0 0 auto;
    padding: 9px 12px;
    white-space: normal;
    text-align: left;
  }
  .result-head { padding: 14px; }
  .result-head .topic { font-size: 1.08rem; }
  .proc { align-items: flex-start; padding: 10px; }

  .workflow { gap: 14px; padding: 14px; }
  .workflow-stage { min-height: 220px; aspect-ratio: 1 / 0.72; }
  .workflow-steps { width: 100%; }
  .workflow-steps li { gap: 10px; padding: 10px 8px; }
  .workflow-steps li.is-active { transform: none; }
  .wf-copy b { font-size: 0.92rem; }
  .wf-copy small { font-size: 0.8rem; line-height: 1.45; }

  /* Nine tools become a native swipe rail instead of a 2,000px vertical wall. */
  #features .grid-3 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 82vw);
    align-items: stretch;
    gap: 14px;
    margin-inline: calc(-1 * var(--mobile-gutter));
    padding: 4px var(--mobile-gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--mobile-gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--teal) transparent;
    -webkit-overflow-scrolling: touch;
  }
  #features .grid-3 .g-card { scroll-snap-align: start; min-height: 220px; }

  .works { gap: 10px; }
  .work-tile { min-width: 0; padding: 18px 8px; }
  .work-tile span { overflow-wrap: anywhere; }
  .cta-inner { padding: 32px 20px; }
  .cta-actions { align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 361px) and (max-width: 640px) {
  .hero-3d .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .hero-3d .hero-actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .firm-card { padding: 16px; }
  .firm-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding: 12px;
  }
  .firm-row .role {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }
  .code-chip { max-width: 100%; flex-wrap: wrap; }
}

@media (max-width: 360px) {
  :root { --mobile-gutter: 16px; }
  .site-header .container { padding-inline: 12px; gap: 8px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand img { width: 30px; height: 30px; }
  .site-header .brand span { font-size: 0.92rem; }
  .site-header .brand small { display: none; }
  .site-header .nav-cta { gap: 6px; }
  .site-header .nav-cta .btn {
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }
  .site-header .nav-cta .btn i { font-size: 1.2rem; }
  .hero-3d .container { padding-inline: var(--mobile-gutter); }
  .hero-3d h1 { font-size: clamp(1.9rem, 9.8vw, 2.2rem); }
  .hero-3d .hero-actions { display: flex; flex-direction: column; }
  .hero-3d .hero-actions .btn { width: 100%; }
  .hero-3d .globe-caption { display: none; }
  .hero-globe-slot { height: 225px; }
  .impact { gap: 10px; }
  .impact .stat { padding: 20px 10px; }
  .works { grid-template-columns: repeat(2, 1fr); }
  .faq summary { padding-inline: 15px; }
  .faq .answer { padding-inline: 15px; }
}

/* Short landscape phones use a true split hero. Supplemental trust copy hides
   so headline, primary action, and globe all fit without trapping scroll. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
  .hero-3d {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--nav-h) + 4px);
    padding-bottom: 12px;
  }
  .hero-3d .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(200px, 0.92fr);
    align-items: center;
    gap: 14px;
  }
  .hero-3d .eyebrow { display: none; }
  .hero-3d h1 {
    margin-top: 0;
    font-size: clamp(1.7rem, 4.1vw, 2.35rem);
    line-height: 1.03;
  }
  .hero-3d .lead {
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.38;
  }
  .hero-3d .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: 8px;
    margin-top: 12px;
  }
  .hero-3d .hero-actions .btn {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    font-size: 0.8rem;
  }
  .hero-3d .trust-row,
  .hero-3d .globe-caption,
  .globe-labels { display: none; }
  .hero-globe-slot { height: min(64dvh, 300px); }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 340px) {
  .hero-3d .lead { display: none; }
  .hero-3d .hero-actions { margin-top: 10px; }
}

/* Coarse pointers get large targets and no sticky hover displacement. */
@media (hover: none), (pointer: coarse) {
  a, button, summary { -webkit-tap-highlight-color: rgba(37, 150, 190, 0.18); }
  .btn,
  .nav-toggle,
  .nav-links a,
  .faq summary,
  .footer-col a { min-height: 44px; }
  .footer-col a { display: flex; align-items: center; }
  .g-card:hover,
  .step:hover,
  .impact .stat:hover,
  .work-tile:hover,
  .firm-row:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-on-dark:hover { transform: none; }
  .g-card:hover .g-ico { transform: none; }
  .preview:hover::after,
  .btn-primary:hover::after,
  .btn-on-dark:hover::after { animation: none; display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d .trust-row,
  #features .grid-3 { scroll-behavior: auto; }
}