/* ================== HERO ================== */
.hero{padding:170px 0 60px;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);margin-left:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--ok) 0%,transparent)}}
.hero h1{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:clamp(46px,7.4vw,104px);letter-spacing:-.04em;line-height:.95;font-weight:650;margin:26px 0 26px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--slate)}
[data-theme="dark"] .hero h1 em{color:var(--accent)}
.hero h1 .ul{position:relative;white-space:nowrap}
.hero h1 .ul svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.22em;color:var(--accent)}
.hero h1 .ul svg path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s .6s forwards cubic-bezier(.6,0,.2,1)}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lead{font-size:19px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-meta{display:flex;gap:36px;margin-top:48px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-meta div b{font-family:var(--serif);font-size:30px;color:var(--ink);font-weight:600;display:block;line-height:1}
.hero-meta div span{font-size:13px;color:var(--muted)}

/* hero visual */
.stage{position:relative;aspect-ratio:1/1.02}
.orb{position:absolute;inset:6% 2% 4% 8%;border-radius:50%;background:var(--navy);box-shadow:inset 0 -40px 80px rgba(0,0,0,.35)}
.orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px dashed var(--line-2);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.win{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.win-bar span{margin-left:10px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.win-dash{left:0;top:16%;width:78%;animation:float 7s ease-in-out infinite}
.dash{display:grid;grid-template-columns:70px 1fr;min-height:250px}
.dash aside{border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.dash aside i{height:8px;border-radius:4px;background:var(--line)}
.dash aside i:first-child{background:var(--navy);width:70%}
[data-theme="dark"] .dash aside i:first-child{background:var(--accent)}
.dash main{padding:14px;display:flex;flex-direction:column;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:8px}
.kpi small{display:block;font-size:9px;color:var(--muted);font-family:var(--mono)}
.kpi b{font-size:15px;color:var(--ink)}
.chart{display:flex;align-items:flex-end;gap:6px;height:70px;padding:6px 4px;border-bottom:1px solid var(--line)}
.chart i{flex:1;background:linear-gradient(var(--navy-2),var(--navy));border-radius:4px 4px 2px 2px;transform-origin:bottom;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}
[data-theme="dark"] .chart i{background:linear-gradient(var(--accent),#5B74B8)}
@keyframes grow{from{transform:scaleY(0)}}
.rows{display:flex;flex-direction:column;gap:6px}
.rows div{display:flex;gap:8px;align-items:center}
.rows div i{height:7px;border-radius:4px;background:var(--line);flex:1}
.rows div em{font-style:normal;font-size:8.5px;font-family:var(--mono);padding:2px 6px;border-radius:99px;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.win-code{right:-2%;bottom:6%;width:62%;animation:float 8s -2s ease-in-out infinite;background:#0E1428;border-color:rgba(255,255,255,.08)}
.win-code .win-bar{background:#121A33;border-color:rgba(255,255,255,.06)}
.win-code .win-bar i{background:rgba(255,255,255,.15)}
.win-code pre{padding:14px 16px;font-family:var(--mono);font-size:11px;line-height:1.75;color:#C8D0E6;white-space:pre;overflow:hidden}
.c-k{color:#9DB0E6}.c-s{color:#E8C58A}.c-f{color:#8FD3B6}.c-m{color:#6C7590}
.chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:12.5px;font-weight:600;color:var(--ink);animation:float 6s -1s ease-in-out infinite}
.chip svg{width:14px;height:14px}
.chip-1{top:4%;right:4%}
.chip-2{left:6%;bottom:2%;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-10px)}}

/* marquee */
.marquee{border-block:1px solid var(--line);padding:22px 0;overflow:hidden;margin-top:60px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 34s linear infinite}
.marquee span{font-family:var(--serif);font-size:28px;font-style:italic;color:var(--muted);display:flex;align-items:center;gap:56px;white-space:nowrap}
.marquee span::after{content:"✦";font-style:normal;font-size:14px;color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}