/* ============================================================
   DUAL VULNERABILITY ASSESSMENT — PI-2026-0314
   pi.security brand: icy white · deep navy · serif headlines ·
   italic orange accent · teal CTAs · mono eyebrows · mint bar
   ============================================================ */

:root{
  --bg:        #FBFDFD;
  --ink:       #16203A;          /* deep navy */
  --ink-soft:  #54607A;
  --ink-dim:   #9AA4B6;
  --ink-ghost: #D9DFE6;          /* unwritten text */
  --line:      #E5EAEC;

  --teal:      #2BC8C4;
  --teal-deep: #149C99;
  --teal-soft: rgba(43,200,196,.12);
  --orange:    #F07438;          /* italic accent / critical */
  --orange-deep:#D85A1E;
  --mint:      #E4F7E0;          /* announcement bar */
  --amber:     #C98A0B;

  /* boot terminal (dark navy) */
  --boot-bg:   #0A1222;
  --boot-line: #1B2840;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 900px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--teal); color:#fff; }
a{ color:inherit; }
em{ font-style:normal; color:var(--ink); }

/* icy watercolor washes */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(45% 32% at 82% 8%, rgba(43,200,196,.10), transparent 70%),
    radial-gradient(38% 28% at 8% 30%, rgba(43,200,196,.07), transparent 70%),
    radial-gradient(30% 22% at 20% 85%, rgba(240,116,56,.05), transparent 70%);
}

/* static subtle grain */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Cyber boot loader — CRT recon kernel ---------- */
.boot{
  position:fixed; inset:0; z-index:100; background:var(--boot-bg);
  display:grid; place-items:center;
  transition:opacity .55s var(--ease), visibility .55s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
/* CRT scanlines + grid over the whole screen */
.boot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.32) 2px 3px),
    repeating-linear-gradient(90deg, rgba(43,200,196,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(43,200,196,.03) 0 1px, transparent 1px 80px);
}
/* roaming radar glow */
.boot::after{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(28% 22% at 50% 50%, rgba(43,200,196,.12), transparent 70%);
  animation:roam 5s ease-in-out infinite alternate;
}
@keyframes roam{ 0%{ transform:translate(-12%,-8%);} 100%{ transform:translate(12%,10%);} }
.boot__panel{
  position:relative; z-index:1; width:min(560px,88vw); padding:26px 28px 22px;
  border:1px solid rgba(43,200,196,.25); border-radius:10px;
  background:rgba(6,12,24,.7);
  font-family:var(--mono); overflow:hidden;
  box-shadow:0 0 0 1px rgba(43,200,196,.06), 0 0 60px -10px rgba(43,200,196,.25), 0 40px 120px -50px rgba(0,0,0,.95);
  animation:crt 4s steps(60) infinite;
}
@keyframes crt{ 0%,92%,96%,100%{ opacity:1; } 94%{ opacity:.93; } }
.boot__head{
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.22em; color:#7FD8D4; margin-bottom:16px;
  text-shadow:0 0 12px rgba(43,200,196,.6);
}
.boot__dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:pulse .9s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.boot__lines{ list-style:none; margin:0 0 14px; padding:0; font-size:12.5px; line-height:1.8; min-height:158px; }
.boot__lines li{ display:flex; justify-content:space-between; gap:14px; color:#9FD9DC; opacity:0; transform:translateX(-6px); }
.boot__lines li.in{ opacity:1; transform:none; transition:opacity .12s ease, transform .12s ease; }
.boot__lines li .ok{ color:var(--teal); flex-shrink:0; text-shadow:0 0 10px rgba(43,200,196,.7); }
.boot__lines li::before{ content:"> "; color:#2E6F73; }
.boot__lines::after{ content:"▌"; color:var(--teal); animation:caret .7s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.boot__bar{ height:3px; background:rgba(43,200,196,.12); border-radius:2px; overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--teal-deep), var(--teal)); box-shadow:0 0 16px var(--teal); }
.boot__foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; font-size:11px; letter-spacing:.18em; color:#2E6F73; }
.boot__foot #bootPct{ font-size:22px; color:#CFF6F4; letter-spacing:.06em; text-shadow:0 0 14px rgba(43,200,196,.5); }
.boot__foot #bootStatus{ color:var(--teal); }
.boot.locked .boot__foot #bootStatus{
  color:#CFFCEF; animation:glitch .35s steps(2) 3;
}
@keyframes glitch{
  0%{ text-shadow:-2px 0 #F07438, 2px 0 var(--teal); transform:translateX(1px); }
  50%{ text-shadow:2px 0 #F07438, -2px 0 var(--teal); transform:translateX(-1px); }
  100%{ text-shadow:0 0 14px rgba(43,200,196,.8); transform:none; }
}
.boot__sweep{
  position:absolute; left:0; right:0; top:0; height:44%;
  background:linear-gradient(180deg, rgba(43,200,196,.12), transparent);
  pointer-events:none; animation:sweep 1.2s linear infinite;
}
@keyframes sweep{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(330%); } }

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1px solid rgba(22,32,58,.35); border-radius:50%;
  display:grid; place-items:center;
  transition:width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s;
}
.cursor span{ width:4px; height:4px; border-radius:50%; background:var(--teal); }
.cursor.is-hover{ width:54px; height:54px; background:var(--teal-soft); border-color:transparent; }
.cursor.is-hover span{ width:0; height:0; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Scan progress rail ---------- */
.rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:80; background:rgba(22,32,58,.06); }
.rail i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--teal-deep), var(--teal)); box-shadow:0 0 10px rgba(43,200,196,.6); }

