/* ============================================================
   FORTIS PULSE — Design System
   White enterprise canvas × Apple-tier soft craft.
   Lucidus Black structure · Amber accent · Space Grotesk + Inter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- Brand palette (strict, from brief) --- */
  --bg:        #ffffff;          /* dominant page background */
  --bg-soft:   #f5f6f8;          /* alternating bands / card fills */
  --bg-mute:   #eef0f3;          /* deeper band */
  --ink:       #151c27;          /* charcoal — never pure black (DESIGN.md) */
  --ink-2:     #1f2731;          /* darker charcoal for raised/hover surfaces */
  --ink-soft:  #5e5e5e;          /* muted secondary text */
  --ink-faint: #8a8f98;          /* faint meta */
  --amber:     #f2a900;          /* the single accent */
  --amber-hover:#ffba3b;         /* accent hover */
  --amber-deep:#7f5700;          /* amber active/label */
  --amber-soft:#fff6e0;          /* amber tint wash */
  --line:      #e5e7eb;          /* hairline border */
  --line-2:    #d1d5db;          /* stronger border */

  /* --- Radius scale: 4 / 8 / 12 only (DESIGN.md). Pills for true pill controls. --- */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-pill:999px;
  --r-card:12px;
  --r-core:8px;
  --r-lg:12px;

  /* --- Tinted charcoal shadows, restrained — meaningful raised panels only --- */
  --sh-1: 0 1px 2px rgba(21,28,39,0.04);
  --sh-2: 0 12px 30px -16px rgba(21,28,39,0.14);
  --sh-3: 0 24px 48px -20px rgba(21,28,39,0.18);
  --sh-amber: 0 12px 26px -12px rgba(242,169,0,0.32);

  /* --- Type --- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* --- Motion: spring, never linear/ease-in-out --- */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --spring-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 220ms;
  --t-med: 420ms;
  --t-slow: 700ms;

  --container: 1200px;
  --container-wide: 1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:3px; border-radius:4px; }
/* amber-deep passes 3:1 on white/light; amber passes on charcoal — scope per surface */
.section-dark :focus-visible,
.site-header .nav-item:focus-visible,
.site-header .nav-burger:focus-visible,
.site-header .nav-cta :focus-visible{ outline-color:var(--amber); }

/* manual reduce-motion control (WCAG 2.2.2 pause mechanism) — mirrors prefers-reduced-motion */
html.motion-off *, html.motion-off *::before, html.motion-off *::after{ animation:none !important; }
html.motion-off .pulse-glow, html.motion-off .ecg-band, html.motion-off .gauge.live .ring-pulse{ opacity:0 !important; }

/* ambient motion auto-pauses when its section scrolls out of view (perf + a11y) */
.amb-off, .amb-off *{ animation-play-state:paused !important; }
.amb-off::before, .amb-off::after{ animation-play-state:paused !important; }

