/* ═══════════════════════════════════════════════════════════
   DJI × Amflow : 9-Month Organic Growth Case Study
   Design language: black editorial / kinetic data storytelling
   Reference DNA: element8.ae (pure black, geometric sans,
   word-split reveals, ghost echo headings, hairline rules)
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────── */
:root{
  --bg:#000000;
  --bg-1:#06070A;
  --bg-2:#0B0D12;
  --bg-3:#12151C;

  /* Text : DJI's on-dark hierarchy, kept at or above WCAG AA on black.
     DJI's own .45-alpha tertiary lands at 4.4:1, so the lower steps use
     their solid greys (#9FA3A6 / #82868A) instead. */
  --fg:#FFFFFF;                    /* 21.0:1 */
  --fg-2:rgba(255,255,255,.85);    /* 14.9:1 : DJI primary body on dark */
  --fg-3:#9FA3A6;                  /*  8.3:1 : DJI grey, captions */
  --fg-4:#82868A;                  /*  5.7:1 : smallest chart axis text */

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);
  --line-3:rgba(255,255,255,.18);

  /* Brand : sampled from dji.com */
  --brand:#1890FF;                 /*  6.5:1 : DJI link blue, the readable accent */
  --brand-deep:#0070D5;            /*  DJI CTA blue : solid fills (white on it = 4.9:1) */
  --brand-alt:#7FC7FF;             /* 11.6:1 : light tint, separates Amflow from DJI */
  --alert:#FF6B73;                 /*  7.6:1 : tint of DJI red #D32029, for risk */

  --accent:var(--brand);

  /* RankFast pairing: an editorial serif for display, a geometric sans for
     everything read at length.
       PP Editorial New  -> Instrument Serif  (stand-in)
       Euclid Circular B -> DM Sans           (stand-in)
     Both stand-ins are open-licence. Swap the real faces in at the @font-face
     block and these tokens carry them everywhere. */
  --ff-display:'Instrument Serif', 'PP Editorial New', Georgia, 'Times New Roman', serif;
  --ff-body:'DM Sans', 'Euclid Circular B', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* role aliases used throughout the sheet */
  --ff-d:var(--ff-body);      /* default text */
  --ff-s:var(--ff-display);   /* emphasised words */
  --ff-m:var(--ff-body);      /* labels, captions, data */

  --pad:clamp(20px, 5vw, 64px);
  --maxw:1340px;
  --r:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* Motion curves, chosen per role */
  --e-expo:cubic-bezier(.16,1,.3,1);      /* entrances: fast attack, long settle */
  --e-io:cubic-bezier(.65,0,.35,1);       /* things that draw along their length */
  --e-back:cubic-bezier(.34,1.45,.64,1);  /* the single pop (hero mark) */
  --e-soft:cubic-bezier(.4,0,.2,1);       /* hovers and small state changes */
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ff-d); font-size:16px; font-weight:400;
  line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.04}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
b,strong{font-weight:600}
::selection{background:var(--brand); color:#000}

.skip{
  position:fixed; left:-999px; top:12px; z-index:200;
  background:var(--brand); color:#000; padding:10px 18px; border-radius:999px;
  font:600 13px/1 var(--ff-d);
}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}

/* ── ATMOSPHERE ────────────────────────────────────────── */
#fx{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.6}
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-4%)} 50%{transform:translate(-3%,3%)}
  66%{transform:translate(4%,2%)} 83%{transform:translate(-2%,-2%)}
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, rgba(24,144,255,.055), transparent 55%),
             radial-gradient(90% 70% at 50% 110%, rgba(0,0,0,.9), transparent 60%);
}

.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:var(--line-2)}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
  box-shadow:0 0 14px rgba(24,144,255,.6);
}

/* custom cursor (pointer devices only) */
.cursor{position:fixed; inset:0; z-index:150; pointer-events:none; display:none}
.cursor__dot,.cursor__ring{position:absolute; top:0; left:0; border-radius:50%; transform:translate(-50%,-50%)}
.cursor__dot{width:6px; height:6px; background:var(--brand)}
.cursor__ring{
  width:34px; height:34px; border:1px solid rgba(24,144,255,.4);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s;
}
.cursor.is-hot .cursor__ring{width:56px; height:56px; border-color:var(--brand)}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
}

/* ── LAYOUT ────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:3}
.sec{position:relative; padding-block:clamp(84px,11vw,168px); z-index:3}
.sec--alt{background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%)}
.sec--alt::before,.sec::after{content:''; position:absolute; left:0; right:0; height:1px; background:var(--line-2)}
.sec--alt::before{top:0}
.sec::after{display:none}
.sec--amflow{--accent:var(--brand-alt)}

/* section number, editorial marker */
.sec[data-num]>.wrap::before{
  content:attr(data-num); position:absolute; top:-.35em; right:var(--pad);
  font:300 clamp(70px,13vw,190px)/1 var(--ff-d); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055);
  pointer-events:none; z-index:-1;
}
.sec[data-num]>.wrap{position:relative}
.sec[data-num]{overflow:clip}

