/* Homepage Experience 2.0 — additive layer. Scoped to .hp2* and html.hp2-on. Palette = existing site: #000/#050505 graphite, #f0f0f0, greys, LIZO electric #B7FF4A as accent only, controlled blue, warm highlight. */
:root{--hp2-bg:#050505;--hp2-g1:#0b0c0e;--hp2-g2:#14161a;--hp2-line:#23262b;--hp2-tx:#f0f0f0;--hp2-tx2:#b5b5b5;--hp2-tx3:#8a8a8a;--hp2-el:#b7ff4a;--hp2-blue:#4f8fe8;--hp2-warm:#e8a35a}
.hp2{background:#000;color:var(--hp2-tx);font-family:Inter,system-ui,sans-serif;border-top:1px solid #1d1d1d;position:relative}
.hp2 .w{max-width:1200px;margin:0 auto;padding:96px 24px}
.hp2 .k{font:600 12px/1 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hp2-tx3);margin:0 0 16px}
.hp2 .k b{color:var(--hp2-el);font-weight:600}
.hp2 h2{font-size:clamp(30px,4.6vw,58px);line-height:1.04;margin:0 0 18px;font-weight:700;letter-spacing:-.03em;max-width:18ch}
.hp2 h3{font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.hp2 p{color:var(--hp2-tx2);line-height:1.65;margin:0 0 12px;max-width:68ch}
.hp2 .tag{display:inline-block;font:600 11px/1 ui-monospace,monospace;padding:6px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hp2-line);color:var(--hp2-tx2);background:#0a0a0a}
.hp2 .tag.ok{color:#4ade80;border-color:#1c3a26}.hp2 .tag.pl{color:#a5b4fc;border-color:#2a2c44}.hp2 .tag.il{color:var(--hp2-warm);border-color:#3d2c19}
.hp2 a:focus-visible,.hp2 button:focus-visible{outline:2px solid var(--hp2-el);outline-offset:3px}
.hp2 .btn{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--hp2-tx);color:#000;font-weight:700;text-decoration:none;margin:8px 10px 0 0;border:0;font-size:15px;cursor:pointer}
.hp2 .btn.o{background:transparent;color:var(--hp2-tx);border:1px solid #444}
/* --- 3D stage --- */
.hp2-stage{height:560vh;background:var(--hp2-bg)}
.hp2-stage .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hp2-stage canvas.hp2-gl{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.hp2-stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hp2-stage .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,5,.92) 0,rgba(5,5,5,.55) 34%,rgba(5,5,5,0) 58%),linear-gradient(0deg,rgba(5,5,5,.9) 0,rgba(5,5,5,0) 22%)}
.hp2-stage .copy{position:absolute;left:max(24px,calc(50vw - 600px));top:96px;bottom:40px;width:min(420px,calc(100vw - 48px));display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hp2-stage .copy>*{pointer-events:auto}
.hp2-stage ol.steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:s}
.hp2-stage ol.steps li{counter-increment:s;padding:9px 0 9px 34px;position:relative;color:#5d6168;transition:color .4s,opacity .4s;font-size:15px;line-height:1.45}
.hp2-stage ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:11px;font:600 11px/1 ui-monospace,monospace;color:#3d4046}
.hp2-stage ol.steps li span{display:block;max-height:0;overflow:hidden;color:var(--hp2-tx2);font-size:14px;transition:max-height .5s}
.hp2-stage ol.steps li.on{color:var(--hp2-tx)}.hp2-stage ol.steps li.on::before{color:var(--hp2-el)}
.hp2-stage ol.steps li.on span{max-height:8em}
.hp2-stage .note{margin-top:18px;font:500 11px/1.5 ui-monospace,monospace;color:var(--hp2-tx3);letter-spacing:.04em}
.hp2-stage .ctl{position:absolute;right:24px;bottom:24px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:60vw;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
.hp2-stage.live .ctl{opacity:1;transform:none;pointer-events:auto}
.hp2-stage .ctl button{font:600 12px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hp2-tx2);background:rgba(10,11,13,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--hp2-line);padding:10px 12px;border-radius:999px;cursor:pointer}
.hp2-stage .ctl button[aria-pressed=true]{color:#000;background:var(--hp2-tx);border-color:var(--hp2-tx)}
.hp2-stage .ctl .i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0}
.hp2-stage .tip{position:absolute;pointer-events:none;font:600 11px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hp2-tx);background:rgba(10,11,13,.85);border:1px solid var(--hp2-line);padding:7px 9px;border-radius:6px;transform:translate(12px,12px);opacity:0;transition:opacity .15s}
.hp2-stage .load3d{margin-top:16px}
.hp2-stage .prog{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--hp2-blue),var(--hp2-el));width:0}
/* --- ribbon --- */
canvas.hp2-ribbon{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40;mix-blend-mode:screen}
/* --- product windows --- */
.hp2 .win{border-radius:14px;border:1px solid #2a2d33;background:linear-gradient(180deg,rgba(28,30,35,.7),rgba(10,11,13,.8));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hp2 .win .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid #22252a;font:500 11px/1 ui-monospace,monospace;color:var(--hp2-tx3)}
.hp2 .win .bar i{width:9px;height:9px;border-radius:50%;background:#2c2f35;display:inline-block}
.hp2 .win .bar em{margin-left:8px;font-style:normal}
.hp2 .win img{display:block;width:100%;height:auto}
.hp2 .persp{perspective:1600px}
.hp2 .tilt{transform:rotateX(6deg) rotateY(-9deg)}
.hp2 .cap{font-size:13px;color:var(--hp2-tx3);margin-top:12px}
.hp2 .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hp2 .tabs{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.hp2 .tabs button{all:unset;cursor:pointer;display:block;padding:14px 16px;border-radius:12px;border:1px solid transparent;color:var(--hp2-tx3)}
.hp2 .tabs button b{display:block;color:var(--hp2-tx2);font-size:15px;margin-bottom:3px}
.hp2 .tabs button[aria-selected=true]{border-color:var(--hp2-line);background:#0b0c0e;color:var(--hp2-tx2)}
.hp2 .tabs button[aria-selected=true] b{color:var(--hp2-tx)}
.hp2 .tabs button:focus-visible{outline:2px solid var(--hp2-el)}
.hp2 .g3{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
.hp2 .card{border:1px solid var(--hp2-line);border-radius:14px;padding:22px;background:#0a0a0a}
.hp2 .card .n{font:600 11px/1 ui-monospace,monospace;color:var(--hp2-el);letter-spacing:.1em;margin-bottom:14px;display:block}
.hp2 figure{margin:0}
.hp2 .chart{margin-top:6px}
.hp2 .chart svg{width:100%;height:auto;display:block}
.hp2 .flow svg{width:100%;height:auto;display:block}
.hp2 .team{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.hp2 .team a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--hp2-tx);border:1px solid var(--hp2-line);border-radius:999px;padding:6px 18px 6px 6px}
.hp2 .team img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.hp2-final{text-align:center}.hp2-final h2{margin-left:auto;margin-right:auto}.hp2-final p{margin-left:auto;margin-right:auto}
.hp2-final .core{width:14px;height:14px;border-radius:50%;margin:0 auto 26px;background:var(--hp2-el);box-shadow:0 0 0 6px rgba(183,255,74,.08),0 0 40px rgba(183,255,74,.35)}
/* --- reveal: blur-to-focus, one at a time --- */
html.hp2-motion .hp2-rv{opacity:0;filter:blur(10px);transform:translateY(18px);transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.hp2-motion .hp2-rv.in{opacity:1;filter:none;transform:none}
@media (max-width:900px){.hp2 .split{grid-template-columns:1fr;gap:28px}.hp2 .g3{grid-template-columns:1fr}.hp2 .tilt{transform:none}
 .hp2-stage{height:auto}.hp2-stage .pin{position:relative;height:auto;min-height:0;display:flex;flex-direction:column}
 .hp2-stage .viz{position:relative;height:62vw;min-height:260px;order:2}
 .hp2-stage .shade{display:none}.hp2-stage .copy{position:relative;inset:auto;width:auto;padding:88px 24px 24px}
 .hp2-stage ol.steps li span{max-height:none}.hp2-stage ol.steps li{color:var(--hp2-tx)}
 .hp2-stage .ctl{position:relative;right:auto;bottom:auto;max-width:none;justify-content:flex-start;padding:12px 24px 32px;opacity:1;transform:none;pointer-events:auto;order:3}}
@media (min-width:901px){.hp2-stage .viz{position:absolute;inset:0}}
@media (prefers-reduced-motion:reduce){.hp2 *,.hp2-stage *{transition:none!important;animation:none!important}html.hp2-motion .hp2-rv{opacity:1;filter:none;transform:none}
 .hp2-stage{height:auto}.hp2-stage .pin{position:relative;height:auto}.hp2-stage .viz{position:relative;height:56vw;max-height:80vh}
 .hp2-stage ol.steps li{color:var(--hp2-tx)}.hp2-stage ol.steps li span{max-height:none}.hp2-stage .copy{position:relative;padding:96px 24px 24px;left:auto;top:auto;width:auto;max-width:1200px;margin:0 auto}.hp2-stage .shade{display:none}
 .hp2-stage .ctl{position:relative;opacity:1;transform:none;pointer-events:auto;right:auto;bottom:auto;padding:12px 24px 32px;justify-content:flex-start;max-width:1200px;margin:0 auto}}
@media (min-width:901px){.hp2-stage h2{font-size:clamp(28px,3vw,42px);max-width:14ch}.hp2-stage .copy>p{font-size:15px}.hp2-stage ol.steps{margin-top:10px}.hp2-stage ol.steps li{padding:6px 0 6px 34px;font-size:14px}.hp2-stage ol.steps li::before{top:8px}.hp2-stage .note{margin-top:10px}.hp2-stage .btn{padding:11px 18px;font-size:14px}}
@media (min-width:901px) and (max-height:820px){.hp2-stage .copy>p:not(.k):not(.note){display:none}}
html.hp2-motion .hp2 .flow .fl{stroke-dasharray:5 7;animation:hp2dash 1.8s linear infinite}
@keyframes hp2dash{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){html.hp2-motion .hp2 .flow .fl{animation:none;stroke-dasharray:none}}
.hp2-final .k,.hp2-final [class*=eyebrow]{justify-content:center;text-align:center;display:block}
#home-e.hp2-final p.k{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:center}
/* Diansun greeter */
.hp2-hi{position:absolute;top:-8px;right:24px;width:220px;height:118px;pointer-events:none;z-index:2}
.hp2-hi img{position:absolute;right:0;bottom:0;width:96px;height:96px;opacity:0;filter:blur(10px);transform:translateY(18px) scale(.92);filter:blur(10px) drop-shadow(0 10px 24px rgba(255,190,40,.18))}
.hp2-hi .bub{position:absolute;right:92px;top:4px;display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:14px 14px 4px 14px;background:rgba(20,20,20,.82);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#f0f0f0;font:600 15px/1 inherit;letter-spacing:-.01em;opacity:0;transform:translateY(6px) scale(.85);transform-origin:100% 100%;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.hp2-hi .hand{transform-origin:70% 85%}
.hp2-hi.on img{animation:hp2hiIn .8s cubic-bezier(.2,.8,.2,1) forwards}
.hp2-hi.on .bub{animation:hp2bub .45s .55s cubic-bezier(.3,1.5,.5,1) forwards}
.hp2-hi.on .hand{animation:hp2wave 1.4s .8s ease-in-out 1}
.hp2-hi.static img,.hp2-hi.static .bub{animation:none!important;opacity:1;filter:none;transform:none}
.hp2-hi.static .hand{animation:none!important}
@keyframes hp2hiIn{to{opacity:1;filter:blur(0) drop-shadow(0 10px 24px rgba(255,190,40,.18));transform:none}}
@keyframes hp2bub{to{opacity:1;transform:none}}
@keyframes hp2wave{0%,100%{transform:rotate(0)}15%,45%,75%{transform:rotate(18deg)}30%,60%{transform:rotate(-10deg)}}
@media (prefers-reduced-motion:reduce){.hp2-hi img,.hp2-hi .bub{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}.hp2-hi .hand{animation:none!important}}
@media (max-width:900px){.hp2-hi{position:relative;top:auto;right:auto;margin:0 0 10px auto;width:190px;height:84px}.hp2-hi img{width:72px;height:72px}.hp2-hi .bub{right:70px;font-size:14px}}
@media (min-width:901px){.hp2-hi{width:260px;height:140px;top:-20px}.hp2-hi img{width:124px;height:124px}.hp2-hi .bub{right:116px;top:10px;font-size:16px}}

/* 3.0: chapter buttons + lime active chapter */
.hp2-stage ol.steps li .chb{all:unset;cursor:pointer;display:block;color:inherit;font:inherit}
.hp2-stage ol.steps li .chb:focus-visible{outline:2px solid var(--hp2-el);outline-offset:3px;border-radius:4px}
.hp2-stage ol.steps li::after{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--hp2-el);opacity:0;transform:scaleY(.3);transition:opacity .35s,transform .35s}
.hp2-stage ol.steps li.cur::after{opacity:1;transform:none}
.hp2-stage ol.steps li.cur .chb{color:var(--hp2-el)}
.hp2-stage .ctl button[data-mode]{border-style:dashed}
.hp2-stage .ctl button[data-mode][aria-pressed=true]{background:var(--hp2-el);border-color:var(--hp2-el);color:#000;border-style:solid}
/* 3.1: headings never hide under the fixed nav */
#root section h2,#root section[id],.hp2-stage,.hp3-arch,.hp3-runtime{scroll-margin-top:96px}
.hp2-stage .copy{top:104px}