/* ==========================================================================
   Thoroughbred AI™ — Level 42 AI, Inc.
   Tokens taken from the Figma brand file (Level 42 — Website — Brand).
   ========================================================================== */

:root{
  --ink:#050B14;
  --ink-2:#08111E;
  --panel:#0C1826;
  --panel-2:#101F31;
  --line:rgba(226,237,247,.07);
  --line-2:rgba(226,237,247,.14);

  --brand:#397FE8;
  --brand-hi:#5A99F0;
  --brand-dim:rgba(57,127,232,.14);
  --amber:#F4BE48;
  --coral:#E0674B;

  --white:#FFFFFF;
  --paper:#EFF4F9;
  --body:#D5DDE3;
  --muted:#9BA7B1;
  --dim:#6C7B8A;

  --wrap:1360px;
  --gut:32px;
  --r-card:24px;
  --r-btn:16px;

  --f-display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::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(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video{max-width:100%; height:auto; display:block}
a{color:var(--brand-hi); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand-hi); outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:16px;top:12px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}

h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin:0; color:var(--white)}
h2{font-size:clamp(30px,3.2vw,44px)}
h3{font-size:20px; letter-spacing:-0.01em; line-height:1.25}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,1.3vw,19px); color:var(--body); max-width:66ch; line-height:1.5}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:15px; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em;
  padding:18px 30px; border-radius:var(--r-btn); border:1px solid transparent;
  cursor:pointer; transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 6px 18px rgba(57,127,232,.22)}
.btn--primary:hover{background:var(--brand-hi); border-color:var(--brand-hi)}
.btn--ghost{background:transparent; color:var(--paper); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--brand-hi); color:var(--brand-hi)}
.btn--sm{padding:13px 22px; font-size:13.5px}
.btn--wide{width:100%}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(5,11,20,.84);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:28px; height:84px}
.brand{display:flex; align-items:center}
.brand img{height:34px; width:auto}
.nav{display:flex; gap:28px; margin-left:auto}
.nav a{color:var(--body); font-size:15px; font-weight:500}
.nav a:hover{color:var(--white); text-decoration:none}
.burger{display:none; background:none; border:1px solid var(--line-2); border-radius:12px; width:44px; height:40px; padding:0; cursor:pointer}
.burger span{display:block; width:18px; height:1.5px; background:var(--paper); margin:4px auto}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--ink) 6%, rgba(5,11,20,.88) 40%, rgba(5,11,20,.30) 76%, rgba(5,11,20,.55) 100%),
    linear-gradient(to top, var(--ink) 1%, transparent 32%);
}

.hero__in{position:relative; z-index:2; padding:clamp(80px,9vw,140px) var(--gut) clamp(150px,13.5vw,200px)}
.hero__copy{max-width:690px}
.hero__title{font-size:clamp(44px,6.2vw,80px); letter-spacing:-0.035em; line-height:1; margin-bottom:26px}
.hero__lead{font-size:clamp(17px,1.35vw,20px); color:var(--body); max-width:58ch; line-height:1.45}

.hero__line{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line-2);
  font-size:16px; color:var(--muted); max-width:56ch;
}
.hero__line-lead{display:block; margin-bottom:4px}
.hero__rotator{position:relative; display:block; min-height:1.5em; color:var(--amber)}
.hero__rotator span{
  position:absolute; left:0; top:0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease;
}
.hero__rotator span.is-on{opacity:1; visibility:visible; transform:none; position:relative}

.hero__acts{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}