/* ── TYPE ──────────────────────────────────────────────── */
.h1{font-size:clamp(38px,7vw,96px); font-weight:600; line-height:.98; letter-spacing:-.04em}
.h2{font-size:clamp(30px,4.6vw,62px); font-weight:600; line-height:1.02; letter-spacing:-.035em}
/* Emphasised words use a SOLID colour, not a gradient.
   `background-clip:text` paints the ancestor's background through its
   descendants' glyphs, but splitWords() moves the text of a heading `em`
   into .w (overflow:hidden) + .wi (transformed). The clip cannot resolve
   across that boundary, so every emphasised word in a heading rendered as
   nothing. Solid colour is immune to the element structure. */
.h2 em,.h1 em,.lede em,p em{
  font-family:var(--ff-s); font-style:italic; font-weight:400;
  color:var(--brand);
  padding-right:.04em;
}
.sec--amflow .h2 em,.sec--amflow p em{color:var(--brand-alt)}
.h1 em{letter-spacing:-.02em}

.hstack{position:relative; display:grid}
.hstack>.h2,.hstack>.h1{grid-area:1/1; position:relative; z-index:2; max-width:20ch}
.hstack--big>.h1{max-width:16ch}
.ghost{
  grid-area:1/1; z-index:1; pointer-events:none; user-select:none;
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(30px,4.6vw,62px); line-height:1.02; letter-spacing:-.035em;
  max-width:20ch;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.11);
  transform:translate(6px,7px);
}
.ghost--big{font-size:clamp(38px,7vw,96px); line-height:.98; letter-spacing:-.04em; max-width:16ch}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 11px/1 var(--ff-m); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); margin-bottom:26px;
}
.eyebrow i{width:22px; height:1px; background:currentColor; display:block}
.eyebrow--amflow{color:var(--brand-alt)}

.lede{
  margin-top:26px; max-width:62ch;
  font-size:clamp(15px,1.35vw,19px); font-weight:400; line-height:1.62; color:var(--fg-2);
}
.minihead{
  font:600 12px/1.3 var(--ff-m); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2);
}
.minihead .unit{color:var(--fg-3); text-transform:none; letter-spacing:.04em}
.foot{margin-top:18px; font-size:12.5px; color:var(--fg-3); line-height:1.55}
.mt{margin-top:56px; display:block}
.sechead{margin-bottom:clamp(44px,5.5vw,80px)}

/* ── BUTTONS / TAGS ────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line-3); border-radius:999px;
  padding:11px 20px; font:600 13px/1 var(--ff-d); letter-spacing:-.01em;
  background:rgba(255,255,255,.03); position:relative; overflow:hidden;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg{width:13px; height:13px; transition:transform .35s var(--ease)}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--brand);
  transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1;
}
.btn>*{position:relative; z-index:1}
.btn:hover{color:#000; border-color:var(--brand)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--lg{padding:17px 30px; font-size:16px}
.btn--lg svg{width:15px; height:15px}

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font:600 10.5px/1 var(--ff-m); letter-spacing:.12em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; border:1px solid var(--line); color:var(--fg-2);
  white-space:nowrap;
}
.tag--brand{color:var(--brand); border-color:rgba(24,144,255,.3); background:rgba(24,144,255,.06)}
.tag--deep{color:var(--brand); border-color:rgba(0,112,213,.4); background:rgba(0,112,213,.10)}
.tag--warn{color:#FF6B73; border-color:rgba(211,32,41,.28); background:rgba(211,32,41,.05)}

/* ── NAV ───────────────────────────────────────────────── */
.nav{position:fixed; top:0; left:0; right:0; z-index:110; transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(0,0,0,.72); backdrop-filter:blur(16px); border-bottom-color:var(--line-2)}
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:24px; justify-content:space-between;
}
/* RankFast lockup: the double-chevron mark is monochrome in the brand's own
   artwork, so it renders white on this ground and only picks up the accent on
   hover. Wordmark is set heavy and tight to match the logotype's weight. */
.brand{display:inline-flex; align-items:center; gap:9px}
.brand__mark{width:19px; height:19px; color:var(--fg); transition:color .35s var(--e-soft)}
.brand__txt{font:700 17px/1 var(--ff-d); letter-spacing:-.035em}
.brand:hover .brand__mark{color:var(--brand)}
.nav__links{display:flex; gap:26px}
.nav__links a{
  font:400 13.5px/1 var(--ff-d); color:var(--fg-2); position:relative; padding-bottom:3px;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brand);
  transition:width .35s var(--ease);
}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after{width:100%}
@media (max-width:1000px){.nav__links{display:none}}
@media (max-width:560px){.btn--sm{display:none}}

