/* =========================================================================
   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; }

/* ---------- Download page release meta ---------- */
.download-meta { display: flex; flex-wrap: wrap; gap: 22px 34px; margin: 18px 0 14px; padding: 0; }
.download-meta > div { display: flex; flex-direction: column; gap: 2px; }
.download-meta dt { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.download-meta dd { margin: 0; font-size: 0.98rem; font-weight: 650; color: var(--teal-deep); }

/* ---------- 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; }

/* ---------- Download page: the specification block runs full width ----------
   download.html's lower block sits in the plain page container (1200px)
   instead of the 820px legal measure, and it is NOT a card. It used to reuse
   .legal-body, whose white rounded panel and shadow read as a separate slab
   dropped onto the page; this content is a continuation of the download page,
   not a document sitting on top of it, so it inherits the page background and
   keeps only the type rules it needs.

   .legal-wrap and .legal-body are both deliberately untouched. privacy.html
   and terms.html are long-form legal prose where the 820px measure and the
   card panel are both right, and tools/verify-site-consistency.mjs asserts
   they still use them -- changing the shared classes to fix one page would
   have quietly changed the other two.
   --------------------------------------------------------------------- */
.dl-specs { margin-bottom: 80px; }
.dl-specs h2 { font-size: 1.3rem; color: var(--teal-deep); margin-top: 44px; }
.dl-specs h2:first-child { margin-top: 0; }
.dl-specs h3 { font-size: 1.02rem; color: var(--teal-dark); margin-top: 22px; }
.dl-specs p, .dl-specs li { color: var(--ink); font-size: 0.96rem; line-height: 1.75; }
.dl-specs ul { padding-left: 20px; }
.dl-specs li { margin-bottom: 7px; }
.dl-specs a { color: var(--teal); font-weight: 650; }

/* A four-item list stretched across 1200px reads as four very long lines, so
   the list becomes columns: the page width gets used without the line length
   growing with it. Collapses to a single column before the text gets tight. */
.dl-req-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 36px; }
@media (max-width: 760px) { .dl-req-list { grid-template-columns: 1fr; } }

/* The install-warning walkthrough stacks instead of sitting three-up. Each
   screenshot is 1600x800; three across a 1200px page rendered them about
   280px wide, which is far too small to read the very dialog text the section
   exists to help someone recognise. One per row gives each image the full
   measure, so the warning is legible at a glance.

   The connecting line between steps is a horizontal device and is removed
   here -- it would run across a vertical stack pointing at nothing. */
.dl-visual-steps { grid-template-columns: 1fr; gap: 28px; }
.dl-visual-steps::before { display: none; }
.dl-visual-steps .step-shot { max-width: 100%; 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); }

/* ---------- Legal tables (privacy policy: named recipients, DPDP notice, retention) ------
   Added because the privacy policy now states per-recipient and per-class facts, and a nested
   list cannot carry "recipient / role / endpoint / when" legibly. `display: block` plus
   overflow-x on the table itself is what keeps a four-column table from forcing the whole page
   to scroll sideways on a phone: the table scrolls inside its own box and the body does not. */
.legal-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 16px 0 20px; font-size: 0.9rem; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.legal-table th { background: var(--teal-soft); color: var(--teal-deep); font-weight: 700; white-space: nowrap; }
.legal-table td { color: var(--ink); }
.legal-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 92%, var(--teal-soft)); }

/* ---------- 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; }
}

/* ============================================================================
   DESKTOP DOWNLOAD — hero call-to-action and the download page
   ----------------------------------------------------------------------------
   Added 2026-08-24. Uses the existing tokens only (--teal, --green, --grad,
   --r-*, --sh-*), so this inherits the site's palette rather than introducing a
   second one. Every animation here is gated by prefers-reduced-motion at the
   bottom of this block, matching the rest of the sheet.
   ========================================================================== */