/* ---------- Type scale ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:0.98;
}
.display-1{ font-size:clamp(2.6rem,5.4vw,4.6rem); }
.display-2{ font-size:clamp(2.1rem,4vw,3.4rem); }
.display-3{ font-size:clamp(1.7rem,3vw,2.6rem); }
.h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-0.03em; line-height:1.05; }
.h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.1vw,2.5rem); letter-spacing:-0.028em; line-height:1.08; }
.h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,1.8vw,1.5rem); letter-spacing:-0.02em; line-height:1.2; }
.lede{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--ink-soft); line-height:1.6; max-width:56ch; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--amber-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{ content:""; width:18px; height:1.5px; background:var(--amber); border-radius:2px; }
.mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:clamp(64px,9vw,120px); position:relative; }
.section-soft{ background:var(--bg-soft); }
.section-dark{ background:var(--ink); color:#fff; }
.section-tight{ padding-block:clamp(48px,6vw,80px); }
.stack{ display:flex; flex-direction:column; }
.gap-2{ gap:8px; }.gap-3{ gap:12px; }.gap-4{ gap:16px; }.gap-5{ gap:24px; }.gap-6{ gap:32px; }.gap-7{ gap:48px; }
.center{ text-align:center; margin-inline:auto; }
.center .lede{ margin-inline:auto; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split-wide{ grid-template-columns:1.05fr 0.95fr; }

/* ---------- Ambient mesh (hero) ---------- */
.mesh{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.mesh::before{
  content:""; position:absolute; width:60vw; height:60vw; max-width:780px; max-height:780px;
  right:-12vw; top:-18vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(242,169,0,0.16), rgba(242,169,0,0) 62%);
  filter:blur(8px); animation:drift 26s var(--spring) infinite alternate;
}
.mesh::after{
  content:""; position:absolute; width:42vw; height:42vw; max-width:560px; max-height:560px;
  left:-10vw; bottom:-16vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(21,28,39,0.05), rgba(21,28,39,0) 60%);
  animation:drift2 32s var(--spring) infinite alternate;
}
@keyframes drift{ to{ transform:translate(-4vw,5vw) scale(1.08);} }
@keyframes drift2{ to{ transform:translate(5vw,-4vw) scale(1.05);} }
.grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

/* ---------- Buttons (button-in-button) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:0.98rem;
  padding:13px 22px; border-radius:var(--r-pill);
  transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--spring), background var(--t-fast) var(--spring), color var(--t-fast) var(--spring), border-color var(--t-fast) var(--spring);
  white-space:nowrap; will-change:transform;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--amber); color:var(--ink); box-shadow:var(--sh-amber); }
.btn-primary:hover{ background:var(--amber-hover); }
.btn-primary .arrow{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--amber); margin-left:2px;
  transition:transform var(--t-fast) var(--spring);
}
.btn-primary:hover .arrow{ transform:translate(2px,-1px) scale(1.06); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-2); transform:translateY(-1px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--bg-soft); }
.btn-outline-light{ border:1px solid rgba(255,255,255,0.35); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); }
.btn-lg{ padding:16px 28px; font-size:1.05rem; }
.btn .play{ width:18px; height:18px; flex:none; }
.link-arrow{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600;
  color:var(--amber-deep); transition:gap var(--t-fast) var(--spring), color var(--t-fast);
}
.link-arrow:hover{ gap:12px; color:var(--ink); }
.link-arrow::after{ content:"→"; }

/* ---------- Cards: hairline border + negative space over elevation (DESIGN.md) ---------- */
.bezel{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:#fff; overflow:hidden;
  transition:border-color var(--t-med) var(--spring);
}
.bezel > .core{ background:var(--bg-soft); border-radius:var(--r-card); }
.bezel:hover{ border-color:var(--line-2); }
.bezel.elevated{ box-shadow:var(--sh-2); }
.bezel-flat{ border:1px solid var(--line); border-radius:var(--r-card); background:#fff; }
.card{
  border:1px solid var(--line); border-radius:var(--r-card); background:#fff; padding:28px;
  transition:border-color var(--t-med) var(--spring), transform var(--t-med) var(--spring);
}
.card:hover{ border-color:var(--line-2); }
.card.elevated{ box-shadow:var(--sh-1); }
.card.elevated:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.card-pad{ padding:32px; }
.card-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.card-dark .ink-soft{ color:rgba(255,255,255,0.72); }

/* icon tile */
.icon-tile{
  width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--amber-soft); color:var(--amber-deep); margin-bottom:18px; flex:none;
}
.icon-tile svg{ width:22px; height:22px; }
.ink-soft{ color:var(--ink-soft); }
.divider{ height:1px; background:var(--line); border:0; }

