/* Vixuals11 + SMK Carousel. Bricolage Grotesque for display, Hanken Grotesk for text. Dark by default, light when the system is light. */
:root{
  color-scheme:light dark;
  --bg:#0c0f12; --band:#0f1317; --panel:#12161c; --line:#252a31; --line-2:#1c2127;
  --text:#e7ecef; --soft:#b7c0c7; --mute:#9aa4ad;
  --acc:#3bb3a6; --acc-text:#3bb3a6; --on-acc:#07100f;
  --stage:#12161c; --stage-line:#252a31;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#eef1f3; --band:#e6eaed; --panel:#ffffff; --line:#d3dade; --line-2:#dbe1e5;
    --text:#0c0f12; --soft:#3c4650; --mute:#56616b;
    --acc-text:#16766c;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:10px 16px;z-index:50;border-radius:8px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* nav */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;text-decoration:none}
.brand b{color:var(--acc-text);font-weight:800}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.nav a{color:var(--mute);text-decoration:none;font-size:15px;padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a.btn{color:var(--on-acc);padding:0 18px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-weight:700;text-decoration:none;border:1px solid var(--acc);font-family:inherit;font-size:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn--sm{min-height:40px;padding:0 18px;font-size:15px}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--acc);filter:none}
.btn s{font-weight:500;opacity:.6}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.eyebrow--acc{color:var(--acc-text)}
.lede{font-size:20px;color:var(--soft);max-width:34em}
.fine{font-size:14px;color:var(--mute)}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* sections */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-block:40px 72px}
.hero>*{flex:1 1 420px;min-width:0}
.hero h1{font-weight:800;font-size:clamp(46px,7vw,72px);line-height:.98;letter-spacing:-.03em}
.hero h1 span{color:var(--acc-text)}
.hero .lede{margin-top:26px}
.hero .row{margin-top:34px}
.hero .fine{margin-top:20px}
.sec{padding-block:40px 80px}
.sec h2,.band h2{font-weight:800;font-size:clamp(34px,4.6vw,48px);line-height:1.05;max-width:16em}
.sec .lede,.band p.copy{margin-top:18px;font-size:17px}
.band{background:var(--band);border-block:1px solid var(--line-2)}
.band__in{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-block:80px}
.band__in>*{flex:1 1 380px;min-width:0}
.band p.copy{color:var(--soft);max-width:34em}
.phases{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* family grid */
.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;margin-top:44px}
.fam h3{font-size:24px;margin:18px 0 4px}
.fam h3 span{color:var(--mute);font-weight:400;font-size:16px;font-family:var(--font);letter-spacing:0}
.fam p{color:var(--soft)}

/* defaults cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:40px}
.cards div{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.cards h3{font-size:20px;margin-bottom:8px}
.cards p{color:var(--soft);font-size:16px}

/* faq */
.faq{margin-top:36px;max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;font-size:24px;line-height:1;color:var(--acc-text)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:12px;color:var(--soft);max-width:42em}

/* buy panel */
.buy{border:1px solid var(--line);border-radius:28px;background:var(--panel);padding:56px 40px;text-align:center}
.buy h2{margin-inline:auto}
.buy .copy{margin:16px auto 0;color:var(--soft);max-width:520px}
.buy .row{justify-content:center;margin-top:30px}
.buy .fine{margin:20px auto 0;max-width:520px}
.price{display:flex;align-items:baseline;gap:12px;justify-content:center}
.price strong{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-.03em}
.price s{font-size:22px;color:var(--mute)}