/* ── HERO ──────────────────────────────────────────────── */
.hero{
  position:relative; z-index:3;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(120px,16vh,180px) clamp(90px,12vh,130px);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font:600 11px/1 var(--ff-m); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  background:rgba(255,255,255,.02);
}
.pulse{width:6px; height:6px; border-radius:50%; background:var(--brand); position:relative}
.pulse::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--brand);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:1} 100%{transform:scale(2);opacity:0}}

.hero__title{
  margin:clamp(28px,4vw,46px) 0 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:0 clamp(14px,2.4vw,34px);
  font-size:clamp(52px,12vw,172px); font-weight:600; line-height:.86; letter-spacing:-.055em;
}
.hero__line{display:inline-block}
/* Both client names read at equal weight. This previously carried a
   gradient via background-clip:text, which painted nothing because the
   text sits inside .mask (overflow:hidden) + .mi (transformed), so
   "Amflow" was invisible. A lockup naming two clients should not rank
   one above the other anyway. */
.hero__line--2{color:var(--fg)}
.mask{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-bottom:-.06em}
.mi{display:inline-block; will-change:transform}
.hero__x{
  display:inline-block; width:clamp(34px,7vw,104px); height:clamp(34px,7vw,104px);
  color:var(--brand); flex:none;
}
/* No continuous spin: a rotating X passes through 45 degrees, where it
   reads as a plus sign. "DJI + Amflow" says something different from
   "DJI x Amflow". The entrance rotation below carries the motion instead. */
.hero__x svg{width:100%; height:100%}

.hero__lede{
  margin-top:clamp(28px,3.4vw,42px); max-width:60ch;
  font-size:clamp(16px,1.5vw,21px); font-weight:400; line-height:1.58; color:var(--fg-2);
}
.hero__stats{
  margin-top:clamp(44px,5.5vw,72px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-2); border-block:1px solid var(--line-2);
}
.hstat{background:var(--bg); padding:26px 22px 26px 0}
.hstat:not(:first-child){padding-left:22px}
.hstat__v{
  font-size:clamp(28px,3.4vw,46px); font-weight:300; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.hstat:nth-child(1) .hstat__v,.hstat:nth-child(2) .hstat__v{color:var(--brand)}
.hstat:nth-child(3) .hstat__v{color:var(--brand-alt)}
.hstat__l{margin-top:10px; font:400 12.5px/1.4 var(--ff-d); color:var(--fg-3)}
@media (max-width:820px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hstat{padding:20px 18px !important}
}

.hero__meta{
  margin-top:clamp(28px,3.4vw,40px); display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font:400 11.5px/1 var(--ff-m); letter-spacing:.05em; color:var(--fg-3);
}
.hero__meta i{width:3px; height:3px; border-radius:50%; background:var(--fg-4); display:block}

.scrollcue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:4;
  font:600 10px/1 var(--ff-m); letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3);
}
.scrollcue i{width:1px; height:46px; background:linear-gradient(180deg,var(--brand),transparent); display:block; animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.scrollcue{display:none}}

/* ── TICKER ────────────────────────────────────────────── */
.ticker{
  position:relative; z-index:3; overflow:hidden;
  border-block:1px solid var(--line-2); background:rgba(255,255,255,.015);
  padding-block:16px;
  /* fade both ends so the loop reads as continuous, not clipped */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__track{display:flex; width:max-content; animation:marq 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex; align-items:center; gap:0; padding-right:0}
.ticker__set span{
  font:400 13px/1 var(--ff-m); letter-spacing:.04em; color:var(--fg-2); white-space:nowrap;
}
.ticker__set b{display:block; width:5px; height:5px; border-radius:50%; background:var(--brand); margin-inline:26px; flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── GRIDS ─────────────────────────────────────────────── */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2)}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:22px}
@media (max-width:1080px){.grid4{grid-template-columns:repeat(2,1fr)} .grid5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid3{grid-template-columns:1fr} .grid5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid4{grid-template-columns:1fr} .grid5{grid-template-columns:1fr}}

/* KPI cards */
.kpi{background:var(--bg); padding:clamp(24px,2.6vw,38px); position:relative; overflow:hidden}
.kpi::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.kpi:hover::after{transform:scaleX(1)}
.kpi--dji{--accent:var(--brand)}
.kpi--amflow{--accent:var(--brand-alt)}
.kpi__delta{
  font-size:clamp(34px,3.8vw,54px); font-weight:300; line-height:1; letter-spacing:-.045em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.kpi__t{margin-top:16px; font-size:15px; font-weight:600; color:var(--fg)}
.kpi__range{
  margin-top:12px; display:flex; align-items:center; gap:9px;
  font:400 12.5px/1 var(--ff-m); color:var(--fg-3);
}
.kpi__range svg{width:20px; height:7px; color:var(--fg-4); flex:none}
.kpi__range b{color:var(--fg); font-weight:600}

/* Pillars */
.grid3--pillars{margin-top:1px; border:1px solid var(--line-2); border-top:0}
.pillar{background:var(--bg); padding:clamp(24px,2.6vw,38px)}
.pillar__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  font:600 12px/1 var(--ff-m); color:var(--brand);
}
.pillar__t{margin:18px 0 12px; font-size:20px; font-weight:600}
.pillar p{font-size:14.5px; color:var(--fg-2); line-height:1.62}