.stats{
  list-style:none; margin:clamp(52px,6vw,80px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  max-width:900px; background:var(--line-2); border-radius:18px; overflow:hidden;
  border:1px solid var(--line-2);
}
.stat{
  background:rgba(8,17,30,.72); backdrop-filter:blur(6px);
  padding:24px 26px 22px; display:flex; flex-direction:column; gap:12px;
}
.stat__fig{display:flex; align-items:baseline; gap:8px}
.stat__fig b{font-family:var(--f-display); font-size:clamp(34px,3.4vw,44px); line-height:.9; color:var(--white); letter-spacing:-0.03em}
.stat__fig i{font-style:normal; font-size:13px; font-weight:500; color:var(--brand-hi); text-transform:uppercase; letter-spacing:.06em}
.stat__label{font-size:13.5px; line-height:1.5; color:var(--muted); flex:1}
.stat__meter{display:flex; gap:4px; height:3px; margin-top:2px}
.stat__meter em{flex:1; background:var(--brand); border-radius:2px; opacity:.85; transform-origin:left center; animation:meterIn .7s cubic-bezier(.2,.7,.3,1) both}
.stat:nth-child(2) .stat__meter em:nth-child(2){animation-delay:.09s}
.stat:nth-child(2) .stat__meter em:nth-child(3){animation-delay:.18s}
.stat:nth-child(2) .stat__meter em:nth-child(4){animation-delay:.27s}
.stat:nth-child(3) .stat__meter em:nth-child(2){animation-delay:.09s}
.stat:nth-child(3) .stat__meter em:nth-child(3){animation-delay:.18s}
.stat__meter--fill{background:rgba(226,237,247,.10); border-radius:2px}
.stat__meter--fill em{flex:none; width:100%; background:linear-gradient(90deg,var(--brand),var(--amber)); animation:fillIn 1.1s cubic-bezier(.2,.7,.3,1) both}
@keyframes meterIn{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes fillIn{from{transform:scaleX(0)} to{transform:scaleX(1)}}

.hero__wave{position:absolute; left:0; right:0; bottom:0; width:100%; height:150px; z-index:1; pointer-events:none}

/* ---------- bands ---------- */
.band{padding:clamp(76px,8.5vw,120px) 0}
.band--tint{background:var(--ink-2)}
.section-head{max-width:74ch; margin-bottom:clamp(40px,4.6vw,64px)}
.section-head h2{margin-bottom:18px}
.section-head--center{max-width:none; text-align:center}
.section-head--center .lead{margin:0 auto}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center}
.split--rev .split__fig{order:2}
.split__text h2{margin-bottom:20px}
.split__text .lead{margin-bottom:22px}
.split__text p{color:var(--body)}
.split__fig{margin:0; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line)}

/* ---------- symphony orb ---------- */
.orb{position:relative; justify-self:center; width:min(440px,100%); aspect-ratio:1}
.orb__video{width:100%; height:100%; object-fit:cover; border-radius:50%; filter:saturate(115%)}
.orb__ring{
  position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(57,127,232,.35);
  box-shadow:0 0 90px rgba(57,127,232,.20);
  pointer-events:none;
}
.orb::after{
  content:""; position:absolute; inset:-46px; border-radius:50%;
  border:1px dashed rgba(226,237,247,.08); pointer-events:none;
  animation:spin 44s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- gap ---------- */
.gap-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch}
.gapcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:36px;
  display:flex; flex-direction:column;
}
.gapcard__head{margin-bottom:24px}
.gapcard__tag{
  display:inline-block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); background:rgba(226,237,247,.06); border-radius:100px; padding:5px 12px; margin-bottom:14px;
}
.gapcard__tag--live{color:var(--brand-hi); background:var(--brand-dim)}
.gapcard h3{margin:0}
.gapcard p{color:var(--body); font-size:16px}
.gapcard__end{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-weight:600; color:var(--white) !important; font-size:15px !important}
.gapcard--before{background:transparent}
.gapcard--before .gapcard__end{color:var(--muted) !important}
.gapcard--after h3{color:var(--white)}

.logrows{list-style:none; margin:0; padding:0; flex:1}
.logrows li{
  display:flex; gap:16px; align-items:baseline;
  padding:12px 0; border-bottom:1px dashed rgba(226,237,247,.08);
  font-size:14.5px; color:var(--dim);
}
.logrows li:first-child{border-top:1px dashed rgba(226,237,247,.08)}
.logrows li span{
  flex:none; width:52px; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim);
}
.logrows li b{font-weight:400}
.logrows li.is-flag{color:var(--body)}
.logrows li.is-flag span{color:var(--coral)}
.logrows li.is-flag b{font-weight:500; color:var(--white)}