/* ---------- Mint announcement bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px clamp(16px,4vw,40px);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink);
  background:var(--mint);
  border-bottom:1px solid rgba(22,32,58,.06);
}
.topbar__c{
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; color:var(--ink); font-weight:600;
}
.topbar__r{ text-align:right; }

/* ---------- Layout — full-bleed alternating bands ---------- */
main{ position:relative; z-index:10; }
.block{
  position:relative;
  padding:clamp(64px,13vh,140px) clamp(20px,5vw,36px);
}
.block--white{ background:var(--bg); }
.block--ice{
  background:
    radial-gradient(80% 60% at 88% 6%, rgba(43,200,196,.10), transparent 60%),
    linear-gradient(180deg, #EAF4FB, #F2F8FC);
}
.block--lav{
  background:
    radial-gradient(70% 50% at 50% -6%, rgba(120,108,230,.16), transparent 60%),
    linear-gradient(180deg, #E9E7FA, #EFEEFB);
}
/* video band — pure white; keyed clip multiplies in invisibly */
.block--vid{ background:#FFFFFF; }
.vid{ max-width:840px; margin:clamp(36px,6vw,60px) auto 0; }
.vid__player{
  display:block; width:100%; height:auto;
  mix-blend-mode:multiply;   /* white background of the clip disappears */
  /* belt & suspenders: feather the frame edge as well */
  -webkit-mask-image:radial-gradient(120% 110% at 50% 50%, #000 70%, transparent 99%);
          mask-image:radial-gradient(120% 110% at 50% 50%, #000 70%, transparent 99%);
}
.wrap{ max-width:1080px; margin:0 auto; }

/* centered section header (pi.security pattern) */
.sec-head{ text-align:center; max-width:760px; margin:0 auto clamp(40px,6vw,64px); }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 22px;
}
.eyebrow--crit{ color:var(--orange-deep); }
.eyebrow--ok{ color:var(--teal-deep); }
.display{
  font-family:var(--serif); font-optical-sizing:auto;
  font-weight:550; font-size:clamp(34px,5.6vw,68px); line-height:1.04; letter-spacing:-.02em;
  margin:0; color:var(--ink);
}
.display .accent{ font-style:italic; font-weight:450; color:var(--orange); }
.display .t-dot{ font-style:normal; color:var(--teal); }
.lede{
  font-size:clamp(16px,2vw,19px); line-height:1.6; color:var(--ink-soft);
  max-width:60ch; margin:22px auto 0;
}
.accent-script{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--orange); white-space:nowrap;
}

.sec-body{ max-width:760px; margin:0 auto; }
.kicker--center{ text-align:center; }

/* ---------- Shared type ---------- */
.tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 28px;
}
.tag--crit{ color:var(--orange-deep); }
.tag--ok{ color:var(--teal-deep); }
.meta{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--ink-soft); }

.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); margin:48px 0 16px;
}