/* ── SPLIT LAYOUTS ─────────────────────────────────────── */
.split2{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,3.6vw,60px); align-items:start}
.split2--wide{grid-template-columns:1.45fr 1fr}
.split2--tight{grid-template-columns:.9fr 1fr; margin-top:clamp(32px,3.6vw,52px); align-items:center}
@media (max-width:960px){.split2,.split2--wide,.split2--tight{grid-template-columns:1fr}}

.probs{margin-top:26px; display:grid; gap:1px; background:var(--line-2); border-block:1px solid var(--line-2)}
.probs li{background:var(--bg); padding:24px 0}
.probs h4{font-size:18px; font-weight:600; margin-bottom:9px}
.probs p{font-size:14.5px; color:var(--fg-2); line-height:1.62}

/* ── PANELS ────────────────────────────────────────────── */
.panel{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  padding:clamp(22px,2.4vw,34px); position:relative; overflow:hidden;
}
.panel::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.panel__head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.panel--chart{margin-top:0}
.legend{display:flex; gap:16px; flex-wrap:wrap}
.legend__i{display:inline-flex; align-items:center; gap:7px; font:400 11.5px/1 var(--ff-m); color:var(--fg-3)}
.legend__i::before{content:''; width:10px; height:10px; border-radius:3px; background:var(--fg-4)}
.legend__i--dji::before{background:var(--brand)}
.legend__i--amflow::before{background:var(--brand-alt)}
.legend__i--deep::before{background:var(--brand-deep)}
.legend__i--dash::before{background:transparent; border:1px dashed var(--brand-deep); border-radius:2px}

/* ── RANKS (challenge) ─────────────────────────────────── */
.ranks{display:grid; gap:1px; background:var(--line-2)}
.ranks li{
  background:var(--bg-1); display:grid; grid-template-columns:1.25fr auto 1fr auto;
  align-items:center; gap:14px; padding:14px 4px;
}
.ranks__k{font-size:14.5px; font-weight:400}
.ranks__k b{color:var(--brand-alt); font-weight:600; font-size:12.5px}
.ranks__v{font:400 11.5px/1 var(--ff-m); color:var(--fg-3); white-space:nowrap}
.ranks__bar{display:block; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden}
.ranks__bar i{display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,#FF6B73,rgba(211,32,41,.25));
  transform:scaleX(var(--depth,1)); transform-origin:left}
.ranks__p{font:600 13px/1 var(--ff-m); color:#FF6B73; text-align:right; min-width:44px}
.ranks__p--na{color:var(--fg-3)}
@media (max-width:620px){
  .ranks li{grid-template-columns:1fr auto; row-gap:8px}
  .ranks__bar{grid-column:1/-1}
}

/* ── STEPS (approach) ──────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px)}
@media (max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative; padding-top:26px; border-top:1px solid var(--line)}
.step__n{font:600 11px/1 var(--ff-m); letter-spacing:.18em; color:var(--brand)}
.step__t{margin:16px 0 12px; font-size:22px; font-weight:600}
.step p{font-size:14.5px; color:var(--fg-2); line-height:1.62}
.step__line{
  position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--brand); transform-origin:left;
}

.chipblock{margin-top:clamp(48px,5vw,76px); border-top:1px solid var(--line-2); padding-top:34px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.chips li{
  font:400 13px/1 var(--ff-d); padding:10px 17px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-2); background:rgba(255,255,255,.02);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.chips li:hover{border-color:var(--brand); color:var(--fg); transform:translateY(-2px)}
.chips--deep li:hover{border-color:var(--brand-deep)}

/* ── DUO / BIGSTAT ─────────────────────────────────────── */
.duo{display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(28px,3.4vw,56px); align-items:stretch}
@media (max-width:960px){.duo{grid-template-columns:1fr}}
.duo__stats{display:grid; gap:1px; background:var(--line-2); align-content:start; border-block:1px solid var(--line-2)}
.bigstat{background:var(--bg); padding:clamp(22px,2.4vw,34px) 0}
.bigstat__v{
  font-size:clamp(48px,6.4vw,88px); font-weight:300; line-height:.95; letter-spacing:-.05em;
  color:var(--brand); font-variant-numeric:tabular-nums;
}
.bigstat--amflow .bigstat__v{color:var(--brand-alt)}
.bigstat__l{margin-top:12px; font-size:15px; font-weight:600}
.bigstat__s{margin-top:7px; font:400 12.5px/1 var(--ff-m); color:var(--fg-3); display:flex; gap:8px; align-items:center}
.bigstat__s i{color:var(--fg-4)}
.up{color:var(--brand); font-weight:600}
.bigstat--amflow .up{color:var(--brand-alt)}

/* duel bars */
.duels{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,44px)}
@media (max-width:520px){.duels{grid-template-columns:1fr; gap:34px}}
.duel__lab{font:600 11.5px/1 var(--ff-m); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin-bottom:20px}
.duel__plot{display:flex; align-items:flex-end; gap:clamp(14px,2vw,26px); height:190px}
.duel__col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:10px}
.duel__val{font:600 14px/1 var(--ff-m); color:var(--fg-2); font-variant-numeric:tabular-nums}
.duel__col--now .duel__val{color:var(--fg); font-size:17px}
.duel__fill{
  width:100%; border-radius:6px 6px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border-top:2px solid rgba(255,255,255,.28);
}
.duel__col--now .duel__fill{
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 22%,transparent));
  border-top-color:var(--c); box-shadow:0 0 40px -6px color-mix(in srgb,var(--c) 55%,transparent);
}
.duel__name{font:400 11.5px/1 var(--ff-m); color:var(--fg-4); letter-spacing:.08em; text-transform:uppercase; text-align:center; padding-top:12px; border-top:1px solid var(--line-2)}

