/* landing page — extends style.css (same palette, one accent) */
.topnav{display:flex;align-items:center;gap:18px}
.topnav a{color:var(--mut);text-decoration:none;font-size:14px}
.topnav a:hover{color:var(--tx)}
.topnav a.btn{color:#0d0b1f}
.btn.sm{padding:7px 14px;font-size:14px;border-radius:9px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--acbg);color:var(--ac2);padding:1px 6px;border-radius:6px;white-space:nowrap}

/* hero */
.l-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding-top:40px;padding-bottom:20px}
.l-hero h1{font-size:clamp(30px,4.6vw,50px)}
.kw{font-size:16px;color:var(--tx);margin:0 0 12px;line-height:1.9}
.cta{display:flex;gap:12px;margin:22px 0 12px;flex-wrap:wrap}
.rig-card{position:relative;height:min(64vh,560px);min-height:380px;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(55% 50% at 50% 45%,#2b2840 0%,#13131b 72%),#13131b;box-shadow:0 30px 80px -40px rgba(139,123,255,.45)}
.rig-card canvas{display:block;width:100%;height:100%}
.rig-tag{position:absolute;left:14px;bottom:12px;font:600 12px ui-monospace,Menlo,monospace;color:var(--ac2);background:rgba(11,12,15,.7);border:1px solid var(--line2);padding:3px 9px;border-radius:999px}

/* sections */
.l-how,.l-sec{padding-top:56px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.sec-head h2{margin:0}
.how-ctl{display:flex;gap:8px}

/* the walkthrough "screen" — fixed virtual size, scaled to fit */
.demo-fit{position:relative;width:100%;overflow:hidden;border-radius:16px}
.demo{position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0;background:#0f1015;border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  font-size:14px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.demo.portrait{width:420px;height:860px}
.win-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);background:#14151c}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#2f3240}
.win-bar span{margin-left:10px;color:var(--dim);font-size:12px}
.demo-body{display:grid;grid-template-columns:330px 1fr;height:calc(100% - 34px)}
.demo.portrait .demo-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.d-left{padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.demo.portrait .d-left{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px;gap:7px}
.d-lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:700}
.d-prompt{position:relative;min-height:112px;background:#0b0c10;border:1px solid var(--line2);border-radius:10px;padding:10px 11px;font-size:13px;line-height:1.45;color:var(--tx)}
.demo.portrait .d-prompt{min-height:96px}
.d-prompt.focus{border-color:var(--ac)}
.d-prompt .ph{position:absolute;left:11px;top:10px;color:var(--dim)}
.caret{display:inline-block;width:1.5px;height:14px;background:var(--ac2);vertical-align:-2px;margin-left:1px;opacity:0}
.d-prompt.focus .caret{animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.d-btn{border:1px solid var(--line2);background:#1b1d26;color:var(--tx);border-radius:9px;padding:9px 12px;font-weight:650;font-size:13.5px;cursor:default;transition:background .15s,transform .1s}
.d-btn.accent{background:var(--ac);color:#0d0b1f;border-color:var(--ac)}
.d-btn.press,.d-tab.press,.d-chip.press,.vcard.press{transform:scale(.96)}
.d-tabs{display:flex;gap:4px;background:#0b0c10;border:1px solid var(--line);border-radius:9px;padding:3px}
.d-tab{flex:1;text-align:center;padding:6px;border-radius:7px;color:var(--mut);font-weight:600;font-size:13px;transition:background .2s,color .2s}
.d-tab.on{background:var(--acbg);color:var(--tx);box-shadow:inset 0 0 0 1px rgba(139,123,255,.5)}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}
.d-chip{padding:5px 10px;border:1px solid var(--line2);border-radius:999px;font:13px ui-monospace,Menlo,monospace;color:var(--mut);transition:all .2s}
.d-chip.on{border-color:var(--ac);background:var(--acbg);color:var(--tx)}
.d-cost{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--dim);margin-top:auto}
.demo.portrait .d-cost{margin-top:0}
.d-cost b{font-size:20px;color:var(--tx);font-variant-numeric:tabular-nums}
.d-cost b::before{content:"≈ "}
.d-cost em{font-style:normal}

.d-right{position:relative;overflow:hidden}
.scene{position:absolute;inset:0;padding:16px;opacity:0;transition:opacity .35s;pointer-events:none;display:flex;flex-direction:column;gap:12px}
.scene.on{opacity:1}
.empty{margin:auto;color:var(--dim);font-size:14px;border:1px dashed var(--line2);border-radius:14px;padding:40px 30px}
.vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;flex:1;align-items:center}
.demo.portrait .vgrid{grid-template-columns:repeat(5,1fr);gap:6px}
.vcard{border-radius:12px;overflow:hidden;border:2px solid transparent;background:#c6c5c8;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .35s,transform .35s,border-color .2s,filter .3s}
.vcard.in{opacity:1;transform:none}
.vcard img{display:block;width:100%;height:auto;aspect-ratio:9/16}
.vgrid.picked .vcard{filter:brightness(.45) saturate(.6)}
.vgrid.picked .vcard.mine{filter:none;border-color:var(--ac);box-shadow:0 0 0 4px rgba(139,123,255,.25)}
.vgrid.loading .vcard{opacity:1;transform:none;background:linear-gradient(100deg,#1a1b23 30%,#262836 50%,#1a1b23 70%) 0 0/300% 100%;animation:shim 1.1s linear infinite}
.vgrid.loading .vcard img{visibility:hidden}
@keyframes shim{to{background-position:-300% 0}}
.d-pct{margin-top:auto;font-size:56px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tx)}
.d-pct b{font-weight:inherit}
.d-stages{list-style:none;padding:0;margin:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.d-stages li{border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--dim);font-weight:600;font-size:13px;text-align:center;transition:all .2s}
.d-stages li.run{border-color:var(--ac);color:var(--tx)}
.d-stages li.ok{color:var(--ac2)}
.d-stages li.ok::after{content:" ✓"}
.scene[data-scene=result]{padding:0;gap:0}
.d-stage{flex:1;position:relative;background:radial-gradient(55% 50% at 50% 45%,#2b2840 0%,#13131b 72%)}
.d-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.d-res-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:#14151c}
.d-res-tag{font-size:12.5px;color:var(--mut)}
.d-res-tag b{color:var(--ac2);font-family:ui-monospace,Menlo,monospace}
.toast{position:absolute;right:14px;bottom:62px;background:#1f2030;border:1px solid var(--ac);color:var(--tx);font-size:12.5px;padding:7px 12px;border-radius:9px;opacity:0;transform:translateY(6px);transition:all .3s}
.toast.on{opacity:1;transform:none}
.cursor{position:absolute;left:0;top:0;width:26px;height:26px;z-index:20;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.ripple{position:absolute;z-index:19;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--ac2);pointer-events:none;animation:rip .55s ease-out forwards}
@keyframes rip{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}

.static-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.static-steps li{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 16px}
.static-steps p{margin:6px 0 0;color:var(--mut)}
.mini-v{display:flex;gap:8px;margin-top:8px}
.mini-v img{width:56px;border-radius:8px;opacity:.5}
.mini-v img.pick{opacity:1;outline:2px solid var(--ac)}

.cat-grid,.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cat,.vs-card{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:20px}
.cat h3,.vs-card h3{font-size:18px;margin-bottom:10px}
.cat-row{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.cat-row .kind{flex:none;width:84px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:2px;font-weight:700}
.cat-row p{margin:4px 0 0;line-height:2}
.vs-card p{color:var(--mut);margin:0}
.vs-card .warn{margin-top:10px}
.get-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.get-grid>div{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--card)}
.get-grid p{color:var(--mut);margin:6px 0 0;font-size:14px}
.fine-l{color:var(--dim);font-size:13px;margin-top:14px}
.fine-l a{color:var(--ac2)}
.l-final{text-align:center;padding-top:64px;padding-bottom:40px}
.l-final h2{font-size:28px;margin-bottom:18px}

@media (max-width:900px){
  .l-hero{grid-template-columns:1fr}
  .l-hero-rig{order:-1}
  .rig-card{height:min(70vh,520px)}
  .get-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .topnav a:not(.btn){display:none}
  .cat-grid,.vs,.get-grid{grid-template-columns:1fr}
  .l-hero{padding-top:24px}
  .rig-card{height:340px;min-height:0}
  .cta .btn{flex:1}
}