/* --- hero: the desktop download action ------------------------------------
   Deliberately a button in .hero-actions rather than a card below the copy.
   The first version was a full-width card appended after .globe-caption, and on
   a normal laptop it landed below the fold: .hero-3d is min-height:100dvh with
   align-items:center, so the last element in an already-tall copy column is the
   one nobody sees. Putting it beside the other two actions costs no extra
   vertical space and puts it where the eye already is.

   The hero is a dark band, so this is a light solid button - distinct from the
   gradient primary (Add to Chrome) and the translucent ghost (See features)
   without competing with either. */

.btn-desktop {
  background: rgba(255, 253, 247, 0.96);
  color: var(--teal-deep);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 34px rgba(2, 23, 28, 0.34);
  font-weight: 700;
}

.btn-desktop i {
  color: var(--teal);
  transition: transform var(--fast, 180ms) var(--ease, ease);
}

.btn-desktop:hover {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 20px 46px rgba(2, 23, 28, 0.44);
}

.btn-desktop:hover i {
  transform: translateY(2px);
}

/* One quiet line of reassurance under the actions. On the dark hero it has to
   be light enough to read but must not compete with the buttons above it. */
.desktop-note {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: rgba(226, 244, 242, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .btn-desktop i { transition: none !important; }
  .btn-desktop:hover i { transform: none; }
}

/* --- the download page ---------------------------------------------------- */

.dl-hero {
  position: relative;
  padding: 72px 0 44px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(17, 157, 117, 0.16), transparent 60%),
    radial-gradient(760px 380px at 88% 0%, rgba(23, 113, 132, 0.16), transparent 62%),
    var(--cream-soft);
  overflow: hidden;
}

/* Two slow drifting orbs. Decorative only. */
.dl-hero::before,
.dl-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
}
.dl-hero::before {
  width: 300px;
  height: 300px;
  top: -90px;
  left: -70px;
  background: rgba(17, 157, 117, 0.4);
  animation: dlDrift 15s var(--ease, ease-in-out) infinite alternate;
}
.dl-hero::after {
  width: 260px;
  height: 260px;
  right: -60px;
  bottom: -110px;
  background: rgba(23, 113, 132, 0.36);
  animation: dlDrift 19s var(--ease, ease-in-out) infinite alternate-reverse;
}

.dl-hero > .container {
  position: relative;
  z-index: 1;
}

.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(17, 157, 117, 0.34);
  background: rgba(223, 242, 234, 0.72);
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 650;
}

.dl-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: dlPulse 2.4s ease-in-out infinite;
}

.dl-title {
  margin: 16px 0 10px;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  color: var(--teal-deep);
}

.dl-lead {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.05rem;
}

/* The primary action. btnSweep already exists for .btn-primary; this adds a
   resting halo so the button is findable without hunting. */
.dl-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 16px 30px;
  font-size: 1.06rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 40px rgba(23, 113, 132, 0.32);
  transition: transform var(--fast, 180ms) var(--ease, ease),
    box-shadow var(--fast, 180ms) var(--ease, ease);
}

.dl-cta::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0.32;
  filter: blur(12px);
  z-index: -1;
  animation: dlHalo 3.4s ease-in-out infinite;
}

.dl-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(23, 113, 132, 0.4);
}

.dl-cta:active {
  transform: translateY(-1px);
}

.dl-cta i {
  font-size: 1.25rem;
  animation: dlNudge 2.8s ease-in-out infinite;
}

.dl-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Facts grid: file, version, released, size. */
.dl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.dl-fact {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 253, 247, 0.86);
  box-shadow: var(--sh-sm);
  transition: transform var(--fast, 180ms) var(--ease, ease);
}

.dl-fact:hover {
  transform: translateY(-2px);
}

.dl-fact dt {
  margin: 0 0 4px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}

.dl-fact dd {
  margin: 0;
  font-weight: 650;
  color: var(--teal-deep);
  word-break: break-word;
}

/* Integrity panel. */
.dl-verify {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  background: rgba(223, 242, 234, 0.34);
}