/* ── WINS ──────────────────────────────────────────────── */
.wins{margin-top:clamp(48px,5vw,76px); border-top:1px solid var(--line-2); padding-top:34px}
.wins .grid3{margin-top:22px; border:1px solid var(--line-2)}
.win{background:var(--bg); padding:clamp(22px,2.4vw,32px)}
.win__v{font-size:clamp(40px,4.6vw,62px); font-weight:300; line-height:1; letter-spacing:-.045em; color:var(--brand); font-variant-numeric:tabular-nums}
.win--amflow .win__v{color:var(--brand-alt)}
.win p{margin-top:12px; font-size:14.5px; color:var(--fg-2)}
.win p b{color:var(--fg)}

/* ── CHARTS (shared) ───────────────────────────────────── */
.chart{width:100%}

/* horizontal bars */
.hbars{display:grid; gap:16px}
.hbar__top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px}
.hbar__label{font-size:14px; font-weight:400; color:var(--fg)}
.hbar__nums{font:400 12px/1 var(--ff-m); color:var(--fg-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.hbar__nums b{color:var(--fg); font-weight:600}
.hbar__nums .zero{color:var(--fg-4)}
.hbar__track{display:grid; gap:5px}
.hbar__row{height:9px; border-radius:5px; background:rgba(255,255,255,.05); overflow:hidden}
.hbar__fill{height:100%; border-radius:5px; transform-origin:left}
.hbar__fill--prior{background:rgba(255,255,255,.2)}
.hbar__fill--now{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 45%,transparent));
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--c) 60%,transparent)}
.hbar__row--prior{height:6px}

/* columns (KPI %) */
.cols{display:flex; align-items:flex-end; gap:clamp(8px,1.4vw,20px); height:230px; position:relative; padding-top:20px}
.cols__target{
  position:absolute; left:0; right:0; border-top:1px dashed rgba(255,255,255,.22);
  font:400 10.5px/1 var(--ff-m); color:var(--fg-3); pointer-events:none;
}
.cols__target span{position:absolute; right:0; top:-16px; background:var(--bg-2); padding:2px 6px; border-radius:4px}
.col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-width:0}
.col__v{font:600 12px/1 var(--ff-m); color:var(--fg-2); text-align:center; margin-bottom:8px; font-variant-numeric:tabular-nums}
.col__fill{
  width:100%; border-radius:5px 5px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 18%,transparent));
  border-top:2px solid var(--c);
}
.col__l{font:400 10px/1.2 var(--ff-m); color:var(--fg-4); text-align:center; padding-top:10px; letter-spacing:.03em}
@media (max-width:640px){.col__l{writing-mode:vertical-rl; text-orientation:mixed; padding-top:8px}}

/* line chart */
.lchart{position:relative; width:100%}
.lchart svg{width:100%; height:auto; overflow:visible}
.lchart__xlabels{display:flex; justify-content:space-between; margin-top:14px; gap:4px}
.lchart__xlabels span{font:400 10.5px/1 var(--ff-m); color:var(--fg-4); flex:1; text-align:center; letter-spacing:.02em}
@media (max-width:760px){.lchart__xlabels span:nth-child(even){opacity:0}}

/* arc */
.panel--arc,.panel--rank{text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px}
.arc{width:100%; max-width:280px}
.arc svg{width:100%; height:auto}
.arc__cap{font-size:14px; color:var(--fg-2); line-height:1.6; max-width:34ch}
.arcwrap{display:grid; gap:clamp(18px,2vw,28px); align-content:start}
.arc__val{font:300 42px/1 var(--ff-d); fill:var(--brand); letter-spacing:-.04em}
.arc__from{font:400 12px/1 var(--ff-m); fill:var(--fg-3)}

