/* regino.sk — rozcestník. Úvod: Žiačik ako hlavná vec + softvér na mieru, ďalšie programy potichu pod nimi. */

/* Písmo Archivo (OFL 1.1, assets/fonts/OFL.txt), variabilné: wdth 62–125, wght 100–900. Lokálne, bez Google Fonts. */
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext.woff2) format("woff2-variations"),url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin.woff2) format("woff2-variations"),url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Jedna vizuálna povaha (regino.sk má pevné farby značky), preto bez tmavej varianty. */
:root{
  --graphite:#16171a; --orange:#e05a00; --concrete:#eceae5;
  --zia:#f2b632; --zia-ink:#2a1c00; --gro:#2b3fa8;   /* Gazda: tmavšia modrá z tmavého režimu appky (oficiálna); znak biely so zlatou mincou = oficiálna verzia na modrom */
  --muted:#5c5e63; --rule:#cfccc5;
  --dov:#4b6750;
  --font:"Archivo","Arial Narrow",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--concrete)}
body{margin:0;color:var(--graphite);font-family:var(--font);font-size:16px;line-height:1.55;padding-inline:clamp(16px,3.5vw,48px);padding-block:0 40px;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:3px solid var(--graphite);outline-offset:4px}

/* hlavička */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 0}
.logo{display:inline-flex;align-items:baseline;font-weight:900;font-stretch:80%;font-size:26px;letter-spacing:-.01em;line-height:1}
/* bodka v názve = oranžový kosoštvorec */
.dot{display:inline-block;width:.36em;height:.36em;margin:0 .03em 0 .05em;background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:translateY(.02em)}
.logo:hover .dot{transform:translateY(.02em) rotate(90deg);transition:transform .3s}
footer b .dot{width:.36em;height:.36em}
.top nav a{font-size:14px;font-weight:600;padding:7px 12px;white-space:nowrap;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--graphite)}
h1{margin:26px 0 0;font-size:clamp(28px,4vw,48px);font-weight:900;font-stretch:72%;line-height:1;letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
h1 span{color:var(--orange)}


/* ---------- úvod: bento mriežka ----------
   Kým je naostro len Žiačik: veľká karta Žiačika so snímkou, vedľa softvér na mieru, pod nimi
   Gazda a Dôverník ako tiché svetlé karty. Keď má triedu .live aj Gazda alebo Dôverník,
   prestaví sa mriežka na tri rovnaké stĺpce (pravidlá .bento:has(...) nižšie). */
.bento{margin-top:24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.b{grid-column:span 6;position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:26px;border-radius:24px;background:#f8f7f4;color:var(--graphite);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
a.b:hover,a.b:focus-visible{transform:translateY(-4px)}
.b:focus-visible{outline-offset:3px}
.b .tx{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.k,.dom{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.k{color:var(--muted)}
.dom{display:flex;align-items:center;gap:8px;opacity:.75}
.z-mark{flex:none;width:24px;height:24px}
.mark{flex:none;width:20px;height:20px;padding:3px;background:var(--c);box-sizing:content-box}
.nm{margin:4px 0 0;font-size:34px;font-weight:900;font-stretch:62%;line-height:.92;text-transform:uppercase;letter-spacing:-.01em}
.sl{margin-top:6px;font-size:17px;font-weight:700;line-height:1.3}
.sy{font-size:14.5px;color:var(--muted)}
.lnk{margin-top:auto;padding-top:14px;font-weight:800}
.lnk::after,.go::after{content:" →";display:inline-block;transition:transform .2s}
a.b:hover .lnk::after,a.b:hover .go::after{transform:translateX(5px)}
.go{align-self:flex-start;margin-top:auto;font-weight:800;font-size:15px;padding:12px 24px 12px 20px;background:var(--btn);color:var(--bt)}
.chip{align-self:flex-start;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.75);color:var(--muted)}

/* farby značiek: --bg/--ink živá karta, --tint pripravovaná, --c znak a názov */
.zia{--bg:var(--zia);--ink:#2a1c00;--btn:var(--graphite);--bt:#fff}
.gro{--c:var(--gro);--tint:#e6e9f7;--bg:var(--gro);--ink:#fff;--btn:#fff;--bt:var(--gro)}
.dov{--c:var(--dov);--tint:#e3ebe4;--bg:var(--dov);--ink:#fffdf8;--btn:#fff;--bt:var(--dov)}
.b.live{background:var(--bg);color:var(--ink)}
.b.live .sy{color:inherit;opacity:.85}
.b.live .nm{color:#fff}
.zia.live .nm{text-shadow:3px 3px 0 #2a1c00}
a.b.live .chip{display:none}  /* štítok „Pripravujeme“ zmizne, až keď je karta odkazom */
.b.live .mark{background:rgba(255,255,255,.18)}
.gro:not(.live),.dov:not(.live){background:var(--tint)}
.gro:not(.live) .nm,.dov:not(.live) .nm{color:var(--c)}
.gro:not(.live) .dom,.dov:not(.live) .dom{color:var(--muted);opacity:1}
.gro:not(.live),.dov:not(.live){flex-direction:row;align-items:center;gap:22px}  /* pripravované: text vľavo, ukážka vpravo */
.gro:not(.live) .tx,.dov:not(.live) .tx{flex:1.2 1 0}
.gro:not(.live) .vis,.dov:not(.live) .vis{order:2;flex:1 1 0}
.gro:not(.live) .scr,.dov:not(.live) .scr{aspect-ratio:4/3}
.g-arc{stroke:#fff}
.g-dot{fill:#f5b82e;transform-origin:100px 90px;transform-box:view-box}
.gro:hover .g-dot{animation:clink .5s ease-out}
@keyframes clink{40%{transform:scale(1.45)}70%{transform:scale(.9)}}

/* ukážka v rámčeku okna: Žiačik skutočná snímka, Gazda a Dôverník zatiaľ ilustrácia */
.vis{position:relative;min-width:0}
.fr{margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 16px 34px -14px rgba(0,0,0,.45)}
.fr .bar{display:flex;gap:6px;align-items:center;padding:8px 12px;background:#f3efe6}
.fr .bar i{width:9px;height:9px;border-radius:50%;background:#d9d3c6}
.fr .bar em{margin-left:8px;font-style:normal;font-size:11.5px;color:#8a8478}
.scr{display:grid;place-items:center;aspect-ratio:16/10;background:#fbf9f5;overflow:hidden}
.scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.ledger{display:grid;grid-template-columns:1fr auto;gap:2px 16px;width:74%;padding:12px 14px 16px;font-size:14px;font-variant-numeric:tabular-nums;background:#fff;color:#16171a;box-shadow:0 6px 16px -6px rgba(0,0,0,.25);transform:rotate(-2deg)}
.ledger .tag{grid-column:1/-1;margin-bottom:4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7185}
.ledger .v{text-align:right;font-weight:600;white-space:nowrap}
.ledger .sum{margin-top:4px;padding-top:6px;border-top:1px dashed rgba(22,23,26,.35);font-weight:800}
.ledger .sum.v{color:var(--gro)}
.zones{display:grid;width:80%;font-size:13.5px;line-height:1.3;color:#fffdf8}
.zone{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px 12px;background:#6f8a73;border-left:4px solid #a9bfae}
.zone.lock{margin:-6px 0 0 20px;border-left-color:#e0a77f;background:#8a5a3c;box-shadow:-6px 6px 0 rgba(0,0,0,.18)}
.zone span{opacity:.8;text-align:right}
.zone small{grid-column:1/-1;font-size:12px;opacity:.75}

/* Žiačik ako hlavná karta: text vľavo, snímka vpravo, Bodka sedí na rámčeku */
.zia{grid-column:span 9;grid-row:span 2;flex-direction:row;align-items:center;gap:30px;padding:30px 34px}
.zia .tx{order:1}
.zia .vis{order:2;flex:1.55 1 0;margin-top:70px}
.zia .nm{font-size:clamp(56px,6.4vw,96px)}
.zia .sl{font-size:clamp(18px,1.7vw,22px)}
.zia .sy{font-size:15.5px}
.bodka-sit{position:absolute;right:22px;top:-96px;width:100px}
.bodka{display:block;width:100%;height:auto}
/* Bodka občas nakloní hlavu (otáča sa len skupina hlavy okolo krku, kresba ostáva nezmenená) */
.bodka-head{transform-box:view-box;transform-origin:300px 392px;animation:tilt 9s ease-in-out 2s infinite}
@keyframes tilt{0%,62%,100%{transform:none}68%,76%{transform:rotate(-9deg)}82%{transform:rotate(2deg)}86%{transform:none}}
/* …a pri naklonenej hlave žmurkne pravým okom */
.bodka-eye{transform-box:fill-box;transform-origin:center;animation:wink 9s ease-in-out 2s infinite}
@keyframes wink{0%,69%,75%,100%{transform:none}71%,73%{transform:scaleY(.08)}}
.stats{margin:12px 0 10px;display:flex;gap:22px;font-size:12.5px;font-weight:600;line-height:1.2}
.stats span{display:grid}
.stats b{font-size:clamp(28px,2.8vw,40px);font-weight:900;font-stretch:66%;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.mie{grid-column:span 3;grid-row:span 2;background:var(--graphite);color:#fff}
.cla{grid-column:span 12;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:22px 26px}
.cla .k{flex-basis:100%}
.cla .nm{margin:0}
.cla .lnk{margin:0 0 0 auto;padding:0}
.mie .k{color:#ff8a45}
.mie .nm{font-size:clamp(32px,3vw,44px);font-stretch:72%;line-height:1;letter-spacing:.01em;word-spacing:.12em}  /* menej zúžené, „a v Exceli“ inak pôsobí natlačene */
.mie .nm span{color:#ff8a45}
.mie .sy{color:#c9cace}
/* vzor z kosoštvorcov (motív bodky v logu) vypĺňa prázdne miesto, hustne k pravému dolnému rohu */
.mie::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 9l5 5-5 5-5-5z' fill='%23ff8a45' fill-opacity='.5'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 100% 100%,#000 15%,transparent 100%);mask-image:radial-gradient(ellipse 75% 85% at 100% 100%,#000 15%,transparent 100%)}
.mie>*{position:relative;z-index:1}

/* Žiačik: moduly, výhody a tlačidlo zápisu (kým nie je naostro) */
.mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mods span{font-size:13px;font-weight:800;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.7);color:#2a1c00}
.mods i{font-style:normal;font-weight:600;opacity:.7}
.mods .later{background:transparent;border:1.5px dashed rgba(42,28,0,.35);font-weight:600}
.perks{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0 16px;padding:0;list-style:none;font-size:13.5px;font-weight:600}
.perks li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;background:#2a1c00;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.zia .zcta{margin-top:0}
/* Gazda a Dôverník: tri body pod popisom */
.pts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:14px;font-weight:600}
.pts li{display:flex;gap:9px;align-items:baseline}
.pts li::before{content:"";flex:none;width:8px;height:8px;background:var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.b.live .pts li::before{background:#fff}

/* tri živé programy, rovnako dôležité */
.bento:has(.gro.live,.dov.live) .b.live{grid-column:span 4;grid-row:auto;flex-direction:column;align-items:stretch;gap:6px;padding:22px 22px 26px}
.bento:has(.gro.live,.dov.live) .b.live .vis{order:0;flex:none;margin:0 0 14px}
.bento:has(.gro.live,.dov.live) .b.live .nm{font-size:clamp(40px,4vw,60px)}
.bento:has(.gro.live,.dov.live) .zia .stats,.bento:has(.gro.live,.dov.live) .bodka-sit,
.bento:has(.gro.live,.dov.live) :is(.mods,.perks,.zcta){display:none}
.bento:has(.gro.live,.dov.live) .b:not(.live):is(.gro,.dov){grid-column:span 4}
.bento:has(.gro.live,.dov.live) .mie{grid-column:span 6;grid-row:auto}
.bento:has(.gro.live,.dov.live) .mie,.bento:has(.gro.live,.dov.live) .cla{order:1}  /* programy prvé, ostatné za nimi */
.bento:has(.gro.live,.dov.live) .cla{grid-column:span 6;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.bento:has(.gro.live,.dov.live) .cla .k{flex-basis:auto}
.bento:has(.gro.live,.dov.live) .cla .lnk{margin:auto 0 0;padding-top:14px}


/* ---------- Na mieru: šikmý pás, začína problémom zákazníka, nie zoznamom služieb ---------- */
.custom{position:relative;margin:22px calc(50% - 50vw) 0;padding:40px clamp(16px,3.5vw,48px) 46px;background:#f8f7f4;color:var(--graphite);
  clip-path:polygon(0 0,100% 34px,100% 100%,0 calc(100% - 34px))}
.custom-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:30px 56px;align-items:start}
.custom .kick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b34800}
.custom h2{margin:10px 0 0;font-size:clamp(34px,4.6vw,60px);font-weight:900;font-stretch:66%;line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.custom h2 span{color:var(--orange)}
.custom .lead{margin-top:16px;font-size:16px;color:#45474c;max-width:42ch}
.swap{display:grid;gap:10px;padding-top:6px}
.swap-row{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:12px;font-size:15px}
.swap-row .old{color:#77797e}
.swap-row .arr{width:14px;height:14px;background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);justify-self:center}
.swap-row .new{font-weight:700}
.swap-row + .swap-row{border-top:1px solid rgba(22,23,26,.1);padding-top:10px}
.custom .cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.custom .cta .btn{background:var(--graphite);color:#fff}
.custom .cta .btn::after{color:#ff8a45}
.custom .cta small{font-size:13px;color:#5c5e63}
.custom .cta small a{border-bottom:1px solid currentColor}
.todo{border-bottom:2px dashed var(--orange);cursor:help}

/* mierka „od malého po veľké“: berie strach osloviť s malou vecou */
.scale{margin-top:26px;padding-top:20px;border-top:1px solid rgba(22,23,26,.1);max-width:46ch}
.scale-h{font-size:19px;font-weight:900;font-stretch:76%;line-height:1.15}
.scale ol{position:relative;margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:13px;line-height:1.3;color:#45474c}
.scale ol::before{content:"";position:absolute;left:6px;right:18%;top:10px;height:2px;background:var(--graphite)}
.scale li{position:relative;display:grid;gap:8px;align-content:start}
.scale .d{width:14px;height:14px;margin:4px 0;background:var(--graphite);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.scale li:nth-child(2) .d{width:18px;height:18px;margin:2px 0}
.scale li:nth-child(3) .d{width:22px;height:22px;margin:0;background:var(--orange)}
.scale-t{margin-top:14px;font-size:14.5px;color:#45474c}

/* citát pod časovou osou — pripravené pre skutočný citát so súhlasom (v index.html zatiaľ zakomentovaný) */
.quote{grid-column:2;margin:8px 0 0;padding:18px 22px 18px 26px;background:#f8f7f4;position:relative;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);max-width:640px}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange)}
.quote blockquote{margin:0;font-size:20px;font-weight:700;font-stretch:85%;line-height:1.3}
.quote figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}
.quote figcaption b{color:var(--graphite)}

/* ---------- O autorovi + časová os od 1999 ---------- */
.about{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 48px;align-items:start}
.about h2{margin:0;font-size:22px;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}
.about .who{margin-top:10px;font-size:28px;font-weight:900;font-stretch:72%;line-height:1}
.about p{margin-top:10px;font-size:15px;color:var(--muted);max-width:44ch}
.tl{position:relative;display:grid;grid-template-columns:repeat(8,1fr);padding-top:8px}
.tl li{list-style:none;position:relative;display:grid;gap:6px;padding-right:8px;align-content:start}
.tl li::before{content:"";position:absolute;left:0;right:0;top:36px;height:2px;background:var(--graphite)}
/* pripravované: prerušovaná čiara do budúcnosti */
.tl li:has(.d.f)::before{background:repeating-linear-gradient(90deg,var(--graphite) 0 6px,transparent 6px 11px)}
.tl .y{font-size:15px;font-weight:900;font-stretch:72%;font-variant-numeric:tabular-nums;height:24px}
.tl .d{width:16px;height:16px;margin-top:4px;background:var(--graphite);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tl .d.o{background:var(--orange)}
.tl .d.f{background:#b9b5ad;transform:scale(.75)}  /* pripravované: menší, svetlý kosoštvorec */
.tl .n{font-size:13.5px;font-weight:700;line-height:1.2}
.tl .s{font-size:12px;color:var(--muted);line-height:1.25}

/* ---------- tichý zoznam klasických programov ---------- */
.classic{margin-top:30px;display:grid;gap:10px}
.classic h2{margin:0;font-size:22px;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}
.rows{display:grid}
.row{display:grid;grid-template-columns:130px 1fr 80px auto;gap:6px 20px;align-items:baseline;padding-block:12px;border-top:1px solid var(--rule);font-size:15px}
.row:last-child{border-bottom:1px solid var(--rule)}
.row b{font-weight:800;font-stretch:85%;font-size:17px}
.row .d{color:var(--muted)}
.row .n{font-variant-numeric:tabular-nums;color:var(--muted)}
.row a{justify-self:start;font-weight:700;border-bottom:2px solid var(--orange)}
.row a:hover{color:var(--orange)}
.note{font-size:13.5px;color:var(--muted);max-width:70ch}
.note a{border-bottom:1px solid currentColor}

footer{margin-top:34px;padding-top:16px;border-top:2px solid var(--graphite);display:flex;gap:10px 22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer b{color:var(--graphite)}
footer a:hover{color:var(--graphite)}
footer .priv{margin-left:auto;border-bottom:1px solid currentColor}

/* ---------- užšie obrazovky ---------- */
@media (max-width:1340px){
  .custom{clip-path:polygon(0 0,100% 20px,100% 100%,0 calc(100% - 20px))}
  .custom-in{grid-template-columns:1fr 1.1fr}
  .about{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
  .swap-row{grid-template-columns:14px 1fr;gap:4px 10px}
  .swap-row .old{grid-column:1/-1}
  .swap-row .arr{justify-self:start;width:12px;height:12px}
  .row{grid-template-columns:1fr auto;gap:2px 14px}
  .row .d{grid-column:1/-1;grid-row:2}
  footer .priv{margin-left:0}
}
@media (max-width:900px){
  .custom-in,.about{grid-template-columns:1fr}
  .quote{grid-column:auto;clip-path:none}
  .tl{grid-template-columns:1fr;gap:12px;padding-left:26px}
  .tl li::before{left:-19px;right:auto;top:0;bottom:-12px;width:2px;height:auto}
  .tl li:last-child::before{bottom:0}
  .tl li:has(.d.f)::before{background:repeating-linear-gradient(180deg,var(--graphite) 0 6px,transparent 6px 11px)}
  .tl li{grid-template-columns:52px 1fr;gap:0 10px}
  .tl .d{position:absolute;left:-26px;top:0;margin:0}
  .tl .y{height:auto}
  .tl .s{grid-column:2}
}
/* stredné obrazovky: hlavné karty na celú šírku, text vľavo a ukážka vpravo */
@media (max-width:1100px){
  .zia,.mie,.bento:has(.gro.live,.dov.live) .b.live,.bento:has(.gro.live,.dov.live) .mie{grid-column:span 12;grid-row:auto}
  .bento:has(.gro.live,.dov.live) .b.live{flex-direction:row;align-items:center;gap:30px;padding:28px}
  .bento:has(.gro.live,.dov.live) .b.live .vis{order:2;flex:1.1 1 0;margin:0}
  .bento:has(.gro.live,.dov.live) .b:not(.live):is(.gro,.dov),.bento:has(.gro.live,.dov.live) .cla{grid-column:span 6}
  .mie .nm{font-size:40px}
  .gro:not(.live),.dov:not(.live){flex-direction:column;align-items:stretch}  /* ukážka pod textom, vedľa by sa orezala */
  .gro:not(.live) .scr,.dov:not(.live) .scr{aspect-ratio:16/8}
}
@media (max-width:700px){
  .b,.zia,.mie,.bento .b.live,.bento:has(.gro.live,.dov.live) .b{grid-column:span 12}
  .b{padding:22px;border-radius:20px}
  .zia,.bento:has(.gro.live,.dov.live) .b.live{flex-direction:column;align-items:stretch;gap:18px;padding:24px 22px}
  .zia .vis,.bento:has(.gro.live,.dov.live) .b.live .vis{order:2;flex:none;margin:0}
  .zia .vis{margin-top:70px}
  .bodka-sit{width:84px;top:-80px;right:14px}
  .gro:not(.live),.dov:not(.live){flex-direction:column;align-items:stretch}
  .stats{gap:14px;margin:10px 0 18px}
  .stats span{font-size:11.5px}
  .stats b{font-size:26px}
}
@media (max-width:640px){.top nav a[href$="#klasicke"]{display:none}}

/* ---------- jeden orchestrovaný moment: úvod pri načítaní vyjde zdola, jeden blok po druhom ----------
   fill-mode backwards = posun platí len pred štartom, potom nič neprepisuje, takže hover funguje ďalej */
@keyframes rise{from{transform:translate(-9px,42px)}to{transform:none}}
@keyframes spin-dot{from{transform:translateY(.02em) rotate(-180deg)}to{transform:translateY(.02em)}}
.b{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
.b:nth-child(2){animation-delay:.08s}
.b:nth-child(3){animation-delay:.16s}
.b:nth-child(4){animation-delay:.22s}
.b:nth-child(n+5){animation-delay:.28s}
.logo .dot{animation:spin-dot .9s cubic-bezier(.2,.8,.2,1) .25s backwards}

@media (prefers-reduced-motion:reduce){
  .b,.go::after,.lnk::after{transition:none}
  a.b:hover,a.b:focus-visible{transform:none}
  .b,.logo .dot,.gro:hover .g-dot,.bodka-head,.bodka-eye{animation:none}
}

/* ---------- podstránka (zásady ochrany súkromia, odpoveď formulára bez JS) ---------- */
.page{max-width:72ch;margin-top:34px}
.page h1{max-width:none}
.page h2{margin:30px 0 0;font-size:22px;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:.01em}
.page p,.page li{font-size:15.5px;color:#2e3034}
.page p{margin-top:10px}
.page ul{margin:10px 0 0;padding-left:20px}
.page li{margin-top:4px}
.page a{border-bottom:2px solid var(--orange)}
.page .back{display:inline-block;margin-top:28px;font-weight:800}

/* Bodka v zimnej čiapke a šále len v zime (1. 12. – 28./29. 2.), ako v aplikácii; triedu pridáva site.js */
.bodka-zima{display:none}
.zima .bodka-zima{display:inline}