.huge{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(38px,7vw,76px); font-weight:550; letter-spacing:-.015em; line-height:1.02;
  margin:0 0 24px; color:var(--ink);
}

.statement{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(23px,3.7vw,36px); font-weight:450; line-height:1.32; letter-spacing:-.01em;
  margin:0 0 18px; max-width:26ch;
}
#chain .statement{ max-width:31ch; }

.role{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin:0 0 26px; }

.note{
  font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--ink-soft);
  margin:18px 0 0; max-width:62ch;
}

/* ---------- Scan log — clean white card ---------- */
.cmd{ font-family:var(--mono); font-size:13px; color:var(--ink-dim); margin:0 0 18px; }
.log{
  list-style:none; margin:0; padding:10px clamp(18px,3vw,28px);
  font-family:var(--mono); font-size:clamp(13px,1.7vw,15px);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 60px -42px rgba(22,32,58,.35);
}
.log li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line); line-height:1.6;
}
.log li:last-child{ border-bottom:none; }
.log li.div{
  color:var(--ink-dim); border-bottom:none; padding:18px 0 4px;
  letter-spacing:.14em; font-size:12px; text-transform:uppercase;
}
.log .src{ color:var(--ink); }
.log .src b{ color:var(--ink-dim); font-weight:400; }
.log .stat{ flex-shrink:0; color:var(--teal-deep); }
.log li.amber .stat{ color:var(--amber); }

/* expandable intel rows — collapsed state is visually identical */
.log li.expandable{ display:block; padding:0; cursor:pointer; outline:none; }
.log li.expandable .log__row{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  min-height:30px; padding:9px 0;
}
.log li.expandable:focus-visible .log__row{ box-shadow:inset 2px 0 0 var(--teal); padding-left:8px; }
.log__right{ display:inline-flex; gap:12px; align-items:baseline; flex-shrink:0; }
.log__tog{ color:var(--ink-dim); transition:transform .3s var(--ease), color .3s; display:inline-block; width:1ch; text-align:center; }
.log li.is-open .log__tog{ transform:rotate(45deg); color:var(--teal-deep); }
.log__intel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.log li.is-open .log__intel{ max-height:300px; }
.log__intel-in{
  padding:2px 0 12px; font-size:12px; line-height:1.65; color:var(--ink-soft);
}
.log__source{
  color:var(--teal-deep); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(20,156,153,.35);
}
.log__source:hover{ color:var(--teal); }
.summary{ font-family:var(--mono); font-size:13px; color:var(--teal-deep); margin:24px 0 0; }
.summary--ok{ color:var(--teal-deep); }

/* ---------- Chain statements ---------- */
#chain .chain-item{ margin:0 0 34px; }
#chain .chain-item:last-child{ margin-bottom:0; }
#chain .chain-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); display:block; margin:0 0 10px;
}
#chain .chain-item.is-end .chain-tag{ color:var(--teal-deep); }

/* ---------- Definition rows ---------- */
.rows{ margin:0; }
.rows .row{
  display:grid; grid-template-columns:170px 1fr; gap:8px 28px;
  padding:18px 0; border-top:1px solid var(--line); align-items:baseline;
}
.rows .row:last-child{ border-bottom:1px solid var(--line); }
.row__key{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); }
.rows--crit .row__key{ color:var(--orange-deep); }
.rows--ok .row__key{ color:var(--teal-deep); }
.row__val{ font-size:clamp(15px,2vw,18px); line-height:1.5; color:var(--ink); margin:0; }
.row__val small{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:5px; font-family:inherit; }

