/* ==========================================================================
   Marketing site — design system (light)
   Self-contained by design: no CDN, no third-party request, no remote asset.
   Fonts are self-hosted (see below), so the page still renders identically
   offline, on a plane, in a client meeting.

   THE DISCIPLINE IS THE DESIGN. One accent colour, two greys, near-black ink,
   and sections separated by BACKGROUND ALTERNATION ALONE — no rules, no
   gradients, no borders between sections. That restraint is the whole reason a
   marketing page reads as "clean" rather than "busy"; every extra colour or
   divider costs more clarity than it buys.
   ========================================================================== */

/* ==========================================================================
   FONTS — Rubik for headings, Roboto for body.

   SELF-HOSTED, NOT LOADED FROM GOOGLE. Pulling these from fonts.googleapis.com
   would cost the page its "zero external requests" property, force a CSP
   widening (font-src is 'self'), add a render-blocking third-party round trip,
   and hand every EU visitor's IP to Google — which is the exact GDPR problem
   several European regulators have already ruled on. Both families are SIL
   Open Font License, so hosting them ourselves is free and permitted.

   Two variable files per family (latin + latin-ext) rather than four static
   weights. `unicode-range` makes latin-ext lazy: an English page never
   downloads it, so the real cost here is ~77KB, not the 124KB on disk.
   ========================================================================== */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/rubik-latin.b65daadded.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/rubik-latin-ext.15c3dca723.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-latin.665db5e157.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext.a6323dda08.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces — white, with one light band used to separate sections */
  --bg:          #FFFFFF;
  --bg-alt:      #F7F8FA;
  --surface:     #FFFFFF;
  --line:        #E6E9EE;
  --line-2:      #D6DBE3;

  /* ink — near-black headings on white is the brief: maximum readability */
  --ink:         #12141A;   /* headings          ~17:1 on white */
  --ink-2:       #4C5464;   /* body              ~8:1  on white */
  --ink-3:       #78808F;   /* muted / captions  ~4.6:1 on white */

  /* brand — ONE accent. Used for: eyebrow, CTA fill, icons, one highlighted
     phrase per heading, links. Nothing else. */
  --brand:       #5B3DF5;   /* 6.1:1 on white — safe for text AND button fill */
  --brand-ink:   #4526D9;   /* darker, for links on tinted backgrounds */
  --brand-tint:  #F2EFFE;
  --brand-tint2: #E7E1FD;

  /* semantic — only inside the product mockups, never in page chrome */
  --good:        #0E9F6E;
  --bad:         #E02424;
  --warn:        #D97706;

  /* elevation — light themes need SOFT, wide, low-opacity shadows. Hard or
     dark shadows on white read cheap and muddy the whole page. */
  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2: 0 4px 8px -2px rgba(16,24,40,.05), 0 12px 32px -8px rgba(16,24,40,.10);
  --sh-3: 0 8px 16px -4px rgba(16,24,40,.06), 0 28px 64px -16px rgba(16,24,40,.16);
  --sh-brand: 0 8px 24px -8px rgba(91,61,245,.45);

  --r-sm: 8px;  --r: 14px;  --r-lg: 20px;  --r-xl: 28px;

  --shell: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 9vw, 124px);

  /* A single easing everywhere. Consistency is most of what reads as "designed". */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Rubik carries the headings — the tall x-height and slightly softened
     geometry are what give the page its character. Roboto sets body copy,
     where a quieter, more neutral face reads better at length. */
  --font-head: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, system-ui, sans-serif;
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--brand-tint2); color: var(--ink); }

/* Visible focus everywhere. Never remove it — a marketing site is the first
   place a keyboard user judges whether the product will respect them. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout primitives ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

/* Sections alternate white / light band. THIS is the only separator. */
.sec { padding-block: var(--sec-y); position: relative; }
.sec.alt { background: var(--bg-alt); }
.sec.tight { padding-block: clamp(56px, 7vw, 92px); }

