/* Žele Polje — dashboard oko table 7×7. Paleta: malina, limeta, nebo + mastilo. */
:root{
  --ink:#1E1537;--ink2:#4A3F6B;--paper:#F3F9FF;--white:#fff;
  --rasp:#E8336D;--raspd:#C21D55;--raspl:#FFE0EA;
  --lime:#A8E10C;--limel:#EEF9C8;--limed:#5E8500;
  --sky:#7FD1FF;--skyl:#DDF2FF;--skyd:#2B8DC8;
  --line:rgba(30,21,55,.12);--r:20px;--sh:5px 5px 0 var(--ink);
  --fd:'Titan One',system-ui,sans-serif;--ft:'Lexend',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:400 17px/1.68 var(--ft);color:var(--ink);background:var(--paper);
  background-image:linear-gradient(rgba(43,141,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(43,141,200,.07) 1px,transparent 1px);background-size:56px 56px}
img{max-width:100%;height:auto;display:block}
a{color:var(--raspd);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--rasp);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:.2px}
h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,2.35rem)}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:50}
.skip:focus{left:12px}
.fine{font-size:.82rem;line-height:1.5;color:var(--ink2);margin:.6em 0 0}
.coord{display:inline-grid;place-items:center;min-width:2.3em;height:1.9em;padding:0 .45em;border-radius:9px;background:var(--ink);color:var(--lime);font:400 .82rem/1 var(--fd);letter-spacing:.5px;vertical-align:middle}
.coord--dk{background:var(--lime);color:var(--ink)}
.i{width:1.1em;height:1.1em;flex:none}