/* ---------- Cards (pi.security style) ---------- */
.cards{ display:grid; gap:18px; }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); max-width:880px; margin:0 auto; }
.card{
  background:#FFFFFF; border:1px solid rgba(22,32,58,.06); border-radius:18px;
  padding:24px 22px; box-shadow:0 30px 60px -44px rgba(22,32,58,.4);
  display:flex; flex-direction:column; gap:10px;
}
.card__icon{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(43,200,196,.20), rgba(43,200,196,.05));
  border:1px solid rgba(43,200,196,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px -12px rgba(43,200,196,.55);
  color:var(--teal-deep); margin-bottom:10px;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.card--crit .card__icon{
  background:linear-gradient(135deg, rgba(240,116,56,.20), rgba(240,116,56,.05));
  border-color:rgba(240,116,56,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px -12px rgba(240,116,56,.55);
  color:var(--orange-deep);
}
.card:hover .card__icon{
  transform:translateY(-4px) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 26px -12px rgba(43,200,196,.7);
}
.card--crit:hover .card__icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 26px -12px rgba(240,116,56,.7); }
.card__icon svg{ width:32px; height:32px; overflow:visible; }

/* stroke draw-in when the card grid reveals */
.card__icon svg *{ stroke-dasharray:100; stroke-dashoffset:100; }
.cards.is-in .card__icon svg *{ animation:icon-draw 1.1s var(--ease) forwards; }
.cards.is-in .card:nth-child(2) .card__icon svg *{ animation-delay:.12s; }
.cards.is-in .card:nth-child(3) .card__icon svg *{ animation-delay:.24s; }
.cards.is-in .card:nth-child(4) .card__icon svg *{ animation-delay:.36s; }
@keyframes icon-draw{ to{ stroke-dashoffset:0; } }

/* idle micro-motion after the draw settles */
.cards.is-in svg.i-float{ animation:i-float 3.8s ease-in-out 1.4s infinite; }
@keyframes i-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.cards.is-in svg.i-pulse{ animation:i-pulse 3.2s ease-in-out 1.4s infinite; }
@keyframes i-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.cards.is-in svg.i-swing{ animation:i-swing 3.4s ease-in-out 1.4s infinite; transform-origin:60% 60%; }
@keyframes i-swing{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-9deg); } 65%{ transform:rotate(5deg); } }
.cards.is-in svg.i-launch{ animation:i-launch 3.6s ease-in-out 1.4s infinite; }
@keyframes i-launch{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(2.5px,-2.5px); } }
.card__label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.card__title{ font-size:16.5px; font-weight:650; letter-spacing:-.01em; margin:0; color:var(--ink); }
.card__body{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }
.card--match .card__pi{ font-family:var(--mono); font-size:12px; color:var(--orange-deep); margin:0 0 4px; letter-spacing:.02em; }
.card--match .card__fix{ font-family:var(--serif); font-size:clamp(18px,2.3vw,23px); line-height:1.32; font-weight:450; margin:0; color:var(--ink); }

.summary--center{ text-align:center; margin-top:34px; }

@media (max-width:900px){
  .cards--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards--4, .cards--2{ grid-template-columns:1fr; }
}

/* ---------- Plain list ---------- */
.plain{ margin:0; padding:0; list-style:none; }
.plain li{
  font-size:clamp(16px,2.2vw,20px); line-height:1.5; padding:12px 0 12px 26px; position:relative; color:var(--ink);
}
.plain li::before{ content:"→"; position:absolute; left:0; color:var(--teal-deep); }

/* ---------- Diff — clean white card ---------- */
.diff{
  font-family:var(--mono); font-size:clamp(12.5px,1.7vw,14.5px); line-height:2;
  margin:0 0 56px; padding:18px clamp(18px,3vw,28px);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 60px -42px rgba(22,32,58,.35);
  overflow-x:auto;
}
.diff code{ display:block; }
.diff .dl{ display:block; color:var(--orange-deep); background:rgba(240,116,56,.08); border-radius:6px; padding:0 10px; }
.diff .ad{ display:block; color:var(--teal-deep); background:rgba(43,200,196,.10); border-radius:6px; padding:0 10px; margin-top:3px; }