.sec-head { max-width: 760px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .lede { margin-top: 18px; }

/* ---------- type ---------- */
.display { font-family: var(--font-head);
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -.033em;
  font-weight: 800;
  color: var(--ink);
}
.h2 { font-family: var(--font-head);
  margin: 0;
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.026em;
  font-weight: 800;
  color: var(--ink);
}
.h3 { font-family: var(--font-head);
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.014em;
  font-weight: 700;
  color: var(--ink);
}
.h4 { font-family: var(--font-head); margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }

.lede { margin: 0; font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.62; color: var(--ink-2); }
.tiny { font-size: .8rem; line-height: 1.5; }
.dim  { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .88em; }
.tabnum { font-variant-numeric: tabular-nums; }
.up { color: var(--good); }
.down { color: var(--bad); }

/* The Adsterra move: highlight ONE phrase per heading in the accent colour.
   Cheapest possible way to make a page of headings scan fast. */
.hl { color: var(--brand); }

/* Hand-drawn underline on a single word. Used at most twice on the page. */
.mark { position: relative; white-space: nowrap; color: var(--ink); font-weight: 700; }
.mark svg { position: absolute; left: 0; right: 0; bottom: -.24em; width: 100%; height: .5em; overflow: visible; }
.mark svg path { stroke: var(--brand); stroke-width: 3.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220; }
.in .mark svg path, .rv.in .mark svg path { animation: draw .9s var(--ease) .35s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- eyebrow ---------- */
.eyebrow { font-family: var(--font-head);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .795rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint2);
  padding: 7px 15px; border-radius: 999px;
  margin-bottom: 22px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.eyebrow .dot.pulse { animation: pulse 2.2s var(--ease-io) infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(91,61,245,.5); }
  50%     { box-shadow: 0 0 0 6px rgba(91,61,245,0); }
}

/* ---------- buttons ---------- */
.btn { font-family: var(--font-head);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: .93rem; font-weight: 650; letter-spacing: .004em;
  padding: 13px 24px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: #4E31E8; box-shadow: 0 10px 30px -8px rgba(91,61,245,.55); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--ink-3); background: #FCFCFD; }
.btn-white { background: #fff; color: var(--brand-ink); }
.btn-white:hover { background: #F4F2FE; }
.btn-lg { padding: 16px 30px; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 10px 18px; font-size: .87rem; border-radius: 9px; }
.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* Text link with a moving arrow — used to end feature blocks. */
.link-arr { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--brand); }
.link-arr:hover { text-decoration: none; }
.link-arr svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .22s var(--ease); }
.link-arr:hover svg { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px -6px rgba(16,24,40,.10); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 70px; }
.logo { font-family: var(--font-head); display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem;
  color: var(--ink); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo-mk { width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  display: grid; place-items: center; flex: none; box-shadow: var(--sh-brand); }
.logo-mk svg { width: 18px; height: 18px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--ink-2); font-size: .92rem; font-weight: 550; padding: 8px 13px; border-radius: 8px;
  transition: color .18s var(--ease), background-color .18s var(--ease); }
.nav-links a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 40px; height: 40px; border-radius: 9px; background: none;
  border: 1px solid var(--line-2); cursor: pointer; padding: 9px; color: var(--ink); }
.burger svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }

#mobileNav { display: none; background: #fff; border-top: 1px solid var(--line); }
#mobileNav a { color: var(--ink-2); font-weight: 550; }

/* scroll progress */
.scroll-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brand); z-index: 70; transition: width .1s linear; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 84px); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); gap: clamp(32px, 5vw, 68px); align-items: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .875rem; color: var(--ink-2); }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note svg { width: 17px; height: 17px; stroke: var(--good); stroke-width: 2.6; fill: none; flex: none; }
.hero .lede { margin-top: 24px; max-width: 34em; }