/* ---------- Badge / pill / chip ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff;
}
.badge-amber{ background:var(--amber-soft); color:var(--amber-deep); border-color:transparent; }
.badge-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); display:inline-block; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:#fff; font-family:var(--font-display); font-weight:500; font-size:0.92rem;
  transition:all var(--t-fast) var(--spring); cursor:pointer; white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ============================================================
   HEADER / NAV / MEGA-MENU
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:200; background:var(--ink); color:#fff;
  transition:box-shadow var(--t-med) var(--spring);
}
.site-header.scrolled{ box-shadow:0 10px 30px -16px rgba(21,28,39,0.45); }
.nav-inner{
  max-width:var(--container-wide); margin-inline:auto; padding-block:16px; padding-inline:24px;
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-0.02em; color:#fff; }
.brand-logo{ display:block; height:34px; width:auto; }
.brand-mark{ width:30px; height:30px; border-radius:8px; background:var(--amber); display:grid; place-items:center; color:var(--ink); }
.brand-mark svg{ width:18px; height:18px; }
.primary-nav{ display:flex; align-items:center; gap:4px; }
.nav-item{
  display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:10px;
  font-size:0.92rem; font-weight:500; color:rgba(255,255,255,0.82);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-item:hover, .nav-item[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,0.08); }
.nav-item.active{ color:#fff; }
.nav-item.active::after{ content:""; position:absolute; }
.nav-item .caret{ width:13px; height:13px; opacity:0.6; transition:transform var(--t-fast); }
.nav-item[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.nav-spacer{ flex:1; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:10px 18px; font-size:0.88rem; }
.nav-burger{ display:none; width:42px; height:42px; border-radius:10px; place-items:center; color:#fff; }
.nav-burger svg{ width:24px; height:24px; }

/* mega panel */
.mega-wrap{ position:relative; }
.mega{
  position:absolute; top:calc(100% + 10px); left:0; min-width:560px; background:#fff; color:var(--ink);
  border-radius:var(--r-card); box-shadow:var(--sh-3); padding:14px; border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t-fast) var(--spring), transform var(--t-fast) var(--spring), visibility var(--t-fast);
}
.mega.open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mega-col h4{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; }
.mega-col h4 a{ color:inherit; text-decoration:none; transition:color var(--t-fast); }
.mega-col h4 a:hover{ color:var(--amber-deep); }
.mega-link{ display:flex; gap:11px; padding:11px 12px; border-radius:var(--r-sm); transition:background var(--t-fast); }
.mega-link:hover{ background:var(--bg-soft); }
.mega-link .ml-ic{ width:34px; height:34px; border-radius:9px; background:var(--bg-mute); display:grid; place-items:center; color:var(--ink); flex:none; }
.mega-link:hover .ml-ic{ background:var(--amber-soft); color:var(--amber-deep); }
.mega-link .ml-ic svg{ width:17px; height:17px; }
.mega-link strong{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.92rem; }
.mega-link span{ font-size:0.8rem; color:var(--ink-soft); }
.mega.simple{ min-width:300px; }
.mega.simple .mega-grid{ grid-template-columns:1fr; }

/* mobile slide-over */
.sideover{
  position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none;
}
.sideover.open{ visibility:visible; pointer-events:auto; }
.sideover-backdrop{ position:absolute; inset:0; background:rgba(21,28,39,0.5); opacity:0; transition:opacity var(--t-med) var(--spring); }
.sideover.open .sideover-backdrop{ opacity:1; }
.sideover-panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,90vw); background:#fff; color:var(--ink);
  transform:translateX(100%); transition:transform var(--t-slow) var(--spring); overflow-y:auto; padding:24px;
}
.sideover.open .sideover-panel{ transform:translateX(0); }
.sideover-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.sideover .acc{ border-bottom:1px solid var(--line); }
.sideover .acc-btn{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:15px 4px; font-family:var(--font-display); font-weight:600; font-size:1rem; }
.sideover .acc-panel{ max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--spring); }
.sideover .acc.open .acc-panel{ max-height:560px; }
.sideover .acc-panel a{ display:block; padding:10px 4px; color:var(--ink-soft); font-size:0.92rem; }
.sideover .acc-panel a:hover{ color:var(--ink); }
.sideover-cta{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }

/* ============================================================
   DATA-VIZ COMPONENTS (black/white/amber, crisp)
   ============================================================ */