/* ---------- CTA ---------- */
.cta-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 16px; }
.cta-lead{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(26px,4.8vw,48px); font-weight:500; letter-spacing:-.015em; line-height:1.12;
  margin:0 0 36px; max-width:19ch;
}
.actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.18em; text-decoration:none;
  padding:16px 28px; border-radius:8px; display:inline-flex; align-items:center; gap:10px;
  will-change:transform; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn span{ transition:transform .25s var(--ease); font-size:15px; }
.btn:hover span{ transform:translateX(4px); }
.btn--primary{ background:var(--teal); color:#fff; box-shadow:0 14px 30px -14px rgba(43,200,196,.7); }
.btn--primary:hover{ background:var(--teal-deep); box-shadow:0 16px 34px -12px rgba(20,156,153,.6); }
.btn--ghost{ border:1px solid var(--ink); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

.footnote{ font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); margin:64px 0 0; }

/* ---------- HERO — serif editorial, full-bleed ---------- */
.hero{
  position:relative; z-index:10; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:104px;            /* room for the stats band */
  overflow:hidden; cursor:crosshair;
}
/* faint technical grid */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(22,32,58,.035) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(22,32,58,.035) 0 1px, transparent 1px 90px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 75%);
}
/* icy swooshes behind the title */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(42% 26% at 76% 22%, rgba(43,200,196,.14), transparent 70%),
    radial-gradient(34% 22% at 14% 64%, rgba(43,200,196,.09), transparent 70%),
    radial-gradient(26% 18% at 32% 88%, rgba(240,116,56,.07), transparent 70%);
  filter:blur(14px);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  padding:0 clamp(16px,3.5vw,48px);
}
.hero__meta{ margin:0 0 3vh; }

.hero__title{
  margin:0; font-family:var(--serif); font-optical-sizing:auto; font-weight:550;
}
.t-line{
  display:block; line-height:.95; letter-spacing:-.02em; white-space:nowrap; color:var(--ink);
}
.t-line--1{ font-size:clamp(56px,13vw,190px); }
.t-line--2{ font-size:clamp(30px,11vw,178px); }
.t-line--3{ font-size:clamp(26px,5.5vw,66px); margin-top:.12em; }
.t-line--accent{ font-style:italic; font-weight:450; color:var(--orange); letter-spacing:-.01em; }
.t-dot{ font-style:normal; color:var(--teal); }
/* hide lines until decode starts (JS only) */
.js .t-line{ opacity:0; }
.js .t-line.live{ opacity:1; }
.t-line .ch{ display:inline-block; min-width:.45ch; }
.t-line .ch.dot{ color:var(--teal); }
.t-line .ch.scrambling{ color:var(--ink-ghost); }
.t-line--accent .ch.scrambling{ color:rgba(240,116,56,.3); }

.hero__foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-top:4.5vh; flex-wrap:wrap;
}
.hero__sub{ font-size:clamp(16px,2.2vw,21px); line-height:1.5; color:var(--ink-soft); margin:0; }
.hero__cue{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-dim);
  margin:0; display:inline-flex; align-items:center; gap:10px;
}
.hero__cue::after{
  content:""; width:30px; height:1px; background:var(--ink-dim);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ width:18px; opacity:.4; } 50%{ width:40px; opacity:1; } }