/* ---------- stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-top: clamp(48px, 6vw, 78px);
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.stat-strip > div { background: var(--surface); padding: 26px 24px; }
.stat-strip .n { font-family: var(--font-head); font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 800; color: var(--brand);
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-strip .l { margin-top: 9px; font-size: .85rem; color: var(--ink-3); line-height: 1.45; }

/* ---------- generic card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.sec.alt .card { border-color: var(--line); }

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }

/* icon tile — solid accent square, the Adsterra pattern */
.ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--brand);
  display: grid; place-items: center; flex: none; box-shadow: var(--sh-brand);
}
.ico svg { width: 23px; height: 23px; stroke: #fff; stroke-width: 2.1; fill: none; }
.ico.soft { background: var(--brand-tint); box-shadow: none; }
.ico.soft svg { stroke: var(--brand); }

/* ==========================================================================
   FLIP CARDS — the at-a-glance feature summary
   Front = the promise. Back = what it actually does.

   Flips on hover (mouse), on focus (keyboard) and on click (touch — where
   :hover either never fires or sticks until you tap elsewhere, which is why
   the JS toggle exists rather than relying on hover alone).
   ========================================================================== */
.flip-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.flip {
  perspective: 1400px; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; width: 100%;
}
/* display:block is LOAD-BEARING, not tidiness. .flip-in is a <span> (it has to
   be — a button may only contain phrasing content), and CSS transforms are
   ignored on non-replaced INLINE elements. Left inline, rotateY and
   preserve-3d silently do nothing and both faces render stacked at zero width.
   The explicit min-height matters too: the faces are inset:0, so they need a
   positioned ancestor with a definite height to resolve against. */
.flip-in {
  display: block; position: relative; width: 100%; min-height: 246px;
  transform-style: preserve-3d;
  transition: transform .62s var(--ease);
}
.flip:hover .flip-in,
.flip:focus-visible .flip-in,
.flip.flipped .flip-in { transform: rotateY(180deg); }

.flip-f, .flip-b {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.flip-f { background: var(--surface); }
.flip-b {
  transform: rotateY(180deg);
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--sh-brand);
}
.flip-f .h3 { margin-top: 16px; }
.flip-f .fp { display: block; margin: 8px 0 0; font-size: .91rem; color: var(--ink-3); }
.flip-b .h3 { color: #fff; }
.flip-b .fp { display: block; margin: 10px 0 0; font-size: .9rem; color: rgba(255,255,255,.9); line-height: 1.6; }
.flip-b .fl { display: grid; gap: 7px; margin: 12px 0 0; }
.flip-b .fli { font-size: .865rem; color: rgba(255,255,255,.94); padding-left: 22px; position: relative; }
.flip-b .fli::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 8px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
/* The affordance: without this nobody discovers the back face. */
.flip-hint {
  margin-top: auto; padding-top: 14px; font-size: .78rem; font-weight: 650;
  color: var(--brand); display: inline-flex; align-items: center; gap: 6px;
}
.flip-hint svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* ==========================================================================
   FEATURE ROWS — alternating image/copy, the requested left-right rhythm
   Odd rows: copy left, visual right. Even rows: reversed via grid ORDER, not
   direction, so the DOM order stays the reading order for screen readers.
   ========================================================================== */
.frow {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(32px, 5.5vw, 76px); align-items: center;
}
.frow + .frow { margin-top: clamp(64px, 8vw, 118px); }
.frow .fr-copy { order: 1; }
.frow .fr-vis  { order: 2; }
.frow.flip-side .fr-copy { order: 2; }
.frow.flip-side .fr-vis  { order: 1; }
.fr-copy .h2 { margin-top: 4px; }
.fr-copy .lede { margin-top: 18px; }
.fr-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.fr-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.fr-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; stroke: var(--brand); stroke-width: 2.4; fill: none; }
.fr-copy .btn, .fr-copy .link-arr { margin-top: 28px; }

/* number badge that labels each feature row */
.fr-num { font-family: var(--font-head);
  display: inline-flex; align-items: center; gap: 10px; font-size: .8rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand);
}
.fr-num i { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-tint);
  display: grid; place-items: center; font-style: normal; font-size: .78rem; }

