/* SpinBetter CZ — theme "Olivín & Korál" */
:root{
  --bg:#141a15; --bg2:#1b231c; --band:#1f2a21; --card:#263227; --card2:#2e3b2f;
  --line:rgba(214,232,196,.13); --text:#eef2e6; --muted:#a8b59f;
  --coral:#ff7157; --coral2:#ff9a7a; --coral-d:#e2573e;
  --pist:#c7e59a; --sand:#f0d4a0; --ink:#10150f;
  --r:18px; --r-s:10px; --hdr:68px;
  --ff-h:"Space Grotesk",system-ui,sans-serif; --ff:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--ff);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(900px 500px at 85% -10%,rgba(255,113,87,.13),transparent 60%),radial-gradient(700px 500px at -10% 30%,rgba(199,229,154,.08),transparent 60%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--pist)}
h1,h2,h3{font-family:var(--ff-h);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.55rem,3.2vw,2.35rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--coral);color:var(--ink);padding:8px 12px;border-radius:8px}
.sub{color:var(--muted);max-width:760px;margin-bottom:1.6em}
.note{color:var(--muted);font-size:.97rem}
.small{font-size:.86rem;color:var(--muted);margin:10px 0 0}
.center{text-align:center;margin-top:18px}
.sec{padding:clamp(56px,8vw,96px) 0;position:relative}
.sec--band{background:var(--band);border-block:1px solid var(--line)}
.sec--band::after{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:repeating-linear-gradient(90deg,var(--coral) 0 26px,transparent 26px 40px);opacity:.35}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.split--rev>div:first-child{order:2}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1 var(--ff);text-decoration:none;border-radius:999px;padding:14px 24px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn--coral{background:var(--coral);color:var(--ink);box-shadow:0 8px 24px -8px rgba(255,113,87,.7)}
.btn--coral:hover{background:var(--coral2)}
.btn--pist{background:var(--pist);color:var(--ink)}
.btn--line{border-color:var(--pist);color:var(--pist);background:transparent}
.btn--line:hover{background:rgba(199,229,154,.1)}
.btn--ghost{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.03)}
.btn--sm{padding:10px 16px;font-size:.92rem}
.btn--lg{padding:17px 30px;font-size:1.06rem}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,26,21,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top__in{height:100%;width:min(1240px,100% - 32px);margin:auto;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:140px;height:auto}
.flag{border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.menu{display:flex;gap:4px;margin-left:auto}
.menu>a{color:var(--text);text-decoration:none;font-weight:500;font-size:.95rem;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.menu>a:hover{background:rgba(255,255,255,.06)}
.menu>a.is-active{background:var(--pist);color:var(--ink)}
.menu__acts{display:none}
.top__acts{display:flex;gap:8px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{padding:calc(var(--hdr) + clamp(36px,6vw,80px)) 0 clamp(48px,7vw,90px)}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--pist);border:1px solid var(--line);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,113,87,.2)}
.lead{font-size:1.15rem;color:#d7dfcd;max-width:640px}
.lead strong{color:var(--sand)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dice-box{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.scene{width:190px;height:190px;perspective:800px;margin:20px 0 34px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-32deg);transition:transform 1.1s cubic-bezier(.2,.8,.2,1.1)}
.face{position:absolute;inset:0;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#fff6ea,#f0d4a0);color:var(--ink);border:2px solid rgba(0,0,0,.08);box-shadow:inset 0 0 30px rgba(0,0,0,.12);backface-visibility:hidden}
.face b{font:700 1.7rem/1 var(--ff-h)}
.face small{font-size:.82rem;margin-top:6px;color:#5a4f3b}
.face.f2,.face.f5{background:linear-gradient(145deg,#ff9a7a,#ff7157)}
.face.f2 small,.face.f5 small{color:#3b1a12}
.face.f3,.face.f6{background:linear-gradient(145deg,#e0f3c3,#c7e59a)}
.face.f3 small,.face.f6 small{color:#34431f}
.f1{transform:translateZ(95px)}.f2{transform:rotateY(90deg) translateZ(95px)}.f3{transform:rotateY(180deg) translateZ(95px)}
.f4{transform:rotateY(-90deg) translateZ(95px)}.f5{transform:rotateX(90deg) translateZ(95px)}.f6{transform:rotateX(-90deg) translateZ(95px)}
.dice-cap{color:var(--muted);font-size:.95rem;max-width:300px;min-height:3em;margin:0}

/* key tags */
.keys-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px;margin-bottom:28px;padding-top:14px;border-top:3px solid #6b7a63;position:relative}
.ktag{position:relative;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:14px 14px 14px 40px;padding:26px 18px 18px;text-align:left;font:inherit;cursor:pointer;transform-origin:50% -14px;transition:transform .5s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.ktag:nth-child(odd){transform:rotate(-2deg)}.ktag:nth-child(even){transform:rotate(1.6deg)}
.ktag:hover,.ktag.swing{animation:swing 1s ease}
.ktag.is-on{border-color:var(--coral)}
.ktag i{position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px #6b7a63}
.ktag i::before{content:"";position:absolute;left:5px;bottom:12px;width:2px;height:16px;background:#6b7a63}
.ktag span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ktag b{display:block;font:600 1.05rem/1.3 var(--ff-h);margin-top:4px;word-break:break-word}
@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(7deg)}50%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}

/* trail */
.trail{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.trail::before{content:"";position:absolute;left:4%;right:4%;top:37px;border-top:3px dashed rgba(240,212,160,.35)}
.mark{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:transform .2s,border-color .2s}
.mark:hover,.mark.is-on{transform:translateY(-4px);border-color:var(--sand)}
.sign{display:block;width:62px;height:40px;margin-bottom:14px;border-radius:4px;background:linear-gradient(#fff 0 33%,var(--c) 33% 67%,#fff 67%);box-shadow:0 4px 12px rgba(0,0,0,.35);position:relative;z-index:1}
.m-red{--c:#d7261e}.m-blue{--c:#1e5bd7}.m-green{--c:#1f9a3b}.m-yellow{--c:#f2c200}
.mark h3{margin-bottom:4px}.mark p{margin:0}.mark p b{color:var(--sand)}
.mark small{color:var(--muted)}
.calc{display:grid;grid-template-columns:1fr 1.2fr auto;gap:22px;align-items:end;background:var(--card2);border-radius:var(--r);padding:22px;margin-bottom:26px;border:1px solid var(--line)}
.calc__in{display:grid;gap:6px}
.calc label{font-size:.85rem;color:var(--muted)}
.calc select,.calc input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%}
.calc__out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc__out div{background:var(--bg);border-radius:12px;padding:12px}
.calc__out span{display:block;font-size:.78rem;color:var(--muted)}
.calc__out b{font:700 1.2rem var(--ff-h);color:var(--pist)}

/* dictionary */
.dict{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1px solid var(--line)}
.dict__e{padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}
.dict__e:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--line)}
.dict dt{font:700 1.25rem var(--ff-h);color:var(--sand);margin-bottom:6px}
.dict dt i{font:italic 400 .9rem var(--ff);color:var(--muted)}

.dict dd{margin:0;color:#d2dac8;font-size:.97rem}

/* sport bars */
.sbars{background:linear-gradient(#232d24,#1a211b);border:1px solid var(--line);border-radius:22px;padding:22px}
.sbars__t{font:600 1rem var(--ff-h);color:var(--sand);margin-bottom:14px}
.sbars__row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;margin-bottom:18px}
.sbar{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sbar__kc{font:700 .95rem var(--ff-h);color:var(--pist);white-space:nowrap}
.sbar__col{position:relative;width:100%;max-width:56px;height:150px;border-radius:10px 10px 4px 4px;background:#0d110d;overflow:hidden}
.sbar__col i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--coral),var(--pist));border-radius:10px 10px 0 0;transition:height .35s}
.sbar.is-max .sbar__col i{background:linear-gradient(var(--sand),var(--coral))}
.sbar b{font:700 1rem var(--ff-h)}.sbar small{color:var(--muted);font-size:.8rem}
.sbars__lbl{display:block;font-size:.95rem;margin-bottom:6px}
.sbars__lbl output{font:700 1.05rem var(--ff-h);color:var(--coral)}
.sbars input[type=range]{width:100%;accent-color:var(--coral);height:30px}
.sbars__sum{margin:10px 0 16px}.sbars__sum b{font:700 1.3rem var(--ff-h);color:var(--pist)}.sbars__sum small{color:var(--muted)}
.sbars__cta{width:100%}

/* gift */
.gift-wrap{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;margin-bottom:30px}
.gift{position:relative;width:200px;height:200px;border:0;background:none;cursor:pointer;justify-self:center}
.gift__box{position:absolute;left:20px;right:20px;bottom:0;height:120px;border-radius:10px;background:linear-gradient(90deg,transparent 42%,var(--pist) 42% 58%,transparent 58%),linear-gradient(var(--coral),var(--coral-d))}
.gift__lid{position:absolute;left:8px;right:8px;top:48px;height:38px;border-radius:8px;z-index:2;background:linear-gradient(90deg,transparent 42%,var(--pist) 42% 58%,transparent 58%),linear-gradient(#ff8b72,var(--coral));transition:transform .6s cubic-bezier(.3,1.5,.5,1);transform-origin:10% 100%}
.gift__lid::before,.gift__lid::after{content:"";position:absolute;top:-30px;width:40px;height:34px;border:8px solid var(--pist);border-radius:50% 50% 0 50%}
.gift__lid::before{left:calc(50% - 44px);transform:rotate(-10deg)}
.gift__lid::after{left:calc(50% + 4px);transform:rotate(100deg)}
.gift__lbl{position:absolute;left:0;right:0;bottom:44px;z-index:3;font:700 1rem var(--ff-h);color:var(--ink)}
.gift[aria-expanded="true"] .gift__lid{transform:translateY(-30px) rotate(-24deg)}
.gift[aria-expanded="true"] .gift__lbl{opacity:0}
.gift:not([aria-expanded="true"]){animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}
.gift__in{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gcard{background:var(--card);border:1px dashed rgba(199,229,154,.35);border-radius:var(--r);padding:18px;opacity:.5;filter:blur(2px);transform:translateY(10px);transition:opacity .5s,filter .5s,transform .5s}
.gift-wrap.is-open .gcard{opacity:1;filter:none;transform:none}
.gift-wrap.is-open .gcard:nth-child(2){transition-delay:.1s}.gift-wrap.is-open .gcard:nth-child(3){transition-delay:.2s}.gift-wrap.is-open .gcard:nth-child(4){transition-delay:.3s}
.gcard h3{color:var(--pist);font-size:1.05rem}.gcard p{margin:0;font-size:.95rem}
.codes{overflow-x:auto;margin-bottom:22px}
table{width:100%;border-collapse:collapse;font-size:.96rem}
caption{text-align:left;font:600 1.05rem var(--ff-h);margin-bottom:10px;color:var(--sand)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* drawers */
.cabinet{background:#3a2c20;border-radius:16px;padding:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8),inset 0 0 0 3px #4b3a2b}
.drawer{background:linear-gradient(#5b4532,#4b3829);border-radius:8px;margin-bottom:8px;overflow:hidden;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.drawer:last-child{margin-bottom:0}
.drawer button{width:100%;display:flex;align-items:center;gap:14px;padding:15px 16px;background:none;border:0;color:#fbe9d2;font:600 1rem var(--ff);text-align:left;cursor:pointer}
.handle{flex-shrink:0;width:36px;height:10px;border-radius:6px;background:linear-gradient(#e6c58f,#b08a50);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.drawer__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}
.drawer__body>p{overflow:hidden;margin:0;padding:0 16px;background:#f3e6cf;color:#2b2217;font-size:.95rem}
.drawer.is-open .drawer__body{grid-template-rows:1fr}
.drawer.is-open .drawer__body>p{padding:14px 16px}
.drawer.is-open button{background:rgba(255,255,255,.05)}

/* battery */
.battery-wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.battery{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:8px;border:3px solid #cfd8c2;border-radius:14px;width:min(620px,100%);flex:1 1 420px}
.battery__tip{position:absolute;right:-14px;top:50%;width:10px;height:36%;transform:translateY(-50%);background:#cfd8c2;border-radius:0 5px 5px 0}
.cell{height:86px;border:0;border-radius:6px;background:#263027;color:var(--muted);font:700 1rem var(--ff-h);cursor:pointer;transition:background .25s,color .25s}
.cell.fill{background:linear-gradient(var(--pist),#9ccc5e);color:var(--ink)}
.cell.fill.peak{background:linear-gradient(var(--coral2),var(--coral));}
.battery__out{flex:1 1 220px;display:flex;flex-direction:column}
.battery__out b{font:700 1.4rem var(--ff-h);color:var(--sand)}
.battery__out span{font-size:1.1rem}

/* chips */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-bottom:28px}
.chip{--k:var(--coral);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:var(--text);position:relative;
  background:radial-gradient(circle,var(--card) 0 56%,transparent 57%),repeating-conic-gradient(var(--k) 0 15deg,#f5efe3 15deg 30deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.8);transition:transform .35s}
.chip::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2px dashed rgba(255,255,255,.18)}
.chip:hover{transform:rotate(12deg) translateY(-4px)}
.chip:active{transform:scale(.94)}
.chip__g{font:700 1.3rem var(--ff-h);color:var(--k)}
.chip b{font-size:.95rem;line-height:1.2;max-width:70%}
.chip small{font-size:.72rem;color:var(--muted);max-width:66%;line-height:1.25}
.c2,.c6,.c10{--k:var(--pist)}.c3,.c7,.c11{--k:var(--sand)}.c4,.c8,.c12{--k:#7fc8c0}

/* balls */
.balls{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin-bottom:10px}
.balls::-webkit-scrollbar{display:none}
.ball{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text);font:600 .98rem var(--ff);cursor:pointer}
.ball::before{content:"";width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cfd5c8 60%,#8d9686);box-shadow:inset -3px -3px 6px rgba(0,0,0,.3)}
.ball[aria-selected="true"]{background:var(--pist);color:var(--ink);border-color:var(--pist)}
.ball[aria-selected="true"]::before{animation:roll .6s ease}
@keyframes roll{from{transform:translateX(-20px) rotate(-200deg)}to{transform:none}}
.bpanel{display:block;text-decoration:none;color:var(--text);background:linear-gradient(120deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:26px;position:relative;overflow:hidden;transition:border-color .2s}
.bpanel::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;border:26px solid rgba(199,229,154,.06)}
.bpanel:hover{border-color:var(--coral)}
.bpanel p{max-width:720px}
.go{font-weight:600;color:var(--coral)}

/* recipe */
.recipe{display:grid;grid-template-columns:.8fr 1.2fr;background:#f6eedd;color:#2a241a;border-radius:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);margin-bottom:26px;position:relative;background-image:repeating-linear-gradient(transparent 0 31px,rgba(80,120,160,.18) 31px 32px)}
.recipe::before{content:"";position:absolute;top:0;bottom:0;left:calc(40% - 1px);border-left:2px solid rgba(215,38,30,.35)}
.recipe h3{color:#b3412c}
.recipe__ing{padding:28px}
.recipe__ing ul{margin:0;padding-left:1.1em;line-height:2}
.recipe__steps{margin:0;padding:28px 28px 28px 3em;line-height:1.75}
.recipe__steps li{margin-bottom:8px}.recipe__steps li::marker{font:700 1.1rem var(--ff-h);color:#b3412c}

/* keys */
.keyring{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;margin-bottom:24px}
.keys{display:flex;flex-direction:column;gap:12px;position:relative;padding-left:26px}
.keys::before{content:"";position:absolute;left:0;top:-8px;width:40px;height:40px;border-radius:50%;border:4px solid #b9bfb1}
.key{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(#e7d3a4,#c4a769);color:#2a2317;border:0;padding:10px 34px 10px 10px;font:700 .98rem var(--ff-h);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 40%,92% 40%,92% 60%,86% 60%,86% 75%,100% 75%,100% 100%,0 100%);border-radius:6px 0 0 6px;transition:transform .25s;min-width:190px}
.key .bow{width:24px;height:24px;border-radius:50%;background:#2a2317;box-shadow:inset 0 0 0 6px #d3bb83}
.key[aria-selected="true"]{transform:translateX(18px);background:linear-gradient(var(--coral2),var(--coral))}
.lock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative}
.lock::before{content:"";position:absolute;left:-10px;top:30px;width:18px;height:28px;background:var(--bg);border-radius:9px 9px 3px 3px;box-shadow:0 0 0 2px var(--line)}

/* phone */
.os{display:inline-flex;background:var(--card);border-radius:999px;padding:4px;margin:6px 0 12px}
.os__b{border:0;background:none;color:var(--text);font:600 .95rem var(--ff);padding:9px 18px;border-radius:999px;cursor:pointer}
.os__b[aria-selected="true"]{background:var(--pist);color:var(--ink)}
.os__hint{font-size:.9rem;color:var(--muted)}
.os__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.steps-list{padding-left:1.3em;margin:0}
.steps-list li{margin-bottom:6px;padding:4px 8px;border-radius:8px;transition:background .25s}
.steps-list li.is-now{background:rgba(255,113,87,.14)}
.phone{width:290px;height:580px;justify-self:center;border-radius:44px;background:#0b0e0b;padding:14px;box-shadow:0 0 0 2px #3c463b,0 30px 60px -20px rgba(0,0,0,.9);position:relative}
.phone__notch{position:absolute;top:22px;left:50%;width:90px;height:24px;margin-left:-45px;background:#000;border-radius:14px;z-index:2}
.phone__scr{height:100%;border-radius:32px;overflow:hidden;background:url(/assets/img/logo-icon.png) center 78%/90px no-repeat,linear-gradient(160deg,#2f4a3a,#1a2a22 50%,#3b2a28);position:relative;padding:54px 12px 12px}
.phone__bar{position:absolute;top:18px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:.72rem;font-weight:600}
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.notes li{background:rgba(245,245,238,.92);color:#1b1f1a;border-radius:16px;padding:10px 12px;font-size:.82rem;line-height:1.35;animation:drop .45s cubic-bezier(.3,1.4,.5,1)}
.notes li b{display:block;font-size:.72rem;color:#6b6b6b;font-weight:600;margin-bottom:2px}
.notes li:last-child{box-shadow:0 0 0 2px var(--coral)}
@keyframes drop{from{transform:translateY(-30px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.home{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:10px 6px;animation:drop .5s}
.home span{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.14)}
.home img{width:100%;border-radius:14px;box-shadow:0 0 0 3px var(--coral);animation:pop 1s ease 2}
.home p{grid-column:3;margin:-10px 0 0;font-size:.7rem;text-align:center}
@keyframes pop{50%{transform:scale(1.15)}}

/* ranges */
.ranges{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.rng{display:grid;grid-template-columns:170px 1fr 170px;align-items:center;gap:16px;text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;transition:background .2s}
.rng:hover{background:rgba(255,255,255,.04)}
.rng__n{font-weight:600}
.rng__t{position:relative;height:10px;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 33.33%)}
.rng__t i{position:absolute;top:0;bottom:0;left:var(--a);right:calc(100% - var(--b));border-radius:6px;background:linear-gradient(90deg,var(--pist),var(--coral))}
.rng__t i::before,.rng__t i::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--text);border:3px solid var(--bg2)}
.rng__t i::before{left:-8px}.rng__t i::after{right:-8px}
.rng--open .rng__t i{background:linear-gradient(90deg,var(--pist),transparent)}
.rng--open .rng__t i::after{display:none}
.rng__v{font-family:var(--ff-h);font-weight:600;color:var(--sand);text-align:right;white-space:nowrap}
.axis{display:grid;grid-template-columns:170px 1fr 150px;gap:16px;padding:0 12px;font-size:.78rem;color:var(--muted)}
.axis{display:flex;justify-content:space-between;padding-left:198px;padding-right:198px}
.payout{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.payout div{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.payout b{display:block;font:700 1.6rem var(--ff-h);color:var(--pist)}
.payout span{color:var(--muted);font-size:.92rem}

/* badge */
.badge{display:flex;flex-direction:column;align-items:center}
.badge__strap{width:60px;height:110px;background:repeating-linear-gradient(45deg,var(--coral) 0 10px,var(--coral-d) 10px 20px);clip-path:polygon(0 0,100% 0,65% 100%,35% 100%)}
.badge__card{margin-top:-6px;width:min(320px,100%);background:#f7f4ec;color:#1d231c;border-radius:18px;padding:30px 24px;text-align:center;box-shadow:0 30px 50px -20px rgba(0,0,0,.8);position:relative;animation:sway 5s ease-in-out infinite;transform-origin:50% -100px}
.badge__card::before{content:"";position:absolute;top:12px;left:50%;width:50px;height:8px;margin-left:-25px;border-radius:4px;background:#cfc8b6}
.badge__card img{margin:8px auto 12px;border-radius:14px}
.badge__role{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#6d6a5c;margin-bottom:4px}
.badge__card b{display:block;font:700 1.35rem var(--ff-h);margin-bottom:10px}
.badge__card p:last-child{margin:0;font-size:.92rem}
@keyframes sway{50%{transform:rotate(1.5deg)}}
.budget{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.budget label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:8px}
.budget input[type=range]{width:100%;accent-color:var(--coral);height:28px}
.budget__out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.budget__out div{background:var(--bg);border-radius:12px;padding:12px}
.budget__out b{display:block;font:700 1.15rem var(--ff-h);color:var(--pist)}
.budget__out span{font-size:.78rem;color:var(--muted)}

/* faq */
.faq{display:grid;gap:22px}
.faq__pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid var(--line);background:var(--card);color:var(--text);font:500 .95rem var(--ff);padding:10px 16px;border-radius:999px;cursor:pointer;text-align:left;transition:background .2s,transform .2s}
.pill:hover{transform:translateY(-2px)}
.pill[aria-selected="true"]{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.faq__card{background:#f7f4ec;color:#1d231c;border-radius:var(--r);padding:28px;position:relative;min-height:170px}
.faq__card::before{content:"?";position:absolute;right:22px;top:6px;font:700 5rem/1 var(--ff-h);color:rgba(255,113,87,.25)}
.faq__item h3{color:#b3412c;padding-right:50px}
.faq__item p{margin:0}
.faq__item[hidden]{display:none}
.js .faq__item:not(.is-on){display:none}
.faq__item.is-on{animation:drop .35s}
html:not(.js) .faq__item{margin-bottom:18px}

/* final + footer */
.final{padding:56px 0;background:linear-gradient(100deg,var(--coral),#ff9a6e);color:var(--ink)}
.final__in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.final p{font:700 clamp(1.2rem,2.4vw,1.7rem) var(--ff-h);margin:0}
.final .btn--coral{background:var(--ink);color:var(--text);box-shadow:none}
.foot{padding:50px 0 110px;background:#0e130f;font-size:.93rem;color:var(--muted)}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.foot img{width:140px;margin-bottom:14px}
.foot h3{color:var(--text);font-size:1rem}
.foot a{color:var(--muted)}
.foot__bot{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;align-items:center;gap:12px}
.age{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--coral);color:var(--coral);font-weight:700}

/* sticky, totop, modal */
.sticky{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:none;align-items:center;gap:10px;background:rgba(31,42,33,.97);border:1px solid rgba(255,113,87,.5);border-radius:18px;padding:10px 12px;box-shadow:0 14px 30px -10px rgba(0,0,0,.9);transform:translateY(140%);transition:transform .35s}
.sticky.show{transform:none}
.sticky img{border-radius:10px}
.sticky p{margin:0;flex:1;line-height:1.2}.sticky p b{display:block;font-family:var(--ff-h);color:var(--sand)}.sticky p span{font-size:.8rem;color:var(--muted)}
.sticky__x{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--text);font-size:1.3rem;cursor:pointer;flex-shrink:0}
.totop{position:fixed;right:18px;bottom:22px;z-index:61;width:50px;height:50px;border-radius:50%;border:0;background:var(--pist);color:var(--ink);font:700 1.3rem var(--ff-h);cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.8);opacity:0;pointer-events:none;transform:translateY(20px);transition:.3s}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.modal{position:fixed;inset:0;z-index:90;background:rgba(8,11,8,.72);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__box{position:relative;background:var(--band);border:1px solid var(--coral);border-radius:24px;padding:34px 28px;max-width:420px;text-align:center;animation:drop .4s}
.modal__k{color:var(--pist);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.modal__x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--text);font-size:1.4rem;cursor:pointer}

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

/* responsive */
@media (max-width:1080px){
  .top__acts{display:none}
  .burger{display:flex}
  .menu{position:fixed;top:var(--hdr);left:0;right:0;bottom:0;flex-direction:column;gap:4px;padding:20px 16px 40px;background:var(--bg);overflow-y:auto;transform:translateX(100%);transition:transform .3s;margin:0}
  .menu.open{transform:none}
  .menu>a{font-size:1.15rem;padding:14px 16px;border-radius:12px;border-bottom:1px solid var(--line)}
  .menu__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .keys-row{grid-template-columns:repeat(2,1fr)}
  .trail{grid-template-columns:repeat(2,1fr)}.trail::before{display:none}
  .calc{grid-template-columns:1fr}
  .dict{grid-template-columns:repeat(2,1fr)}
  .dict__e:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .dict__e:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
}
@media (max-width:860px){
  body{font-size:16px}
  .hero__grid,.split,.gift-wrap,.keyring{grid-template-columns:1fr}
  .split--rev>div:first-child{order:0}
  .hero__txt{text-align:left}
  .dice-box{order:2}
  .recipe{grid-template-columns:1fr}.recipe::before{display:none}
  .recipe__ing{border-bottom:2px solid rgba(215,38,30,.35)}
  .keys{flex-direction:row;flex-wrap:wrap;padding-left:0}
  .keys::before{display:none}
  .key{min-width:0;flex:1 1 45%;padding-right:26px}
  .key[aria-selected="true"]{transform:translateY(-4px)}
  .lock::before{display:none}
  .rng{grid-template-columns:1fr auto;gap:6px 10px}
  .rng__t{grid-column:1/-1;grid-row:2}
  .axis{padding:0 12px}
  .foot__grid{grid-template-columns:1fr}
  .sticky{display:flex}
  .totop{bottom:92px;right:14px;width:46px;height:46px}
  .sticky[hidden]{display:none}
}
@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .brand img{width:118px}
  .hero__cta .btn{flex:1 1 100%}
  .scene{width:160px;height:160px}
  .f1{transform:translateZ(80px)}.f2{transform:rotateY(90deg) translateZ(80px)}.f3{transform:rotateY(180deg) translateZ(80px)}
  .f4{transform:rotateY(-90deg) translateZ(80px)}.f5{transform:rotateX(90deg) translateZ(80px)}.f6{transform:rotateX(-90deg) translateZ(80px)}
  .face b{font-size:1.4rem}
  .keys-row{gap:22px 12px}
  .ktag{padding:24px 12px 14px}.ktag b{font-size:.95rem}
  .trail{grid-template-columns:1fr}
  .mark{display:flex;gap:14px;align-items:center}.sign{margin:0;flex-shrink:0}
  .calc__out{grid-template-columns:1fr 1fr 1fr}.calc__out b{font-size:1rem}
  .dict{grid-template-columns:1fr}
  .dict__e,.dict__e:nth-child(even){padding-left:0;border-left:0}
  .sbars{padding:16px}.sbars__row{gap:6px}.sbar__kc{font-size:.72rem}.sbar b{font-size:.85rem}.sbar small{font-size:.7rem}.sbar__col{height:120px}
  .gift__in{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr);gap:12px}
  .chip b{font-size:.88rem}
  caption{display:block;width:100%}
  .ktag b{overflow-wrap:anywhere}
  .ktag:last-child b{font-size:.82rem}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 0}
  td{border:0;padding:6px 14px;display:flex;justify-content:space-between;gap:12px}
  td::before{content:attr(data-l);color:var(--muted);font-size:.85rem}
  td{text-align:right}
  .battery{grid-template-columns:repeat(4,1fr);flex-basis:100%}
  .battery__tip{display:none}
  .cell{height:56px}
  .payout,.budget__out{grid-template-columns:1fr}
  .phone{width:260px;height:520px}
  .final__in{justify-content:center;text-align:center}
  .final .btn{width:100%}
  .faq__card{padding:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
[hidden]{display:none!important}
@media (max-width:860px){
  #aplikace .split{display:flex;flex-direction:column;align-items:stretch;gap:0}
  #aplikace .split>div:first-child{display:contents}
  #aplikace .split>div:first-child>*{order:1}
  #aplikace .split>div>.os__hint{order:2}
  #aplikace .split>.phone{order:3;margin:6px auto 20px;align-self:center}
  #aplikace .split>div>.steps-list{order:5;margin-top:18px}
  #aplikace .split>div>.os__acts{order:4;margin-top:0}
}