:root{--ink:#0b0a08;--ink2:#14131a;--panel:#1a1923;--line:#2a2833;--txt:#d9d7e4;--mut:#9a97ad;--dim:#6d6a80;--lime:#8efa00;--lime2:#b1ff4b;--pur:#5c48d7;--pur2:#8b7cff;--hot:#ff3b6b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--ink);color:var(--txt);font:16px/1.7 "DM Sans",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,select,summary{font:inherit;color:inherit}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:Syne,"DM Sans",sans-serif;color:#fff;margin:0;line-height:1.05}
.app{display:grid;grid-template-columns:minmax(360px,42%) 1fr;min-height:100vh}
/* left scenes */
.scenes{position:sticky;top:0;height:100vh;background:var(--lime);color:var(--ink);overflow:hidden}.scenes::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,10,8,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,10,8,.06) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.sn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 clamp(24px,4vw,64px);opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none}.sn.on{opacity:1;transform:none}
.g{font:800 clamp(64px,10.5vw,170px)/.9 Syne,sans-serif;letter-spacing:-.05em;color:var(--ink)}.g.sm{font-size:clamp(60px,8vw,120px);margin-top:20px}.g.xs{font-size:clamp(50px,7vw,110px);letter-spacing:-.04em}.sn small{font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}.sn .bt{position:absolute;left:clamp(24px,4vw,64px);bottom:40px;margin:0}
.mc{position:absolute;right:0;bottom:0;width:min(78%,420px);border-radius:28px 0 0 0;border:3px solid var(--ink);border-right:0;border-bottom:0}
.don{width:min(78%,360px);aspect-ratio:1;border-radius:50%;background:var(--g);display:grid;place-items:center;border:3px solid var(--ink)}.don>div{width:66%;aspect-ratio:1;border-radius:50%;background:var(--lime);display:grid;place-content:center;text-align:center;border:3px solid var(--ink)}.don b{font:800 clamp(28px,3.4vw,46px) Syne;line-height:1}.don small{margin:4px 0 0}
.lg{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:6px;font-weight:700;font-size:14px}.lg li{display:flex;align-items:center;gap:10px}.lg i{width:14px;height:14px;border-radius:4px;border:2px solid var(--ink)}.lg b{margin-left:auto;padding-left:20px}
.fan{position:relative;width:min(80%,420px);height:340px}.fan img{position:absolute;left:50%;top:0;width:170px;aspect-ratio:3/4;object-fit:cover;border-radius:22px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:translateX(calc(-50% + var(--x))) rotate(var(--r))}
.pt{width:min(60%,300px);aspect-ratio:3/4;object-fit:cover;border-radius:26px;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transform:rotate(-4deg)}
.stairs{display:flex;align-items:flex-end;gap:10px;height:56vh;width:min(86%,460px)}.stairs div{flex:1;height:var(--h);background:var(--ink);color:var(--lime);border-radius:14px 14px 0 0;padding:12px 8px;display:flex;flex-direction:column;justify-content:space-between}.stairs b{font:800 clamp(16px,2vw,24px) Syne}.stairs span{font-size:11px;font-weight:700;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}
.duo{display:grid;gap:26px}.duo b{display:block;font:800 clamp(60px,9vw,150px)/.9 Syne;letter-spacing:-.04em}.duo small{margin:6px 0 0}
.phone{width:min(54%,250px);aspect-ratio:9/18;border-radius:42px;background:var(--ink);padding:11px;box-shadow:12px 12px 0 rgba(11,10,8,.25);transform:rotate(-4deg)}.scr{height:100%;border-radius:32px;background:#1f2640;padding:36px 10px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.scr img{border-radius:10px;width:100%;flex:1;min-height:0;object-fit:cover}
.ring18{width:min(70%,300px);aspect-ratio:1;border-radius:50%;border:12px solid var(--hot);display:grid;place-items:center;font:800 clamp(60px,8vw,110px) Syne;color:var(--ink);background:var(--lime)}
/* right column */
.col{min-width:0}.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px clamp(20px,4vw,56px);background:rgba(11,10,8,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{margin-right:auto}.brand img{height:28px;width:auto}
.ch{display:flex;gap:2px}.ch a{padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--mut)}.ch a:hover{color:#fff}.ch a.on{background:var(--lime);color:var(--ink)}
.lsel select{appearance:none;background:var(--ink2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238efa00' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--line);border-radius:999px;padding:7px 28px 7px 14px;font-size:13px;font-weight:700;cursor:pointer;outline:0}.lsel select:hover,.lsel select:focus{border-color:var(--lime)}.lsel option{background:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;border-radius:999px;border:1px solid var(--line);background:var(--ink2);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.18s}.btn:hover{border-color:var(--lime);color:var(--lime)}.btn.pri{background:var(--lime);border-color:var(--lime);color:var(--ink)}.btn.pri:hover{background:var(--lime2);color:var(--ink)}.btn.lg{padding:15px 32px;font-size:16px}.btn.sm{padding:8px 18px;white-space:nowrap}.btn{white-space:nowrap}.row{display:flex;gap:12px;flex-wrap:wrap}
main section{padding:90px clamp(20px,4vw,56px) 70px;max-width:860px;border-bottom:1px solid var(--line)}main section:last-child{border:0}
.hero{min-height:calc(100vh - 56px);display:flex;flex-direction:column;justify-content:center;gap:20px}.eb{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}.hero h1{font-size:clamp(40px,5.6vw,84px);letter-spacing:-.035em}.hero h1 em{font-style:normal;color:var(--lime)}.lead{font-size:18px;color:var(--mut);margin:12px 0 0;max-width:620px}.hero .lead{color:var(--txt);font-size:19px;margin:0}
.kp{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,auto);gap:22px;justify-content:start;border-top:1px solid var(--line);padding-top:22px}.kp b{display:block;font:800 26px Syne;color:var(--lime);line-height:1.1}.kp small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.chap{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.chap b{font:800 22px Syne;color:var(--lime);letter-spacing:0}
h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.025em}h3{font-size:19px;margin:34px 0 12px}.lead2{color:var(--mut);margin:16px 0 8px}.note{font-size:13px;color:var(--dim);margin:16px 0 0}.note b{color:var(--txt)}.lp{max-width:700px;margin:18px 0 0}
.spec{margin:20px 0 0;border-top:1px solid var(--line)}.spec>div{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.spec dt{color:var(--mut);font-weight:500}.spec dd{margin:0;color:#fff}
.tw{overflow-x:auto;margin:14px 0 0}table{width:100%;border-collapse:collapse;min-width:480px;font-size:15px}th,td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line)}thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}tbody th{color:#fff;font-weight:700}
.chk{list-style:none;margin:20px 0 0;padding:0}.chk li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line)}.chk li::before{content:"→";position:absolute;left:0;color:var(--lime);font-weight:700}
.proc{list-style:none;margin:14px 0 0;padding:0;counter-reset:p}.proc li{counter-increment:p;display:grid;grid-template-columns:38px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.proc li::before{content:counter(p,decimal-leading-zero);font:800 16px Syne;color:var(--lime)}
.tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.tags li{border:1px solid var(--line);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:500}
.steps,.tiers,.list,.top{list-style:none;margin:20px 0 0;padding:0}.steps li,.tiers li,.list li{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.steps b,.list b{font:800 clamp(24px,3.2vw,40px) Syne;color:var(--lime);line-height:1}.tiers b{font:800 22px Syne;color:#fff}.steps strong,.list strong{display:block;color:#fff}.steps span,.list span,.tiers span{display:block;font-size:14px;color:var(--mut)}.steps small,.tiers small{display:block;font-size:13px;color:var(--dim)}
.top li{display:grid;grid-template-columns:30px 48px 1fr auto;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.top i{font:800 18px Syne;font-style:normal;color:var(--lime)}.top img{width:48px;height:48px;border-radius:10px;object-fit:cover}.top b{color:#fff}.top small{color:var(--dim)}
.rk{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:18px;border-bottom:1px solid var(--line2,#2a2833);padding-top:20px}.rk div{flex:1;height:var(--h);background:linear-gradient(180deg,var(--lime),#3c6b00);border-radius:6px 6px 0 0;position:relative}.rk div:nth-child(-n+5){background:linear-gradient(180deg,var(--pur2),var(--pur))}.rk i{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:11px;font-style:normal;font-weight:700;color:#fff}
.hb{display:grid;grid-template-columns:150px 1fr 50px;gap:12px;align-items:center;margin:6px 0}.hb span{color:#fff}.hb i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--pur2),var(--lime));width:var(--w);min-width:6px}.hb b{text-align:right;color:var(--lime)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}.two h3{margin-top:20px}
.acc details{border-bottom:1px solid var(--line)}.acc details:first-child{border-top:1px solid var(--line)}.acc summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-weight:700;color:#fff;position:relative}.acc summary::-webkit-details-marker{display:none}.acc summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--lime);font-size:24px}.acc details[open] summary::after{content:"–"}.acc p{margin:0 0 16px;padding-right:30px}
.end{padding-top:110px;padding-bottom:110px}.end h2{font-size:clamp(40px,6vw,84px);margin-bottom:6px}
.ft{padding:50px clamp(20px,4vw,56px) 70px;border-top:1px solid var(--line);position:relative;max-width:860px}.up{position:absolute;right:clamp(20px,4vw,56px);top:-26px;width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:24px;font-weight:800}.ft-c p{margin:0 0 10px;font-size:13px;color:var(--dim)}.ft-c .lns{margin-top:18px;font-size:14px}.lns a{font-weight:700;color:var(--mut)}.lns a.on,.lns a:hover{color:var(--lime)}
@media(max-width:1000px){.ch{display:none}}
@media(max-width:860px){.app{grid-template-columns:1fr}.scenes{display:none}main section{padding:64px 20px 50px}.hero{min-height:auto;padding-top:48px}.kp{grid-template-columns:repeat(3,auto)}.spec>div{grid-template-columns:1fr;gap:2px}.steps li,.tiers li,.list li{grid-template-columns:1fr;gap:4px}.two{grid-template-columns:1fr}.hb{grid-template-columns:110px 1fr 44px}.top li{grid-template-columns:26px 44px 1fr}.top small{display:none}.bar{padding:10px 16px}}