.dl-verify h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--teal-deep);
}

.dl-sha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dl-steps {
  counter-reset: dlstep;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}

.dl-steps > li {
  counter-increment: dlstep;
  position: relative;
  padding: 16px 18px 16px 58px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.dl-steps > li::before {
  content: counter(dlstep);
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

/* The download page's own visual walkthrough: reuses .steps/.step (the same horizontal,
   animated 3-up layout as the homepage's "How it works"), plus a screenshot per step. */
.dl-visual-steps .step { display: flex; flex-direction: column; }
.dl-visual-steps .step p { flex: 0 0 auto; }
.step-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.dl-visual-steps .step:hover .step-shot {
  transform: scale(1.015);
  box-shadow: var(--sh-md);
}
@media (prefers-reduced-motion: reduce) {
  .dl-visual-steps .step:hover .step-shot { transform: none; }
}

@keyframes dlSheen {
  0%, 62% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes dlDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(26px, 20px, 0) scale(1.08); }
}
@keyframes dlPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: 0.55; }
}
@keyframes dlHalo {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 0.46; }
}
@keyframes dlNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Everything decorative above is switched off here, matching the rest of this
   sheet. Layout, contrast and focus states are unaffected. */
@media (prefers-reduced-motion: reduce) {
  .dl-hero::before,
  .dl-hero::after,
  .dl-badge__dot,
  .dl-cta::before,
  .dl-cta i {
    animation: none !important;
  }
  .btn-desktop i,
  .dl-cta,
  .dl-fact {
    transition: none !important;
  }
  .dl-cta:hover,
  .dl-fact:hover {
    transform: none;
  }
}

/* =========================================================================
   Features page: platform badges, top-feature cards, the platform split,
   and the complete inventory.

   Built on the existing system rather than beside it: .g-card, .section,
   .eyebrow, .tag, [data-reveal] and [data-tilt] all do their usual jobs here.
   Everything with movement is gated by prefers-reduced-motion at the end of
   this block, and every layout below collapses to one column on small screens.
   ========================================================================= */

/* --- Platform badges ------------------------------------------------------
   The single most important thing on this page: which product a capability
   belongs to. Colour never carries that alone - each badge names its platform
   in words, so it survives greyscale, colour blindness and a screen reader. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: var(--muted);
}
.pill i { font-size: 0.85rem; }
.pill-ext { color: var(--teal-dark); border-color: color-mix(in srgb, var(--teal) 38%, var(--line)); background: var(--teal-soft); }
.pill-app { color: var(--green-dark); border-color: color-mix(in srgb, var(--green) 38%, var(--line)); background: var(--green-soft); }
.pill-both { color: var(--ink); border-color: var(--line); background: var(--cream-strong); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Top features ---------------------------------------------------------
   The six capabilities a firm feels first. Larger than an inventory card, and
   carrying a small mockup, because these are the reason someone installs. */
.tf-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.tf-card {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 28px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-sm); overflow: hidden;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.tf-card::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--grad); opacity: 0.9;
}
.tf-card:hover { box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); }
/* Six cards fill a three-column grid as two clean rows. An earlier version let the first and
   last span two columns, which pushed the last row out of balance and left a hole beside it. Rank
   order and reading position carry the hierarchy instead. */
.tf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tf-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 0.9rem;
}
.tf-card h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; }
.tf-lede { margin: 0; color: var(--muted); }
.tf-gain {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-weight: 700; color: var(--teal-dark); font-size: 0.92rem;
}
.tf-gain i { font-size: 1.05rem; }

/* --- Small UI mockups -----------------------------------------------------
   Suggestive, not screenshots: a few bars standing in for a real screen, so a
   card shows the shape of the work instead of describing it twice. */