/* store */
.store{padding-bottom:104px}
.hero--store{display:block;padding-block:56px 40px}
.hero--store h1{font-weight:800;font-size:clamp(46px,7vw,72px);line-height:.98;letter-spacing:-.03em;max-width:12em}
.pnl{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--panel)}
.pnl__text{flex:1 1 420px;min-width:0;padding:48px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.pnl h2{font-weight:800;font-size:clamp(34px,4.6vw,48px);line-height:1.05}
.pnl .lede{margin-top:16px;font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.tags li{padding:6px 14px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--soft)}
.pnl .price{justify-content:flex-start;margin-bottom:22px}
.pnl__stage{flex:1.2 1 460px;min-width:0;min-height:440px;position:relative;display:block;text-decoration:none}
.pnl__stage .stage{position:absolute;inset:0;height:auto;border:0;border-radius:0;border-left:1px solid var(--line)}
@media (max-width:860px){.pnl__text{padding:32px 24px}.pnl__stage .stage{border-left:0;border-top:1px solid var(--line)}}

/* legal pages */
.doc{padding-block:48px 96px;max-width:760px}
.doc h1{font-size:clamp(34px,4.6vw,48px);font-weight:800;margin-bottom:8px}
.doc p,.doc li{color:var(--soft);margin:0 0 .9em}
.doc h2{font-size:22px;margin:1.8em 0 .5em}

/* footer */
.foot{border-top:1px solid var(--line-2);padding:48px 0 44px;font-size:15px;color:var(--mute)}
.foot a{color:var(--soft)}
.foot__grid{display:flex;flex-wrap:wrap;gap:24px 56px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot strong{color:var(--text)}
.foot .fine{margin-top:28px;font-size:13px}

/* ---------- demo stages (always dark) ---------- */
.stage{position:relative;overflow:hidden;background:#12161c;border:1px solid #252a31;border-radius:20px;height:270px}
.stage--big{height:440px}
.p3{perspective:760px}
.o{position:absolute;left:50%;top:50%;width:0;height:0}
.o3{transform-style:preserve-3d}
.stage-tag{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9aa4ad;z-index:5}
.spinrun{animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card{background:var(--c);color:#0c0f12;font:700 13px/1 var(--font);text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.cslot{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateY(-86px)}
.cc{position:absolute;left:-17px;top:-23px;width:34px;height:46px;border-radius:7px;line-height:46px;animation:cr 3.2s linear infinite}
@keyframes cr{from{transform:rotate(calc(var(--a) * -1))}to{transform:rotate(calc(var(--a) * -1 - 360deg))}}
.pbox{position:absolute;left:50%;top:50%;width:360px;height:250px;margin:-125px 0 0 -180px}
.pc{position:absolute;left:0;top:0;width:30px;height:40px;border-radius:6px;offset-path:path('M-130 210 L18 210 C 100 210, 96 60, 180 126 S 272 54, 342 50 L 490 50');offset-rotate:0deg;animation:ride 5s linear infinite;animation-delay:calc(var(--i) * -.714s)}
@keyframes ride{0%{offset-distance:0%}100%{offset-distance:100%}}
.vtilt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(54deg) rotateZ(-26deg)}
.vrow{display:flex;gap:10px;margin-bottom:10px;width:max-content}
.vrow.l{animation:vl 2.4s linear infinite}
.vrow.r{animation:vr 2.4s linear infinite}
.vc{width:44px;height:30px;flex:none;border-radius:5px;background:var(--c);box-shadow:0 4px 8px rgba(0,0,0,.35)}
.vc:nth-child(even){filter:brightness(.7)}
@keyframes vl{to{transform:translateX(-108px)}}
@keyframes vr{from{transform:translateX(-108px)}to{transform:translateX(0)}}
.tilt{transform-style:preserve-3d;transform:rotateX(72deg)}
.spin3{transform-style:preserve-3d;animation:spin 3.6s linear infinite}
.oslot{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotate(var(--a)) translateY(-112px)}
.oc{position:absolute;left:-16px;top:-21px;width:32px;height:42px;border-radius:6px;line-height:42px;animation:ocr 3.6s linear infinite}
@keyframes ocr{from{transform:rotate(calc(var(--a) * -1)) rotateX(-72deg)}to{transform:rotate(calc(var(--a) * -1 - 360deg)) rotateX(-72deg)}}
.orb{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:#e7ecef}
.oline{position:absolute;left:-112px;top:-112px;width:224px;height:224px;border-radius:50%;border:1px solid #3a424b}
.cf{position:absolute;left:-30px;top:-40px;width:60px;height:80px;border-radius:8px;opacity:0;animation:flow 4.2s linear infinite;animation-delay:calc(var(--i) * -.6s)}
@keyframes flow{
0%{transform:translate3d(-230px,0,-200px) rotateY(62deg) scale(1);opacity:0}
10%{opacity:1}
50%{transform:translate3d(0,0,70px) rotateY(0deg) scale(1.2);opacity:1}
90%{opacity:1}
100%{transform:translate3d(230px,0,-200px) rotateY(-62deg) scale(1);opacity:0}}
.tiltx{transform-style:preserve-3d;transform:rotateX(-16deg)}
.sph{transform-style:preserve-3d;animation:spiny 6s linear infinite}
@keyframes spiny{to{transform:rotateY(360deg)}}
.sc{position:absolute;left:-15px;top:-19px;width:30px;height:38px;border-radius:5px;backface-visibility:hidden;transform:rotateY(var(--lon)) rotateX(var(--lat)) translateZ(100px)}
.tring{animation:spin 3.2s linear infinite}
.arm{position:absolute;left:0;top:0;animation:lag 7s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
.tc{position:absolute;left:-19px;top:calc(var(--R) * -1 - 25px);width:38px;height:50px;border-radius:8px;line-height:50px}
@keyframes lag{0%,10%{transform:rotate(0deg)}38%,60%{transform:rotate(calc(var(--lag) * -1))}88%,100%{transform:rotate(0deg)}}
.stage--big .tring{scale:1.45}
.phase{flex:1 1 140px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--mute);font-size:14px}
.phase.a{animation:ph0 7s linear infinite}
.phase.b{animation:ph1 7s linear infinite}
.phase.c{animation:ph2 7s linear infinite}
.phase.d{animation:ph3 7s linear infinite}
@keyframes ph0{0%,10%{border-color:var(--acc);color:var(--text)}12%,100%{border-color:var(--line);color:var(--mute)}}
@keyframes ph1{0%,10%{border-color:var(--line);color:var(--mute)}12%,38%{border-color:var(--acc);color:var(--text)}40%,100%{border-color:var(--line);color:var(--mute)}}
@keyframes ph2{0%,38%{border-color:var(--line);color:var(--mute)}40%,60%{border-color:var(--acc);color:var(--text)}62%,100%{border-color:var(--line);color:var(--mute)}}
@keyframes ph3{0%,60%{border-color:var(--line);color:var(--mute)}62%,90%{border-color:var(--acc);color:var(--text)}92%,100%{border-color:var(--line);color:var(--mute)}}

@media (max-width:860px){
  .sec{padding-block:32px 64px}
  .band__in{padding-block:56px}
  .stage--big{height:340px}
  .buy{padding:40px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-play-state:paused !important;scroll-behavior:auto !important}
}