/* SpinBetter CZ — theme "Pískovec & Smaragd" */
:root{
  --sand:#F1E6D2; --sand2:#E6D5B8; --paper:#FBF6EC; --line:#D8C4A1;
  --ink:#1C1A4A; --ink2:#2B2878; --ink3:#3C38A0;
  --em:#0E9F6E; --em-d:#0A7A55; --em-l:#C9F0DE;
  --saf:#F2B531; --saf-d:#C98C0C;
  --text:#221E1A; --muted:#6A5D49; --white:#fff;
  --r:18px; --r-s:10px;
  --shadow:0 10px 30px -12px rgba(28,26,74,.35);
  --fd:'Unbounded',system-ui,sans-serif; --fb:'Onest',system-ui,sans-serif;
  --hdr:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 54px)}
body{margin:0;background:var(--sand);color:var(--text);font:400 17px/1.65 var(--fb);-webkit-text-size-adjust:100%;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:var(--ink2)}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.2;color:var(--ink);margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(1.8rem,4.6vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.4rem,3vw,2.15rem);font-weight:700}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sec{padding:72px 0}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:#E9E6FF}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink a:not(.btn){color:var(--saf)}
.kicker{display:inline-block;font:600 .75rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--em-d);background:var(--em-l);padding:7px 12px;border-radius:99px;margin-bottom:14px}
.sec--ink .kicker{background:rgba(242,181,49,.15);color:var(--saf)}
.lead{font-size:1.08rem;color:var(--muted);max-width:760px}
.sec--ink .lead{color:#C8C4F0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.note{font-size:.88rem;color:var(--muted)}
.sec--ink .note{color:#A9A4DA}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .98rem/1 var(--fd);padding:15px 26px;border-radius:14px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn--em{background:var(--em);color:#fff;box-shadow:0 6px 0 var(--em-d)}
.btn--em:hover{background:#12B27C}
.btn--saf{background:var(--saf);color:var(--ink);box-shadow:0 6px 0 var(--saf-d)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.sec--ink .btn--ghost,.hdr .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.btn--sm{padding:10px 16px;font-size:.85rem;box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--ink);height:var(--hdr);box-shadow:0 2px 0 var(--saf)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo img{height:38px;width:auto}
.flag{width:30px;height:20px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:#D9D6FF;text-decoration:none;font:500 .88rem/1 var(--fb);padding:9px 11px;border-radius:9px;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{background:var(--saf);color:var(--ink)}
.hdr__cta{display:flex;gap:8px}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:.2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.drawer{display:none}
.chips{display:none}

/* hero */
.hero{padding:56px 0 64px;background:
  radial-gradient(circle at 85% 20%,rgba(14,159,110,.18),transparent 45%),
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(28,26,74,.04) 38px 39px),var(--sand)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero p.intro{font-size:1.12rem;max-width:560px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.badges li{font-size:.82rem;font-weight:600;background:var(--paper);border:1px dashed var(--line);padding:7px 12px;border-radius:99px;color:var(--ink)}
/* ticket */
.ticket{position:relative;background:var(--paper);border-radius:16px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 92px;overflow:hidden;transform:rotate(-2deg)}
.ticket__main{padding:26px 24px 22px;border-right:2px dashed var(--line)}
.ticket__top{display:flex;justify-content:space-between;align-items:center;font:700 .72rem/1 var(--fd);letter-spacing:.16em;color:var(--em-d);margin-bottom:14px}
.ticket__top b{background:var(--ink);color:var(--saf);padding:5px 8px;border-radius:6px}
.ticket dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.92rem}
.ticket dt{color:var(--muted)}
.ticket dd{margin:0;font-weight:700;color:var(--ink)}
.ticket__stub{background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;color:#fff}
.ticket__stub small{writing-mode:vertical-rl;transform:rotate(180deg);font:600 .7rem/1 var(--fd);letter-spacing:.2em;color:var(--saf)}
.validator{width:64px;height:64px;border-radius:50%;border:3px solid var(--saf);background:transparent;color:var(--saf);font:700 .62rem/1.1 var(--fd);cursor:pointer}
.stamp{position:absolute;right:112px;bottom:18px;font:800 1.1rem/1 var(--fd);color:var(--em);border:3px solid var(--em);padding:6px 10px;border-radius:8px;transform:rotate(-14deg) scale(2);opacity:0;transition:.35s cubic-bezier(.2,1.6,.4,1);pointer-events:none;background:rgba(251,246,236,.85)}
.ticket.ok .stamp{opacity:1;transform:rotate(-14deg) scale(1)}
.ticket__go{margin-top:16px}
.ticket::before,.ticket::after{content:"";position:absolute;right:81px;width:22px;height:22px;background:var(--sand);border-radius:50%}
.ticket::before{top:-11px}.ticket::after{bottom:-11px}

/* passport */
.passport{background:#2E2B6E;border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.passport__page{background:repeating-linear-gradient(0deg,#FBF6EC 0 26px,#F4ECDC 26px 27px);border-radius:14px;padding:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:300px}
.pst{aspect-ratio:1;border:3px double currentColor;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:700 .66rem/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;background:none;cursor:pointer;padding:6px;transition:transform .2s;color:var(--ink)}
.pst:nth-child(3n+1){color:var(--em-d);transform:rotate(-8deg)}
.pst:nth-child(3n+2){color:#A2361F;transform:rotate(6deg);border-radius:14px}
.pst:nth-child(3n){color:var(--ink3);transform:rotate(-3deg)}
.pst b{font-size:.95rem;display:block;margin:3px 0}
.pst:hover,.pst.on{transform:rotate(0) scale(1.06);background:rgba(242,181,49,.18)}
.passport__cap{color:#E9E6FF;padding:14px 8px 4px;font-size:.93rem;min-height:70px}
.passport__cap strong{color:var(--saf)}

/* train */
.train{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 26px;scroll-snap-type:x mandatory;margin-top:26px}
.wagon{flex:1 0 180px;scroll-snap-align:start;position:relative;background:var(--ink);color:#fff;border-radius:14px 14px 6px 6px;padding:16px 16px 22px;border:0;text-align:left;cursor:pointer;font:inherit;transition:transform .2s,background .2s}
.wagon::after{content:"";position:absolute;bottom:-12px;left:22px;width:22px;height:22px;border-radius:50%;background:#222;box-shadow:calc(100% + 0px) 0 0 #222;border:4px solid var(--saf)}
.wagon::before{content:"";position:absolute;bottom:-12px;right:22px;width:22px;height:22px;border-radius:50%;background:#222;border:4px solid var(--saf)}
.wagon small{font:600 .7rem/1 var(--fd);letter-spacing:.12em;color:var(--saf);text-transform:uppercase}
.wagon strong{display:block;font:700 1.9rem/1.1 var(--fd);margin:8px 0 2px}
.wagon span{font-size:.9rem;color:#C8C4F0}
.wagon.on{background:var(--em);transform:translateY(-6px)}
.wagon.on span{color:#E8FFF5}
.wagon.on small{color:#fff}
.wagon-info{background:var(--paper);border-left:6px solid var(--em);border-radius:var(--r-s);padding:16px 20px;margin-top:6px}
.calc{margin-top:30px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:22px;display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center}
.calc label{font-weight:600;display:block;margin-bottom:8px}
.calc input[type=range]{width:100%;accent-color:var(--em);height:30px}
.calc select{font:inherit;padding:10px;border-radius:10px;border:2px solid var(--line);background:#fff;width:100%;margin-bottom:14px}
.calc__out{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calc__out div{background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px}
.calc__out small{display:block;color:var(--saf);font-size:.75rem;font-weight:600}
.calc__out b{font:700 1.25rem/1.3 var(--fd)}

/* laps */
.laps{margin-top:24px;border-top:2px solid rgba(255,255,255,.18)}
.lap{display:grid;grid-template-columns:70px 1fr 70px;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;width:100%;text-align:left}
.lap__n{font:700 .8rem/1 var(--fd);color:var(--saf)}
.lap__bar{height:14px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.lap__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--em),#5DE0AF);border-radius:99px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.lap__p{font:700 1.1rem/1 var(--fd);text-align:right;color:#fff}
.lap.on{background:rgba(255,255,255,.06)}
.lap-info{margin-top:16px;min-height:52px;color:#E9E6FF}

/* lock */
.lock{display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--ink);border-radius:26px;padding:30px 20px;color:#fff;box-shadow:var(--shadow)}
.lock__shackle{width:120px;height:80px;border:14px solid #BFB8E8;border-bottom:0;border-radius:70px 70px 0 0;transition:transform .5s;transform-origin:right bottom}
.lock.open .lock__shackle{transform:translateY(-16px) rotate(-18deg)}
.lock__body{display:flex;gap:12px;background:#2E2B6E;padding:18px;border-radius:18px;margin-top:-18px}
.dial{width:78px;border-radius:12px;background:var(--paper);color:var(--ink);border:0;padding:12px 6px;cursor:pointer;font:inherit;text-align:center;transition:.25s}
.dial b{display:block;font:700 1.5rem/1 var(--fd)}
.dial span{font-size:.72rem;font-weight:600}
.dial.on{background:var(--em);color:#fff;transform:translateY(-4px)}
.lock__msg{text-align:center;min-height:84px;max-width:340px;font-size:.93rem;color:#D9D6FF}
.lock__msg strong{color:var(--saf);font:700 1.6rem/1.2 var(--fd);display:block}
.lock .btn{display:none}
.lock.open .btn{display:inline-flex}

/* ribbon roller */
.roller{background:var(--paper);border-radius:var(--r);padding:20px;border:2px solid var(--ink);margin-top:26px}
.roller__win{position:relative;overflow:hidden;border-radius:12px;background:var(--ink);height:110px}
.roller__win::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--saf);box-shadow:0 0 12px var(--saf)}
.roller__strip{display:flex;gap:8px;padding:12px 0;position:absolute;left:0;top:0;will-change:transform}
.prize{flex:0 0 100px;height:86px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 1.25rem/1 var(--fd);color:var(--ink);background:var(--em-l)}
.prize small{font:600 .68rem/1.4 var(--fb);color:var(--muted)}
.prize.c{background:#FCE7B4}
.prize.big{background:var(--saf)}
.roller__row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:14px}
.roller__res{font-weight:700;color:var(--ink)}
.fslist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fslist li{background:var(--paper);border-radius:12px;padding:14px 16px 14px 70px;position:relative;border:1px solid var(--line)}
.fslist li b.n{position:absolute;left:14px;top:14px;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--saf);font:700 .85rem/44px var(--fd);text-align:center}

/* tuner */
.tuner{background:#2E2B6E;border-radius:22px;padding:22px;margin-top:26px}
.tuner__scale{position:relative;display:grid;grid-template-columns:repeat(7,1fr);background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 12px) bottom/100% 14px no-repeat;padding-bottom:18px}
.tuner__scale button{background:none;border:0;color:#BFB8E8;font:700 .95rem/1 var(--fd);padding:14px 0;cursor:pointer}
.tuner__scale button.on{color:var(--saf)}
.tuner__needle{position:absolute;bottom:0;width:4px;height:44px;background:#FF5A3C;border-radius:2px;transition:left .45s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 10px #FF5A3C}
.tuner__screen{margin-top:18px;background:#0F0E2E;border-radius:14px;padding:18px 20px;font-family:var(--fb);color:#9EF5CF;min-height:120px;border:2px solid #45419a}
.tuner__screen h3{color:var(--saf);margin-bottom:.4em;font-size:1rem}
.tuner__screen p{margin:0;color:#D7F8E9}
.tuner input[type=range]{width:100%;accent-color:var(--saf);margin-top:14px}

/* coins */
.coins{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;height:250px;margin-top:26px;padding:0 4px;border-bottom:4px solid var(--ink)}
.coin{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column-reverse;align-items:center;gap:0;height:100%;justify-content:flex-start}
.coin i{display:block;width:100%;max-width:62px;height:14px;border-radius:50%/60%;margin-top:-6px;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 2px 0 rgba(0,0,0,.25)}
.coin em{font:700 .72rem/1 var(--fd);font-style:normal;color:var(--ink);margin-top:8px;order:-1;padding-top:8px}
.coin.on em{color:var(--em-d)}
.coin.on i{filter:brightness(1.15)}
.coin-info{margin-top:16px;background:var(--paper);border-radius:12px;padding:14px 18px;min-height:60px;border:1px solid var(--line)}

/* stamps (casino) */
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;margin-top:30px}
.pstamp{display:block;text-decoration:none;color:var(--ink);padding:9px;position:relative;background:radial-gradient(circle,transparent 5px,#fff 5.5px) -9px -9px/18px 18px;transition:transform .2s;filter:drop-shadow(0 4px 8px rgba(28,26,74,.18))}
  -webkit-mask:radial-gradient(circle 7px at 7px 7px,transparent 98%,#000) -7px -7px/18px 18px;mask:radial-gradient(circle 7px at 7px 7px,transparent 98%,#000) -7px -7px/18px 18px;transition:transform .2s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.pstamp:hover{transform:rotate(-2deg) translateY(-4px)}
.pstamp__in{background:#fff;border:2px solid var(--ink);padding:16px 14px 14px;min-height:190px;display:flex;flex-direction:column}
.pstamp__ico{font-size:2.1rem;line-height:1}
.pstamp h3{margin:10px 0 6px;font-size:1rem}
.pstamp p{font-size:.88rem;color:var(--muted);margin:0 0 10px;flex:1}
.pstamp__val{display:flex;justify-content:space-between;align-items:center;font:700 .74rem/1 var(--fd);color:var(--em-d)}
.pstamp__val span{background:var(--ink);color:var(--saf);padding:6px 9px;border-radius:6px}

/* sport cards */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.tcard{display:block;text-decoration:none;color:#fff;background:linear-gradient(160deg,var(--ink3),var(--ink) 70%);border-radius:18px;padding:6px;box-shadow:var(--shadow);transition:transform .2s}
.tcard:hover{transform:translateY(-5px) rotate(.6deg)}
.tcard__in{border:2px solid rgba(242,181,49,.6);border-radius:13px;padding:18px;min-height:220px;display:flex;flex-direction:column}
.tcard__hd{display:flex;justify-content:space-between;align-items:center}
.tcard__hd b{font:700 2rem/1 var(--fd)}
.tcard__hd span{font:600 .68rem/1 var(--fd);letter-spacing:.12em;color:var(--saf);text-transform:uppercase}
.tcard h3{color:#fff;margin:14px 0 6px}
.tcard p{font-size:.9rem;color:#C8C4F0;flex:1;margin:0 0 12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags i{font-style:normal;font-size:.72rem;font-weight:600;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.1)}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.feat{background:var(--paper);border-radius:14px;padding:18px 20px;border-top:5px solid var(--em)}
.feat:nth-child(2){border-color:var(--saf)}.feat:nth-child(3){border-color:var(--ink3)}.feat:nth-child(4){border-color:#A2361F}

/* form mock */
.form{display:grid;grid-template-columns:260px 1fr;gap:28px;margin-top:28px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s;align-content:start}
.steps button{width:100%;text-align:left;font:600 .95rem/1.3 var(--fb);background:var(--paper);border:2px solid transparent;border-radius:12px;padding:13px 14px 13px 52px;position:relative;cursor:pointer;color:var(--ink)}
.steps button::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:8px;background:var(--sand2);font:700 .85rem/30px var(--fd);text-align:center}
.steps button.on{border-color:var(--em);background:#fff}
.steps button.on::before{background:var(--em);color:#fff}
.steps button.done::before{content:"✓";background:var(--ink);color:var(--saf)}
.screen{background:#fff;border-radius:18px;border:2px solid var(--ink);overflow:hidden;box-shadow:var(--shadow)}
.screen__bar{background:var(--ink);padding:10px 14px;display:flex;gap:6px}
.screen__bar i{width:10px;height:10px;border-radius:50%;background:#6E69C9}
.screen__bar i:first-child{background:#FF5A3C}.screen__bar i:nth-child(2){background:var(--saf)}
.screen__body{padding:22px}
.fld{border:2px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:.9rem;color:var(--muted);display:flex;justify-content:space-between;transition:.3s}
.fld.fill{border-color:var(--em);color:var(--ink);background:#F2FBF7}
.fld.fill::after{content:"✓";color:var(--em);font-weight:700}
.screen__txt{margin-top:14px;font-size:.95rem;min-height:80px}

/* decision tree */
.tree{margin-top:28px;display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:start}
.tree__root{background:var(--ink);color:#fff;border-radius:16px;padding:20px}
.tree__root p{font:600 1.05rem/1.4 var(--fd);color:var(--saf);margin-bottom:14px}
.branch{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:10px;padding:12px 14px;cursor:pointer;font:500 .93rem/1.3 var(--fb);text-align:left}
.branch::after{content:"→";margin-left:auto;color:var(--saf)}
.branch.on{background:var(--em);border-color:var(--em)}
.leaf{background:var(--paper);border-radius:16px;padding:22px;border:2px dashed var(--em);position:relative;min-height:230px}
.leaf::before{content:"";position:absolute;left:-30px;top:40px;width:28px;border-top:2px dashed var(--em)}
.leaf ol{margin:0;padding-left:20px}
.leaf li{margin-bottom:6px}

/* app */
.seg{display:inline-flex;background:var(--sand2);border-radius:12px;padding:4px;margin:20px 0}
.seg button{border:0;background:none;padding:10px 18px;border-radius:9px;font:600 .9rem/1 var(--fd);cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff}
.app{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.astep{display:flex;gap:14px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:8px;cursor:pointer;font:inherit;color:inherit;align-items:flex-start}
.astep b{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--ink);font:700 .8rem/26px var(--fd);text-align:center}
.astep.done b{background:var(--em);border-color:var(--em);color:#fff}
.astep span{font-size:.94rem}
.home{background:linear-gradient(170deg,#3C38A0,#0F0E2E);border-radius:34px;padding:34px 18px 26px;border:8px solid #111;aspect-ratio:9/17;display:flex;flex-direction:column}
.home__time{color:#fff;text-align:center;font:600 2.2rem/1 var(--fd);margin-bottom:22px}
.home__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.home__grid i{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.14)}
.home__grid a{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.home__grid a img{width:100%;height:100%;border-radius:12px}
.home.ready .home__grid a{transform:scale(1)}
.home__lbl{color:#fff;font-size:.78rem;text-align:center;margin-top:auto;opacity:.8}
.progress{height:8px;background:var(--sand2);border-radius:99px;overflow:hidden;margin:6px 0 16px}
.progress i{display:block;height:100%;width:0;background:var(--em);transition:width .4s}

/* payments tags */
.tagrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:10px}
.ltag{position:relative;background:var(--paper);color:var(--text);border-radius:6px 16px 16px 6px;padding:18px 18px 16px 36px;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
.ltag::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--saf)}
.ltag h3{font-size:.98rem;margin:0 0 6px}
.ltag p{font-size:.87rem;margin:0;color:var(--muted)}
.ltag [data-mode]{display:none}
.pay-dep .ltag [data-mode=dep],.pay-wd .ltag [data-mode=wd]{display:block}
.sec--ink .seg{background:rgba(255,255,255,.1)}
.sec--ink .seg button{color:#fff}
.sec--ink .seg button.on{background:var(--saf);color:var(--ink)}

/* placard + quiz */
.placard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px;box-shadow:12px 12px 0 var(--ink)}
.placard small{font:600 .7rem/1 var(--fd);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.placard h3{font-size:1.2rem;margin:8px 0 12px}
.placard dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:14px 0 0;font-size:.92rem}
.placard dt{color:var(--muted)}.placard dd{margin:0;font-weight:600}
.quiz{background:var(--paper);border-radius:var(--r);padding:22px;border:2px solid var(--ink)}
.q{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.q div{display:flex;gap:6px;flex-shrink:0}
.q button{border:2px solid var(--ink);background:#fff;border-radius:8px;padding:6px 12px;font:600 .8rem/1 var(--fd);cursor:pointer}
.q button.on{background:var(--ink);color:#fff}
.quiz__res{margin-top:14px;font-weight:600;min-height:48px}
.hourglass{font-size:1.6rem;display:inline-block;transition:transform .6s}

/* report card */
.report{background:#FFFDF6;border:2px solid var(--ink);border-radius:6px;margin-top:26px;box-shadow:var(--shadow);overflow:hidden}
.report__hd{background:var(--ink);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;font:600 .8rem/1.3 var(--fd);letter-spacing:.08em}
.report__hd span{color:var(--saf)}
.rrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;color:inherit}
.rrow:hover{background:#F6EFDD}
.rrow b{font:600 1rem/1.3 var(--fb)}
.grade{width:46px;height:46px;border-radius:50%;border:2px solid var(--em);color:var(--em-d);font:700 1.4rem/42px 'Caveat',cursive;text-align:center;transform:rotate(-8deg)}
.rrow + .rtext{display:none;padding:0 20px 16px;font-size:.93rem;color:var(--muted);border-bottom:1px solid var(--line)}
.rrow.on + .rtext{display:block}
.report__ft{padding:14px 20px;font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center}

/* faq */
.ftabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px}
.ftabs button{border:2px solid var(--ink);background:transparent;border-radius:99px;padding:9px 16px;font:600 .85rem/1 var(--fd);cursor:pointer;color:var(--ink)}
.ftabs button.on{background:var(--ink);color:#fff}
.fgroup{display:none}.fgroup.on{display:block}
.fq{background:var(--paper);border-radius:14px;margin-bottom:10px;border:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;padding:16px 50px 16px 18px;font:600 1rem/1.4 var(--fb);color:var(--ink);position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:16px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:8px;background:var(--em-l);color:var(--em-d);font:700 1.2rem/30px var(--fd);text-align:center;transition:.2s}
.fq[open] summary::after{content:"–";background:var(--em);color:#fff}
.fq div{padding:0 18px 16px;font-size:.95rem}

/* footer */
.ftr{background:#0F0E2E;color:#A9A4DA;padding:48px 0 110px;font-size:.9rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.ftr a{color:#D9D6FF;text-decoration:none}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ftr h4{color:#fff;font-size:.9rem}
.age{display:inline-flex;width:44px;height:44px;border-radius:50%;border:2px solid #FF5A3C;color:#FF5A3C;align-items:center;justify-content:center;font:700 .9rem/1 var(--fd);margin-right:10px}

/* to top + sticky */
.totop{position:fixed;right:18px;bottom:22px;z-index:60;width:50px;height:50px;border-radius:14px;border:0;background:var(--saf);color:var(--ink);font-size:1.3rem;cursor:pointer;box-shadow:0 6px 0 var(--saf-d);opacity:0;pointer-events:none;transform:translateY(20px);transition:.25s}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.mcta{display:none}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* tap feedback */
.tap{animation:tap .3s}
@keyframes tap{50%{transform:scale(.96)}}

/* ===== responsive ===== */
@media (max-width:1080px){
  .nav a{padding:9px 7px;font-size:.82rem}
  .hdr__cta .btn--ghost{display:none}
}
@media (max-width:920px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .drawer{display:block;position:fixed;top:var(--hdr);left:0;right:0;bottom:0;background:var(--ink);z-index:49;padding:20px;transform:translateX(100%);transition:transform .3s;overflow-y:auto}
  .drawer.open{transform:none}
  .drawer a.dl{display:block;color:#fff;text-decoration:none;font:600 1.1rem/1 var(--fd);padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
  .drawer .btns{flex-direction:column}
  .drawer .btn{width:100%}
  .chips{display:flex;gap:8px;overflow-x:auto;position:sticky;top:var(--hdr);z-index:40;background:var(--sand);padding:10px 16px;border-bottom:1px solid var(--line);scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:0 0 auto;font:600 .8rem/1 var(--fb);padding:9px 13px;border-radius:99px;background:var(--paper);color:var(--ink);text-decoration:none;border:1px solid var(--line)}
  .chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .hero__grid,.grid2,.app,.tree,.calc{grid-template-columns:1fr}
  .tcards{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(5,1fr);gap:6px}
  .steps button{padding:44px 4px 10px;font-size:.72rem;text-align:center;min-height:100%}
  .steps button::before{left:50%;margin-left:-15px;top:8px;margin-top:0}
  .leaf::before{display:none}
  .app .home{max-width:260px;margin:0 auto}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .mcta{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:55;background:var(--ink);border-radius:16px;padding:10px 10px 10px 16px;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .35s;border:2px solid var(--saf)}
  .mcta.show{transform:none}
  .mcta p{margin:0;color:#fff;font-size:.82rem;line-height:1.3;flex:1}
  .mcta p b{color:var(--saf);display:block;font-family:var(--fd);font-size:.9rem}
  .mcta .btn{padding:12px 16px;font-size:.85rem;box-shadow:none}
  .mcta__x{background:none;border:0;color:#BFB8E8;font-size:1.3rem;width:32px;height:32px;cursor:pointer;flex-shrink:0}
  body.has-mcta .totop{bottom:96px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .sec{padding:52px 0}
  .hero{padding:32px 0 44px}
  .btns .btn{flex:1 1 auto}
  .ticket{transform:none;grid-template-columns:1fr 74px}
  .ticket::before,.ticket::after{right:63px}
  .stamp{right:88px}
  .validator{width:54px;height:54px}
  .passport__page{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px}
  .pst{font-size:.52rem}.pst b{font-size:.72rem}
  .tcards{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .coins{height:200px;gap:5px}
  .coin em{font-size:.6rem}
  .calc__out{grid-template-columns:1fr 1fr}
  .dial{width:68px}
  .q{flex-direction:column;align-items:flex-start}
  .tuner__scale button{font-size:.78rem}
  .ftr__grid{grid-template-columns:1fr}
  .logo img{height:32px}
  .lap{grid-template-columns:54px 1fr 54px}
}
.grid2>*,.hero__grid>*,.app>*,.tree>*,.calc>*,.form>*{min-width:0}
@media (max-width:920px){.drawer{visibility:hidden;transition:transform .3s,visibility 0s .3s}.drawer.open{visibility:visible;transition:transform .3s}}
.sec--ink .ltag h3{color:var(--ink)}
.lap__p{white-space:nowrap}
@media (max-width:600px){
 .stamps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .pstamp__in{padding:12px 10px;min-height:0}
 .pstamp h3{font-size:.86rem}
 .pstamp p{font-size:.78rem}
 .pstamp__val{flex-direction:column;align-items:flex-start;gap:6px;font-size:.66rem}
}

/* v3 fixes */
.hdr{position:sticky;top:0}
.calc__out{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc__out div{min-width:0}
.calc__out b{display:block;font-size:clamp(.95rem,3.6vw,1.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.calc{min-width:0}
.roller{position:relative;overflow:hidden}
.roller__pop{position:absolute;left:12px;right:12px;bottom:12px;background:var(--ink);color:#fff;border-radius:14px;padding:16px 16px 14px;box-shadow:0 14px 34px rgba(28,26,74,.45);border:2px solid var(--saf);transform:translateY(130%);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s;display:flex;flex-direction:column;gap:10px;z-index:2}
.roller__pop.show{transform:none;opacity:1}
.roller__pop p{margin:0;font-size:.9rem;color:#D9D6FF;padding-right:26px}
.roller__pop p b{display:block;color:var(--saf);font:700 1.05rem/1.3 var(--fd)}
.roller__pop .btn{align-self:flex-start}
.roller__x{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;background:none;color:#BFB8E8;font-size:1.1rem;cursor:pointer}
@media (max-width:600px){.roller__pop .btn{align-self:stretch}}
.roller__pop{position:relative;left:auto;right:auto;bottom:auto;margin-top:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;transform:translateY(12px);transition:max-height .45s ease,opacity .3s,transform .45s cubic-bezier(.2,1.4,.4,1),margin-top .3s,padding .3s}
.roller__pop.show{max-height:320px;margin-top:14px;padding-top:16px;padding-bottom:14px;border-width:2px}