.mock {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--cream-soft); color: var(--ink); padding: 12px; display: grid; gap: 8px;
  transform: translateZ(24px);
}
.mock-bar { display: flex; align-items: center; gap: 8px; }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.mock-dot.ok { background: var(--green); }
.mock-dot.warn { background: var(--teal); }
.mock-line { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); flex: 1 1 auto; }
.mock-line.w-40 { max-width: 40%; }
.mock-line.w-60 { max-width: 60%; }
.mock-line.w-80 { max-width: 80%; }
.mock-line.solid { background: color-mix(in srgb, var(--teal) 34%, transparent); }
.mock-tag {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.mock-tag.done { color: var(--green-dark); background: var(--green-soft); }

/* Rows drift in one after another once the card is on screen. Pure CSS, so a
   blocked CDN can never leave a mockup half drawn. */
[data-reveal].in-view .mock-bar { animation: mockIn 520ms var(--ease) backwards; }
[data-reveal].in-view .mock-bar:nth-child(2) { animation-delay: 90ms; }
[data-reveal].in-view .mock-bar:nth-child(3) { animation-delay: 180ms; }
[data-reveal].in-view .mock-bar:nth-child(4) { animation-delay: 270ms; }
@keyframes mockIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* --- Platform split -------------------------------------------------------
   Three columns answering "which one do I install", counted so the balance is
   plain at a glance. */
.plat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* These are LIGHT cards sitting inside .band-dark, which sets color:#fff for the band. Without
   an explicit colour here the headings and list items inherit white and render invisible on the
   cream card - which is exactly what shipped and had to be fixed. Every light card on a dark band
   must re-establish its own text colour. */
.plat-card {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding: 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm);
  color: var(--ink);
}
.plat-card h3, .plat-card strong { color: var(--ink); }
.plat-card li { color: var(--ink); }
.plat-card.is-both { border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); background: var(--cream-soft); color: var(--ink); }
.plat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-head h3 { margin: 0; font-size: 1.05rem; }
.plat-count { margin-left: auto; font-weight: 800; color: var(--teal-dark); font-size: 0.95rem; }
.plat-note { margin: 0; color: var(--muted); font-size: 0.92rem; }
.plat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plat-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; line-height: 1.45; }
.plat-list i { color: var(--teal); margin-top: 3px; flex: 0 0 auto; }

/* --- Complete inventory --------------------------------------------------- */
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.cat-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: 0.9rem; color: var(--ink); text-decoration: none;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cat-link:hover, .cat-link:focus-visible {
  border-color: var(--teal); background: var(--teal-soft); transform: translateY(-1px);
}
.cat-link span { color: var(--muted); font-weight: 800; font-size: 0.78rem; }

.cat-block { margin-bottom: 52px; scroll-margin-top: 90px; }
.cat-block:last-child { margin-bottom: 0; }
.cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-head h3 { margin: 0; font-size: 1.35rem; }
.cat-head p { margin: 0; color: var(--muted); font-size: 0.95rem; flex: 1 1 240px; }

.feat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feat-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 20px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.feat-card:hover { border-color: color-mix(in srgb, var(--teal) 32%, var(--line)); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.feat-card h4 { margin: 0; font-size: 1rem; line-height: 1.3; }
.feat-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.feat-gain { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--teal-dark); }
.feat-foot { margin-top: auto; padding-top: 4px; }

/* --- Reduced motion --------------------------------------------------------
   Everything above still reads correctly with no movement at all: the tilt
   flattens, the mockup rows are simply present, and the hover lifts stop. */
@media (prefers-reduced-motion: reduce) {
  .tf-card { transform: none; transition: none; }
  .tf-card:hover, .feat-card:hover, .cat-link:hover { transform: none; }
  [data-reveal].in-view .mock-bar { animation: none; }
}

@media (max-width: 900px) {
  .tf-card { padding: 22px; }
}