.gapviz{margin:0; flex:1; display:flex; flex-direction:column; gap:14px}
.gapviz canvas{width:100%; height:190px; display:block}
.gapviz figcaption{font-size:13px; line-height:1.5; color:var(--muted)}

.gap-note{margin-top:32px; padding-left:26px; border-left:2px solid var(--amber); color:var(--muted); font-size:16px; max-width:82ch}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0 0 clamp(52px,6vw,84px); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.step{border-top:1px solid var(--line-2); padding-top:22px}
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-family:var(--f-display); font-size:14px; font-weight:700; margin-bottom:14px;
}
.step h3{margin-bottom:10px}
.step p{font-size:15px; color:var(--muted); line-height:1.6}

/* ---------- moat ---------- */
.moat{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center}
.moat__media{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line)}
.moat__media video{width:100%; display:block}
.moat__copy h3{font-size:26px; margin-bottom:16px}
.moat__copy p{color:var(--body); font-size:16px}
.moat__end{color:var(--white) !important; font-weight:500}
.ticks{list-style:none; margin:22px 0; padding:0}
.ticks li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15px; color:var(--body)}
.ticks li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border:1.5px solid var(--brand); border-radius:50%}

/* ---------- wellcare loop ---------- */
.loop{position:relative; margin-bottom:clamp(44px,5vw,68px)}
.loop__track{position:absolute; left:0; right:0; top:7px; height:1px; background:linear-gradient(90deg,rgba(57,127,232,.35),var(--brand) 55%,var(--amber))}
.loop__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.loop__list li{position:relative; padding-top:34px}
.loop__list li::before{content:""; position:absolute; left:0; top:2px; width:11px; height:11px; border-radius:50%; background:var(--ink-2); border:2px solid var(--brand)}
.loop__list li:last-child::before{border-color:var(--amber)}
.loop__list h3{margin-bottom:10px}
.loop__list p{font-size:15px; color:var(--muted); line-height:1.6}

.contrast{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.contrast__side{padding:32px 34px; border-radius:var(--r-card); background:var(--panel); border:1px solid var(--line)}
.contrast__side h3{margin-bottom:14px}
.contrast__side p{font-size:16px; color:var(--body)}
.contrast__side--react h3{color:var(--coral)}
.contrast__side--pro h3{color:var(--brand-hi)}

/* ---------- species ---------- */
.species{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:clamp(40px,5vw,64px)}
.spec{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:34px}
.spec__icon{width:44px; height:44px; color:var(--brand-hi); margin-bottom:20px; display:block}
.spec h3{margin-bottom:14px}
.spec p{font-size:16px; color:var(--body)}
.spec__tag{margin-top:18px; font-size:13.5px; color:var(--dim); padding-top:14px; border-top:1px solid var(--line)}
.wide-fig{margin:0; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line)}
.wide-fig img{width:100%}

/* ---------- condition map ---------- */
.map{display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(28px,3.4vw,52px); align-items:stretch}
.map__plot{position:relative; padding:0 0 46px 50px}
.map__grid{
  position:relative; width:100%; aspect-ratio:1.18/1; min-height:360px; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-card);
  background:
    linear-gradient(rgba(226,237,247,.05) 1px, transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg, rgba(226,237,247,.05) 1px, transparent 1px) 0 0/25% 100%,
    radial-gradient(90% 90% at 100% 0%, rgba(57,127,232,.20), transparent 60%),
    linear-gradient(160deg, rgba(5,11,20,.2), rgba(5,11,20,.55));
}
.map__field{position:absolute; inset:26px 62px 30px 28px}

.quad{
  position:absolute; font-size:11px; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:rgba(226,237,247,.22); pointer-events:none;
}
.quad--tr{right:16px; top:14px; color:rgba(90,153,240,.55)}
.quad--tl{left:16px; top:14px}
.quad--br{right:16px; bottom:14px}
.quad--bl{left:16px; bottom:14px}

