:root{--purple:#66476e;--purple-d:#3f2b45;--lime:#d0e090;--bg:#eef1ea;--ink:#111;--muted:#555;--card:#fff;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
.wrap{width:min(1120px,92vw);margin:0 auto}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:.95em 1.5em;border-radius:999px;border:2px solid var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--purple)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}
/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(238,241,234,.88);backdrop-filter:blur(8px);border-bottom:1px solid #0001}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav img{height:22px;width:auto}
.nav nav{display:flex;gap:1.4rem;align-items:center;font-weight:600;font-size:.92rem}
.nav nav a{text-decoration:none}.nav nav a.hide-s{display:none}
.nav .btn{padding:.55em 1.1em;font-size:.88rem}
@media(min-width:760px){.nav nav a.hide-s{display:inline}}
/* hero */
.hero{padding:clamp(48px,9vw,110px) 0 clamp(40px,7vw,90px);text-align:center;max-height:900px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#66476e0a 3px 4px);pointer-events:none}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:.45em .9em;border-radius:6px}
.hero h1{margin:0}.hero h1 img{width:min(980px,100%);height:auto;margin:28px auto 0;max-height:260px;object-fit:contain}
.hero .sub{font-size:clamp(1.1rem,2.4vw,1.45rem);max-width:720px;margin:28px auto 0;font-weight:500}
.hero .sub strong{background:linear-gradient(transparent 60%,var(--lime) 60%)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.err{margin-top:30px;font-size:.82rem;color:var(--muted)}
/* marquee */
.ticker{background:var(--purple);color:#fff;overflow:hidden;white-space:nowrap;border-block:3px solid var(--ink)}
.ticker div{display:inline-block;padding:14px 0;animation:mq 40s linear infinite;font-weight:700;letter-spacing:.04em}
.ticker span{margin:0 1.2em;color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}
section{padding:clamp(56px,8vw,100px) 0}
.h2{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px;font-weight:900}
.lede{color:var(--muted);font-size:1.1rem;max-width:640px;margin:0 0 40px}
/* sides */
.sides{display:grid;gap:22px}
@media(min-width:860px){.sides{grid-template-columns:1fr auto 1fr;align-items:stretch}}
.side{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:30px;box-shadow:8px 8px 0 var(--ink)}
.side.pro{background:var(--purple);color:#fff;box-shadow:8px 8px 0 var(--lime)}
.side .tag{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.side h3{font-size:1.65rem;line-height:1.15;margin:.3em 0 .2em;letter-spacing:-.02em}
.side .motto{font-style:italic;margin:0 0 1.2em;opacity:.85}
.side ul{list-style:none;padding:0;margin:0 0 1.5em;display:grid;gap:.75em}
.side li{padding-left:1.9em;position:relative}
.side li::before{content:"✕";position:absolute;left:0;top:0;font-weight:900;color:var(--purple)}
.side.pro li::before{color:var(--lime)}
.vs{display:grid;place-items:center;font-weight:900;font-size:1.4rem}
.vs span{background:var(--lime);border:2px solid var(--ink);border-radius:50%;width:64px;height:64px;display:grid;place-items:center}
.side.pro .btn{background:var(--lime);color:var(--ink)}
/* ticket */
.dark{background:#141118;color:#e8e6ea}
.dark .lede{color:#a9a3ae}
.grid2{display:grid;gap:24px}@media(min-width:900px){.grid2{grid-template-columns:1.15fr .85fr}}
.ticket{background:#1e1a23;border:1px solid #3a3340;border-radius:14px;overflow:hidden;font-size:.93rem}
.ticket header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;background:#2a2430;font-weight:700}
.pill{font-size:.72rem;padding:.25em .7em;border-radius:999px;font-weight:800;letter-spacing:.05em}
.p-red{background:#ff4d5e;color:#fff}.p-lime{background:var(--lime);color:#111}.p-amber{background:#ee9441;color:#111}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:16px 18px;margin:0;border-bottom:1px solid #3a3340}
.ticket dt{color:#8f8896}.ticket dd{margin:0}
.log{padding:6px 18px 16px}.log p{margin:12px 0}.log b{color:var(--lime)}.log time{color:#8f8896;margin-right:.6em}
.status{background:#1e1a23;border:1px solid #3a3340;border-radius:14px;padding:18px}
.status h3{margin:0 0 4px;font-size:1.05rem}.status .ok{color:#8f8896;font-size:.85rem;margin:0 0 14px}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #3a3340;font-size:.92rem}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.g{background:#3ed660}.y{background:#ee9441}.r{background:#ff4d5e}
.uptime{display:flex;gap:2px;margin-top:14px}.uptime i{flex:1;height:26px;border-radius:2px;background:#3ed660}.uptime i.y{background:#ee9441}.uptime i.r{background:#ff4d5e}
/* glossary */
.gloss{display:grid;gap:16px}@media(min-width:700px){.gloss{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.gloss{grid-template-columns:repeat(3,1fr)}}
.term{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:20px}
.term h3{margin:0;font-size:1.1rem}.term .say{color:var(--muted);font-size:.85rem;margin:2px 0 10px}.term p{margin:0}
.term .say::before{content:"What they say → "}
.term p::before{content:"What it means: ";font-weight:800;color:var(--purple)}
/* faq */
.faq details{background:#fff;border:2px solid var(--ink);border-radius:14px;margin-bottom:12px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:800;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1}.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:#333}
/* quotes */
.purple{background:var(--purple);color:#fff}.purple .lede{color:#e9def0}
.disclaim{display:inline-block;background:var(--lime);color:var(--ink);font-weight:700;font-size:.82rem;padding:.4em .8em;border-radius:6px;margin-bottom:28px}
.quotes{display:grid;gap:18px}@media(min-width:800px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:#fff;color:var(--ink);border-radius:var(--r);padding:24px;border:2px solid var(--ink);margin:0}
.quote .stars{color:var(--purple);letter-spacing:2px;font-size:.95rem}
.quote blockquote{margin:10px 0 16px;font-size:1.05rem;font-weight:500}
.quote figcaption{font-weight:800}.quote figcaption small{display:block;font-weight:500;color:var(--muted)}
/* shop */
.shopbox{background:var(--ink);color:#fff;border-radius:26px;padding:clamp(32px,6vw,64px);display:grid;gap:30px;align-items:center}
@media(min-width:880px){.shopbox{grid-template-columns:1.2fr .8fr}}
.shopbox .h2{color:#fff}.shopbox p{color:#cfcad3;font-size:1.08rem}
.cats{display:flex;flex-wrap:wrap;gap:10px}.cats span{border:1.5px solid #fff4;border-radius:999px;padding:.45em 1em;font-weight:600;font-size:.9rem}
.shopcard{background:var(--bg);border-radius:18px;padding:28px;color:var(--ink);text-align:center}
.shopcard img{margin:0 auto 18px;max-height:70px;width:auto}
.shopcard .mono{font-size:.85rem;color:var(--muted);margin:14px 0 0}
footer{padding:44px 0;border-top:1px solid #0002;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer img{height:20px;width:auto}footer a{font-weight:700}