/* Browser frame */
.browser{
  border:1px solid var(--line); border-radius:18px 18px var(--r-card) var(--r-card); background:#fff;
  box-shadow:var(--sh-3); overflow:hidden;
}
.browser-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.browser-bar .dot-r{ width:11px; height:11px; border-radius:50%; background:#e7e9ee; }
.browser-bar .url{ flex:1; margin-left:10px; height:24px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; padding:0 12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.browser-body{ padding:22px; }

/* Score gauge (animated) */
.gauge{ position:relative; width:230px; height:230px; margin-inline:auto; }
.gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.gauge .track{ fill:none; stroke:var(--bg-mute); stroke-width:16; }
.gauge .fill{ fill:none; stroke:var(--amber); stroke-width:16; stroke-linecap:round; stroke-dasharray:565; stroke-dashoffset:565; transition:stroke-dashoffset 1.8s var(--spring-out); }
.gauge.in .fill{ stroke-dashoffset:91; } /* 84% of 565 circumference */
.gauge-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.gauge-num{ font-family:var(--font-display); font-weight:700; font-size:4.4rem; line-height:1; letter-spacing:-0.04em; }
.gauge-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

/* pillar mini scores */
.pscore{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); }
.pscore.warn{ border-color:rgba(242,169,0,0.5); background:var(--amber-soft); }
.pscore-name{ font-weight:600; font-size:0.92rem; display:flex; align-items:center; gap:8px; }
.pscore-bar{ flex:1; height:6px; border-radius:99px; background:var(--bg-mute); overflow:hidden; max-width:120px; }
.pscore-bar i{ display:block; height:100%; background:var(--ink); border-radius:99px; width:0; transition:width 1.4s var(--spring-out) 0.3s; }
.pscore.warn .pscore-bar i{ background:var(--amber); }
.pscore-val{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }

/* radar chart container sized via svg */
.radar{ width:100%; max-width:340px; margin-inline:auto; display:block; }

/* stat block */
.stat{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; line-height:1; }
.stat-xl{ font-size:clamp(2.8rem,5vw,4.4rem); }
.stat-lg{ font-size:clamp(2.2rem,3.6vw,3rem); }

/* chat bubbles (copilot) */
.chat{ display:flex; flex-direction:column; gap:14px; }
.bubble{ max-width:80%; padding:14px 18px; border-radius:18px; font-size:0.95rem; line-height:1.55; }
.bubble.you{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px; }
.bubble.ai{ align-self:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-bottom-left-radius:5px; }
.bubble.ai strong{ color:var(--amber-deep); }

/* step flow */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.steps::before{ content:""; position:absolute; top:34px; left:14%; right:14%; height:2px; background:var(--line-2); }
.step{ position:relative; text-align:center; }
.step-num{ width:68px; height:68px; margin:0 auto 18px; border-radius:50%; background:#fff; border:2px solid var(--line-2); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.4rem; position:relative; z-index:1; }
.step:hover .step-num{ border-color:var(--amber); color:var(--amber-deep); }

/* comparison table */
.cmp{ width:100%; border-collapse:collapse; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-1); border:1px solid var(--line); }
.cmp th, .cmp td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:0.92rem; }
.cmp thead th{ background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:600; }
.cmp tbody th{ font-weight:600; background:var(--bg-soft); }
.cmp td.yes{ color:var(--amber-deep); font-weight:700; }
.cmp td.no{ color:var(--ink-faint); }
.cmp tr:last-child td, .cmp tr:last-child th{ border-bottom:0; }
.cmp .col-pop{ background:var(--amber-soft); }

/* pricing cards */
.price-card{ position:relative; }
.price-card.popular{ border-color:var(--amber); box-shadow:var(--sh-2); }
.price-card .pop-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); }
.price-amt{ font-family:var(--font-display); font-weight:700; font-size:2.6rem; letter-spacing:-0.03em; }
.price-feat{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:0.92rem; }
.price-feat svg{ width:17px; height:17px; color:var(--amber-deep); flex:none; margin-top:3px; }