.map__frontier{
  position:absolute; left:-8%; right:-8%; top:50%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(244,190,72,.34) 0 6px, transparent 6px 12px);
  transform:rotate(-27deg); transform-origin:center; pointer-events:none;
}

.map__ax{
  position:absolute; display:flex; align-items:center; gap:10px;
  color:var(--dim); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.map__ax i{display:block; background:currentColor; opacity:.45}
.map__ax--x{left:50px; right:0; bottom:16px}
.map__ax--x i{height:1px; flex:1; position:relative}
.map__ax--x i::after{content:""; position:absolute; right:0; top:-3px; border-left:6px solid currentColor; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent}
.map__ax--y{
  left:0; top:50%; transform:rotate(-90deg) translateX(50%); transform-origin:left center;
  flex-direction:row-reverse; white-space:nowrap;
}
.map__ax--y i{width:52px; height:1px; position:relative}
.map__ax--y i::after{content:""; position:absolute; right:0; top:-3px; border-left:6px solid currentColor; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent}

.map__legend{list-style:none; display:flex; gap:22px; margin:16px 0 0; padding:0 0 0 50px; position:absolute; bottom:-8px; left:0}
.map__legend li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim)}
.map__legend li::before{content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--brand)}
.map__legend li.is-amber::before{border-color:var(--amber)}

.node{
  position:absolute; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--muted); font-family:var(--f-body); font-size:12.5px; font-weight:500;
  line-height:1.25; text-align:center; width:118px;
}
.node__dot{
  position:relative; width:15px; height:15px; border-radius:50%;
  background:rgba(57,127,232,.20); border:1.5px solid var(--brand);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.node--amber .node__dot{background:rgba(244,190,72,.18); border-color:var(--amber)}
.node:hover .node__dot{transform:scale(1.3)}
.node:hover, .node.is-on{color:var(--white)}
.node.is-on .node__dot{background:var(--brand); transform:scale(1.3); box-shadow:0 0 0 6px rgba(57,127,232,.14)}
.node.is-on.node--amber .node__dot{background:var(--amber); box-shadow:0 0 0 6px rgba(244,190,72,.14)}
.node.is-on .node__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; color:var(--brand);
  animation:ping 2.6s ease-out infinite;
}
.node.is-on.node--amber .node__dot::after{color:var(--amber)}
@keyframes ping{
  0%{transform:scale(.8); opacity:.9}
  70%{transform:scale(2.3); opacity:0}
  100%{transform:scale(2.3); opacity:0}
}

.map__detail{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:34px; display:flex; flex-direction:column}
.map__detail h3{font-size:24px; margin-bottom:6px}
.detail__kicker{font-size:13.5px; color:var(--brand-hi); margin-bottom:18px}
.detail__body p{font-size:15.5px; color:var(--body); margin-bottom:14px}
.detail__stat{margin:0 0 18px; padding:18px 20px; border-radius:16px; background:var(--panel-2); border-left:2px solid var(--amber)}
.detail__stat b{display:block; font-family:var(--f-display); font-size:26px; line-height:1.1; color:var(--white); margin-bottom:6px}
.detail__stat span{font-size:13.5px; color:var(--muted); line-height:1.5; display:block}
.detail__status{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim)}
.fineprint{margin-top:40px; font-size:13.5px; color:var(--dim); max-width:92ch}

/* ---------- claims ---------- */
.claims{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,3.4vw,52px); align-items:start}
.claims__table{width:100%; border-collapse:collapse; font-size:15px}
.claims__table th{text-align:left; font-family:var(--f-body); font-size:12.5px; font-weight:600; color:var(--dim); letter-spacing:.05em; padding:0 16px 12px 0; border-bottom:1px solid var(--line-2)}
.claims__table td{padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--body)}
.claims__table td:first-child{color:var(--white); font-weight:500; width:26%}
.claims__table td:last-child{padding-right:0; width:20%}
.pill{display:inline-block; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:100px; white-space:nowrap}
.pill--live{background:var(--brand-dim); color:var(--brand-hi)}
.pill--vet{background:rgba(244,190,72,.14); color:var(--amber)}
.pill--dev{background:rgba(155,167,177,.14); color:var(--muted)}
.pill--no{background:rgba(224,103,75,.14); color:var(--coral)}
.precedent{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:34px}
.precedent h3{margin-bottom:16px}
.precedent p{font-size:15.5px; color:var(--body)}
.precedent__end{border-top:1px solid var(--line); padding-top:18px; margin-top:20px; color:var(--muted) !important; font-size:14.5px !important}

