/* ---------- shared tokens and controls ---------- */
:root{
  --floor:#071f1a; --felt:#0f3a30; --felt-hi:#14493c; --rail:#2b1d14; --rail-hi:#3a281b;
  --brass:#dcb15a; --brass-deep:#a97f2e; --on-brass:#1d1406;
  --ivory:#f2ebda; --muted:#9db6aa; --line:rgba(242,235,218,.14); --shade:rgba(0,0,0,.28);
  --red:#cf4a3f; --win:#86d9a1; --lose:#f0a197;
  --display:"Limelight", Georgia, serif; --body:"Manrope", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--floor);color:var(--ivory)}
body{font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 70% at 50% 0%, var(--felt) 0%, var(--floor) 72%) var(--floor)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.brand{font-family:var(--display);font-size:26px;color:var(--brass);letter-spacing:.02em;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{min-height:46px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:rgba(242,235,218,.06);
  color:var(--ivory);font:600 15px var(--body);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .08s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:hover{background:rgba(242,235,218,.11)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px}
.btn.primary{background:linear-gradient(var(--brass),var(--brass-deep));color:var(--on-brass);border-color:transparent;font-weight:800}
.btn.big{min-height:56px;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.btn.danger{color:var(--lose);border-color:rgba(207,74,63,.5)}
.btn.danger.armed{background:var(--red);color:#fff}
.icob{width:42px;height:42px;flex:none;border-radius:10px;border:1px solid var(--line);background:rgba(242,235,218,.06);color:var(--brass);cursor:pointer;display:grid;place-items:center;padding:0;font:700 16px var(--body)}
.icob svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icob.off{color:var(--muted);opacity:.75}
.icob:hover{background:rgba(242,235,218,.12)}
.icob:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
input,select,textarea{min-height:46px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ivory);font:600 16px var(--body);padding:0 12px;width:100%;min-width:0}
textarea{padding:10px 12px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
input[type=range]{min-height:36px;padding:0;background:none;border:none;accent-color:var(--brass)}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--brass)}
.err{color:var(--lose);font-weight:700;min-height:1.4em}
.pos{color:var(--win)} .neg{color:var(--lose)}

#toasts{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:70;display:grid;gap:8px;width:min(92vw,440px);pointer-events:none}
.toast{padding:14px 18px;border-radius:12px;background:var(--rail);border:1px solid var(--rail-hi);box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:700;animation:toastin .35s cubic-bezier(.3,1.5,.5,1)}
.toast.good{border-color:var(--win);color:#d9ffe4}.toast.bad{border-color:var(--red);color:#ffd2cb}
.toast.out{opacity:0;transform:translateY(10px);transition:.35s}
@keyframes toastin{from{transform:translateY(-16px);opacity:0}}

.modal{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px}
.mback{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.mcard{position:relative;width:min(100%,460px);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:14px;padding:22px;border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%,var(--felt-hi),var(--felt));box-shadow:inset 0 0 0 5px var(--rail),inset 0 0 0 6px var(--rail-hi),0 30px 60px rgba(0,0,0,.6);
  animation:toastin .3s cubic-bezier(.3,1.4,.5,1)}
.mcard.wide{width:min(100%,640px)}
.mcard h2{font-family:var(--display);font-size:26px;color:var(--brass)}
.mcard h3.sub{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.mrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.mrow .btn{flex:1}
.pthead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xbtn{color:var(--ivory)}
.langlist{display:grid;gap:8px}
.langlist .btn{justify-content:flex-start;font-size:17px}
@keyframes spinr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* ---------- demo hub page ---------- */
html{scroll-behavior:smooth}
.hbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:12px 20px;background:rgba(43,29,20,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rail-hi)}
.hnav{display:flex;gap:18px;flex:1;justify-content:center}
.hnav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:14px}.hnav a:hover{color:var(--brass)}
.dseg{display:inline-flex;padding:2px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.dseg button{min-height:32px;min-width:42px;border:none;border-radius:7px;background:transparent;color:var(--muted);font:800 13px var(--body);cursor:pointer}
.dseg button.on{background:var(--brass);color:var(--on-brass)}
.dtag{display:inline-block;font:800 11px var(--body);letter-spacing:.18em;padding:4px 10px;border-radius:999px;background:var(--brass);color:var(--on-brass)}
.hero{position:relative;min-height:min(86vh,760px);display:grid;align-content:center;padding:60px 20px 40px;overflow:hidden;
  background:linear-gradient(180deg,rgba(7,31,26,.55),rgba(7,31,26,.92) 85%),url(/assets/art/hero.webp) center/cover no-repeat}
.hin{max-width:860px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center}
.hero h1{font-family:var(--display);font-size:clamp(34px,6vw,64px);line-height:1.05;color:var(--brass);text-shadow:0 4px 24px rgba(0,0,0,.6)}
.hero p{font-size:clamp(17px,2.2vw,21px);max-width:62ch;line-height:1.5}
.hero small{color:var(--muted)}
.cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.reelrow{display:flex;justify-content:center;gap:clamp(8px,2vw,24px);margin-top:36px}
.reelrow img{width:clamp(60px,11vw,120px);filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));animation:bob 3.4s ease-in-out infinite}
.reelrow img:nth-child(2){animation-delay:-.7s}.reelrow img:nth-child(3){animation-delay:-1.4s}.reelrow img:nth-child(4){animation-delay:-2.1s}.reelrow img:nth-child(5){animation-delay:-2.8s}
@keyframes bob{50%{transform:translateY(-8px)}}
.sec{max-width:1160px;margin:0 auto;padding:64px 20px 8px;scroll-margin-top:60px}
.sec h2{font-family:var(--display);font-size:clamp(28px,4vw,40px);color:var(--brass);text-align:center}
.secd{text-align:center;color:var(--muted);max-width:62ch;margin:10px auto 0}
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.site{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;padding:22px;border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,var(--felt-hi),var(--felt));
  box-shadow:inset 0 0 0 5px var(--rail),inset 0 0 0 6px var(--rail-hi),0 20px 40px rgba(0,0,0,.4)}
.sart{position:relative;height:120px;display:grid;place-items:center}
.sart img{max-height:120px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.sart img.alt{position:absolute;right:12%;bottom:0;max-height:62px;transform:rotate(10deg)}
.site h3{font-family:var(--display);font-size:28px;color:var(--brass);text-align:center}
.site .sd{text-align:center;color:var(--muted)}
.site ul{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.45}
.site .btn{justify-self:stretch;margin-top:6px}
.how{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.how li{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.how .n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brass);color:var(--on-brass);font:800 17px var(--body)}
.how h3,.feat h3{font:800 17px var(--body);margin-bottom:4px}
.how p,.feat p{color:var(--ivory);opacity:.9;line-height:1.5}
.inc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.feat{padding:18px;border-radius:16px;background:#0c2a23;border:1px solid var(--line);border-top:3px solid var(--brass)}
.demo{max-width:720px;margin:24px auto 0;display:grid;gap:8px;line-height:1.5}
#demo .cta{margin-top:22px}
.hfoot{text-align:center;color:var(--muted);padding:56px 20px 40px;font-size:14px}
@media (max-width:980px){.sites{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.how,.inc{grid-template-columns:repeat(2,minmax(0,1fr))}.hnav{display:none}.hbar{justify-content:space-between}}
@media (max-width:560px){.how,.inc{grid-template-columns:1fr}.cta .btn{width:100%}}