.rankbadge{position:relative; display:grid; place-items:center; width:150px; height:150px; margin-top:8px}
.rankbadge__n{font:300 66px/1 var(--ff-d); letter-spacing:-.05em; color:var(--brand-alt)}
.rankbadge__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(127,199,255,.35);
  box-shadow:0 0 60px -18px var(--brand-alt), inset 0 0 40px -22px var(--brand-alt);
  animation:ring 4s ease-in-out infinite;
}
@keyframes ring{0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.6}}

/* ── NOTES / MEGA DELTA ────────────────────────────────── */
.note{border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,32px)}
.note p{margin-top:14px; font-size:15px; color:var(--fg-2); line-height:1.65}
.note p b{color:var(--fg)}
.megadelta__v{
  font-size:clamp(60px,8.6vw,132px); font-weight:300; line-height:.9; letter-spacing:-.055em;
  background:linear-gradient(160deg,#fff 20%,var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.megadelta p{margin-top:16px; font-size:15px; color:var(--fg-2); max-width:24ch}

/* ── PAGE CARDS ────────────────────────────────────────── */
.pcard{
  border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
  background:rgba(255,255,255,.02); transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.pcard:hover{border-color:rgba(24,144,255,.4); transform:translateY(-4px); background:rgba(24,144,255,.04)}
.pcard__d{font:600 22px/1 var(--ff-d); letter-spacing:-.03em; color:var(--brand); font-variant-numeric:tabular-nums}
.pcard h4{margin:16px 0 7px; font-size:15px; font-weight:600}
.pcard p{font:400 12.5px/1.5 var(--ff-m); color:var(--fg-3)}
.pcard--hero{background:rgba(24,144,255,.06); border-color:rgba(24,144,255,.3)}
.pcard--hero .pcard__d{font-size:30px}
/* Deep CTA blue is only 4.3:1 on black : fine for the card tint, not for 19px
   text. Text uses the readable link blue; the deep blue stays on the surface. */
.pcard--zero .pcard__d{color:var(--brand); font-size:19px}
.pcard--zero:hover{border-color:rgba(0,112,213,.4); background:rgba(0,112,213,.04)}

/* ── AI BLOCK ──────────────────────────────────────────── */
.aiblock{
  margin-top:clamp(40px,4.4vw,64px); display:grid; grid-template-columns:auto 1fr;
  gap:clamp(28px,3.6vw,60px); align-items:center;
  border:1px solid rgba(0,112,213,.18); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,44px);
  background:radial-gradient(120% 140% at 0% 0%, rgba(0,112,213,.09), transparent 60%);
}
@media (max-width:820px){.aiblock{grid-template-columns:1fr}}
.aiblock__v{
  margin-top:18px; font-size:clamp(52px,6.4vw,86px); font-weight:300; line-height:.95;
  letter-spacing:-.05em; color:var(--brand); font-variant-numeric:tabular-nums;
}
.aiblock__lab{margin-top:10px; font-size:14px; color:var(--fg-2)}
.aiblock__r p{font-size:clamp(16px,1.6vw,21px); font-weight:400; line-height:1.55; color:var(--fg-2)}
.aiblock__r em{
  background:linear-gradient(96deg,var(--brand-deep),#CFE8FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aiblock .chips{margin-top:22px}

/* ── RISK + ROADMAP ────────────────────────────────────── */
.riskblock{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3vw,48px); align-items:center;
  border:1px solid rgba(211,32,41,.22); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,40px);
  background:radial-gradient(120% 140% at 0% 0%, rgba(211,32,41,.08), transparent 60%);
  margin-bottom:clamp(44px,5vw,70px);
}
@media (max-width:700px){.riskblock{grid-template-columns:1fr}}
.riskblock__v{font-size:clamp(64px,8vw,110px); font-weight:300; line-height:.9; letter-spacing:-.05em; color:#FF6B73; font-variant-numeric:tabular-nums}
.riskblock p{margin-top:14px; font-size:15px; color:var(--fg-2); line-height:1.65}

.road{display:grid; gap:1px; background:var(--line-2); border-block:1px solid var(--line-2)}
.road__i{
  background:var(--bg); display:grid; grid-template-columns:44px 1fr 32%;
  gap:clamp(16px,2vw,32px); align-items:center; padding:24px 0;
  transition:background .35s;
}
.road__i:hover{background:var(--bg-1)}
.road__n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); font:600 13px/1 var(--ff-m); color:var(--brand);
}
.road__c h3{font-size:19px; font-weight:600; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.road__m{font:600 10.5px/1 var(--ff-m); letter-spacing:.12em; color:var(--brand); border:1px solid rgba(24,144,255,.28); border-radius:999px; padding:5px 10px}
.road__c p{margin-top:9px; font-size:14.5px; color:var(--fg-2); line-height:1.6}
.road__bar{
  position:relative; height:7px; border-radius:4px; background:rgba(255,255,255,.05); overflow:hidden;
}
.road__bar::after{
  content:''; position:absolute; top:0; bottom:0;
  left:calc(var(--s) * 1%); width:calc((var(--e) - var(--s)) * 1%);
  border-radius:4px; background:linear-gradient(90deg,var(--brand),rgba(24,144,255,.3));
  transform-origin:left;
}
@media (max-width:820px){
  .road__i{grid-template-columns:34px 1fr}
  .road__bar{grid-column:2/-1}
}

/* ── TAKEAWAY ──────────────────────────────────────────── */
.takeaway{
  position:relative; z-index:3; padding-block:clamp(96px,13vw,190px);
  border-top:1px solid var(--line-2);
  background:radial-gradient(90% 70% at 50% 0%, rgba(24,144,255,.07), transparent 60%);
}
.grid3--take{margin-top:clamp(48px,5.5vw,80px); border:1px solid var(--line-2)}
.take{background:var(--bg); padding:clamp(24px,2.6vw,36px)}
.take h3{
  font:600 11px/1 var(--ff-m); letter-spacing:.2em; text-transform:uppercase; color:var(--brand);
  margin-bottom:16px;
}
.take p{font-size:15px; color:var(--fg-2); line-height:1.65}
.take p b{color:var(--fg); font-weight:600}

.cta{
  margin-top:clamp(52px,6vw,88px); display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:38px;
}
.cta__k{font-size:clamp(22px,3vw,40px); font-weight:400; letter-spacing:-.03em}

/* ── FOOTER ────────────────────────────────────────────── */
.foot-bar{position:relative; z-index:3; border-top:1px solid var(--line-2); padding-block:30px}
.foot-bar__in{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-bar p{font:400 11.5px/1.5 var(--ff-m); color:var(--fg-4); letter-spacing:.03em}
.totop{font:400 12px/1 var(--ff-m); color:var(--fg-3); transition:color .3s}
.totop:hover{color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   DISPLAY FACE
   Headlines and the big display numerals take the editorial serif;
   everything read at length, plus all labels and chart data, stays
   on the geometric sans. Placed after the component rules so these
   win on equal specificity.

   Instrument Serif ships ONE weight (400). Any 300/600 left on these
   elements would make the browser synthesise a fake weight, so the
   whole set is pinned to 400 and separated by size instead.
   ═══════════════════════════════════════════════════════════ */
.h1,.h2,.ghost,.hero__title,
.hstat__v,.kpi__delta,.bigstat__v,.win__v,
.aiblock__v,.riskblock__v,.megadelta__v,.rankbadge__n,.cta__k{
  font-family:var(--ff-display);
  font-weight:400;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* the serif runs tighter than the sans did, so the display sizes need air back */
.hero__title{letter-spacing:-.03em; line-height:.92}
.h1,.ghost--big{letter-spacing:-.025em; line-height:1.02}
.h2,.ghost{line-height:1.06}
.arc__val{font:400 42px/1 var(--ff-display); fill:var(--brand); letter-spacing:-.02em}
.sec[data-num]>.wrap::before{font:400 clamp(70px,13vw,190px)/1 var(--ff-display); letter-spacing:-.04em}

/* ═══════════════════════════════════════════════════════════
   MOTION : pre-states + transitions.
   The `anim` class is added by JS only when it will actually
   animate, so reduced-motion never reaches any of this and the
   page renders as plain, fully-visible markup.
   `--d` carries a per-element stagger delay, set from JS.

   Easing is chosen per role rather than one curve everywhere:
   expo for entrances (fast attack, long settle), io for anything
   that draws along its own length, back for the single pop.
   ═══════════════════════════════════════════════════════════ */
.split em{font-style:italic}

/* generic blocks : rise, with a hair of scale so it reads as depth */
.anim [data-r]{
  opacity:0; transform:translateY(32px) scale(.98);
  transition:opacity 1s var(--e-expo), transform 1.1s var(--e-expo);
  transition-delay:var(--d,0s);
}
.anim [data-r].is-in{opacity:1; transform:none}

/* headings : words swing up out of a mask, pivoting on the baseline's
   left corner so the line unfurls rather than sliding as a block. */
.anim .split .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.anim .split .wi{
  display:inline-block; transform:translateY(118%) rotate(5deg);
  transform-origin:0 100%;
  transition:transform 1.2s var(--e-expo); transition-delay:var(--d,0s);
}
.anim .split.is-in .wi{transform:none}

/* ghost echo drifts into register behind the heading */
.anim .ghost{
  opacity:0; transform:translate(30px,26px) scale(1.02);
  transition:opacity 1.5s var(--e-expo), transform 1.5s var(--e-expo);
  transition-delay:.22s;
}
.anim .hstack.is-in .ghost{opacity:1; transform:translate(6px,7px)}

/* hero */
.anim .hero .mi{
  transform:translateY(120%) rotate(4deg); transform-origin:0 100%;
  transition:transform 1.5s var(--e-expo); transition-delay:var(--d,0s);
}
.anim .hero.is-in .mi{transform:none}
/* Scale only. ANY rotation of an X sweeps through 45 degrees, where it
   reads as a plus, so the mark never rotates. */
.anim .hero__x{
  opacity:0; transform:scale(.2);
  transition:opacity .9s var(--e-expo) .6s, transform 1.1s var(--e-back) .6s;
}
.anim .hero.is-in .hero__x{opacity:1; transform:none}

/* chart marks : bars grow, values land just after */
.anim .hbar__fill,.anim .duel__fill,.anim .col__fill{
  transition:transform 1.25s var(--e-expo); transition-delay:var(--d,0s);
}
.anim .hbar__fill{transform:scaleX(0)}
.anim .duel__fill,.anim .col__fill{transform:scaleY(0)}
.anim .is-in .hbar__fill{transform:scaleX(1)}
.anim .is-in .duel__fill,.anim .is-in .col__fill{transform:scaleY(1)}
.anim .col__v,.anim .duel__val,.anim .hbar__nums{
  opacity:0; transition:opacity .7s ease var(--d,0s);
}
.anim .is-in .col__v,.anim .is-in .duel__val,.anim .is-in .hbar__nums{opacity:1}

/* rules that draw along their own length */
.anim .step__line{transform:scaleX(0); transition:transform 1.2s var(--e-io); transition-delay:var(--d,0s)}
.anim .steps.is-in .step__line{transform:scaleX(1)}

.anim .sec--alt::before{transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--e-io)}
.anim .sec--alt.is-in::before{transform:scaleX(1)}

/* challenge rank bars : width encodes how buried the term was */
.anim .ranks__bar i{transform:scaleX(0); transition:transform 1.3s var(--e-expo); transition-delay:var(--d,0s)}
.anim #ranks.is-in .ranks__bar i{transform:scaleX(var(--depth,1))}

/* roadmap gantt bars (--d is inherited by the pseudo-element) */
.anim .road__bar::after{transform:scaleX(0); transition:transform 1.2s var(--e-expo); transition-delay:var(--d,0s)}
.anim .road.is-in .road__bar::after{transform:scaleX(1)}

/* line-chart endpoint keeps a slow pulse once the line has drawn */
.lchart__halo{transform-box:fill-box; transform-origin:center; opacity:0}
.anim .is-in .lchart__halo{animation:halo 3s var(--e-io) 2.4s infinite}
@keyframes halo{
  0%{transform:scale(.55); opacity:.55}
  70%,100%{transform:scale(1.6); opacity:0}
}

/* ── Scroll-linked depth (native, no JS) ───────────────────
   Progressive enhancement: browsers without scroll-driven
   animations simply get the static composition. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec[data-num]>.wrap::before{
      animation:numDrift linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes numDrift{from{transform:translateY(70px)} to{transform:translateY(-70px)}}

    /* Only .hero__title: an element carrying [data-r] must not be given a
       scroll-driven animation, because the animation would override the
       reveal transition on the very same properties. */
    .hero__title{
      animation:heroPar linear both;
      animation-timeline:view(); animation-range:exit 0% exit 100%;
    }
    @keyframes heroPar{to{transform:translateY(-70px); opacity:.25}}
  }
}

/* ── Hover states ──────────────────────────────────────────
   Cheap, transform/opacity only, and never the sole carrier of
   meaning (every hover target is legible at rest). */
.pcard{transition:border-color .4s var(--e-soft), transform .4s var(--e-expo), background .4s var(--e-soft), box-shadow .4s var(--e-soft)}
.pcard:hover{box-shadow:0 18px 40px -28px var(--brand)}

.ranks li{transition:background .35s var(--e-soft)}
.ranks li:hover{background:var(--bg-2)}

.road__i{position:relative}
.road__i::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--e-expo);
}
.road__i:hover::before{transform:scaleY(1)}

.win,.take,.pillar,.kpi,.hstat{transition:background .4s var(--e-soft)}
.win:hover,.take:hover,.pillar:hover,.hstat:hover{background:var(--bg-1)}

/* the mark points up, so it nudges up */
.brand__mark{transition:transform .5s var(--e-back), color .35s var(--e-soft)}
.brand:hover .brand__mark{transform:translateY(-3px)}

.bigstat__v,.megadelta__v,.kpi__delta{will-change:contents}

@media (prefers-reduced-motion:reduce){
  .ticker__track,.hero__x svg,.grain,.pulse::after,.scrollcue i,.rankbadge__ring,.lchart__halo{animation:none !important}
  *{transition-duration:.01ms !important}
}