/* ---------- devices ---------- */
.devices{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.dev{border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--panel)}
.dev__img{background:#02080F; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden}
.dev__img img{width:100%; height:100%; object-fit:contain; padding:16px}
.dev h3{padding:28px 30px 10px}
.dev p{padding:0 30px 30px; font-size:15px; color:var(--muted); line-height:1.6}

/* ---------- api list ---------- */
.api{list-style:none; margin:26px 0 0; padding:0}
.api li{padding:18px 0; border-top:1px solid var(--line)}
.api li:last-child{border-bottom:1px solid var(--line)}
.api b{display:block; font-family:var(--f-display); font-size:17px; margin-bottom:5px; color:var(--white)}
.api span{font-size:15px; color:var(--muted)}

/* ---------- phases ---------- */
.phases{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.phases li{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:34px}
.phases__when{display:block; font-size:13px; font-weight:600; color:var(--amber); margin-bottom:14px}
.phases h3{margin-bottom:12px}
.phases p{font-size:15px; color:var(--body)}

/* ---------- faq ---------- */
.faq{max-width:940px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:26px 46px 26px 0; position:relative; font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:35px; width:11px; height:11px; border-right:1.5px solid var(--brand-hi); border-bottom:1.5px solid var(--brand-hi); transform:rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg); top:38px}
.faq__a{padding:0 60px 28px 0}
.faq__a p{font-size:16px; color:var(--body)}

/* ---------- staff / family ---------- */
.staff{position:relative; width:100%}
.staff__scale{position:relative; width:1360px; height:400px; transform-origin:top left}
.staff__lines{position:absolute; inset:0}
.staff__lines i{position:absolute; left:0; right:0; height:1px; background:rgba(226,237,247,.10)}
.staff__lines i:nth-child(1){top:40px}
.staff__lines i:nth-child(2){top:120px}
.staff__lines i:nth-child(3){top:200px}
.staff__lines i:nth-child(4){top:280px}
.staff__lines i:nth-child(5){top:360px}
.staff__clef{position:absolute; left:62px; top:83px; width:221px; height:233px; opacity:.5}

.note{
  position:absolute; left:var(--x); top:var(--y);
  display:flex; flex-direction:column; gap:20px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:24px; box-shadow:0 12px 24px rgba(0,0,0,.28);
  color:var(--paper); text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.note{will-change:transform}
html.js .note{animation:sway 7.5s ease-in-out infinite}
html.js .note:nth-child(3){animation-duration:8.6s; animation-delay:-1.2s}
html.js .note:nth-child(4){animation-duration:6.9s; animation-delay:-2.4s}
html.js .note:nth-child(5){animation-duration:9.2s; animation-delay:-3.1s}
html.js .note:nth-child(6){animation-duration:7.9s; animation-delay:-4.3s}
html.js .note:nth-child(7){animation-duration:8.2s; animation-delay:-5.6s}
@keyframes sway{
  0%{transform:rotate(-1.1deg) translateY(0)}
  50%{transform:rotate(1.1deg) translateY(-4px)}
  100%{transform:rotate(-1.1deg) translateY(0)}
}
.note::after{
  content:""; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%;
  background:var(--brand); opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .2s ease;
}
.note:hover, .note:focus-visible{
  text-decoration:none; animation-play-state:paused;
  transform:translateY(-6px) rotate(0deg) !important;
  border-color:rgba(57,127,232,.55);
  box-shadow:0 18px 34px rgba(0,0,0,.34), 0 0 0 4px rgba(57,127,232,.10);
}
.note:hover::after, .note:focus-visible::after{opacity:1; transform:scale(1)}
.note img{display:block}
.note span{font-size:14px; line-height:1.4; text-transform:uppercase; color:var(--paper); text-align:center; letter-spacing:.02em}
.note--current{border-color:rgba(57,127,232,.45)}

/* ---------- pilot CTA ---------- */
.pilot{position:relative; overflow:hidden; background:var(--ink)}
.pilot__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.pilot__in{position:relative; z-index:2; text-align:center; padding-top:clamp(90px,10vw,140px); padding-bottom:clamp(90px,10vw,140px)}
.pilot__in h2{max-width:20ch; margin:0 auto 22px}
.pilot__in p{color:var(--body); max-width:62ch; margin:0 auto; font-size:17px}
.pilot__acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); padding:64px 0 56px}
.foot-top{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot__logo img{height:52px; width:auto}
.foot__links{display:flex; gap:26px; flex-wrap:wrap}
.foot__links a{color:var(--body); font-size:15px}
.foot__links a:hover{color:var(--white); text-decoration:none}
.foot__soc{display:flex; gap:16px}
.foot__soc a{display:block; opacity:.9; transition:opacity .18s ease}
.foot__soc a:hover{opacity:1}
.foot__soc img{width:36px; height:36px}
.foot-rule{height:1px; background:var(--line-2); margin:44px 0}
.foot-bottom{display:grid; grid-template-columns:auto auto 1fr; gap:60px; align-items:start}
.foot__addr, .foot__contact{font-style:normal; font-size:16px; color:var(--white); line-height:1.5}
.foot__contact a{color:var(--white)}
.foot__legal{font-size:14px; color:var(--muted); line-height:1.45; justify-self:end; max-width:52ch; margin:0}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(2,6,12,.72); backdrop-filter:blur(4px)}
.modal__panel{
  position:relative; width:min(720px,100%); max-height:92vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,44px); box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.modal__x{
  position:absolute; top:18px; right:18px; width:40px; height:40px;
  background:transparent; border:1px solid var(--line-2); border-radius:12px;
  color:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal__x:hover{border-color:var(--brand-hi); color:var(--brand-hi)}
.modal__head{margin-bottom:26px; max-width:52ch}
.modal__head h2{font-size:30px; margin-bottom:12px}
.modal__head p{font-size:15.5px; color:var(--muted); margin:0}

#pilotForm{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:13px; font-weight:500; color:var(--muted)}
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-size:15px; color:var(--paper);
  background:var(--ink); border:1px solid var(--line-2); border-radius:12px;
  padding:13px 15px; width:100%;
}
.field textarea{resize:vertical; min-height:84px}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand); outline:none}
.field input.err, .field textarea.err{border-color:var(--coral)}
.modal__foot{gap:14px}
.formnote{font-size:13px; color:var(--dim); text-align:center; margin:0}
.formstatus{grid-column:1 / -1; margin:0; font-size:14.5px}
.formstatus.bad{color:var(--coral)}
.form-done{text-align:center; padding:30px 6px}
.form-done h3{margin-bottom:12px; color:var(--brand-hi)}
.form-done p{color:var(--muted); font-size:15.5px}