/* ---------- product mockup ---------- */
.mock {
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--sh-3); position: relative;
}
.mock-bar {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.mock-dots { display: inline-flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mock-url { font-size: .76rem; color: var(--ink-3); font-family: var(--mono);
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 11px; }
.mock-live { margin-left: auto; font-size: .74rem; font-weight: 650; color: var(--good);
  display: inline-flex; align-items: center; gap: 6px; }
.mock-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  animation: pulse 2s var(--ease-io) infinite; }

.app { display: grid; grid-template-columns: 168px minmax(0,1fr); min-height: 300px; }
.app-side { background: var(--bg-alt); border-right: 1px solid var(--line); padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.app-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  font-size: .8rem; color: var(--ink-3); font-weight: 550; }
.app-nav svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; flex: none; }
.app-nav.on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; }
.app-main { padding: 18px; min-width: 0; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; }
.kpi .k { font-size: .71rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.kpi .v { font-family: var(--font-head); font-size: 1.06rem; font-weight: 750; color: var(--ink); margin-top: 5px; letter-spacing: -.02em; }
.kpi .d { font-size: .72rem; margin-top: 3px; font-weight: 650; }

.mock-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; }

/* ---------- table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .81rem; }
.tbl th {
  text-align: left; font-weight: 650; color: var(--ink-3); font-size: .71rem;
  text-transform: uppercase; letter-spacing: .045em; padding: 9px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
.tbl .name { color: var(--ink); font-weight: 600; }
.tbl tbody tr { transition: background-color .16s var(--ease); }
.tbl tbody tr:hover { background: var(--bg-alt); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* proportion bar inside a table cell */
.bar-cell { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar-cell i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand);
  transition: width 1s var(--ease); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 650;
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.on   { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand-tint2); }
.chip.good { background: #E7F7F0; color: #07724F; border-color: #C7EBDC; }
.chip.bad  { background: #FDECEC; color: #A81C1C; border-color: #F7D2D2; }
.chip.li   { background: #EEF7E0; color: #4A6B12; border-color: #DCEDC1; }
.chip.am   { background: #FEF3E2; color: #92610C; border-color: #FAE3C0; }
.chip.cy   { background: #E3F5F9; color: #0B6A80; border-color: #C4E9F1; }
.chip.ro   { background: #FDECF1; color: #A31D45; border-color: #F7D2DF; }

/* ---------- dimension explorer ---------- */
.dim-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dim-btn { font-family: var(--font-head);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2);
  transition: all .18s var(--ease);
}
.dim-btn:hover { border-color: var(--brand); color: var(--brand); }
.dim-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--sh-brand); }

/* ---------- campaign doctor ---------- */
.dx { display: grid; gap: 10px; }
.dx-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  opacity: .45; transition: opacity .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.dx-row.done { opacity: 1; }
.dx-row.hit { border-color: #F3C9C9; background: #FEF6F6; }
.dx-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dx-ic svg { width: 15px; height: 15px; stroke-width: 2.6; fill: none; }
.dx-ic.sp { background: var(--bg-alt); }
.dx-ic.sp svg { stroke: var(--ink-3); animation: spin 1s linear infinite; }
.dx-ic.ok { background: #E7F7F0; } .dx-ic.ok svg { stroke: var(--good); }
.dx-ic.no { background: #FDECEC; } .dx-ic.no svg { stroke: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
.dx-verdict {
  margin-top: 16px; padding: 18px 20px; border-radius: 14px;
  background: var(--brand-tint); border: 1px solid var(--brand-tint2);
  opacity: 0; transform: translateY(8px); transition: all .45s var(--ease);
}
.dx-verdict.show { opacity: 1; transform: none; }

/* ---------- verticals grid ---------- */
.vert { font-family: var(--font-head);
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  font-weight: 650; color: var(--ink); font-size: .97rem;
  transition: all .22s var(--ease);
}
.vert:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.vert svg { width: 22px; height: 22px; stroke: var(--brand); stroke-width: 2; fill: none; flex: none; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq-q { font-family: var(--font-head);
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 1.04rem; font-weight: 650; color: var(--ink); letter-spacing: -.012em;
}
.faq-q:hover { color: var(--brand); }
.faq-q i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-alt);
  display: grid; place-items: center; transition: all .28s var(--ease); }
.faq-q i::before, .faq-q i::after {
  content: ""; position: absolute; background: var(--ink-2); border-radius: 2px;
  transition: transform .28s var(--ease), background-color .28s var(--ease);
}
.faq-q i::before { width: 11px; height: 2px; }
.faq-q i::after  { width: 2px; height: 11px; }
.faq.open .faq-q i { background: var(--brand); }
.faq.open .faq-q i::before, .faq.open .faq-q i::after { background: #fff; }
.faq.open .faq-q i::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .38s var(--ease); }
.faq-a > div { padding: 0 4px 24px; color: var(--ink-2); max-width: 74ch; }

/* ---------- final CTA panel ---------- */
.cta-panel {
  background: var(--brand); border-radius: var(--r-xl);
  padding: clamp(44px, 6.5vw, 84px) clamp(28px, 5vw, 64px);
  text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 24px 70px -20px rgba(91,61,245,.55);
}
/* one soft light source, no orbs, no grain */
.cta-panel::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.22), transparent 60%);
  pointer-events: none;
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel .display, .cta-panel .h2 { color: #fff; }
.cta-panel .lede { color: rgba(255,255,255,.9); margin-inline: auto; max-width: 46em; margin-top: 20px; }
.cta-panel .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); color: #fff; }
.cta-panel .hero-note { justify-content: center; color: rgba(255,255,255,.9); }
.cta-panel .hero-note svg { stroke: #fff; }

/* ---------- footer ---------- */
.footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 76px) 32px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px 28px; }
.foot-col h5 { font-family: var(--font-head); margin: 0 0 14px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); }
.foot-col a { display: block; padding: 5px 0; color: var(--ink-2); font-size: .91rem; }
.foot-col a:hover { color: var(--brand); text-decoration: none; }
.foot-bot { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; font-size: .855rem; color: var(--ink-3); }
.foot-bot a { color: var(--ink-3); }
.foot-bot .sp { margin-left: auto; }

/* ---------- reveals ---------- */
.rv, .rv-l, .rv-r, .rv-s { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv   { transform: translateY(22px); }
.rv-l { transform: translateX(-26px); }
.rv-r { transform: translateX(26px); }
.rv-s { transform: scale(.975); }
.rv.in, .rv-l.in, .rv-r.in, .rv-s.in { opacity: 1; transform: none; }
[data-d="1"] { transition-delay: .06s; } [data-d="2"] { transition-delay: .12s; }
[data-d="3"] { transition-delay: .18s; } [data-d="4"] { transition-delay: .24s; }
[data-d="5"] { transition-delay: .3s; }  [data-d="6"] { transition-delay: .36s; }
[data-d="7"] { transition-delay: .42s; } [data-d="8"] { transition-delay: .48s; }

/* realtime feed rows (built in JS — class lives here so the JS stays theme-free) */
.rt-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--line); font-size: .8rem;
  opacity: 0; transform: translateY(-8px); transition: all .45s var(--ease);
}
.rt-row.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; gap: 34px; }
  /* On one column the visual ALWAYS follows the copy, whatever the desktop
     order was — alternating sides is meaningless stacked, and leading with an
     image pushes the words below the fold. */
  .frow .fr-copy, .frow.flip-side .fr-copy { order: 1; }
  .frow .fr-vis,  .frow.flip-side .fr-vis  { order: 2; }
  .flip-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-cta .btn-ghost { display: none; }
  .g3 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .g2, .flip-grid, .g4 { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .hero-cta .btn { width: 100%; }
  .stat-strip { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bot .sp { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   REDUCED MOTION — collapse everything, show all content immediately.
   Never add an animation outside this guard.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .rv, .rv-l, .rv-r, .rv-s { opacity: 1 !important; transform: none !important; }
  .mark svg path { stroke-dashoffset: 0; }
  /* The flip still works — it just happens instantly rather than rotating. */
  .flip-in { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .nav, .scroll-bar, .burger, #mobileNav, .cta-panel { display: none !important; }
  .rv, .rv-l, .rv-r, .rv-s { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}