/* logos strip */
.logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,4vw,56px); opacity:0.6; }
.logos .logo{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; color:var(--ink-soft); }

/* footer */
.site-footer{ background:var(--ink); color:#fff; padding-block:72px 36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; }
.footer-brand .brand{ color:#fff; margin-bottom:16px; }
.footer-brand .brand-logo{ height:42px; }
.footer-brand p{ color:rgba(255,255,255,0.6); font-size:0.9rem; max-width:32ch; }
.footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.footer-col a{ display:block; color:rgba(255,255,255,0.78); font-size:0.9rem; padding:6px 0; transition:color var(--t-fast); }
.footer-col a:hover{ color:var(--amber); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12); }
.footer-bottom p, .footer-bottom a{ color:rgba(255,255,255,0.55); font-size:0.82rem; }
.footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,0.15); display:grid; place-items:center; transition:all var(--t-fast); }
.footer-social a:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.footer-social svg{ width:16px; height:16px; }

/* marquee */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:scrollx 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; text-align:left; font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.faq-q .pm{ width:24px; height:24px; flex:none; transition:transform var(--t-fast) var(--spring); color:var(--amber-deep); }
.faq-item.open .pm{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--spring); }
.faq-item.open .faq-a{ max-height:340px; }
.faq-a p{ padding-bottom:22px; color:var(--ink-soft); max-width:72ch; }

/* annotation callout */
.callout{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 13px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em; box-shadow:var(--sh-1); white-space:nowrap;
}
.callout b{ color:var(--amber-deep); }

/* ============================================================
   PULSE / heartbeat system — the brand's signature motion.
   Lub-dub rhythm on amber glows, a traveling ECG sweep in the
   hero, calm "resting pulse" breathing in grey sections, and a
   vital-sign ring on the live score gauge.
   ============================================================ */
@keyframes fp-beat{            /* lub-dub heartbeat */
  0%,40%,100%{ transform:scale(1); opacity:.40; }
  8% { transform:scale(1.12); opacity:.58; }
  14%{ transform:scale(1.04); opacity:.44; }
  22%{ transform:scale(1.16); opacity:.62; }
  32%{ transform:scale(1.00); opacity:.42; }
}
@keyframes fp-breathe{         /* resting pulse — grey sections */
  0%,100%{ transform:scale(1); opacity:.5; }
  50%   { transform:scale(1.2); opacity:.95; }
}
@keyframes fp-ecg{ to{ stroke-dashoffset:0; } }
@keyframes fp-ring{            /* vital-sign ring on the gauge */
  0%,40%,100%{ transform:scale(1); opacity:0; }
  8% { transform:scale(1.06); opacity:.7; }
  22%{ transform:scale(1.10); opacity:.85; }
  32%{ transform:scale(1.18); opacity:0; }
}

.pulse-glow{ position:absolute; border-radius:50%; filter:blur(48px); pointer-events:none; z-index:0; will-change:transform,opacity; }
.pulse-amber{
  width:min(52vw,640px); height:min(52vw,640px); right:-10vw; top:-12vw; opacity:.4;
  background:radial-gradient(circle, rgba(242,169,0,.55), rgba(242,169,0,0) 66%);
  animation:fp-beat 3.4s var(--spring) infinite;
}
.pulse-grey{
  width:min(60vw,720px); height:min(60vw,720px); opacity:.5; filter:blur(60px);
  background:radial-gradient(circle, rgba(21,28,39,.32), rgba(21,28,39,0) 64%);
  animation:fp-breathe 7s var(--spring) infinite;
}
/* keep section content above the z-index:0 decorative blobs (correct "behind the content" layering) */
.section > .container, .section > .container-wide{ position:relative; z-index:1; }
.pulse-grey.p-tl{ left:-16vw; top:-18vw; }
.pulse-grey.p-br{ right:-16vw; bottom:-20vw; }
.pulse-grey.p-tr{ right:-14vw; top:-16vw; }
.pulse-grey.p-bl{ left:-14vw; bottom:-18vw; }

