/* =========================================================================
   NIKSUN — convergence hero (homepage). Scoped to .cl-hero. Self-contained
   tokens so it never depends on site.css var names. Pairs with convergence.js.
   ========================================================================= */
.cl-hero{--cvblue:#2E97D7;--cvbluedeep:#15679F;--cvbright:#5BB6EA;--cvcyan:#16BEDC;
  --cvink:#0C1B2A;--cvink2:#42566A;--cvmuted:#6E8194;--cvline:#E4EBF2;--cvsurface:#F6F8FB;
  --cvmono:'JetBrains Mono',ui-monospace,monospace;--cvsans:'Hanken Grotesk',system-ui,sans-serif;
  --cvease:cubic-bezier(.4,0,.2,1)}

/* stacked, lighting headline */
.cl-hero h1 .ln{display:block;cursor:pointer;color:var(--cvink);transition:color .45s ease}
.cl-hero h1 .ln:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--cvblue)}
.cl-hero h1 .ln.on{color:var(--cvblue)}

/* theater = convergence overlay + the real investigation dashboard */
.cl-hero .theater{position:relative;max-width:1060px;margin:34px auto 0}
.cl-hero .theater .iv-stage{margin:0;max-width:100%;padding:0;transform-origin:50% 42%;
  transition:opacity .6s ease .12s,transform .75s var(--cvease) .12s}

.cl-hero .conv{position:absolute;inset:0;z-index:3;transition:opacity .55s ease}
.cl-hero .conv .links-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .6s ease}
.cl-hero .conv .links-svg line{stroke:var(--cvblue);stroke-opacity:.18;stroke-width:1;stroke-dasharray:3 5}

.cl-hero .chip{position:absolute;display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--cvmono);
  letter-spacing:.04em;color:var(--cvbluedeep);background:var(--paper);border:1px solid rgba(46,151,215,.38);border-radius:10px;
  padding:10px 13px;white-space:nowrap;box-shadow:0 10px 24px -16px rgba(10,37,64,.4);will-change:transform,opacity;
  transition:transform .95s cubic-bezier(.55,0,.2,1),opacity .7s ease}
.cl-hero .chip i{width:6px;height:6px;border-radius:50%;background:var(--cvblue)}

.cl-hero .dchip{position:absolute;display:inline-flex;align-items:center;font:600 10px/1 var(--cvmono);letter-spacing:.06em;
  color:#54667A;background:var(--paper);border:1px solid #D5DFEA;border-radius:8px;padding:6px 9px;white-space:nowrap;
  box-shadow:0 6px 16px -12px rgba(10,37,64,.3);transition:opacity .5s ease,transform .8s var(--cvease)}
.cl-hero .fdot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--cvcyan);box-shadow:0 0 7px var(--cvcyan);pointer-events:none;animation:cvFdrift 2.8s linear infinite}
@keyframes cvFdrift{0%{transform:translate(0,0) scale(.5);opacity:0}16%{opacity:1}100%{transform:translate(var(--ex,0),var(--ey,0)) scale(.9);opacity:0}}

.cl-hero .pane{position:absolute;left:50%;top:42%;width:332px;transform:translate(-50%,-50%) scale(.9);
  background:var(--paper);border:1px solid var(--cvline);border-radius:18px;padding:18px;
  box-shadow:0 30px 70px -36px rgba(10,37,64,.42);opacity:.5;
  transition:transform .85s var(--cvease),opacity .7s ease,box-shadow .85s ease}
.cl-hero .pane.lit{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 40px 90px -34px rgba(22,120,190,.5),0 0 0 1px rgba(46,151,215,.25)}
.cl-hero .pane .ph{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--cvline)}
.cl-hero .pane .ph .ph-niksun{width:20px;height:20px;border-radius:50%;flex:none}
.cl-hero .pane .ph .ph-ol{width:auto;height:10px;display:inline-block}
.cl-hero .pane .ph .olw-dark{display:none}
:root[data-theme="light"] .cl-hero .pane .ph .olw-light{display:none}
:root[data-theme="light"] .cl-hero .pane .ph .olw-dark{display:inline-block}
.cl-hero .pane .logo{width:24px;height:24px;border-radius:7px;background:linear-gradient(150deg,var(--cvcyan),var(--cvblue));display:grid;place-items:center;color:#fff;font:800 12px/1 var(--cvsans)}
.cl-hero .pane .ph b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--cvink)}
.cl-hero .pane .ph small{margin-left:auto;font:700 9px/1 var(--cvmono);letter-spacing:.1em;color:var(--cvcyan)}
.cl-hero .pane .row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--cvline)}
.cl-hero .pane .row:last-of-type{border-bottom:0}
.cl-hero .pane .row .k{font:600 11px/1 var(--cvmono);letter-spacing:.04em;color:var(--cvink)}
.cl-hero .pane .row .chk{margin-left:auto;width:16px;height:16px;border-radius:50%;background:rgba(31,138,95,.12);color:#1F8A5B;display:grid;place-items:center;font-size:9px}
.cl-hero .pane .w{display:flex;gap:6px;padding-top:12px}
.cl-hero .pane .w span{flex:1;text-align:center;font:600 9px/1 var(--cvmono);color:var(--cvbluedeep);background:var(--cvsurface);border-radius:6px;padding:7px 0}

/* replay control */
.cl-hero .cv-replay{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--cvmono);letter-spacing:.06em;
  color:var(--cvmuted);background:transparent;border:1px solid var(--cvline);border-radius:999px;padding:12px 18px;cursor:pointer}
.cl-hero .cv-replay:hover{color:var(--cvink);border-color:#cdd9e6}

.cl-hero .iv-evidence{display:none;grid-template-columns:repeat(5,1fr);gap:11px;padding:4px 18px 18px;position:relative;z-index:1}
.cl-hero .iv-evidence.show{display:grid}
@media(max-width:860px){.cl-hero .iv-evidence{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cl-hero .iv-evidence{grid-template-columns:1fr}}
.cl-hero .iv-ev .ev-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cl-hero .iv-ev .ev-row{font:600 9.5px/1.35 var(--cvmono);color:#bcd3e6;background:rgba(255,255,255,.04);border:1px solid rgba(79,176,230,.18);border-radius:6px;padding:6px 7px}
.cl-hero .iv-ev .ev-row.hot{color:#ffd0d1;background:rgba(255,107,110,.12);border-color:rgba(255,107,110,.32)}

@media(prefers-reduced-motion:reduce){
  .cl-hero .chip,.cl-hero .pane,.cl-hero .conv,.cl-hero .theater .iv-stage,.cl-hero .dchip{transition:none}
  .cl-hero .fdot{animation:none;opacity:0}
}

/* hero dashboard glow — rides the morphed dashboard's fade-in; theme-aware
   (stronger blue/cyan halo on light theme where it needs lifting, softer on dark) */
.cl-hero .iv-con{
  box-shadow:0 50px 110px -44px rgba(10,37,64,.55), 0 0 84px -14px rgba(46,151,215,.42), 0 0 0 1px rgba(46,151,215,.14);
}
:root[data-theme="dark"] .cl-hero .iv-con{
  box-shadow:0 50px 110px -50px rgba(0,0,0,.7), 0 0 64px -18px rgba(79,176,230,.22);
}