@font-face{font-family:'Bodoni Moda';font-weight:400 900;font-style:normal;font-display:swap;src:url(/fonts/bodoni-moda-855ea6.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/manrope-814019.woff2) format('woff2')}
/* v7 tokens (pi-clean/site/home/style.css), identical to proto-ai-section */
:root{
  --bg:#0a1220;--bg2:#0d1829;--bg3:#111f35;--ink:#f3eee4;--ink-2:#c9cfd8;--muted:#98a3b3;--gold:#c6a568;--gold-d:#7d5f2e;
  --hair:rgba(198,165,104,.24);--hair-strong:rgba(198,165,104,.55);--hair-faint:rgba(243,238,228,.08);
  --disp:'Bodoni Moda',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--fs-caps:11.5px;
  --s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --pad:clamp(24px,6vw,96px);--maxw:1320px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-med:.6s;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- section: visual LEFT 66 / text RIGHT 34 (mirror of the AI section) ---------- */
.sx{position:relative;min-height:100vh;max-width:var(--maxw);margin:0 auto;padding:var(--s9) var(--pad);
  display:grid;grid-template-columns:66fr minmax(340px,34fr);gap:clamp(32px,4vw,72px);align-items:center}
.sx::before,.sx::after{content:"";position:absolute;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.sx::before{top:0}.sx::after{bottom:0}
.sx-copy{position:relative;z-index:1}
.sx-label{display:flex;align-items:center;gap:16px;margin:0 0 var(--s6);font-size:var(--fs-caps);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.sx-label::after{content:"";width:48px;height:1px;background:var(--gold)}
.sx-h{font-family:var(--disp);font-weight:400;font-size:clamp(40px,3.6vw,56px);line-height:1.06;letter-spacing:-.01em;margin:0 0 var(--s6);color:var(--ink)}
.sx-ln{display:block;white-space:nowrap}
.sx-line{margin:0 0 var(--s7);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sx-line .dot{display:inline-block;margin:0 .7em;color:var(--gold)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-size:var(--fs-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:20px 38px;border:1px solid var(--gold);transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-io)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn.ghost::before{background:var(--gold)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--bg);border-color:var(--gold)}
/* Learn more: identical to the AI section's .ai-more */
.sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.sx-more{display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(243,238,228,.65);text-decoration:none;transition:color var(--t-med) var(--ease-out)}
.sx-more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(243,238,228,.26);transition:text-decoration-color var(--t-med) var(--ease-out)}
.sx-more-arrow{display:inline-block;font-size:12px;letter-spacing:0;transition:transform var(--t-med) var(--ease-out)}
.sx-more:hover,.sx-more:focus-visible{color:var(--ink)}
.sx-more:hover .sx-more-t,.sx-more:focus-visible .sx-more-t{text-decoration-color:var(--gold)}
.sx-more:hover .sx-more-arrow,.sx-more:focus-visible .sx-more-arrow{transform:translateX(2px)}
.sx-more:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

/* ---------- "stealth": pw-bulb, copied from proto-ai-section (same layers + filament power-up), scoped to #sec ---------- */
.sx-lit.pw-bulb{color:#fff6e3;
  text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}
/* sync: radar.js adds .fx-in on the frame its clock starts; the sweep fades in at 1.0 s, the word warms 0.15 s ahead of it */
#sec.fx-in .sx-lit.pw-bulb{animation:fx-filament 1.6s cubic-bezier(.3,0,.2,1) .85s both}
#sec.fx-armed:not(.fx-in) .sx-lit.pw-bulb{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4)}
@keyframes fx-filament{
  0%{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4),0 0 2px rgba(230,207,156,0),0 0 4px rgba(198,165,104,0),0 0 9px rgba(222,168,80,0),0 0 16px rgba(222,168,80,0)}
  42%{color:#fffbf2;text-shadow:0 0 1px #ffffff,0 0 3px #f6e2b4,0 0 6px #d9b56f,0 0 12px rgba(222,168,80,.7),0 0 22px rgba(222,168,80,.24)}
  54%{color:#fff3da;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 8px rgba(222,168,80,.36),0 0 14px rgba(222,168,80,.10)}
  60%{color:#fff8ea;text-shadow:0 0 1px #fff4d8,0 0 2px #ecd6a6,0 0 5px #cdab6c,0 0 10px rgba(222,168,80,.52),0 0 18px rgba(222,168,80,.17)}
  100%{color:#fff6e3;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}}

/* ---------- radar ---------- */
.sx-vis{margin:0;position:relative;min-width:0;display:flex;justify-content:center}
.radar{display:block;width:100%;max-width:min(584px,68vh);height:auto;overflow:visible}  /* 9% under the first cut (640px/74vh) so it weighs the same as the AI chart */
.cross path{fill:none;stroke:rgba(243,238,228,.07);stroke-width:1}
.cross .diag{stroke:rgba(243,238,228,.035)}
.radar .ring{fill:none;stroke:rgba(198,165,104,.26);stroke-width:1}
.radar .ring-o{stroke:rgba(198,165,104,.42)}
.radar .ticks{fill:none;stroke:rgba(198,165,104,.28);stroke-width:1}
.wedge{stroke:none}
.arm{stroke:#e6cf9c;stroke-width:1.5;stroke-linecap:round}
.arm-glow{stroke:#c6a568;stroke-width:6;opacity:.35}
.blip-pt{fill:#f7e9c6}
.core-pt{fill:#f7e9c6}
.core-ring{fill:none;stroke:#e2c88f;stroke-width:1;opacity:0}

@media (max-width:860px){
  .sx{grid-template-columns:1fr;min-height:auto;padding:var(--s8) 22px var(--s9);gap:var(--s7);overflow-x:clip}
  .sx-vis{order:-1;margin:0 -6px}
  .radar{max-width:100%}
  .sx-h{font-size:clamp(38px,10.5vw,46px)}
  .radar .ring,.radar .ticks,.cross path{stroke-width:1.8}.arm{stroke-width:2.6}.arm-glow{stroke-width:9}
  .blip-pt{r:4}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.sx-more,.sx-more-t,.sx-more-arrow{transition:none}
  #sec.fx-in .sx-lit.pw-bulb{animation:none}
}