/* hand-drawn winter scene */
.hero__art{
  position:absolute; z-index:1; pointer-events:none;
  right:clamp(-40px,0vw,32px);
  top:clamp(180px,12vh + 100px,260px); bottom:auto;
  width:min(64vw,820px); height:auto;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
/* painted raster version: multiply blends its white ground into the icy washes */
.hero__art--painted{ mix-blend-mode:multiply; }
.il-trail{ animation:trail 2.6s linear infinite; }
@keyframes trail{ to{ stroke-dashoffset:-36; } }
@media (max-width:760px){
  .hero__art{ width:94vw; right:-6vw; top:64px; }
}

/* cursor-tracking crosshair + coordinates */
.xhair{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s ease; }
.hero:hover .xhair{ opacity:1; }
.xhair .xh-v, .xhair .xh-h{ position:absolute; background:rgba(43,200,196,.35); }
.xhair .xh-v{ top:0; bottom:0; width:1px; left:0; }
.xhair .xh-h{ left:0; right:0; height:1px; top:0; }
.xh-coords{
  position:absolute; top:0; left:0; transform:translate(14px,14px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--teal-deep);
  white-space:nowrap; opacity:.9;
}
@media (hover:none){ .xhair{ display:none; } .hero{ cursor:auto; } }

/* stats band — serif italic teal numbers, marquee */
.ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid var(--line);
  padding:16px 0; overflow:hidden;
  background:rgba(251,253,253,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ticker__track{ display:inline-flex; white-space:nowrap; animation:tick 30s linear infinite; align-items:baseline; }
.tk{
  flex-shrink:0; display:inline-flex; align-items:baseline; gap:12px;
  padding:0 34px; border-right:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.tk b{
  font-family:var(--serif); font-style:italic; font-weight:500; font-optical-sizing:auto;
  font-size:30px; line-height:1; letter-spacing:0; color:var(--teal);
}
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SCROLL-WRITE — words/lines fill in as you scroll
   ============================================================ */
.w{ color:var(--ink-ghost); transition:color .15s linear; }
.no-js .w, .no-js [data-write]{ color:inherit; }

.js .log li,
.js #chain .chain-item,
.js .rows .row,
.js .plain li{ opacity:.25; }
.js .card{ opacity:0; transform:translateY(18px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  body{ font-size:15px; }
  .topbar{ letter-spacing:.1em; }
  .topbar__l{ max-width:40vw; }
  .topbar__c{ display:none; }
  .rows .row{ grid-template-columns:1fr; gap:6px; }
  .row__key{ font-size:11px; }
  .statement, .cta-lead{ max-width:none; }
  .log li{ gap:10px; }
  .tk{ padding:0 22px; gap:9px; }
  .tk b{ font-size:24px; }
}

/* ---------- restructure: announcement banner, 3-col grid, compatibility ---------- */
.topbar__c{ text-decoration:none; transition:color .25s var(--ease); }
.topbar__c:hover{ color:var(--teal-deep); }
/* bold, darker second sub-line in the hero */
.hero__sub strong{ font-weight:600; color:var(--ink); }
/* mobile: keep the hiring announcement visible, drop the side labels */
@media (max-width:640px){
  .topbar{ justify-content:center; }
  .topbar__l, .topbar__r{ display:none; }
  .topbar__c{ display:block; position:static; transform:none; white-space:normal; text-align:center; line-height:1.4; }
}
.cards--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .cards--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards--3{ grid-template-columns:1fr; } }
.card--match.is-me .card__pi{ color:var(--teal-deep); }
/* soft caption under the dog video */
.vid-cap{ text-align:center; font-size:14px; line-height:1.5; color:var(--ink-soft); margin:20px auto 0; max-width:48ch; }
/* illustrated cards (§03) — watercolor art tile, pi.security event-card style */
.card--illus{ padding:14px 14px 22px; }
.card__art{
  aspect-ratio:4/3; border-radius:14px; overflow:hidden; margin-bottom:6px;
  background:linear-gradient(180deg,#EAF4FB,#F2F8FC);
}
.card__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.card--illus .card__title{ padding:0 8px; }
.card--illus .card__body{ padding:0 8px; }
/* tiny watercolor icon (§01, §02) — small painted tile */
.card__mini{
  width:60px; height:60px; border-radius:16px; overflow:hidden; margin-bottom:12px;
  background:#fff;
  box-shadow:0 8px 20px -12px rgba(22,32,58,.4), inset 0 0 0 1px rgba(22,32,58,.05);
}
.card__mini img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.18); }
/* Yavne water tower — big summit illustration, blended into the page, falling snow */
.summit-scene{ position:relative; width:min(700px,94%); margin:0 auto clamp(14px,3vw,22px); }
.summit{
  display:block; width:100%; height:auto; margin:0;
  mix-blend-mode:multiply;   /* white ground of the JPG melts into the icy page */
  -webkit-mask-image:radial-gradient(115% 105% at 50% 50%, #000 62%, transparent 96%);
          mask-image:radial-gradient(115% 105% at 50% 50%, #000 62%, transparent 96%);
}
.snow{ position:absolute; inset:-4% 0 0; pointer-events:none; z-index:2; }
/* icy-blue flakes so they read on the light page, not white-on-white */
.snow-a{
  background-image:
    radial-gradient(3px 3px at 20px 20px, rgba(126,170,205,.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 120px 60px, rgba(150,190,220,.7), transparent 60%),
    radial-gradient(2px 2px at 70px 140px, rgba(126,170,205,.75), transparent 60%),
    radial-gradient(3px 3px at 170px 110px, rgba(110,160,200,.8), transparent 60%),
    radial-gradient(2px 2px at 45px 185px, rgba(150,190,220,.65), transparent 60%);
  background-size:200px 200px; animation:snow-fall 7s linear infinite;
}
.snow-b{
  background-image:
    radial-gradient(4.5px 4.5px at 90px 30px, rgba(126,170,205,.75), transparent 60%),
    radial-gradient(3.5px 3.5px at 30px 100px, rgba(150,190,220,.6), transparent 60%),
    radial-gradient(4.5px 4.5px at 150px 165px, rgba(110,160,200,.7), transparent 60%),
    radial-gradient(3.5px 3.5px at 205px 80px, rgba(150,190,220,.55), transparent 60%);
  background-size:250px 250px; animation:snow-fall-b 12s linear infinite;
}
@keyframes snow-fall{ from{ background-position:0 0; } to{ background-position:0 200px; } }
@keyframes snow-fall-b{ from{ background-position:0 0; } to{ background-position:-40px 250px; } }
.summit-cap{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); text-align:center; margin:0 0 clamp(32px,6vw,56px);
}

/* hero eyebrow (mirrors Pi's "BUILT FOR VELOCITY") */
.hero__kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 clamp(14px,2vh,22px);
}
.hero__sub{ max-width:58ch; }
.hero__cue{ text-decoration:none; transition:color .25s var(--ease); }
.hero__cue:hover{ color:var(--teal-deep); }

/* §04 mono classification caption under the Buddy video */
.vid-cap--mono{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* §06 contact block — verified channels */
.contact{ margin:26px auto 0; max-width:520px; display:grid; gap:0; }
.contact__row{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line);
}
.contact__row:last-child{ border-bottom:1px solid var(--line); }
.contact dt{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.contact dd{ margin:0; }
.contact dd a{
  font-family:var(--mono); font-size:14px; color:var(--teal-deep); text-decoration:none;
  border-bottom:1px solid rgba(20,156,153,.3); transition:color .2s;
}
.contact dd a:hover{ color:var(--teal); }
@media (max-width:560px){
  .contact__row{ grid-template-columns:1fr; gap:2px; }
  .contact dd a{ font-size:13px; word-break:break-all; }
}

/* §04 · MARINA ice tiles — mirror of Pi's Sloane section (pure CSS) */
.ice-row{ display:flex; justify-content:center; gap:clamp(6px,1vw,10px); flex-wrap:nowrap; margin:8px 0 26px; }
.ice{
  position:relative; overflow:hidden; flex:0 0 auto;
  width:clamp(38px,8.5vw,86px); aspect-ratio:1;
  display:grid; place-items:center;
  font-family:var(--sans); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(22px,4.6vw,46px); color:#9DBBDD;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  background:linear-gradient(160deg,#F3FBFC,#D8EEF4);
  border-radius:18%;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(150,200,215,.35),
    inset 0 0 0 1px #BFE2EC,
    0 14px 28px -12px rgba(120,170,190,.45);
}
.ice::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 42%, transparent 48%, rgba(255,255,255,.3) 60%, transparent 66%);
}
.ice:nth-child(1){ transform:rotate(-3deg) translateY(4px); }
.ice:nth-child(2){ transform:rotate(2deg) translateY(-3px); }
.ice:nth-child(3){ transform:rotate(-1.5deg) translateY(2px); }
.ice:nth-child(4){ transform:rotate(3deg) translateY(-2px); }
.ice:nth-child(5){ transform:rotate(-2deg) translateY(3px); }
.ice:nth-child(6){ transform:rotate(2.5deg) translateY(-4px); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ice{ transition:transform .25s ease; }
  .ice:hover{ transform:rotate(0deg) translateY(-6px) scale(1.03); }
}

/* §04 · AMA console — map the widget tokens onto the site, round + teal it */
#ama-root{
  margin-top:clamp(32px,6vw,56px);
  --ama-paper:#FFFFFF; --ama-ink:var(--ink); --ama-ink-soft:var(--ink-soft);
  --ama-line:var(--line); --ama-mono:var(--mono);
}
#ama-root .ama-console{
  border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px -44px rgba(22,32,58,.4);
}
#ama-root .ama-live{ background:var(--teal) !important; box-shadow:0 0 8px var(--teal); }
#ama-root .ama-msg-ai::before{ color:var(--teal-deep); }
#ama-root .ama-chip{ border-radius:8px; }
#ama-root .ama-chip:hover, #ama-root .ama-chip:focus-visible{ border-color:var(--teal-deep); color:var(--teal-deep); }
#ama-root .ama-send{ background:var(--teal); border-color:var(--teal); color:#fff; border-radius:8px; letter-spacing:.16em; }
#ama-root .ama-send:hover:not(:disabled){ background:var(--teal-deep); border-color:var(--teal-deep); }
#ama-root .ama-limit a{ color:var(--teal-deep); }
/* mobile: keep the input row + RUN button from overflowing the console */
#ama-root .ama-input{ min-width:0; }
@media (max-width:560px){
  #ama-root .ama-prefix{ display:none; }
  #ama-root .ama-inputrow{ padding:10px 12px; gap:8px; }
  #ama-root .ama-send{ padding:8px 12px; flex-shrink:0; }
  #ama-root .ama-log{ padding:16px 12px; }
  #ama-root .ama-chips{ padding:0 12px 12px; }
  #ama-root .ama-head, #ama-root .ama-foot{ padding-left:12px; padding-right:12px; }
}

