/* home page */
.h-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:56px;align-items:center;padding:40px 0 80px}
.h-copy h1{font-size:clamp(42px,5.6vw,76px);line-height:1;letter-spacing:-2px}
.h-lede{color:var(--muted);font-size:19px;max-width:46ch;margin:22px 0 30px}
.h-small{color:var(--muted);font-size:14px;margin-top:16px}

.app{background:#0E1428;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(255,138,31,.25)}
.app-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--panel);font-size:13px;color:var(--muted)}
.app-name{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.app-tabs{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.tab{padding:6px 12px;border-radius:8px;color:var(--muted)}
.tab.on{background:var(--panel);color:var(--ink);font-weight:600}
.tf{margin-left:auto;display:flex;gap:2px}
.tf b{font-weight:500;color:var(--muted);padding:4px 8px;border-radius:6px}
.tf b.on{background:var(--orange);color:var(--navy);font-weight:600}
.app-body{display:grid;grid-template-columns:1fr 170px}
.app-chart{padding:8px}
.app-chart svg,.tour-chart svg{display:block;width:100%;height:auto}
.app-side{border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.side-h{color:var(--muted);font-weight:600}
.sw{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.sw::after{content:"";width:26px;height:15px;border-radius:999px;background:var(--line)}
.sw.on{color:var(--ink)}
.sw.on::after{background:var(--lime)}
.pilot{margin-top:auto;background:var(--panel);border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.pilot b{font-size:14px}
.pilot .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);align-self:center}
.pilot span:not(.dot),.pilot small{grid-column:1 / -1;color:var(--muted)}

.cdl{transform-box:fill-box;transform-origin:bottom;animation:rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 45ms + 150ms)}
@keyframes rise{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}

.h-section{padding:72px 0;border-top:1px solid var(--line)}
.h-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.h-head h2,.h-split h2,.h-faq h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.8px;max-width:20ch}
.h-head p{color:var(--muted);max-width:44ch}

.tour{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.tour-list{display:flex;flex-direction:column;gap:4px}
.tour-btn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;background:transparent;border:0;border-radius:12px;padding:12px 14px;color:var(--muted);font:500 16px 'Inter',sans-serif;cursor:pointer;min-height:48px}
.tour-btn b{font-weight:600}
.tour-btn:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.tour-btn[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:inset 3px 0 0 var(--orange)}
.tour-btn .tag{font-size:12px;color:var(--orange);white-space:nowrap}
.tour-view{background:var(--panel);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:14px}
.tour-chart{background:#0E1428;border-radius:14px;padding:8px}
.tour-chart .ov{display:none}
.tour-chart[data-active="structure"] .ov[data-tool="structure"],.tour-chart[data-active="confluence"] .ov[data-tool="confluence"],
.tour-chart[data-active="swing"] .ov[data-tool="swing"],.tour-chart[data-active="setup"] .ov[data-tool="setup"],
.tour-chart[data-active="core"] .ov[data-tool="core"],.tour-chart[data-active="gap"] .ov[data-tool="gap"],
.tour-chart[data-active="grid"] .ov[data-tool="grid"],.tour-chart[data-active="invaders"] .ov[data-tool="invaders"],
.tour-chart[data-active="lounge"] .ov[data-tool="lounge"]{display:inline}
.tour-desc{font-size:17px}

.h-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.h-p{color:var(--muted);font-size:18px;margin-top:18px;max-width:48ch}
.facts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.facts-list b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:4px}
.facts-list span{color:var(--muted)}

.h-faq details{border-top:1px solid var(--line);padding:18px 0}
.h-faq h2{margin-bottom:20px}
.h-faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";color:var(--orange);font-size:22px;line-height:1}
.h-faq details[open] summary::after{content:"\2212"}
.h-faq details p{color:var(--muted);margin-top:10px;max-width:70ch}

@media (max-width:980px){.h-hero{grid-template-columns:1fr;gap:40px}.tour{grid-template-columns:1fr}.tour-list{flex-direction:row;flex-wrap:wrap}.h-split{grid-template-columns:1fr;gap:32px}}
@media (max-width:620px){.app-body{grid-template-columns:1fr}.app-side{display:none}.facts-list{grid-template-columns:1fr}.tf{display:none}}
@media (prefers-reduced-motion:reduce){.cdl{animation:none}}