/* ---------- document page (privacy) ---------- */
.doc{padding:clamp(60px,7vw,96px) 0 clamp(70px,8vw,110px)}
.doc__in{max-width:820px}
.doc h1{font-size:clamp(32px,4vw,48px); margin-bottom:12px}
.doc__date{color:var(--dim); font-size:14px; margin-bottom:40px}
.doc h2{font-size:22px; margin:40px 0 14px}
.doc p, .doc li{color:var(--body); font-size:16px}
.doc ul{margin:0 0 18px; padding-left:20px}
.doc li{margin-bottom:9px}

/* ---------- trademark marks ---------- */
h1 .tm, h2 .tm, h3 .tm, h1 .rg, h2 .rg, h3 .rg{display:inline; letter-spacing:0; font-weight:600}
h1 .tm, h2 .tm, h3 .tm{font-size:.40em; vertical-align:.95em}
h1 .rg, h2 .rg, h3 .rg{font-size:.46em; vertical-align:.62em}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr); gap:28px}
  .loop__list{grid-template-columns:repeat(2,1fr); gap:28px 24px}
  .loop__track{display:none}
  .species, .devices, .phases{grid-template-columns:1fr 1fr}
  .phases li:last-child, .species .spec:last-child, .devices .dev:last-child{grid-column:1 / -1}
  .map, .claims, .moat{grid-template-columns:1fr}
  .foot-bottom{grid-template-columns:1fr 1fr; gap:32px}
  .foot__legal{grid-column:1 / -1; justify-self:start}
}

