/* Homepage v3: Sniff (2026-10-18). Loaded after tape.css + ds.css; only .sx-* and the new sections live here.
   Same brand as the app: navy ground, QuantBase orange #FF6B1A, Manrope / IBM Plex. A warm orange wash
   across the whole page, no planet-rim horizon. */
:root{--qb:#FF6B1A;--qb-hi:#FF8540;--qb-lo:#E85A0C;--qb-dim:rgba(255,107,26,.14);--qb-line:rgba(255,150,90,.26);
  --navy:#070A10;--panel:rgba(16,20,30,.62);--panel-2:rgba(22,27,40,.7);--hair:rgba(255,255,255,.08);--hair-2:rgba(255,255,255,.14);
  --ink:#F2EFEA;--ink-2:#C4C0BA;--ink-3:#8C8984;--paper:#E9E4D8;--px:3}
body{background:var(--navy)}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;padding:8px 12px;border-radius:8px;background:var(--qb);color:#160a03}.skip:focus{left:8px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 0% 0%,rgba(255,107,26,.22),transparent 70%),
    radial-gradient(55% 55% at 100% 30%,rgba(255,128,52,.13),transparent 72%),
    radial-gradient(70% 50% at 15% 100%,rgba(232,90,12,.18),transparent 72%),
    radial-gradient(50% 45% at 90% 95%,rgba(255,150,80,.1),transparent 70%),
    linear-gradient(160deg,#0E1018,#070A10 55%,#0B0C13)}
.sx h1,.sx h2{font-family:Manrope,var(--sans);font-weight:700;letter-spacing:-.035em}
.sx .eyebrow{color:var(--qb);border-color:var(--qb-line);background:var(--qb-dim)}
.btn.p{background:linear-gradient(180deg,var(--qb-hi),var(--qb-lo));color:#160a03;box-shadow:inset 0 1px 0 rgba(255,214,180,.5),0 10px 24px -10px rgba(255,107,26,.7)}
.btn.p:hover{background:linear-gradient(180deg,#FF9A5C,var(--qb))}
.btn.s{background:rgba(16,20,30,.55);border-color:var(--hair-2)}

/* ---- hero ---- */
.sx-hero{position:relative;text-align:center;padding:calc(clamp(40px,5vw,72px) + 70px) 0 0;margin-top:-70px;overflow:hidden}
.sx-wash{position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 0%,rgba(255,107,26,.16),transparent 70%);pointer-events:none}
.sx-hero .rail{position:relative;z-index:1}
.sx-status{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--hair);background:rgba(10,13,20,.6);backdrop-filter:blur(10px);font:400 12.5px/1.3 var(--mono);color:var(--ink-3)}
.sx-status b{color:var(--ink);font-weight:500}
.sx-status .live{width:7px;height:7px;border-radius:50%;background:var(--qb);box-shadow:0 0 0 4px var(--qb-dim);animation:sxpulse 2s ease-in-out infinite}
@keyframes sxpulse{50%{box-shadow:0 0 0 7px rgba(255,107,26,.05)}}
.sx-hero h1{font-size:clamp(38px,5.6vw,76px);line-height:1;margin:22px auto 0;max-width:15ch}
.sx-hero h1 em{font-style:normal;color:var(--qb);display:block}
.sx-hero .sub{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:22px auto 0}
.sx-hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.sx-hero .micro{font:400 12.5px/1.5 var(--mono);color:var(--ink-3);margin-top:16px}

/* the stage: a belt of real coins sliding by, Sniff running underneath and catching one */
.sx-stage{position:relative;height:220px;margin-top:clamp(20px,3vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sx-track{position:absolute;left:0;right:0;top:8px;overflow:hidden}
.sx-belt{display:flex;gap:14px;width:max-content;animation:sxbelt 60s linear infinite}
@keyframes sxbelt{to{transform:translateX(-50%)}}
.sx-coin{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:var(--panel);border:1px solid var(--hair);
  backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);text-align:left;min-width:210px}
.sx-coin img,.sx-coin .ph{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#1a2030;flex:none}
.sx-coin .ph{display:grid;place-items:center;font:600 14px/1 var(--mono);color:var(--ink-3)}
.sx-coin .t{display:flex;flex-direction:column;min-width:0}
.sx-coin .t b{font:600 14px/1.2 var(--sans);color:var(--ink)} .sx-coin .t i{font-style:normal;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.sx-coin .k{margin-left:auto;font:500 10.5px/1 var(--mono);padding:5px 7px;border-radius:6px;white-space:nowrap}
.sx-coin .k.instant{color:#FFB08A;background:rgba(255,107,26,.12)} .sx-coin .k.organic{color:#7EE2B4;background:rgba(61,214,140,.1)}
.sx-ground{position:absolute;left:0;right:0;bottom:16px;height:1px;background:linear-gradient(90deg,transparent,var(--qb-line),transparent)}
.sx-dog{position:absolute;bottom:16px;left:0;width:calc(86px * var(--px));height:calc(107px * var(--px));transform:translateX(-30vw);will-change:transform}
/* one element, three sheets (8 frames each): --fw/--fh = one frame in logical pixels */
.sx-dog .sprite{--fw:86;--fh:40;position:absolute;left:0;bottom:0;width:calc(var(--fw) * 1px * var(--px));height:calc(var(--fh) * 1px * var(--px));
  background:url(/sx-dog-run.png) 0 0/calc(var(--fw) * 8px * var(--px)) 100% no-repeat;image-rendering:pixelated;animation:sxsheet .6s steps(8) infinite}
.sx-dog .sprite.sniff{--fw:78;--fh:50;background-image:url(/sx-dog-sniff.png);animation-duration:.9s}
.sx-dog .sprite.catch{--fw:74;--fh:107;background-image:url(/sx-dog-catch.png);animation-duration:1.4s;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes sxsheet{to{background-position:calc(var(--fw) * -8px * var(--px)) 0}}
@keyframes sxsniff{to{background-position:calc(-624px * var(--px)) 0}}
.sx-dog .coin{position:absolute;width:calc(64px * 1.2);height:calc(67px * 1.2);left:calc(30px * var(--px));top:-40px;opacity:0;
  background:url(/sx-coin.png) 0 0/calc(512px * 1.2) calc(67px * 1.2) no-repeat;image-rendering:pixelated;animation:sxcoin .8s steps(8) infinite}
@keyframes sxcoin{to{background-position:calc(-512px * 1.2) 0}}
.sx-cap{font:400 12px/1.4 var(--mono);color:var(--ink-3);text-align:center;margin-top:6px;padding-bottom:12px}

/* ---- how ---- */
.sx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.sx-step{padding:24px;border-radius:20px;background:var(--panel);border:1px solid var(--hair);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px}
.sx-step .num{font:500 12px/1 var(--mono);color:var(--qb)}
.sx-step h3{font-family:Manrope,var(--sans);font-size:22px;font-weight:700}
.sx-step p{color:var(--ink-2);font-size:15.5px}
.sx-mock{margin-top:auto;padding:14px;border-radius:14px;background:rgba(7,10,16,.6);border:1px solid var(--hair);font-size:13px}
.sx-mock .row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:5px 0;color:var(--ink-2)}
.sx-mock .row.small{font:400 11.5px/1.3 var(--mono);color:var(--ink-3)}
.sx-mock .chip{font:500 10.5px/1 var(--mono);color:var(--paper);border:1px dashed rgba(233,228,216,.5);padding:4px 7px;border-radius:6px}
.sx-mock.chat .msg{max-width:88%;padding:8px 11px;border-radius:12px;margin:5px 0;line-height:1.4}
.sx-mock.chat .me{margin-left:auto;background:rgba(255,107,26,.16);color:var(--ink);width:max-content}
.sx-mock.chat .bot{background:rgba(255,255,255,.05);color:var(--ink-2);min-height:40px}
.sx-mock.chat .typing{display:inline-flex;gap:4px} .sx-mock.chat .typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:sxdot 1.2s infinite}
.sx-mock.chat .typing i:nth-child(2){animation-delay:.15s}.sx-mock.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes sxdot{40%{transform:translateY(-4px);background:var(--qb)}}
.sx-mock.chat .reply{display:none}
.sx-step.on .sx-mock.chat .typing{display:none} .sx-step.on .sx-mock.chat .reply{display:inline;animation:sxin .5s ease both}
.sx-mock .spark{width:100%;height:60px;margin:6px 0}
.sx-mock .spark path{fill:none;stroke:var(--qb);stroke-width:2;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400}
.sx-step.on .sx-mock .spark path{animation:sxdraw 1.6s ease forwards}
@keyframes sxdraw{to{stroke-dashoffset:0}}
.sx-mock.confirm s{color:var(--ink-3)} .sx-mock small{font-size:11px}
.sx-mock .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.sx-mock .b{padding:7px 12px;border-radius:999px;border:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-2)}
.sx-mock .b.p{background:linear-gradient(180deg,var(--qb-hi),var(--qb-lo));color:#160a03;border-color:transparent;font-weight:600}
.sx-step.on .sx-mock .b.p{animation:sxpress 2.4s ease 1s infinite}
@keyframes sxpress{0%,70%,100%{transform:none}75%{transform:scale(.94)}80%{transform:none;box-shadow:0 0 0 6px rgba(255,107,26,.18)}}
@keyframes sxin{from{opacity:0;transform:translateY(4px)}}

/* ---- modes ---- */
.sx-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.sx-mode{padding:22px;border-radius:22px;border:1px solid var(--hair);background:var(--panel);backdrop-filter:blur(10px)}
.sx-mode.m-paper{background:linear-gradient(180deg,rgba(233,228,216,.07),rgba(16,20,30,.6));border:1px dashed rgba(233,228,216,.32)}
.sx-mode.m-live{border-color:var(--qb-line);box-shadow:0 20px 60px -30px rgba(255,107,26,.5)}
.sx-mode picture img{width:100%;height:240px;object-fit:contain;padding:14px;border-radius:14px;image-rendering:pixelated;background:rgba(7,10,16,.5)}
.sx-mode h3{display:flex;align-items:center;gap:10px;font:700 24px/1.2 Manrope,var(--sans);margin-top:16px}
.sx-mode .dot{width:9px;height:9px;border-radius:50%}
.sx-mode.m-paper .dot{background:var(--paper)} .sx-mode.m-live .dot{background:var(--qb);box-shadow:0 0 0 4px var(--qb-dim)}
.sx-mode ul,.sx-plan ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;color:var(--ink-2);font-size:15px}
.sx-mode li::before,.sx-plan li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--qb);margin-right:10px;vertical-align:2px}
.sx-mode.m-paper li::before{background:var(--paper)}

/* ---- life board ---- */
.sx-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.sx-credits-art{display:flex;justify-content:center;margin-top:20px}.sx-credits-art img{width:min(200px,50%);height:auto;image-rendering:pixelated}
.sx-board .col{padding:14px;border-radius:18px;background:var(--panel);border:1px solid var(--hair);min-height:220px}
.sx-board h4{margin:0 0 12px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sx-board .lane{display:grid;gap:8px}
.sx-board .lane span{display:block;height:38px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--hair);position:relative;overflow:hidden}
.sx-board .lane span::before{content:"";position:absolute;left:9px;top:9px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08)}
.sx-board .lane span::after{content:"";position:absolute;left:38px;top:13px;width:46%;height:10px;border-radius:4px;background:rgba(255,255,255,.07)}
.sx-board .l1 span{animation:sxdrop 4s ease-in-out infinite}
.sx-board .l1 span:nth-child(2){animation-delay:1.3s}.sx-board .l1 span:nth-child(3){animation-delay:2.6s}
@keyframes sxdrop{0%{transform:translateY(-14px);opacity:0}12%,80%{transform:none;opacity:1}100%{transform:translateX(30px);opacity:0}}
.sx-board .l2 i{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p) * 100%);background:var(--qb);animation:sxfill 5s ease-in-out infinite alternate}
@keyframes sxfill{from{width:calc(var(--p) * 60%)}}
.sx-board .l3 span{border-color:rgba(61,214,140,.25);background:rgba(61,214,140,.06)}
.sx-board .lane span.real::before,.sx-board .lane span.real::after{display:none}
.sx-board .lane span.real{display:flex;align-items:center;gap:9px;padding:0 10px;font:600 13px/1 var(--sans);color:var(--ink);animation:sxin .6s ease both}
.sx-board .lane span.real img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.sx-board .l1 span::before,.sx-board .l2 span::before{background:url(/sx-coin.png) 0 0/160px 21px no-repeat;image-rendering:pixelated;border-radius:0;width:20px;height:21px;animation:sxchip .8s steps(8) infinite}
@keyframes sxchip{to{background-position:-160px 0}}
.sx-board .l4 span{opacity:.45;filter:grayscale(1)}
.sx .fine{font:400 12.5px/1.5 var(--mono);color:var(--ink-3);margin-top:16px}