/* =========================================================================
   Animated workflow explainer, and real depth on the top-feature cards.

   The explainer walks one GST period from the portal to a locked, exported
   result, lighting each stage as a token travels the line between them. It is
   there to answer two questions at once: what actually happens, and which
   product does each part - so the platform badges sit on the stages themselves.

   Deliberately CSS and SVG rather than another three.js scene: the page already
   carries 51 cards, and a second WebGL context would cost more than it explains.
   Nothing here needs JavaScript to be readable; the sequencing module only adds
   the running highlight.
   ========================================================================= */

.flow {
  position: relative;
  margin-top: 34px;
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.flow::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--grad);
}

/* Explicit column counts rather than auto-fit. Six stages under auto-fit resolved to five
   across plus one orphan on a second row, with the connecting line drawn only beside the first
   five - the sequence stopped reading as a sequence. These break 6 -> 3 -> 1, so every row is
   full at every width. */
.flow-track {
  position: relative;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .flow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  /* The line spans one row, so it would point at nothing once the stages wrap. */
  .flow-track::after { display: none; }
}

/* The connecting line lives behind the stages and only exists where the track
   is actually a row. On a stacked layout it would point nowhere, so it goes. */
.flow-track::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 28%, transparent) 12%, color-mix(in srgb, var(--teal) 28%, transparent) 88%, transparent);
  z-index: 0;
}

.flow-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 6px;
}

.flow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--cream-soft);
  color: var(--teal-dark);
  font-size: 1.5rem;
  transition: transform var(--base) var(--ease), background-color var(--base) var(--ease),
              border-color var(--base) var(--ease), box-shadow var(--base) var(--ease), color var(--base) var(--ease);
}

/* The running highlight. Added by the sequencer, and also reachable on hover so
   the diagram responds to a pointer even before it has been scrolled to. */
.flow-stage.is-live .flow-node,
.flow-stage:hover .flow-node {
  transform: translateY(-4px) scale(1.06);
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-teal);
}

.flow-stage b { font-size: 0.95rem; line-height: 1.3; color: var(--ink); }
.flow-stage small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

/* Stages that have already run keep a quiet tick, so the diagram reads as
   progress rather than as six things blinking independently. */
.flow-stage.is-done .flow-node {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: var(--green-soft);
  color: var(--green-dark);
}

.flow-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.9rem;
}

@keyframes flowPulse {
  0%   { opacity: 0; transform: scale(0.85); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
.flow-stage.is-live .flow-node::after {
  content: "";
  position: absolute;
  width: 56px; height: 56px; border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--teal) 45%, transparent);
  animation: flowPulse 1.4s var(--ease) infinite;
  pointer-events: none;
}
.flow-node { position: relative; }

/* --- Depth on the top-feature cards --------------------------------------
   .tf-card already tilts under the pointer. These lift its parts to different
   depths so the tilt reveals real parallax instead of rotating a flat picture. */
.tf-card .tf-top { transform: translateZ(38px); }
.tf-card .tf-gain { transform: translateZ(18px); }
.tf-card .pill-row { transform: translateZ(12px); }

/* A soft light that follows the pointer, matching .g-card elsewhere on the site. */
.tf-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--teal) 10%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
  pointer-events: none;
}
.tf-card:hover::before { opacity: 1; }

/* The mockup rows keep working while the card is on screen: a run that is still
   going, rather than a screenshot of one. */
@keyframes mockWork {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.tf-card[data-live] .mock-bar:last-child .mock-line { animation: mockWork 2.4s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .flow-stage.is-live .flow-node,
  .flow-stage:hover .flow-node { transform: none; }
  .flow-stage.is-live .flow-node::after { animation: none; opacity: 0; }
  .tf-card .tf-top, .tf-card .tf-gain, .tf-card .pill-row { transform: none; }
  .tf-card[data-live] .mock-bar:last-child .mock-line { animation: none; opacity: 1; }
}

@media (max-width: 760px) {
  .flow-track::after { display: none; }
  .flow-stage { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .flow-node { flex: 0 0 auto; width: 46px; height: 46px; font-size: 1.2rem; }
  .flow-stage.is-live .flow-node::after { width: 46px; height: 46px; }
}