@media (max-width:860px){
  :root{--gut:20px}
  body{font-size:16px}

  .head-in{height:72px; gap:16px}
  .brand img{height:28px}
  .nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px 20px 18px; display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 0; border-bottom:1px solid var(--line); font-size:16px}
  .burger{display:block; margin-left:auto; order:3}
  .head-cta{display:none}

  .hero__title{font-size:clamp(34px,9vw,46px)}
  .hero__video{object-position:70% center}
  .stats{grid-template-columns:1fr; gap:1px; max-width:none; border-radius:16px}
  .stat{padding:20px 20px 18px}
  .stat__fig b{font-size:32px}
  .hero__line{font-size:15px}
  .hero__wave{height:110px}
  .hero__acts .btn{width:100%}

  .split, .split--rev, .gap-grid, .contrast, .species, .devices, .phases{grid-template-columns:1fr}
  .orb{width:min(300px, calc(100% - 60px)); margin:0 auto}
  .orb::after{inset:-26px}
  .split--rev .split__fig{order:0}
  .loop__list{grid-template-columns:1fr}
  #pilotForm{grid-template-columns:1fr}
  .foot-top{flex-direction:column; align-items:flex-start; gap:26px}
  .foot__logo img{height:44px}
  .foot-bottom{grid-template-columns:1fr; gap:24px}
  .foot__legal{justify-self:start}

  .claims__table{font-size:14px}
  .claims__table td:first-child{width:34%}
  .claims__table td:last-child{width:24%}

  .map__plot{padding-left:32px; padding-bottom:64px}
  .quad{font-size:9.5px; letter-spacing:.06em}
  .quad--tr, .quad--br{right:10px}
  .quad--tl, .quad--bl{left:10px}
  .map__ax--x{left:32px; bottom:34px; font-size:10.5px}
  .map__ax--y{font-size:10.5px}
  .map__ax--y i{width:36px}
  .map__legend{padding-left:32px; gap:14px; bottom:-4px; font-size:11.5px}
  .map__legend li{font-size:11.5px}
  .gapviz canvas{height:150px}
  .spec__icon{width:38px; height:38px; margin-bottom:16px}
  .map__grid{aspect-ratio:auto; height:min(460px,118vw)}
  .map__field{inset:20px 50px 22px 20px}
  .node{width:92px; font-size:11.5px}
  .map__axis--x{left:34px}

  .faq summary{font-size:17px; padding-right:36px}
  .faq summary::after{top:33px}
  .faq__a{padding-right:20px}

  .staff__scale{position:static; width:100%; height:auto; transform:none !important;
    display:grid; grid-template-columns:1fr; gap:16px}
  .staff__lines, .staff__clef{display:none}
  html.js .note{animation:none; transform:none}
  .note{position:static; width:100%; padding:28px 24px}
  .note img{max-width:76%; height:auto}

  .modal{padding:0}
  .modal__panel{max-height:100vh; height:100%; border-radius:0; border:0; padding:72px 20px 40px}
}

@media (max-width:420px){
  .map__field{inset:18px 44px 20px 16px}
  .node{width:84px; font-size:11px}
}

@media (prefers-reduced-motion: reduce){
  .orb::after, html.js .note, .stat__meter em, .node.is-on .node__dot::after{animation:none !important}
  .stat__meter em{transform:none}
  *,*::before,*::after{transition-duration:.001ms !important}
}

@media print{
  .site-head,.hero__wave,.modal,.pilot__canvas,.burger{display:none}
  body{background:#fff; color:#000}
}