/* ---- safety ---- */
.sx-safe-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.sx-checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;font-size:16.5px;color:var(--ink-2)}
.sx-checks b{color:var(--ink)}
.sx-checks li{padding-left:30px;position:relative}
.sx-checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--qb-dim);box-shadow:inset 0 0 0 1px var(--qb-line)}
.sx-checks li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:9px;border:solid var(--qb);border-width:0 2px 2px 0;transform:rotate(40deg)}
.sx-safe .art img{width:100%;height:auto;border-radius:22px;image-rendering:pixelated;border:1px solid var(--hair);background:var(--panel)}

/* ---- pricing ---- */
.sx-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.sx-plan{padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(10px)}
.sx-plan.hl{border-color:var(--qb-line);background:linear-gradient(180deg,rgba(255,107,26,.12),rgba(16,20,30,.66) 55%);box-shadow:0 30px 70px -36px rgba(255,107,26,.7)}
.sx-plan .pl-head{display:flex;justify-content:space-between;align-items:center}
.sx-plan h3{font:700 22px/1 Manrope,var(--sans)}
.sx-plan .tag{font:500 10px/1 var(--mono);white-space:nowrap;color:#160a03;background:var(--qb);padding:5px 8px;border-radius:999px}
.sx-plan .price b{font:700 44px/1 Manrope,var(--sans);letter-spacing:-.03em} .sx-plan .price span{color:var(--ink-3);margin-left:8px;font-size:14px}
.sx-plan .cred{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--mono);color:var(--ink-2)} .sx-plan .cred b{color:var(--ink)}
.sx-plan .tok{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFC9A4,var(--qb) 55%,#B9420A);box-shadow:0 0 10px rgba(255,107,26,.6)}
.sx-plan p{color:var(--ink-2);font-size:15px}
.sx-plan .btn{margin-top:auto}
.sx-costs{margin-top:20px;padding:4px 18px;border-radius:16px;border:1px solid var(--hair);background:var(--panel)}
.sx-costs summary{cursor:pointer;padding:14px 0;font-weight:600}
.sx-costs table{width:100%;border-collapse:collapse;font-size:14.5px}
.sx-costs td{padding:10px 8px;border-top:1px solid var(--hair)} .sx-costs td.mono{color:var(--qb);white-space:nowrap}

/* ---- close ---- */
.sx-close{text-align:center;padding:clamp(40px,6vw,72px) 20px;border-radius:28px;border:1px solid var(--qb-line);
  background:radial-gradient(70% 90% at 50% 0%,rgba(255,107,26,.22),rgba(16,20,30,.6) 70%)}
.sx-close h2{font-size:clamp(32px,4.4vw,56px)} .sx-close p{color:var(--ink-2);margin:12px 0 24px}
.sx-close-dog{width:calc(78px * var(--px));height:calc(50px * var(--px));margin:0 auto 12px;position:relative}
.sx-close-dog .sprite{position:absolute;inset:0;background:url(/sx-dog-sniff.png) 0 0/calc(624px * var(--px)) calc(50px * var(--px)) no-repeat;image-rendering:pixelated;animation:sxsniff 1.1s steps(8) infinite}

/* ---- consent ---- */
.sx-consent{position:fixed;left:16px;bottom:16px;z-index:60;max-width:380px;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:12px 12px 12px 16px;border-radius:16px;font-size:13px!important;border:1px solid var(--hair-2);background:rgba(12,15,23,.92);backdrop-filter:blur(14px);font-size:14px;color:var(--ink-2)}
.sx-consent div{display:flex;gap:8px;flex:none;justify-content:flex-end}

@media (max-width:900px){.sx-steps,.sx-plans{grid-template-columns:1fr}.sx-safe-grid{grid-template-columns:1fr}.sx-board{grid-template-columns:1fr 1fr}}
@media (max-width:640px){:root{--px:2}.sx-stage{height:180px}.sx-status span:not(.live){display:none}.sx-mode picture img{height:180px}.sx-mode-grid{grid-template-columns:1fr}.sx-coin{min-width:180px}
  .sx-consent{flex-direction:column;align-items:stretch}.sx-consent div{justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.sx-belt,.sx-dog .sprite,.sx-dog .coin,.sx-board *,.sx-close-dog .sprite,.sx-status .live{animation:none!important}
  .sx-dog{transform:translateX(10vw)!important}.sx-step .sx-mock .spark path{stroke-dashoffset:0}.sx-mock.chat .typing{display:none}.sx-mock.chat .reply{display:inline}}