/* ---------- HERO v2 — centered, one-line headline, art below (Pi's layout) ---------- */
.hero{ justify-content:flex-start; padding-top:clamp(88px,11vh,140px); }
.hero__inner{ text-align:center; }
.hero__kicker{ color:var(--ink-soft); margin-bottom:clamp(12px,2vh,20px); }
.t-line--1, .t-line--2, .t-line--3{
  display:inline-block; font-size:clamp(34px,5.8vw,72px); line-height:1.06; margin-top:0;
}
.t-line--2{ margin:0 .28ch; }
.hero__sub{ margin:20px auto 30px; max-width:56ch; }
.hero__cta{ margin:0 auto; }
.hero__art, .hero__art--painted{
  position:static; display:block;
  width:min(880px,94vw); height:auto;
  margin:clamp(6px,2.5vh,26px) auto 0;
}
@media (max-width:760px){
  .hero__art, .hero__art--painted{ width:94vw; margin:12px auto 0; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .t-line{ opacity:1; }
  .w{ color:inherit; }
  .js .log li, .js #chain .chain-item, .js .rows .row, .js .plain li, .js .card{ opacity:1; transform:none; }
  .log__intel{ transition:none; }
  .log li.is-open .log__tog{ transition:none; }
  .card__icon svg *{ stroke-dashoffset:0; animation:none; }
  .grain, .xhair, .ticker{ display:none; }
}