/* Homepage 3.0 — additive. Scoped to .hp3*, #hp3-*, and status banners. Lime is the primary accent; orange=power, blue=cooling on technical lines only. */
:root{--p3-pw:#ff9d3c;--p3-cl:#5cc8ff}
/* hero campus */
.hp3-campus{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.hp3-campus canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:auto}
.hp3-campus .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .8s}
.hp3-campus.gl .poster{opacity:0}
.hp3-campus .veil{position:absolute;inset:0;background:radial-gradient(ellipse 60% 48% at 50% 46%,rgba(0,0,0,.62),rgba(0,0,0,.25) 60%,rgba(0,0,0,0)),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 26%);pointer-events:none}
.hp3-intro{position:absolute;left:0;right:0;bottom:88px;z-index:12;display:flex;justify-content:center;gap:14px;align-items:center;transition:opacity .6s}
.hp3-intro .lab{margin:0;font:600 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;background:rgba(0,0,0,.55);padding:8px 12px;border-radius:999px;border:1px solid #222}
.hp3-intro .lab b{color:#b7ff4a}
.hp3-intro .skip{font:600 12px/1 Inter,system-ui,sans-serif;color:#f0f0f0;background:rgba(0,0,0,.6);border:1px solid #444;border-radius:999px;padding:8px 14px;cursor:pointer}
.hp3-intro .skip:focus-visible{outline:2px solid #b7ff4a;outline-offset:3px}
.hp3-intro.done .skip{display:none}
.hp3-intro.done{opacity:.85}
/* status banner (product pages) */
.hp3-banner{background:#07090a;border-top:1px solid #1d1d1d;border-bottom:1px solid #1d1d1d;color:#cfcfcf;font:14px/1.6 Inter,system-ui,sans-serif}
.hp3-banner .in{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hp3-banner b{color:#b7ff4a;font:600 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.hp3-banner a{color:#f0f0f0}
/* architecture */
#hp3-arch{overflow-x:clip;background:radial-gradient(ellipse 70% 60% at 75% 50%,#0d1308,#000 70%)}
#hp3-arch .split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
#hp3-arch .st-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
#hp3-arch .st-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;font-size:14px;color:#b5b5b5}
#hp3-arch .st-list li b{color:#f0f0f0}#hp3-arch .st-list li span:last-child{grid-column:2;font-size:13px;color:#8a8a8a}
#hp3-arch .st-list .tag{grid-row:span 2;align-self:start}
.hp2 .tag.ar{color:#d4d4d4;border-style:dashed;border-color:#555}
#hp3-arch .stack-wrap{perspective:1400px}
#hp3-arch .stack{position:relative;height:560px;transform-style:preserve-3d;transform:rotateX(28deg) rotateZ(-10deg) translateY(calc(var(--k,0)*-20px));transition:transform .2s linear}
#hp3-arch .lyr{position:absolute;left:10%;right:10%;height:168px;top:calc(10px + var(--i)*178px);transform:translateZ(calc((2 - var(--i))*40px));transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
html.hp2-motion #hp3-arch .stack-wrap:not(.in) .pl{transform:translateZ(0)}
#hp3-arch .face{position:absolute;inset:0;border-radius:14px;padding:18px 20px;background:#0c1208;border:1px solid #b7ff4a;box-shadow:0 0 40px rgba(183,255,74,.12) inset}
#hp3-arch .lyr.architecture .face{background:#0a0a0a;border:1px dashed #666;box-shadow:none}
#hp3-arch .face b{display:block;font-size:20px;color:#f0f0f0}#hp3-arch .face em{font-style:normal;color:#b7ff4a;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#hp3-arch .lyr.architecture .face em{color:#9a9a9a}
#hp3-arch .face p{font-size:12.5px;margin:8px 0 10px;color:#a9a9a9}#hp3-arch .face .n{float:right;font:600 11px ui-monospace,monospace;color:#8f8f8f}
#hp3-arch .cn{position:absolute;left:50%;width:2px;height:12px;top:178px;background:#b7ff4a;box-shadow:0 0 10px #b7ff4a}#hp3-arch .cn.c2{top:356px}
#hp3-arch .cn.c2{opacity:.4;background:repeating-linear-gradient(#888 0 6px,transparent 6px 12px)}
#hp3-arch .inputs{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#a0a0a0;margin-top:10px}
#hp3-arch .inputs .ln{display:inline-block;width:22px;height:2px;background:#b7ff4a;vertical-align:middle;margin-right:8px}
#hp3-arch .legend{font-size:12px;color:#8a8a8a;margin-top:10px}#hp3-arch .legend i{display:inline-block;width:18px;height:10px;border:1px solid #b7ff4a;margin:0 6px -1px 12px;border-radius:3px}#hp3-arch .legend i.d{border:1px dashed #777}#hp3-arch .legend i:first-child{margin-left:0}
/* runtime dashboard */
#hp3-runtime{background:linear-gradient(#000,#05070a)}
#hp3-runtime .dash{margin-top:34px;border:1px solid #23262b;border-radius:18px;background:#0a0c0e;padding:20px}
#hp3-runtime .dbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
#hp3-runtime .demo{font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em;color:#e8a35a;border:1px solid #3d2c19;border-radius:999px;padding:7px 10px}
#hp3-runtime .sc{display:flex;gap:6px;flex-wrap:wrap}
#hp3-runtime .sc button{font:600 13px Inter,system-ui,sans-serif;background:#111;color:#b5b5b5;border:1px solid #2a2a2a;border-radius:999px;padding:8px 14px;cursor:pointer}
#hp3-runtime .sc button[aria-selected=true]{color:#000;background:#b7ff4a;border-color:#b7ff4a}
#hp3-runtime .sd{font-size:13px;margin:12px 0 0;color:#8a8a8a}
#hp3-runtime .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
#hp3-runtime .kpi{border:1px solid #1e2126;border-radius:12px;padding:14px;background:#0d1012}
#hp3-runtime .kpi span{display:block;font-size:12px;color:#8a8a8a}#hp3-runtime .kpi b{font:700 30px/1.2 ui-monospace,monospace;color:#f0f0f0;font-variant-numeric:tabular-nums}#hp3-runtime .kpi em{font-style:normal;color:#8a8a8a;margin-left:6px;font-size:13px}
#hp3-runtime .dgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
#hp3-runtime .chart24{margin:0;border:1px solid #1e2126;border-radius:12px;padding:12px;background:#0d1012}
#hp3-runtime svg{width:100%;height:auto;display:block}
#hp3-runtime .gx line{stroke:#1d2024}#hp3-runtime .gx text{fill:#666;font:10px ui-monospace,monospace}
#hp3-runtime .ar{fill:rgba(183,255,74,.08)}#hp3-runtime .ln{fill:none;stroke-width:2.2}#hp3-runtime .ln.dm{stroke:#f0f0f0}#hp3-runtime .ln.so{stroke:#b7ff4a}
html.hp2-motion #hp3-runtime .dash:not(.drawn) .ln{stroke-dasharray:1400;stroke-dashoffset:1400}
#hp3-runtime .dash.drawn .ln{stroke-dasharray:1400;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease}
#hp3-runtime figcaption{font-size:12px;color:#8a8a8a;margin-top:6px}#hp3-runtime figcaption i{display:inline-block;width:14px;height:2px;background:#f0f0f0;vertical-align:middle;margin:0 6px 0 10px}#hp3-runtime figcaption i.so{background:#b7ff4a}#hp3-runtime figcaption i:first-child{margin-left:0}
#hp3-runtime .side{display:grid;gap:12px}
#hp3-runtime .flowv{border:1px solid #1e2126;border-radius:12px;background:#0d1012}
#hp3-runtime .nd{fill:#111;stroke:#333}#hp3-runtime .nt,#hp3-runtime .bt{fill:#d0d0d0;font:600 10px Inter,system-ui,sans-serif;text-anchor:middle}
#hp3-runtime .bus{fill:#0d1308;stroke:#b7ff4a}
#hp3-runtime .fl{stroke-dasharray:4 6}#hp3-runtime .fl.gr,#hp3-runtime .fl.ld{stroke:var(--p3-pw)}#hp3-runtime .fl.so{stroke:#b7ff4a}#hp3-runtime .fl.st{stroke:var(--p3-cl)}
html.hp2-motion #hp3-runtime .fl{animation:p3dash 1.2s linear infinite}
@keyframes p3dash{to{stroke-dashoffset:-20}}
#hp3-runtime .caps{border:1px solid #1e2126;border-radius:12px;padding:12px;background:#0d1012;display:grid;gap:10px}
#hp3-runtime .cap1{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px;color:#a0a0a0}
#hp3-runtime .cap1 .bar{grid-column:1/-1;height:6px;border-radius:9px;background:#1b1e22;overflow:hidden}
#hp3-runtime .cap1 .bar i{display:block;height:100%;background:#b7ff4a;transform-origin:left;transform:scaleX(0)}
#hp3-runtime .cap1 b{font:600 12px ui-monospace,monospace;color:#f0f0f0;grid-row:1;grid-column:2}
#hp3-runtime .foot{font-size:12px;color:#8a8a8a;margin:14px 0 0}#hp3-runtime .foot a{color:#d0d0d0}
/* Diansun sequence */
.hp3-seq{margin-top:56px}
.hp3-seq .sq{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.hp3-seq .dsl{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.hp3-seq .dsl button{width:100%;text-align:left;background:#0a0a0a;border:1px solid #1f1f1f;border-radius:12px;padding:12px 14px;color:#b5b5b5;cursor:pointer;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.hp3-seq .dsl .n{font:600 11px ui-monospace,monospace;color:#8f8f8f;grid-row:span 2;padding-top:3px}
.hp3-seq .dsl b{color:#e0e0e0;font-size:15px}.hp3-seq .dsl .t{font-size:12px;color:#8a8a8a;display:none}
.hp3-seq .dsl button[aria-selected=true]{border-color:#3a4a24;background:#0d1308}.hp3-seq .dsl button[aria-selected=true] .t{display:block}.hp3-seq .dsl button[aria-selected=true] .n{color:#b7ff4a}
.hp3-seq .dsl button.done .n{color:#8fb85a}
.hp3-seq .pr{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#b7ff4a;transform:scaleX(0);transform-origin:left}
.hp3-seq:not(.user) .dsl button[aria-selected=true] .pr{animation:p3prog var(--dur,3.6s) linear forwards}
@keyframes p3prog{to{transform:scaleX(1)}}
.hp3-seq .dsp{min-height:420px;border:1px solid #1f1f1f;border-radius:16px;background:#070807;padding:18px;overflow:hidden}
.hp3-seq .pn{animation:p3in .5s ease both}
@keyframes p3in{from{opacity:0;transform:translateY(10px)}}
.hp3-seq .pn.doc{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.hp3-seq .bill{width:min(300px,100%);height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.hp3-seq .bill .sb{opacity:0}.hp3-seq .bill.scan .sb{opacity:1;animation:p3scan 2.4s ease-in-out infinite}
@keyframes p3scan{0%{transform:translateY(0)}50%{transform:translateY(290px)}100%{transform:translateY(0)}}
.hp3-seq .bill.scan .row{animation:p3hl .4s ease both;animation-delay:calc(var(--d)*.35s)}
@keyframes p3hl{from{opacity:.25}}
.hp3-seq .up{border:1px dashed #3a4a24;border-radius:12px;padding:14px 16px;color:#b5b5b5;font-size:13px}.hp3-seq .up b{display:block;color:#f0f0f0}
.hp3-seq .ex{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;min-width:220px}
.hp3-seq .ex li{background:#0d1012;border:1px solid #1e2126;border-radius:10px;padding:10px 12px;font-size:13px;color:#e0e0e0;animation:p3in .4s ease both;animation-delay:calc(var(--d)*.3s)}
.hp3-seq .ex i{font-style:normal;color:#b7ff4a;margin-right:8px}.hp3-seq .ex em{float:right;font-style:normal;color:#8a8a8a;font-size:11px}
.hp3-seq .fd{border:1px solid #1e2126;border-left:3px solid #b7ff4a;border-radius:10px;padding:12px 14px;margin-top:10px;animation:p3in .4s ease both;animation-delay:calc(var(--d)*.25s)}
.hp3-seq .fd b{color:#f0f0f0}.hp3-seq .fd p{font-size:13px;margin:4px 0}.hp3-seq .fd em{font-style:normal;font-size:11px;color:#8a8a8a}
.hp3-seq .page{max-width:340px;background:#f3f1ea;border-radius:8px;padding:20px;color:#222;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.hp3-seq .page .ph b{display:block;font-size:15px}.hp3-seq .page .ph span{font-size:11px;color:#666}
.hp3-seq .page .ln{height:7px;background:#d8d4c8;border-radius:4px;margin:12px 0}.hp3-seq .w80{width:80%}.hp3-seq .w60{width:60%}.hp3-seq .w90{width:90%}.hp3-seq .w70{width:70%}.hp3-seq .w40{width:40%}
.hp3-seq .mini{display:flex;gap:8px;align-items:flex-end;height:80px;margin:14px 0}.hp3-seq .mini i{flex:1;background:#5d7a32;border-radius:3px 3px 0 0}
.hp3-seq .stamp{font:700 10px ui-monospace,monospace;color:#9a6a2a;letter-spacing:.1em;margin:10px 0 0}
.hp3-seq .pn .cap{font-size:12px;color:#8a8a8a;margin-top:12px}
.hp3-seq .win img{width:100%;height:auto;display:block}
/* proof windows */
#hp3-proof{background:radial-gradient(ellipse 80% 60% at 50% 40%,#0b1007,#000 70%);overflow:hidden}
#hp3-proof .fw{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:40px;perspective:1600px}
#hp3-proof .fwi{margin:0;transform:rotateY(calc((var(--i) - 1.5)*-3deg)) rotateX(calc(var(--k,0)*6deg)) translateY(calc(var(--k,0)*(18px + var(--i)*8px)));transition:transform .15s linear}
#hp3-proof .fwi:nth-child(even){margin-top:60px}
#hp3-proof .win img{width:100%;height:auto;display:block}
#hp3-proof .cap{margin-top:10px}
/* ambient gap fillers */
.hp3-amb{position:relative;isolation:isolate}
.hp3-amb::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 80% 30%,rgba(183,255,74,.07),transparent 70%),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(79,143,232,.05),transparent 70%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 64px}
.hp3-amb-b::before{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(183,255,74,.08),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/64px 100%}
.hp3-amb-c::before{background:radial-gradient(ellipse 50% 40% at 20% 20%,rgba(183,255,74,.06),transparent 70%)}
/* final */
#home-e.hp3-final{position:relative;overflow:hidden}
#home-e .hp3-final-model{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 30%,transparent 75%)}
#home-e .hp3-final-model img{width:100%;height:100%;object-fit:cover}
#home-e > *:not(.hp3-final-model){position:relative;z-index:1}
.hp3-journey{list-style:none;padding:0;margin:28px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:960px}
.hp3-journey a{display:block;border:1px solid #23262b;border-radius:12px;padding:14px;text-decoration:none;color:#f0f0f0;background:rgba(10,10,10,.7);height:100%}
.hp3-journey .n{font:600 11px ui-monospace,monospace;color:#b7ff4a;display:block}.hp3-journey b{display:block;margin:6px 0 4px}.hp3-journey em{font-style:normal;font-size:12px;color:#8a8a8a}
.hp3-journey a:focus-visible{outline:2px solid #b7ff4a;outline-offset:3px}
@media (max-width:1100px){#hp3-arch .split,#hp3-runtime .dgrid{grid-template-columns:1fr}.hp3-seq .sq{grid-template-columns:1fr}.hp3-seq .dsl{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){#hp3-runtime .kpis{grid-template-columns:repeat(2,1fr)}#hp3-runtime .kpi b{font-size:24px}#hp3-proof .fw{grid-template-columns:1fr}#hp3-proof .fwi:nth-child(even){margin-top:0}.hp3-journey{grid-template-columns:repeat(2,1fr)}.hp3-seq .dsl{grid-template-columns:repeat(2,1fr)}#hp3-arch .stack{height:540px}#hp3-arch .lyr{left:4%;right:4%}.hp3-intro{bottom:72px;flex-wrap:wrap;padding:0 16px}.hp3-seq .dsp{min-height:0}}
@media (prefers-reduced-motion:reduce){.hp3 *,.hp3-seq *,.hp3-campus *{animation:none!important;transition:none!important}#hp3-runtime .ln{stroke-dashoffset:0!important}}
.hp3-banner p{max-width:1200px;margin:0 auto;padding:16px 24px;color:#cfcfcf}

/* 3.1 hero: campus sits low behind the headline; a soft focus veil keeps the type readable */
.hp3-campus .poster{opacity:.7}
.hp3-campus .veil{background:radial-gradient(ellipse 46% 40% at 50% 40%,rgba(0,0,0,.78),rgba(0,0,0,.42) 62%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 20%)}
.hp3-intro{bottom:22px}
.hp3-campus canvas{-webkit-mask-image:radial-gradient(ellipse 36% 46% at 50% 54%,rgba(0,0,0,.16) 0,rgba(0,0,0,.3) 62%,#000 100%);mask-image:radial-gradient(ellipse 36% 46% at 50% 54%,rgba(0,0,0,.16) 0,rgba(0,0,0,.3) 62%,#000 100%)}
.meg-sound-toggle{position:fixed;left:16px;bottom:16px;z-index:60;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,10,.72);color:#cfd6dc;font:15px/1 system-ui,sans-serif;cursor:pointer;opacity:.7;backdrop-filter:blur(6px)}
.meg-sound-toggle:hover,.meg-sound-toggle:focus-visible{opacity:1;outline:2px solid #b7ff4a;outline-offset:2px}
.meg-sound-toggle[aria-pressed="false"]{color:#8f8f8f}

/* 3.1 architecture previews: brighter faces, real capture thumbnails, staged reveal */
#hp3-arch .stack{height:640px}
#hp3-arch .lyr{height:196px;top:calc(10px + var(--i)*212px);left:4%;right:4%}
#hp3-arch .face{background:linear-gradient(135deg,#17220d,#0e1509);box-shadow:0 0 0 1px rgba(183,255,74,.35),0 18px 50px rgba(0,0,0,.6),0 0 60px rgba(183,255,74,.14) inset;padding-right:48%}
#hp3-arch .face p{color:#c9c9c9}
#hp3-arch .lyr.architecture .face{background:#101010;border-color:#777}
#hp3-arch .thumbs{position:absolute;right:14px;top:14px;bottom:14px;width:44%;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
#hp3-arch .thumbs img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.18);filter:brightness(1.15) contrast(1.05)}
#hp3-arch .thumbs small{grid-column:1/-1;font:10px/1.35 ui-monospace,monospace;color:#a9a9a9}
#hp3-arch .thumbs.kd{display:flex;flex-direction:column;align-items:center;justify-content:center}
html.hp2-motion #hp3-arch .stack-wrap .lyr .face{transition:opacity .7s ease,filter .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),box-shadow 1s ease;transition-delay:calc(var(--i)*.18s)}
html.hp2-motion #hp3-arch .stack-wrap:not(.in) .lyr .face{opacity:0;filter:blur(8px) brightness(.6);transform:scale(.9) rotateX(-18deg)}
html.hp2-motion #hp3-arch .stack-wrap.in .lyr .face{animation:hp31hl 1.6s ease calc(1s + var(--i)*.25s) 1 both}
@keyframes hp31hl{0%{box-shadow:0 0 0 1px rgba(183,255,74,.35),0 18px 50px rgba(0,0,0,.6)}40%{box-shadow:0 0 0 2px rgba(183,255,74,.9),0 18px 50px rgba(0,0,0,.6),0 0 60px rgba(183,255,74,.35)}100%{box-shadow:0 0 0 1px rgba(183,255,74,.35),0 18px 50px rgba(0,0,0,.6),0 0 60px rgba(183,255,74,.14) inset}}
html.hp2-motion #hp3-arch .stack-wrap.in .lyr.architecture .face{animation:none}
@media (max-width:760px){#hp3-arch .face{padding-right:20px}#hp3-arch .thumbs{position:static;width:100%;margin-top:8px}#hp3-arch .lyr{height:auto;position:relative;top:0;margin-bottom:14px}#hp3-arch .stack{height:auto;transform:none}}

/* 3.1 runtime: provenance strip, legibility, perspective entry, moving indicator */
#hp3-runtime .dash{background:#0c0f12;border-color:#2c3138}
#hp3-runtime .prov{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#hp3-runtime .prov li{border:1px dashed #3a3f46;border-radius:10px;padding:8px 10px;font-size:11.5px;color:#a9a9a9;line-height:1.35}
#hp3-runtime .prov li b{display:block;font:700 12px ui-monospace,monospace;letter-spacing:.12em;color:#c9c9c9;margin-bottom:3px}
#hp3-runtime .prov li.on{border:1px solid #e8a35a;background:rgba(232,163,90,.08)}#hp3-runtime .prov li.on b{color:#ffbf7a}
#hp3-runtime .demo{font-size:12.5px;color:#ffbf7a;border-color:#6b4a26;background:rgba(232,163,90,.08)}
#hp3-runtime .sd,#hp3-runtime .kpi span,#hp3-runtime .kpi em,#hp3-runtime figcaption,#hp3-runtime .foot,#hp3-runtime .cap1{color:#b4b4b4}
#hp3-runtime .kpi b{font-size:34px;color:#fff}
#hp3-runtime .gx line{stroke:#262a30}#hp3-runtime .gx text{fill:#9a9a9a}
#hp3-runtime .ar{fill:rgba(183,255,74,.14)}#hp3-runtime .ln{stroke-width:2.6}
#hp3-runtime .cur{fill:#fff;filter:drop-shadow(0 0 6px #b7ff4a)}
#hp3-runtime .pt,#hp3-runtime .ct em{fill:#ffbf7a;color:#ffbf7a;font:700 10px ui-monospace,monospace;letter-spacing:.12em;font-style:normal}
#hp3-runtime .ct{margin:0;font-size:12px;color:#d0d0d0;display:flex;justify-content:space-between}
#hp3-runtime .nd{fill:#15191d;stroke:#4a5058}#hp3-runtime .nt,#hp3-runtime .bt{fill:#eee}
#hp3-runtime .cap1 .bar{height:8px}
html.hp2-motion #hp3-runtime .dash{perspective:1600px}
html.hp2-motion #hp3-runtime .dash .kpi,html.hp2-motion #hp3-runtime .dash .chart24,html.hp2-motion #hp3-runtime .dash .side>*{transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s ease;transition-delay:calc(var(--d,0)*.09s)}
html.hp2-motion #hp3-runtime .dash:not(.drawn) .kpi,html.hp2-motion #hp3-runtime .dash:not(.drawn) .chart24,html.hp2-motion #hp3-runtime .dash:not(.drawn) .side>*{opacity:0;transform:rotateX(14deg) translateY(24px)}
#hp3-runtime .kpi:nth-child(2){--d:1}#hp3-runtime .kpi:nth-child(3){--d:2}#hp3-runtime .kpi:nth-child(4){--d:3}#hp3-runtime .chart24{--d:4}#hp3-runtime .side>*:nth-child(1){--d:5}#hp3-runtime .side>*:nth-child(2){--d:6}
#hp3-runtime .cap1 .bar i{transition:transform .2s linear}
@media (max-width:760px){#hp3-runtime .prov{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){#hp3-runtime .cur{display:none}}
#hp3-runtime .chart24{display:flex;flex-direction:column;justify-content:center}

/* 3.1 Diansun 7-step demo */
@media (min-width:1101px){.hp3-seq .sq{grid-template-columns:280px 1fr}}
@media (max-width:1100px){.hp3-seq .dsl{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.hp3-seq .dsl{grid-template-columns:repeat(2,1fr)}}
.hp3-seq .dsp{min-height:560px;background:#0a0c0a;border-color:#2a3320}
.hp3-seq .bill{width:min(420px,100%)}
.hp3-seq .pn.enter .bill{animation:p31enter 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes p31enter{from{transform:translate(-40px,60px) rotate(-6deg) scale(.88);opacity:0}to{transform:none;opacity:1}}
.hp3-seq .up.drop{border-style:dashed;align-self:center;min-width:220px;animation:p31pulse 1.6s ease-in-out infinite}
@keyframes p31pulse{50%{border-color:#b7ff4a;box-shadow:0 0 30px rgba(183,255,74,.15)}}
.hp3-seq .upb{height:6px;border-radius:6px;background:#1b1e22;margin:10px 0 6px;overflow:hidden}.hp3-seq .upb i{display:block;height:100%;background:#b7ff4a;transform-origin:left;animation:p31fill 1.8s ease both}
@keyframes p31fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hp3-seq .ok{color:#b7ff4a;font-size:12px;animation:p3in .3s ease 1.8s both}
.hp3-seq .genbar{border:1px solid #2a3320;border-radius:12px;padding:14px 16px;margin-bottom:14px;color:#e0e0e0;max-width:420px}
.hp3-seq .page.sm{animation:p3in .6s ease 1.9s both}
.hp3-seq .pn.prev{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:start}
.hp3-seq .pn.prev .cap{grid-column:1/-1}
.hp3-seq .page.big{max-width:none;padding:26px;animation:p31open .9s cubic-bezier(.2,.7,.2,1) both;transform-origin:top left}
@keyframes p31open{from{transform:perspective(1200px) rotateY(-14deg) scale(.86);opacity:0}to{transform:none;opacity:1}}
.hp3-seq .page .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.hp3-seq .page .kv div{background:#e8e4d8;border-radius:6px;padding:8px}.hp3-seq .page .kv span{display:block;font-size:10px;color:#666}.hp3-seq .page .kv b{font-size:14px}
.hp3-seq .page h4{margin:12px 0 4px;font-size:13px}.hp3-seq .page ol{margin:0;padding-left:18px;font-size:12.5px;line-height:1.5;color:#333}
.hp3-seq .real{margin:0;animation:p3in .6s ease .6s both}.hp3-seq .real figcaption{font-size:12px;color:#b4b4b4;margin-top:8px}
.hp3-seq .dsl .t{color:#b4b4b4}.hp3-seq .pn .cap{color:#b4b4b4}.hp3-seq .ex em,.hp3-seq .fd em{color:#a9a9a9}
#hp2-diansun .hp2-hi{transform:scale(.72);transform-origin:top right;opacity:.9}
@media (max-width:900px){.hp3-seq .pn.prev{grid-template-columns:1fr}.hp3-seq .dsp{min-height:0}}
@media (max-width:760px){.hp3-seq .dsl button[aria-selected=true] .t{display:none}.hp3-seq .dsl button{padding:8px 10px}.hp3-seq .dsl b{font-size:13px}}
/* 3.1 stage 7: spacing + legibility polish */
main section.lg\:py-36:has(+ section.min-h-screen){padding-top:88px;padding-bottom:40px}
main section.min-h-screen.items-center.justify-center{min-height:78vh}
.hp3-amb p:not([class*="text-primary"]){color:#b4b4b4}
.hp2 h2,.hp3 h2,.hp2-stage .copy h2{scroll-margin-top:96px}
.hp2-stage .copy{max-width:min(560px,calc(100vw - 48px))}
/* 3.1 contrast fixes on base-site footer/stats (axe color-contrast) */
footer a,footer .text-xs,footer .text-sm,footer p{color:#a3a3a3!important}
footer .mb-5.uppercase.text-xs{color:#9a9a9a!important}
.p-10 > .uppercase.text-xs{color:#9a9a9a!important}
#hp3-runtime .foot a,.hp3 .foot a{text-decoration:underline;text-underline-offset:3px}
/* 3.1.1 mobile fixes */
@media (max-width:900px){
 .hp2-stage .copy{top:auto!important;z-index:2}
 .hp2-stage .copy>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
 .hp2-stage .copy .btn{margin:0}
 .hp2-stage .load3d{position:relative;z-index:2;margin-top:12px;opacity:1;background:#111;color:#f0f0f0;border:1px solid #b7ff4a}
 .hp2-stage .viz{z-index:1;margin-top:8px}
 #hp3-arch .stack-wrap{perspective:none}
 #hp3-arch .stack{height:auto!important;transform:none!important;display:flex;flex-direction:column;gap:14px}
 #hp3-arch .lyr{position:relative!important;left:auto!important;right:auto!important;top:auto!important;height:auto!important;transform:none!important;margin:0}
 #hp3-arch .face{position:relative!important;inset:auto;padding:18px 18px!important;transform:none!important}
 #hp3-arch .thumbs{position:static!important;width:100%!important;margin-top:10px}
 #hp3-arch .cn{display:none}
 #hp3-arch .face .tag,#hp3-arch .face [class*=tag]{white-space:normal}
 #hp3-arch .face>div:not(.thumbs){display:flex;flex-wrap:wrap;gap:6px}
 html.hp2-motion #hp3-arch .stack-wrap:not(.in) .lyr .face{transform:translateY(16px)!important;filter:none}
}
@media (max-width:900px){.hp3-intro{bottom:96px!important}}