/* dugmad */
.b{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.55em 1.1em;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:600 .98rem/1.2 var(--ft);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.b:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.b--rasp{background:var(--rasp);color:#fff}.b--rasp:hover{color:#fff}
.b--lime{background:var(--lime)}
.b--ghost{background:transparent;box-shadow:none}
.b--ghost-dk{background:transparent;color:#fff;border-color:#fff;box-shadow:none}.b--ghost-dk:hover{color:var(--lime);border-color:var(--lime);box-shadow:none}
.b--full{width:100%}
.b[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:1px 1px 0 var(--ink)}
.b[aria-pressed="true"]{background:var(--ink);color:var(--lime)}

/* zaglavlje */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.top-in{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink);text-decoration:none;font:400 1.35rem/1 var(--fd)}
.logo{width:34px;height:34px;flex:none}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:.45em .75em;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.94rem;white-space:nowrap}
.nav a:hover{background:var(--skyl)}
.nav a[aria-current="page"]{background:var(--lime);font-weight:700}
.age{display:inline-grid;place-items:center;min-width:44px;height:30px;border-radius:999px;background:var(--rasp);color:#fff;font:400 .85rem/1 var(--fd)}
.nav-tg{display:none}

/* hero */
.hero{padding:34px 0 8px}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:start}
.hero-bd{position:sticky;top:86px}
/* bilbord sa artom igre: kartica sa debelim okvirom, tekst na svetloj zavesi levo */
.logo-art{border-radius:10px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.bill{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(440px,52vw,600px);margin-bottom:34px;border:2px solid var(--ink);border-radius:30px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;background:var(--skyl);padding:0}
.bill-art{position:absolute;inset:0;z-index:-1}
.bill-art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.bill-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,249,255,.97) 0,rgba(243,249,255,.92) 30%,rgba(243,249,255,.55) 46%,rgba(243,249,255,0) 60%)}
.bill-txt{position:relative;max-width:560px;padding:clamp(28px,4vw,52px)}
.bill-logo{display:block;width:min(480px,100%);height:auto;margin:0 0 18px -4px;filter:drop-shadow(3px 4px 0 rgba(30,21,55,.55))}
.bill h1{font-size:clamp(2rem,1.1rem + 2.6vw,3.1rem)}
@media (prefers-reduced-motion:no-preference){.bill-logo{animation:bill-in .7s cubic-bezier(.2,.8,.25,1.25) both}}
@keyframes bill-in{from{opacity:0;transform:translateY(12px) rotate(-2deg)}to{opacity:1;transform:none}}
.kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600;font-size:.88rem;color:var(--ink2);margin:0 0 14px}
.hero h1,.phead h1{font-size:clamp(2.05rem,1.15rem + 3.3vw,3.55rem);line-height:1.03;margin-bottom:.42em}
.nm{color:var(--rasp);-webkit-text-stroke:0}
.lead p{font-size:1.06rem}
.lead p:first-child{font-size:1.14rem;font-weight:500}
.lead--more p:first-child{font-size:1.06rem;font-weight:400}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* tabla */
.bd{position:relative;background:linear-gradient(165deg,#CDEEFF 0%,var(--sky) 55%,#5DBDF2 100%);border:2px solid var(--ink);border-radius:28px;padding:16px 16px 14px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.bd::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:55%;background:radial-gradient(ellipse at 50% 0,rgba(255,224,234,.9),transparent 70%);pointer-events:none}
.bd-hud{position:relative;display:flex;gap:10px;align-items:flex-start;min-height:3.1em;margin-bottom:10px}
.bd-mode{flex:none;background:var(--ink);color:var(--lime);border-radius:999px;padding:.32em .8em;font:600 .78rem/1.3 var(--ft)}
.bd-log{font-size:.86rem;line-height:1.4;font-weight:500}
.bd-stage{position:relative;perspective:1100px;padding:6px 4px 16px}
.bd-tilt{display:grid;grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto 18px;gap:4px 6px;transform:rotateX(var(--rx,10deg)) rotateY(var(--ry,-6deg));transform-style:preserve-3d;will-change:transform}
.bd-rows{display:grid;grid-template-rows:repeat(7,1fr);align-items:center;font:600 .7rem/1 var(--ft);color:var(--ink2);text-align:center;padding:10px 0}
.bd-cols{grid-column:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font:600 .7rem/1 var(--ft);color:var(--ink2);text-align:center;padding:0 10px}
.bd-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:10px;border-radius:18px;background:rgba(255,255,255,.38);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 2px 0 #49A9DE,0 4px 0 #3F9ED6,0 6px 0 #3593CC,0 8px 0 #2D88C1,0 10px 0 #277DB5,0 22px 26px rgba(30,21,55,.32)}
.cell{position:relative;aspect-ratio:1;border:0;padding:0;margin:0;border-radius:24%;background:rgba(255,255,255,.62);cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 -3px 0 rgba(30,21,55,.08);transition:background-color .25s}
.cell:hover{background:#fff}
.cell .sym{width:80%;height:80%;filter:drop-shadow(0 2px 0 rgba(30,21,55,.22));transition:transform .36s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.cell.is-mark{background:var(--limel);box-shadow:inset 0 0 0 2px var(--lime),inset 0 -3px 0 rgba(94,133,0,.25)}
.cell .m{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%) scale(.4);opacity:0;padding:1px 5px;border-radius:7px;background:var(--lime);color:var(--ink);font:400 clamp(9px,.95vw,13.5px)/1.25 var(--fd);white-space:nowrap;box-shadow:0 2px 0 rgba(30,21,55,.35);transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s;pointer-events:none}
.cell[class*=" t"] .m{opacity:1;transform:translateX(-50%) scale(1)}
.cell[class*=" t"] .sym{transform:scale(.8) translateY(-8%)}
.cell.t1{background:var(--limel);box-shadow:inset 0 0 0 2px var(--lime)}
.cell.t2{background:var(--lime)}.cell.t2 .m{background:var(--ink);color:var(--lime)}
.cell.t3{background:var(--skyd)}.cell.t3 .m{background:#fff;color:var(--skyd)}
.cell.t4{background:var(--rasp)}.cell.t4 .m{background:#fff;color:var(--raspd)}
.cell.t5{background:var(--ink);box-shadow:0 0 0 2px var(--lime),0 0 14px rgba(168,225,12,.7)}.cell.t5 .m{background:var(--lime);color:var(--ink)}
.cell.in-cl{background:#fff;box-shadow:inset 0 0 0 3px var(--rasp)}
.cell.in-cl .sym{transform:scale(1.3);opacity:0}
.cell.is-sel{box-shadow:inset 0 0 0 3px var(--ink),0 0 0 2px #fff}
.cell.boom{animation:boom .42s cubic-bezier(.3,1.6,.5,1)}
.cell.drop .sym{animation:drop .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes boom{0%{transform:scale(1)}40%{transform:scale(1.17)}100%{transform:scale(1)}}
@keyframes drop{from{transform:translateY(-90%);opacity:0}to{opacity:1}}
.bd-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bd-stats div{background:rgba(255,255,255,.82);border:2px solid var(--ink);border-radius:14px;padding:6px 10px}
.bd-stats small{display:block;font-size:.7rem;font-weight:600;color:var(--ink2);line-height:1.3}
.bd-stats strong{font:400 1.25rem/1.2 var(--fd)}

/* KPI traka */
.kpis{display:grid;grid-template-columns:1.2fr 1fr 1.15fr .85fr 1.25fr 1fr;gap:12px;margin:34px 0 8px}
.kpi{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:12px 14px;min-width:0}
.kpi small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink2)}
.kpi strong{display:block;font:400 1.85rem/1.15 var(--fd);margin:2px 0}
.kpi strong.sm{font-size:1.3rem}
.kpi span{font-size:.8rem;line-height:1.35;color:var(--ink2);display:block}
.kpi--rtp{background:var(--limel)}
.kpi--max{background:var(--rasp);color:#fff}.kpi--max small,.kpi--max span{color:#FFE0EA}
.kpi--hit{display:flex;gap:12px;align-items:center}
.donut{flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--rasp) calc(var(--p)*1%),var(--skyl) 0);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.vol{display:flex!important;align-items:flex-end;gap:4px;height:22px;margin:6px 0 4px}
.vol i{flex:1;height:100%;border-radius:4px;background:var(--rasp)}
.vol i:nth-child(1){height:30%}.vol i:nth-child(2){height:47%}.vol i:nth-child(3){height:64%}.vol i:nth-child(4){height:82%}

/* demo */
.demo{margin:30px 0 10px;background:var(--ink);color:#fff;border-radius:28px;padding:18px;box-shadow:8px 8px 0 var(--rasp)}
.demo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;padding:4px 6px 0}
.demo-head h2{display:inline;margin:0 0 0 10px;font-size:clamp(1.35rem,1rem + 1.3vw,2rem)}
.demo-head p{margin:.4em 0 0;color:#C9C2E6;font-size:.92rem}
.demo-box{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0F0A20}
.demo-box picture,.demo-box .poster{width:100%;height:100%}
.demo-box .poster{object-fit:cover;filter:saturate(1.05) brightness(.82)}
.demo-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;border:0;background:rgba(30,21,55,.38);color:#fff;cursor:pointer;font-family:var(--ft)}
.dp-box{display:grid;justify-items:center;gap:8px;padding:22px 30px 18px;border-radius:24px;background:rgba(30,21,55,.86);border:2px solid rgba(255,255,255,.22);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .2s}
.demo-play:hover .dp-box{transform:translateY(-2px)}
.dp-ic{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--rasp);border:3px solid #fff;box-shadow:0 0 0 8px rgba(232,51,109,.35);transition:transform .2s}
.dp-ic .i{width:44px;height:44px;margin-left:6px}
.demo-play:hover .dp-ic{transform:scale(1.07)}
.dp-t{font:400 1.7rem/1 var(--fd)}
.demo-play small{font-size:.86rem;color:#E9E4FF}
.demo-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-off{padding:20px;color:#E9E4FF}.demo-off a{color:var(--lime)}
.poster-css{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#CDEEFF,var(--sky))}
.pc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(60%,420px)}
.pc-grid i{aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.65)}.pc-grid i.on{background:var(--rasp)}

/* tekst */
.txt{max-width:74ch;margin:52px 0 0}
.txt .coord{margin-bottom:10px}
.txt h2{margin-top:2px}
.txt>ul,.txt>ol{padding:0;margin:0 0 1.1em;list-style:none}
.txt>ul li{position:relative;padding-left:1.6em;margin:.45em 0}
.txt>ul li::before{content:"";position:absolute;left:.1em;top:.52em;width:.72em;height:.72em;border-radius:28%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.moves{counter-reset:mv}
.moves li{position:relative;counter-increment:mv;padding:.15em 0 .15em 2.9em;margin:.7em 0;min-height:2em}
.moves li::before{content:counter(mv);position:absolute;left:0;top:.05em;width:2.1em;height:2.1em;border-radius:12px;display:grid;place-items:center;background:var(--rasp);color:#fff;font:400 .95rem/1 var(--fd);border:2px solid var(--ink)}
.note{margin:1.2em 0;padding:14px 18px;background:var(--limel);border:2px solid var(--ink);border-left-width:8px;border-radius:14px}
.note p{margin:0;font-weight:500}
.txt--panel{max-width:none;background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:26px clamp(18px,3vw,40px);box-shadow:var(--sh)}
.txt--panel p,.txt--panel ul{max-width:74ch}
.txt--pc{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;grid-auto-flow:row dense;align-items:start}
.txt--pc>*{grid-column:1/-1;justify-self:start}
.txt--pc>p{max-width:74ch}
.txt--pc>.pros,.txt--pc>.cons{justify-self:stretch;background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:16px 18px}
.txt--pc>.pros{grid-column:1;box-shadow:5px 5px 0 var(--lime)}
.txt--pc>.cons{grid-column:2;box-shadow:5px 5px 0 var(--rasp)}
.txt .pros li::before{content:"+";background:var(--lime);display:grid;place-items:center;font:400 .7rem/1 var(--fd);width:1.15em;height:1.15em;top:.3em}
.txt .cons li::before{content:"−";background:var(--raspl);color:var(--raspd);display:grid;place-items:center;font:400 .7rem/1 var(--fd);width:1.15em;height:1.15em;top:.3em}
.h-sm{font-size:1.4rem}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:start}
.split>.txt{max-width:none}
.side-specs{margin-top:52px;background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:18px 18px 10px;box-shadow:var(--sh);position:sticky;top:90px}
.specs{margin:0}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:.5em 0;border-bottom:1px dashed var(--line)}
.specs div:last-child{border:0}
.specs dt{color:var(--ink2);font-size:.88rem}
.specs dd{margin:0;font-weight:700;font-size:.92rem;text-align:right}
.side-viz{margin-top:52px;display:grid;gap:18px}

/* figure */
figure{margin:0}
.fig-cl{display:flex;gap:18px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:16px;margin:1.4em 0 0;max-width:620px}
.fig-cl svg{width:190px;flex:none}
.fig-cl rect{fill:var(--skyl);stroke:rgba(30,21,55,.15)}
.fig-cl rect.on{fill:var(--rasp);stroke:var(--ink);stroke-width:1.5}
.fig-cl rect.diag{fill:#fff;stroke:var(--ink);stroke-dasharray:3 2}
.fig-cl .x{stroke:var(--raspd);stroke-width:2.4;stroke-linecap:round}
.fig-cl .lab{font:600 10px var(--ft);fill:var(--ink2);text-anchor:middle}
.fig-cl figcaption{font-size:.92rem;line-height:1.5}
.ladder{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:16px 18px;margin:1.4em 0 0}
.ladder figcaption,.stairs figcaption,.rtpb figcaption,.fam figcaption{font:600 .82rem/1.3 var(--ft);text-transform:uppercase;letter-spacing:.3px;color:var(--ink2);margin-bottom:12px}
.ladder ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;align-items:end;height:200px}
.ladder li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-align:center;min-width:0}
.ladder .bar{width:100%;height:calc(var(--h)*130px);border-radius:8px 8px 4px 4px;border:2px solid var(--ink);background:var(--limel)}
.ladder .bar.t0{background:#fff;border-style:dashed}
.ladder .bar.t1{background:var(--limel)}.ladder .bar.t2{background:var(--lime)}.ladder .bar.t3{background:var(--skyd)}.ladder .bar.t4{background:var(--rasp)}.ladder .bar.t5{background:var(--ink);box-shadow:0 0 0 2px var(--lime)}
.ladder b{font:400 .82rem/1.2 var(--fd);margin-top:6px;white-space:nowrap}
.ladder small{font-size:.66rem;line-height:1.2;color:var(--ink2)}
.ladder small span{display:none}
.ladder figcaption span{text-transform:none;font-weight:500;letter-spacing:0}
.stairs,.rtpb,.fam{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:16px 18px}
.stairs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;height:170px}
.stairs li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.st-bar{width:100%;height:calc(var(--h)*130px);min-height:38px;border-radius:10px 10px 4px 4px;background:var(--rasp);border:2px solid var(--ink);display:flex;justify-content:center;padding-top:4px}
.st-bar b{font:400 1.1rem/1.2 var(--fd);color:#fff}
.stairs small{display:flex;align-items:center;gap:3px;font-weight:700;margin-top:6px}
.ico--s{width:16px;height:16px}
.rtpb ul,.fam ul{list-style:none;margin:0;padding:0}
.rtpb li{display:grid;grid-template-columns:8.4em minmax(0,1fr) 4.6em;gap:10px;align-items:center;margin:7px 0;font-size:.86rem}
.rl{color:var(--ink2);line-height:1.2}
.rbar,.ft{height:14px;border-radius:7px;background:var(--skyl);overflow:hidden}
.rf,.ff{display:block;height:100%;width:calc(var(--w)*100%);background:var(--skyd);border-radius:7px}
.rtpb li:first-child .rf{background:var(--rasp)}
.rtpb b{text-align:right;font-weight:700}
.fam{margin:1.4em 0 0;max-width:720px}
.fam li{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) 5.4em;gap:12px;align-items:center;margin:10px 0}
.fn{font-weight:700;line-height:1.2}.fn small{display:block;font-weight:400;font-size:.76rem;color:var(--ink2)}
.ft{height:18px;border-radius:9px}.ff{border-radius:9px;background:var(--sky)}
.fam li.me .ff{background:var(--rasp)}
.fam b{font:400 1rem/1 var(--fd);text-align:right}

/* tabela isplata */
.blk{margin:56px auto 0}
.blk>.coord{margin-bottom:10px}
.pay{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:18px clamp(14px,2.4vw,26px);box-shadow:var(--sh)}
.pay-ctl{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:14px 18px;align-items:end;margin-bottom:14px}
.fld{display:grid;gap:5px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.fld input[type=number]{width:140px;min-height:46px;border:2px solid var(--ink);border-radius:12px;padding:6px 12px;font:400 1.2rem var(--fd);color:var(--ink);background:var(--skyl)}
.fld output{color:var(--raspd);font-weight:700}
.fld--range input{width:100%;accent-color:var(--rasp);min-height:30px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:40px;min-width:48px;padding:0 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:600 .9rem var(--ft);color:var(--ink);cursor:pointer}
.chip:hover,.chip.on{background:var(--lime)}
.tbl-wrap{position:relative;overflow-x:auto;border:2px solid var(--ink);border-radius:16px}
.ptbl{width:100%;border-collapse:collapse;font-size:.95rem}
.ptbl th,.ptbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
.ptbl thead th{background:var(--ink);color:#fff;font-weight:600;font-size:.82rem}
.ptbl tbody tr:last-child>*{border-bottom:0}
.ptbl tbody tr:nth-child(4) > *{border-bottom:2px solid var(--ink)}
.ptbl th[scope=row]{display:flex;align-items:center;gap:10px;font-weight:700}
.ptbl th[scope=row] small{display:block;font-weight:400;font-size:.74rem;color:var(--ink2)}
.ico{width:34px;height:34px;flex:none}
.ptbl td small{display:block;font-size:.76rem;color:var(--ink2)}
.ptbl td b{font:400 1.05rem/1.2 var(--fd);white-space:nowrap}
.ptbl td b.capped{color:var(--raspd)}

/* bonus buy kalkulator */
.buy{display:grid;gap:12px}
.buy-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bo{border:2px solid var(--ink);border-radius:16px;padding:12px;background:var(--skyl)}
.bo--super{background:var(--rasp);color:#fff}
.bo small{display:block;font-weight:700;font-size:.78rem}
.bo strong{display:block;font:400 1.35rem/1.2 var(--fd);margin:4px 0;word-break:break-word}
.bo span{font-size:.78rem}

/* galerija */
.gal{margin:60px 0 0}
.gal>.coord{margin-bottom:10px}
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gal-grid.has-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.5fr)}
.gal-grid figure{background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden}
.gal-grid img{width:100%}
.gal-grid figcaption{padding:10px 14px 12px;font-size:.86rem;line-height:1.45}
.g-p{grid-column:3;grid-row:1/span 2;align-self:start}
.g-p img{aspect-ratio:390/700;object-fit:cover;object-position:top}
.g-note{background:var(--ink);color:#fff;border-radius:18px;padding:18px;align-self:start}
.g-note b{font:400 1.15rem var(--fd);color:var(--lime)}
.g-note p{margin:.5em 0 0;font-size:.9rem;color:#DCD6F5}

/* FAQ */
.faq{margin:60px 0 0;max-width:900px}
.faq>.coord{margin-bottom:10px}
.faq-item{background:#fff;border:2px solid var(--ink);border-radius:16px;margin:10px 0;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:14px 52px 14px 18px;font-weight:700;position:relative;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:9px;background:var(--lime);display:grid;place-items:center;font:400 1.1rem/1 var(--fd);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--rasp);color:#fff}
.faq-a{padding:0 18px 4px}

/* ostale stranice */
.route{margin:64px 0 0}
.route ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.route a{display:flex;align-items:center;gap:14px;padding:12px 14px;border:2px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.route a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.route li:nth-child(3n+1) a .coord{background:var(--rasp);color:#fff}
.route li:nth-child(3n+2) a .coord{background:var(--lime);color:var(--ink)}
.route li:nth-child(3n) a .coord{background:var(--sky);color:var(--ink)}
.rt-t{flex:1;min-width:0;line-height:1.3}
.rt-t b{display:block}.rt-t small{color:var(--ink2);font-size:.84rem}
.route .i{width:22px;height:22px}

/* footer */
.foot{margin-top:80px;background:var(--ink);color:#E9E4FF;padding:40px 0 30px}
.foot a{color:var(--lime)}
.foot-top{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.15)}
.brand--foot{color:#fff}
.rg{display:flex;gap:12px;align-items:center;max-width:640px;margin:0;font-size:.92rem}
.age--big{flex:none;min-width:56px;height:40px;font-size:1.05rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0}
.foot-nav a{text-decoration:none;font-weight:600}
.foot .fine{color:#BDB5DE}

/* unutrašnje stranice */
.phead{padding:26px 0 10px;border-bottom:2px solid var(--ink);background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.6) 100%)}
.phead-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:40px;align-items:center;padding-bottom:22px}
.phead-in--solo{grid-template-columns:minmax(0,1fr);max-width:860px;margin-inline:auto}
.phead h1{font-size:clamp(1.95rem,1.1rem + 2.8vw,3.1rem)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.86rem;margin-bottom:12px;color:var(--ink2)}
.crumbs a{color:var(--ink2)}
.ph-w>*{margin:0}
.ph-w .fig-cl{flex-direction:column;align-items:flex-start;max-width:none}
.ph-w .fig-cl svg{width:min(240px,100%)}
.w-buy{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.w-t{font:400 1.2rem var(--fd);margin:0 0 10px}
.w-sym{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:linear-gradient(165deg,#CDEEFF,var(--sky));border:2px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.w-sym span{display:grid;justify-items:center;gap:4px;background:rgba(255,255,255,.7);border-radius:14px;padding:10px 4px;text-align:center}
.w-sym .ico{width:48px;height:48px}
.w-sym small{font-size:.72rem;font-weight:600;line-height:1.2}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.doc--legal{grid-template-columns:minmax(0,1fr);max-width:860px}
.doc-main .txt{max-width:74ch}
.doc-main .faq{max-width:74ch}
.doc-side{position:sticky;top:90px;margin-top:52px;display:grid;gap:14px}
.side-box{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:14px 16px}
.side-box--k{background:var(--skyl)}
.side-t{font:400 1.05rem var(--fd);margin:0 0 8px}
.toc{margin:0;padding-left:1.2em;font-size:.88rem;line-height:1.4}
.toc li{margin:.4em 0}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--raspd);text-decoration:underline}
.mini{margin:0 0 12px}
.mini div{display:flex;justify-content:space-between;gap:10px;padding:.35em 0;border-bottom:1px dashed rgba(30,21,55,.18);font-size:.86rem}
.mini dt{color:var(--ink2)}.mini dd{margin:0;font-weight:700;text-align:right}
.blk--in{margin:52px 0 0;max-width:none}
.sim-wrap{margin:1.4em 0 0}
.bd--sim{max-width:640px}
.bd--sim .bd-tilt{--rx:7deg;--ry:-3deg}
.sim-ctl{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.sim-ctl .b{min-height:42px;font-size:.88rem;padding:.4em .8em}
.b--sw b{font-weight:700}

/* меню-бургер: раньше, чем остальной планшетный макет — иначе меню не помещается в шапку */
@media (max-width:1100px){
  .js .nav-tg{display:inline-grid;gap:4px;place-content:center;width:46px;height:42px;margin-left:auto;border:2px solid var(--ink);border-radius:12px;background:#fff;cursor:pointer}
  .js .nav-tg span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .js .top.open .nav-tg span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .js .top.open .nav-tg span:nth-child(2){opacity:0}
  .js .top.open .nav-tg span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:2px solid var(--ink);padding:10px 16px 16px;flex-direction:column;gap:2px}
  .js .top.open .nav{display:flex}
  .nav a{font-size:1rem;padding:.6em .8em}
  .top-in{position:relative}
  .age{order:3}
}
/* tablet */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doc{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
}
@media (max-width:1023px){
  .hero-in{display:flex;flex-direction:column;gap:0}
  .hero-txt{display:contents}
  .hero-txt .kicker{order:1}.hero-txt h1{order:2}.hero-txt .lead{order:3}.hero-bd{order:4;margin:8px auto 26px}.hero-txt .lead--more{order:5}.hero-txt .cta{order:6}
  .hero-bd{position:static;max-width:640px;width:100%;margin-inline:auto}
  .bill{display:block;min-height:0;background:var(--white)}
  .bill-art{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .bill-art::after{background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 30%)}
  .bill-txt{max-width:none;padding:0 22px 24px}
  .bill-logo{width:min(84%,460px);margin:-58px auto 16px;position:relative}
  .split{grid-template-columns:minmax(0,1fr);gap:0}
  .side-specs{position:static;margin-top:28px}
  .side-viz{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .phead-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc-side{position:static;margin-top:44px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid.has-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g-p{grid-column:auto;grid-row:auto}
  .g-p img{aspect-ratio:390/560}
}
/* telefon */
@media (max-width:700px){
  body{font-size:16.5px}
  .hero{padding-top:22px}
  .bill{border-radius:22px;box-shadow:5px 5px 0 var(--ink);margin-bottom:24px}
  .bill-txt{padding:0 16px 20px}
  .bill-logo{margin-top:-34px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
  .kpi strong{font-size:1.5rem}
  .kpi--hit{flex-direction:column;align-items:flex-start;gap:6px}
  .donut{width:44px;height:44px}
  .bd{padding:12px 10px 12px;border-radius:22px;box-shadow:5px 5px 0 var(--ink)}
  .bd-tilt{--rx:8deg!important;--ry:0deg!important;grid-template-columns:12px minmax(0,1fr);gap:3px 4px}
  .bd-grid{gap:3.5px;padding:6px;border-radius:14px}
  .cell .m{font-size:9px;padding:0 3px;bottom:-2px}
  .bd-rows,.bd-cols{font-size:.62rem}
  .bd-cols{padding:0 6px}.bd-rows{padding:6px 0}
  .bd-stats strong{font-size:1.02rem}
  .bd-stats div{padding:5px 8px}
  .demo{padding:12px;border-radius:22px;box-shadow:5px 5px 0 var(--rasp)}
  .demo-head{flex-direction:column;align-items:flex-start}
  .demo-head h2{display:block;margin:10px 0 0}
  .demo-box{aspect-ratio:3/5}
  .dp-ic{width:76px;height:76px}
  .txt{margin-top:42px}
  .txt--pc{grid-template-columns:minmax(0,1fr)}
.txt--pc>.pros,.txt--pc>.cons{grid-column:1;margin:0 0 16px}
  .side-viz{grid-template-columns:minmax(0,1fr)}
  .fig-cl{flex-direction:column;align-items:flex-start}
  .fig-cl svg{width:min(230px,100%)}
  .ladder ol{grid-template-columns:minmax(0,1fr);height:auto;gap:5px}
  .ladder li{flex-direction:row;justify-content:flex-start;gap:8px;height:auto}
  .ladder .bar{order:2;height:16px;width:calc(var(--h)*100% - 0px);max-width:calc(100% - 8.5em);border-radius:4px 8px 8px 4px}
  .ladder b{order:1;width:3.2em;text-align:right;margin:0;font-size:.8rem}
  .ladder small{order:3;font-size:.68rem;white-space:nowrap}
  .ladder small span{display:inline}
  .ladder figcaption span{display:none}
  .rtpb li{grid-template-columns:minmax(0,1fr) 4.4em;gap:4px 8px}
  .rtpb .rbar{grid-column:1/-1;grid-row:2}
  .fam li{grid-template-columns:minmax(0,1fr) 5em;gap:4px 8px}
  .fam .ft{grid-column:1/-1;grid-row:2}
  .pay-ctl{grid-template-columns:minmax(0,1fr)}
  .fld input[type=number]{width:100%}
  .ptbl th,.ptbl td{padding:8px 8px}
  .ptbl{font-size:.88rem}
  .ico{width:28px;height:28px}
  .ptbl td b{font-size:.92rem;white-space:normal}
  .ptbl th[scope=row]{gap:6px;font-size:.86rem}
  .ptbl th[scope=row] small{display:none}
  .bd-hud{flex-direction:column;gap:6px;min-height:4.6em}
  .buy-opts{grid-template-columns:minmax(0,1fr)}
  .gal-grid,.gal-grid.has-p{grid-template-columns:minmax(0,1fr)}
  .g-p{max-width:300px}
  .route ul{grid-template-columns:minmax(0,1fr)}
  .doc-side{grid-template-columns:minmax(0,1fr)}
  .w-sym{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px}
  .w-sym .ico{width:38px;height:38px}
  .w-sym small{font-size:.64rem}
  .foot-top{flex-direction:column;align-items:flex-start}
  .sim-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sim-ctl [data-act=spin]{grid-column:1/-1}
  .brand{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .bd-tilt{transform:rotateX(8deg)}
}

/* рейтинг priređivača, инструменты и автор: «карточки-поля» с жёсткой тенью, как у остальных блоков доски */
.rt,.tw,.au{--tw-bg:transparent;--tw-card:#fff;--tw-ink:var(--ink);--tw-mute:var(--ink2);--tw-line:var(--ink);--tw-accent:var(--raspd);--tw-radius:20px;--tw-btn-ink:#fff;--tw-series:var(--skyd)}
.rt{margin-block:56px 0}
.rt__head h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,2.35rem)}
.rt__head h2::before{content:"";display:block;width:92px;height:14px;margin-bottom:12px;border-radius:7px;background:linear-gradient(90deg,var(--rasp) 0 22%,var(--lime) 22% 44%,var(--sky) 44% 66%,var(--ink) 66%)}
.rt__meta{color:var(--ink2)}
@media (min-width:1000px){
  .rt--full .rt__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .rt--full .rt__item:first-child{grid-column:1/-1}
}
.rt__item{border:2px solid var(--ink);border-radius:20px;box-shadow:var(--sh);padding:18px 18px 16px;transition:transform .15s,box-shadow .15s}
.rt__item:first-child{background:linear-gradient(160deg,var(--limel),#fff 55%)}
@media (hover:hover){.rt__item:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
.rt__rank{width:2.4em;height:2.4em;border:2px solid var(--ink);border-radius:9px;background:var(--ink);color:var(--lime);font:400 1.05rem/1 var(--fd);letter-spacing:.5px}
.rt__item:first-child .rt__rank{background:var(--rasp);color:#fff;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--ink)}
.rt__name{font:400 1.25rem/1.1 var(--fd);letter-spacing:.2px}
.rt__score{display:grid;justify-items:end;gap:2px}
.rt__score b{display:inline-grid;place-items:center;min-width:3.1em;padding:.28em .4em;border:2px solid var(--ink);border-radius:12px;background:var(--lime);color:var(--ink);font:400 1.25rem/1 var(--fd);box-shadow:3px 3px 0 var(--ink)}
.rt__score span{color:var(--ink2)}
.rt__logo{border:2px solid var(--ink);border-radius:12px}
.rt__bonus{border:2px dashed var(--ink);border-radius:14px;background:var(--skyl)}
.rt__bonus--nd{border-style:solid;background:var(--raspl)}
.rt__bonus--none{background:#fff}
.rt__lbl{font-weight:600;color:var(--ink2)}
.rt__btn{border:2px solid var(--ink);border-radius:14px;background:var(--raspd);color:#fff;font:600 .98rem/1.2 var(--ft);box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.rt__btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.rt__btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.rt__steps li::marker{color:var(--raspd);font-family:var(--fd)}
.rt__why summary{font-weight:600;color:var(--ink)}
.rt__why li{border-bottom-color:rgba(30,21,55,.25)}
.rt__text{max-width:74ch;margin-top:30px}
.rt__text h3{font-size:1.25rem}
.rt__warn{border:2px solid var(--ink);border-left-width:8px;border-left-color:var(--rasp);border-radius:14px;background:#fff;color:var(--ink2)}
.rt__warn b{display:inline-grid;place-items:center;min-width:2.4em;margin-right:.4em;padding:.1em .3em;border-radius:8px;background:var(--ink);color:var(--lime);font:400 .82rem/1.3 var(--fd)}
.tw{border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:var(--sh);margin-block:56px 0}
.tw__h{font-size:clamp(1.4rem,1rem + 1.4vw,2rem)}
.tw__h::before{content:"";display:inline-block;width:.72em;height:.72em;margin-right:.45em;border-radius:28%;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.tw__f input,.tw__f select{border:2px solid var(--ink);border-radius:12px;background:var(--skyl);font:400 1.1rem var(--fd)}
.tw__f{font-weight:600}
.tw__btn{border:2px solid var(--ink);border-radius:14px;background:var(--lime);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--ft);font-weight:600;transition:transform .15s,box-shadow .15s}
.tw__btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.tw__o{border:2px solid var(--ink);border-radius:14px;background:var(--skyl)}
.tw__o:nth-child(3n+1){background:var(--limel)}
.tw__o:nth-child(3n){background:var(--raspl)}
.tw__o dd{font:400 1.35rem/1.2 var(--fd);color:var(--ink)}
.tw__t th{font-family:var(--fd);font-weight:400}
.tw__verdict{border-width:2px;border-radius:14px;background:var(--skyl)}
.tw__dna{border:2px solid var(--ink);background:var(--skyl)}
.au{margin-block:56px 0;padding:16px 18px;border:2px solid var(--ink);border-radius:20px;background:var(--skyl);box-shadow:var(--sh)}
.au img{border:2px solid var(--ink);border-radius:22%;box-shadow:3px 3px 0 var(--ink)}
.au p{color:var(--ink2)}
.au a{color:var(--raspd)}
.txt--tbl{max-width:none}
.rt-method{border:2px solid var(--ink);border-radius:18px;background:#fff;padding:6px 14px;box-shadow:var(--sh)}
.rt-method__t th{font-family:var(--fd);font-weight:400}
.doc-main .rt,.doc-main .tw,.doc-main .au{max-width:none}
@media (prefers-reduced-motion:reduce){.rt__item,.rt__btn,.tw__btn{transition:none}.rt__item:hover,.rt__btn:hover,.tw__btn:hover{transform:none}}