/* hero background layer (homepage) */
.hero-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.hero-bg-dark{ position:absolute; left:-12vw; bottom:-18vw; width:42vw; height:42vw; max-width:560px; max-height:560px; border-radius:50%; background:radial-gradient(circle, rgba(21,28,39,.06), rgba(21,28,39,0) 60%); }

/* ECG traveling pulse line (hero signature) */
.ecg-band{ position:absolute; left:0; right:0; bottom:0; height:84px; z-index:0; opacity:.6; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ecg-band svg{ width:100%; height:100%; display:block; }
.ecg-band path.ecg{ fill:none; stroke:#f2a900; stroke-width:1.4; opacity:.4; vector-effect:non-scaling-stroke; }
.ecg-band path.ecg-sweep{ fill:none; stroke:#f2a900; stroke-width:2.6; opacity:.95; vector-effect:non-scaling-stroke; stroke-dasharray:5 95; stroke-dashoffset:100; animation:fp-ecg 3s linear infinite; filter:drop-shadow(0 0 5px rgba(242,169,0,.75)); }

/* vital-sign ring on a live gauge */
.gauge.live .ring-pulse{ fill:none; stroke:#f2a900; stroke-width:4; opacity:0; transform-origin:center; transform-box:fill-box; animation:fp-ring 3.4s var(--spring) infinite; }

/* ---------- Scroll reveal (restrained — DESIGN.md motion 0.2) ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-med) var(--spring-out), transform var(--t-med) var(--spring-out); }
.reveal.in{ opacity:1; transform:none; filter:none; }
.reveal-d1{ transition-delay:80ms; }
.reveal-d2{ transition-delay:160ms; }
.reveal-d3{ transition-delay:240ms; }
.reveal-d4{ transition-delay:320ms; }
/* "Pulse" is the brand — motion is intentionally always on across the site.
   prefers-reduced-motion is NOT honoured (per brand direction). Users can still
   opt out via the manual "Reduce motion" toggle in the footer (html.motion-off). */

/* page top spacer for fixed nav */
main{ display:block; }
.page-hero{ padding-top:clamp(48px,7vw,84px); }

/* utility */
.full-bleed{ width:100vw; margin-left:calc(50% - 50vw); }
.rounded{ border-radius:var(--r-card); }
.hidden{ display:none !important; }
.mt-auto{ margin-top:auto; }
.text-center{ text-align:center; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-center{ justify-content:center; }
.wrap{ flex-wrap:wrap; }
.bw{ border:1px solid var(--line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:860px){
  .primary-nav, .nav-cta .btn-ghost{ display:none; }
  .nav-burger{ display:grid; }
  .split, .split-wide{ grid-template-columns:1fr; gap:40px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps::before{ display:none; }
  .mega-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gauge{ width:190px; height:190px; }
  .gauge-num{ font-size:3.4rem; }
  .hero-float{ display:none; }   /* decorative floating radar overlaps on mobile — drop it */
}
@media (max-width:560px){
  .container{ padding-inline:18px; }
  .footer-grid{ grid-template-columns:1fr; }
  .nav-cta .btn-primary{ padding:9px 14px; font-size:0.82rem; }
  .section{ padding-block:56px; }
  .brand-logo{ height:30px; }
}

/* ============================================================
   MY HERO FIX
   ============================================================ */
@media (min-width:1024px){
  .page-hero .container-wide{
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-hero .container-wide .split-wide{
    margin: auto 100px;
  }
  .page-hero .container-wide .split-wide .stack, .page-hero .container-wide .split-wide .reveal-d2{
    width: 50%;
    float: left;
    margin-bottom: 100px;
    padding: 20px;
  }
  .page-hero .container-wide .reveal-d3{
    clear: both;
    margin-bottom: 50px;
  }
  .section {
    clear: both
  }
}