/* =====================================================
   TVÁMAPA — LIGHT / NOČNÍ MODRÁ  (varianta B, 2026-10-12)
   Odvozeno ze style.css (Observatoř+). Paleta: noční modrá #080F24 ·
   mlhovinová fialová #7775B8 · teplá bílá #F8F3EB. Písmo: Sonar Sans (Adobe Fonts kit mmi6drc) + Caveat jen na ruční anotace.
   Původní hlavička: Observatoř+ (varianta A)
   IBM Plex Mono · přístrojový klid · dramatičtější hero,
   datový pás jako hrdina, tvrdší hairline mřížka
   Fraunces (displejové nadpisy) × IBM Plex Mono (drobné + data)
   ===================================================== */

:root{
  --paper:#F8F3EB; --ink:#080F24; --muted:#6B6F85; --faint:#A9ACBC;
  --line:#E3DDD2; --line-strong:#D2CBBE; --line-2:#EFE9DE;
  --navy:#080F24; --nebula:#7775B8; --nebula-soft:#C9C8EC; --warm:#F8F3EB;
  /* lidštější vrstva: čtecí sans, fialový akcent, karty */
  --font-body:'sonar-sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --violet:#7775B8; --violet-ink:#5A58A0; --violet-soft:#ECEBF5; --violet-line:rgba(119,117,184,.55);
  --card:#FFFCF7; --radius:0;   /* ostré hrany (kulaté rohy záměrně ne) */
  /* černá linková ikona → fialová (PNG jsou černé kresby) */
  --ico-tint:invert(49%) sepia(14%) saturate(1100%) hue-rotate(203deg) brightness(93%);
  --font:'sonar-sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'sonar-sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --container:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1!important;transform:none!important}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}

.wrap{max-width:var(--container);margin:0 auto}

/* ============ NAV ============ */
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;font-size:12px;letter-spacing:.05em}
.brand{font-weight:600;letter-spacing:.02em}
.brand .tld{color:var(--muted);font-weight:400}
.nav-links{display:flex;gap:22px;color:var(--muted)}
.nav-links a{transition:color .2s}
.nav-links a::before{content:"[ "}
.nav-links a::after{content:" ]"}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
@media(max-width:600px){.nav-links{gap:12px;font-size:11px}}

/* ============ HERO (černá plocha — vlákna + plovoucí měsíce) ============ */
.hero{position:relative;text-align:center;padding:170px 26px 160px;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080F24;color:#F8F3EB;overflow:hidden;isolation:isolate}
/* pozadí — fotka Mléčné dráhy img/2599-hero.jpg — komprimovaná kopie 2599.jpg (jádro lehce nad středem, za titulkem) */
.hero-bg{position:absolute;inset:0;background-image:url("img/2599-hero.jpg");background-size:cover;background-position:50% 42%;background-color:#080F24;z-index:0}

/* měsíce — reálné PNG výřezy, plynulé plutí (obal = osa X, obrázek = osa Y, jen transform) */
.hero-planets{position:absolute;inset:0;z-index:1;pointer-events:none}
/* plynulost: translate3d + nepatrná rotace drží vrstvu v sub-pixelovém režimu (bez ní Chrome
   skáče po celých px), sinusový easing místo ease-in-out, mírně větší amplituda */
.orbit{position:absolute;display:block;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.orbit .planet{display:block;width:100%;height:auto;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0) rotate(.01deg)}
.orbit,.orbit .planet{animation-timing-function:cubic-bezier(.37,0,.63,1);animation-iteration-count:infinite;animation-direction:alternate}
.orbit--4{width:118px;left:4%;top:13%;opacity:.9;animation-name:fx;animation-duration:14s;animation-delay:-2s}
.orbit--4 .planet{animation-name:fy;animation-duration:11s;animation-delay:-5s}
.orbit--3{width:70px;right:9%;top:19%;opacity:.9;animation-name:fx;animation-duration:12s;animation-delay:-6s}
.orbit--3 .planet{animation-name:fy;animation-duration:9s;animation-delay:-1s}
.orbit--2{width:52px;left:11%;bottom:21%;opacity:.85;animation-name:fx;animation-duration:10s;animation-delay:-4s}
.orbit--2 .planet{animation-name:fy;animation-duration:13s;animation-delay:-8s}
.orbit--1{width:40px;left:3%;top:45%;opacity:.8;animation-name:fx;animation-duration:13s;animation-delay:-3s}
.orbit--1 .planet{animation-name:fy;animation-duration:8s;animation-delay:-7s}
.orbit--5{width:26px;right:27%;top:14%;opacity:.8;animation-name:fx;animation-duration:9s;animation-delay:-5s}
.orbit--5 .planet{animation-name:fy;animation-duration:10s;animation-delay:-2s}
/* každá osa jen přes transform → plně GPU; různé periody = neopakující se elipsa */
@keyframes fx{from{transform:translate3d(-12px,0,0) rotate(.01deg)}to{transform:translate3d(12px,0,0) rotate(.01deg)}}
@keyframes fy{from{transform:translate3d(0,-10px,0) rotate(.01deg)}to{transform:translate3d(0,10px,0) rotate(.01deg)}}
@media(prefers-reduced-motion:reduce){.orbit,.orbit .planet{animation:none!important}}
@media(max-width:600px){.orbit--4{width:76px}.orbit--3{width:46px}.orbit--2{width:36px}.orbit--1{display:none}.orbit--5{display:none}}

/* wash pro čitelnost textu (nad měsíci i vlákny, pod obsahem) */
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(8,15,36,.55) 0%,transparent 22%,transparent 70%,#080F24 100%),
    radial-gradient(100% 70% at 50% 48%,rgba(8,15,36,.6) 0%,rgba(8,15,36,.4) 38%,rgba(8,15,36,.15) 64%,transparent 85%)}

.hero-inner{position:relative;z-index:4;max-width:900px;margin:0 auto}
.hero .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:44px}
.hero h1{font-weight:400;font-size:clamp(48px,10vw,120px);line-height:1.02;letter-spacing:-.03em;max-width:14ch;margin:0 auto;color:#F8F3EB;text-shadow:0 2px 24px rgba(8,15,36,.85),0 1px 3px rgba(8,15,36,.9)}
.hero h1 .dim{color:rgba(255,255,255,.62)}
.hero-sub{margin:26px auto 0;max-width:48ch;font-size:14px;line-height:1.75;color:rgba(255,255,255,.68);text-shadow:0 1px 12px rgba(8,15,36,.8)}
.hero-cta{margin-top:40px;display:inline-flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.arrow-scroll{position:absolute;left:50%;bottom:28px;z-index:4;transform:translateX(-50%);width:34px;height:34px;border:0.5px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:14px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media(max-width:600px){.hero{padding:120px 22px 110px;min-height:calc(100vh - 60px);min-height:calc(100svh - 60px)}.hero-bg{background-position:44% 40%}}

/* ============ TLAČÍTKA ============ */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border:0.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{border:none;padding:15px 0;color:var(--muted)}
.btn-ghost:hover{background:transparent;color:var(--ink)}
/* světlé varianty na tmavé ploše */
.hero .btn{border-color:rgba(255,255,255,.6);color:#F8F3EB}
.hero .btn:hover{background:#F8F3EB;color:#080F24}
.hero .btn-ghost{border:none;color:rgba(255,255,255,.6)}
.hero .btn-ghost:hover{background:transparent;color:#F8F3EB}

/* ============ SEKCE ============ */
.sec{padding:86px 26px;border-bottom:0.5px solid var(--line-strong)}
.sec-label{font-size:11px;color:var(--muted);margin-bottom:26px;letter-spacing:.04em}
.sec h2{font-weight:500;font-size:clamp(34px,6vw,56px);line-height:1.08;letter-spacing:-.02em;margin-bottom:22px;max-width:20ch}
.sec-lede{font-size:13.5px;color:var(--muted);max-width:56ch;line-height:1.7;margin-bottom:48px}

/* sekce postup — vycentrovaná (jen #jak, ostatní sekce zůstávají vlevo) */
#jak{text-align:center}
#jak h2,#jak .sec-lede{margin-left:auto;margin-right:auto}

/* ============ TŘI KROKY (POSTUP) ============
   Každý krok: ilustrace (tenké linky, fialový akcent) → malý label 01 → nadpis → popis → štítek zdarma / jednorázově.
   Výchozí CSS = finální stav (bez JS, reduced motion). Třída .is-armed (JS) schová ilustrace do startu,
   .is-on je rozehraje, .is-linked protáhne spojovací linku k dalšímu kroku. Animuje se jen transform / opacity / stroke-dashoffset. */
.kroky{list-style:none;margin:0;padding:0;display:grid;position:relative}
.krok{position:relative}
.krok-ill{position:relative;width:168px;height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.krok-n{font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--violet-ink);margin:26px 0 12px}
.krok h3{margin-bottom:14px}
.kroky .krok p{font-size:15px;line-height:1.65;max-width:30ch}
.krok-tag{display:inline-block;margin-top:18px;padding:5px 13px;border:1px solid var(--violet-line);border-radius:0;
  font-family:var(--font);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-ink)}
.krok-tag--paid{background:var(--violet-soft);border-color:var(--violet-soft)}

/* 01 mini formulář */
.ill-form{width:150px;display:grid;gap:7px;text-align:left}
.ill-row{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px}
.ill-lbl{font-family:var(--font);font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ill-val{position:relative;height:26px;padding:0 8px;border:1px solid var(--line-strong);background:var(--card);
  font-family:var(--font);font-size:11px;line-height:24px;letter-spacing:.04em;color:var(--ink);white-space:nowrap;overflow:hidden}
.ill-row:first-child .ill-val{border-color:var(--violet-line)}
.ill-val.is-typing::after{content:"";display:inline-block;width:1px;height:12px;margin-left:1px;vertical-align:-2px;background:var(--violet);animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* 02 kolo */
.ill-wheel{width:128px;height:128px;overflow:visible}
.ill-wheel .d{fill:none;stroke:var(--ink);stroke-width:.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ill-wheel .d--spokes{stroke-width:.7;opacity:.7}
.ill-wheel .d--asc{stroke:var(--violet);stroke-width:1.1}
.ill-planets circle{fill:var(--violet)}

/* 03 zámek + 7 ikon kapitol */
.ill-lock{width:54px;height:58px;overflow:visible}
.ill-lock rect,.ill-lock path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.ill-lock .ill-key{stroke:var(--violet)}
.ill-shackle{transform-box:fill-box;transform-origin:100% 100%}
.ill-icons{display:flex;gap:4px;margin-top:14px}
.ill-icons img{width:20px;height:20px;object-fit:contain;filter:var(--ico-tint)}

/* výchozí stav animace (jen s JS) */
.is-armed .ill-row{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.is-armed .krok.is-on .ill-row{opacity:1;transform:none}
.is-armed .krok.is-on .ill-row:nth-child(2){transition-delay:.05s}
.is-armed .krok.is-on .ill-row:nth-child(3){transition-delay:.1s}
.is-armed .ill-wheel .d{stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.is-armed .krok.is-on .ill-wheel .d{stroke-dashoffset:0}
.is-armed .krok.is-on .ill-wheel .d:nth-child(2){transition-delay:.08s}
.is-armed .krok.is-on .ill-wheel .d:nth-child(3){transition-delay:.16s}
.is-armed .krok.is-on .ill-wheel .d--spokes{transition-delay:.2s}
.is-armed .krok.is-on .ill-wheel .d--asc{transition-delay:.35s}
.is-armed .ill-planets circle{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.6,.2,1)}
.is-armed .krok.is-on .ill-planets circle{opacity:1;transform:none}
.is-armed .krok.is-on .ill-planets circle:nth-child(1){transition-delay:.55s}
.is-armed .krok.is-on .ill-planets circle:nth-child(2){transition-delay:.62s}
.is-armed .krok.is-on .ill-planets circle:nth-child(3){transition-delay:.69s}
.is-armed .krok.is-on .ill-planets circle:nth-child(4){transition-delay:.76s}
/* zámek: v klidu zamčený, po rozehrání se třmen zvedne a pootočí */
.ill-shackle{transform:translateY(-7px) rotate(18deg)}
.is-armed .ill-shackle{transform:none;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.is-armed .krok.is-on .ill-shackle{transform:translateY(-7px) rotate(18deg)}
.is-armed .ill-icons img{opacity:.12;transition:opacity .25s ease}
.is-armed .krok.is-on .ill-icons img{opacity:1}
.is-armed .krok.is-on .ill-icons img:nth-child(1){transition-delay:.15s}
.is-armed .krok.is-on .ill-icons img:nth-child(2){transition-delay:.2s}
.is-armed .krok.is-on .ill-icons img:nth-child(3){transition-delay:.25s}
.is-armed .krok.is-on .ill-icons img:nth-child(4){transition-delay:.3s}
.is-armed .krok.is-on .ill-icons img:nth-child(5){transition-delay:.35s}
.is-armed .krok.is-on .ill-icons img:nth-child(6){transition-delay:.4s}
.is-armed .krok.is-on .ill-icons img:nth-child(7){transition-delay:.45s}

/* spojovací linka (desktop vodorovná mezi ilustracemi, mobil svislá vlevo) */
.krok:not(:last-child)::after{content:"";position:absolute;background:var(--violet-line)}

.kroky-cta{margin-top:52px;text-align:center}
.kroky-cta .btn-primary{background:var(--navy);color:var(--warm);border-color:var(--navy);padding:19px 34px;font-size:11.5px;letter-spacing:.2em;gap:12px}
.kroky-cta .btn-primary:hover{background:transparent;color:var(--navy)}
.kroky-note{margin:16px auto 0;font-family:var(--font-body);font-size:14px;color:rgba(8,15,36,.68)}

@media(min-width:768px){
  .kroky{grid-template-columns:repeat(3,1fr);margin-top:12px}
  .krok{display:flex;flex-direction:column;align-items:center;padding:0 22px}
  .krok-ill{margin:0 auto}
  .kroky .krok p{margin:0 auto 18px}
  .kroky .krok-tag{margin-top:auto}
  /* linka od pravého okraje ilustrace ke levému okraji další */
  .krok:not(:last-child)::after{top:64px;left:calc(50% + 96px);right:calc(-50% + 96px);height:1px;transform-origin:left center}
  .is-armed .krok:not(:last-child)::after{transform:scaleX(0);transition:transform .35s cubic-bezier(.4,0,.2,1)}
  .is-armed .krok.is-linked::after{transform:none}
}
@media(max-width:767px){
  #jak{text-align:left}
  #jak h2,#jak .sec-lede{margin-left:0;margin-right:0}
  .kroky{gap:0}
  /* svislá timeline: tečka + linka vlevo, ilustrace nad textem */
  .krok{padding:0 0 44px 40px}
  .krok:last-child{padding-bottom:0}
  .krok::before{content:"";position:absolute;left:4px;top:60px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--violet)}
  .krok:not(:last-child)::after{left:8px;top:76px;bottom:-58px;width:1px;transform-origin:top center}
  .is-armed .krok:not(:last-child)::after{transform:scaleY(0);transition:transform .6s cubic-bezier(.4,0,.2,1)}
  .is-armed .krok.is-linked::after{transform:none}
  .krok-ill{justify-content:center;align-items:flex-start}
  .krok-n{margin-top:20px}
  .kroky .krok h3{font-size:24px}
  .kroky .krok p{font-size:15.5px;max-width:none}
  .kroky-cta{margin-top:44px}
  .kroky-cta .btn-primary{width:100%;max-width:360px;justify-content:center}
}

/* ============ ATLAS — světlá sekce, karty s černým akcentem ============ */
.sec--atlas{text-align:center;padding-top:116px;padding-bottom:116px}
.sec--atlas h2{margin-left:auto;margin-right:auto}
.sec--atlas .sec-lede{margin:0 auto 50px}
/* karty na podkladu, dotýkají se → sdílená hairline mřížka */
.atlas-cards{display:grid;grid-template-columns:repeat(3,1fr);text-align:left;
  border-top:0.5px solid var(--line-strong);border-left:0.5px solid var(--line-strong)}
.atlas-card{position:relative;border-right:0.5px solid var(--line-strong);border-bottom:0.5px solid var(--line-strong);
  padding:32px 56px 34px 28px;transition:border-color .25s}
.atlas-card:hover{border-color:var(--ink)}
/* liniová ikona kapitoly — v rohu, mono (brightness 0), jen jemně naznačená */
.atlas-ico{position:absolute;top:22px;right:22px;width:34px;height:34px;object-fit:contain;filter:brightness(0);opacity:.22;transition:opacity .4s,transform .3s;z-index:2}
/* obsah karty nad případným stínem (::before) — text zůstává čitelný */
.atlas-body{position:relative;z-index:1}
/* kicker jako jmenovka: tečka + drobný název kapitoly (bez výplně) */
.atlas-kicker{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin-bottom:12px}
.atlas-kicker::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:middle;position:relative;top:-1px}
.atlas-card h3{font-weight:600;font-size:clamp(18px,2.3vw,22px);color:var(--ink);margin-bottom:11px;line-height:1.25;letter-spacing:-.01em}
.atlas-tags{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:14px}
.atlas-card p{font-size:13px;color:var(--muted);line-height:1.7}
/* tichá poznámka o zamčeném obsahu */
.atlas-lock{margin-top:14px;font-size:11px;color:var(--faint);letter-spacing:.02em}
/* shrnující věta pod mřížkou (sekce je centrovaná) */
.atlas-summary{max-width:52ch;margin:40px auto 0;font-size:12.5px;color:var(--muted);line-height:1.7}
/* první karta přes celou šířku (mřížka = čistý obdélník) */
.atlas-card:first-child{grid-column:1 / -1}
.atlas-card:first-child .atlas-body{max-width:64ch}
@media(max-width:900px){.atlas-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.atlas-cards{grid-template-columns:1fr}}

/* ============ ATLAS — HOVER ANIMACE IKON (per-karta, mono) ============ */
/* výchozí: ladné zhoupnutí (Kořeny, Přátelství, Zdraví — bez data-anim) */
@keyframes icon-sway{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-6px) rotate(-4deg)}
  52%{transform:translateY(-2px) rotate(3deg)}
  76%{transform:translateY(-7px) rotate(-2deg)}
  100%{transform:translateY(0) rotate(0)}
}
.atlas-card:hover .atlas-ico{opacity:.5;animation:icon-sway 2.8s ease-in-out infinite}

/* Poslání — zoom (přiblížení k pozorovateli) */
.atlas-card[data-anim="zoom"]:hover .atlas-ico{
  animation:none;transform:scale(1.28);opacity:.55;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),opacity .4s}

/* Láska — heartbeat */
@keyframes heartbeat{
  0%{transform:scale(1)}10%{transform:scale(1.22)}
  22%{transform:scale(1.04)}33%{transform:scale(1.15)}
  55%{transform:scale(1)}100%{transform:scale(1)}
}
.atlas-card[data-anim="heart"]:hover .atlas-ico{
  animation:heartbeat 2.2s ease-in-out infinite;opacity:.55}

/* Peníze — vyrolování 2 mincí (nad obsahem, z-index:2) */
.atlas-card[data-anim="coins"]::before,
.atlas-card[data-anim="coins"]::after{
  content:"";position:absolute;right:22px;top:22px;width:34px;height:34px;
  background:url("img/penize.png") center/contain no-repeat;
  filter:brightness(0);opacity:0;pointer-events:none;z-index:2}
@keyframes coin-roll-1{0%{transform:translateX(0) rotate(0);opacity:0}
  20%{opacity:.3}100%{transform:translateX(-48px) rotate(220deg);opacity:.3}}
@keyframes coin-roll-2{0%{transform:translateX(0) rotate(0);opacity:0}
  25%{opacity:.22}100%{transform:translateX(-90px) rotate(380deg);opacity:.22}}
.atlas-card[data-anim="coins"]:hover::before{animation:coin-roll-1 1.5s cubic-bezier(.25,.8,.4,1) .1s forwards}
.atlas-card[data-anim="coins"]:hover::after{animation:coin-roll-2 1.8s cubic-bezier(.25,.8,.4,1) .22s forwards}
.atlas-card[data-anim="coins"]:hover .atlas-ico{animation:none;opacity:.55}

/* Stín — tmavý závoj přejede kartu (shora dolů); z-index:0 = pod textem */
@keyframes shadow-sweep{
  0%{clip-path:inset(0 0 100% 0);opacity:1}
  45%{clip-path:inset(0 0 0% 0);opacity:1}
  100%{clip-path:inset(0 0 0% 0);opacity:0}
}
.atlas-card[data-anim="shadow"]::before{
  content:"";position:absolute;inset:0;background:rgba(8,15,36,.16);
  opacity:0;pointer-events:none;z-index:0}
.atlas-card[data-anim="shadow"]:hover::before{animation:shadow-sweep 1.4s ease forwards}
/* ALTERNATIVA — sweep zleva doprava (pro porovnání odkomentuj a zakomentuj řádek výše):
@keyframes shadow-sweep-lr{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  45%{clip-path:inset(0 0% 0 0);opacity:1}
  100%{clip-path:inset(0 0% 0 0);opacity:0}
}
.atlas-card[data-anim="shadow"]:hover::before{animation:shadow-sweep-lr 1.4s ease forwards}
*/

@media (prefers-reduced-motion:reduce){
  .atlas-card .atlas-ico,.atlas-card::before,.atlas-card::after{animation:none!important}
}

/* ============ OSA ŽIVOTA — podpisová tmavá scéna ============ */
.sec--osa{position:relative;background:#080F24;color:#F8F3EB;border-bottom:none;text-align:center;padding:0}
.osa-pin{position:relative;isolation:isolate;overflow:hidden;padding:150px 26px}
.osa-pin::before{content:"";position:absolute;inset:0;background:url("img/596-osa.jpg") center 55%/cover no-repeat;opacity:.85;z-index:-2}
/* scroll režim (JS přidá .is-scrolly + výšku sekce): obsah přišpendlený, scroll proklikává roky zleva doprava */
.sec--osa.is-scrolly .osa-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px 26px}
.sec--osa.is-scrolly .osa-pin > .wrap{width:100%}
.sec--osa.is-scrolly .osa-pt-prog{opacity:1;transition:transform .12s linear}
.osa-pin::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,rgba(8,15,36,.3) 0%,rgba(8,15,36,.6) 55%,rgba(8,15,36,.94) 100%);z-index:-1}
.sec--osa .sec-label{color:rgba(255,255,255,.5)}
.sec--osa h2{color:#F8F3EB;margin-left:auto;margin-right:auto}
.sec--osa .sec-lede{color:rgba(255,255,255,.6);margin:0 auto 56px}
.osa-widget{text-align:left}

/* osa s klikacími body */
.osa-track{position:relative;display:flex;justify-content:space-between;align-items:flex-start;outline:none}
.osa-track:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:6px}
.osa-track::before{content:"";position:absolute;top:6.5px;left:0;right:0;height:0.5px;z-index:0;background:rgba(255,255,255,.22)}
.osa-pt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;background:none;border:none;padding:0 6px;cursor:pointer;font-family:inherit}
.osa-pt-dot{position:relative;width:13px;height:13px;border-radius:50%;box-sizing:border-box;background:#080F24;transition:transform .2s,box-shadow .2s}
.osa-pt-year{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.04em;transition:color .2s}
.osa-pt:hover .osa-pt-dot{transform:scale(1.18)}
.osa-pt:hover .osa-pt-year{color:#F8F3EB}
/* stavy — monochromní, odlišené tvarem tečky (bílé na tmavé) */
.osa-pt--challenge .osa-pt-dot{background:#F8F3EB}
.osa-pt--free .osa-pt-dot{background:transparent;border:1.5px solid #F8F3EB}
.osa-pt--milestone .osa-pt-dot{background:#F8F3EB}
.osa-pt--milestone .osa-pt-dot::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(255,255,255,.7);border-radius:50%}
.osa-pt.is-active .osa-pt-dot{box-shadow:0 0 0 5px rgba(255,255,255,.16),0 0 12px 2px rgba(255,255,255,.55);animation:osaPulse 2.6s ease-in-out infinite}
.osa-pt.is-active .osa-pt-year{color:#F8F3EB;font-weight:600}
/* zamčené (náhledové) body — jemně ztlumené, hover i aktiv fungují dál */
.osa-pt.is-locked .osa-pt-dot{opacity:.55}
.osa-pt.is-locked:hover .osa-pt-dot,.osa-pt.is-locked.is-active .osa-pt-dot{opacity:1}
@keyframes osaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
/* autoplay: tenká progress linka pod aktivním rokem (0→100 % za 8 s) */
.osa-pt-prog{position:absolute;left:6px;right:6px;bottom:-9px;height:1px;background:rgba(255,255,255,.75);transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none}
.osa-pt-prog.is-ticking{opacity:1;animation:osaProg 6s linear forwards}
.osa-widget.is-paused .osa-pt-prog.is-ticking{animation-play-state:paused}
@keyframes osaProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* jemný fade+slide textu panelu při změně roku */
.osa-fx{animation:osaIn .18s ease}
@keyframes osaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* autoplay crossfade obsahu (~0,5 s výměna: fade out → swap → fade in) */
.osa-panel-left,.osa-panel-body{transition:opacity .26s ease}
.osa-cross{opacity:0}

/* detailní panel */
.osa-panel{display:flex;align-items:flex-start;gap:34px;border-top:0.5px solid rgba(255,255,255,.2);margin-top:42px;padding-top:34px}
.osa-panel-left{flex-shrink:0}
.osa-panel-year{font-size:clamp(56px,12vw,120px);font-weight:400;letter-spacing:-.03em;line-height:1;color:#F8F3EB}
.osa-tag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.osa-tag-dot{position:relative;width:9px;height:9px;border-radius:50%;box-sizing:border-box;flex-shrink:0}
.osa-tag--challenge .osa-tag-dot{background:#F8F3EB}
.osa-tag--free .osa-tag-dot{background:transparent;border:1.5px solid #F8F3EB}
.osa-tag--milestone .osa-tag-dot{background:#F8F3EB;box-shadow:0 0 0 2px #080F24,0 0 0 3px rgba(255,255,255,.7)}
.osa-panel-body{flex:1;min-width:0;min-height:276px;padding-top:clamp(16px,4.2vw,46px)}
.osa-panel-body h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;font-size:clamp(24px,3.4vw,34px);color:#F8F3EB;margin-bottom:14px;line-height:1.22}
.osa-panel-body p{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.75;max-width:62ch}
/* jemná pobídka u zamčených bodů */
.osa-lock{margin-top:14px;font-size:11.5px;font-style:italic;color:rgba(255,255,255,.42);letter-spacing:.02em}
.osa-lock[hidden]{display:none}
.osa-nav{display:flex;gap:10px;flex-shrink:0}
.osa-arrow{width:44px;height:44px;border-radius:50%;border:0.5px solid rgba(255,255,255,.3);background:none;color:#F8F3EB;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.osa-arrow:hover{background:#F8F3EB;color:#080F24;border-color:#F8F3EB}
.osa-arrow:disabled{opacity:.28;cursor:default}
.osa-arrow:disabled:hover{background:none;color:#F8F3EB;border-color:rgba(255,255,255,.3)}

/* pata: legenda + poznámka */
.osa-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:36px}
.osa-legend{display:flex;flex-wrap:wrap;gap:22px;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.02em}
.osa-legend .lg{display:inline-flex;align-items:center;gap:8px}
.osa-legend .dot{position:relative;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.osa-legend .lg--challenge .dot{background:#F8F3EB}
.osa-legend .lg--free .dot{background:transparent;border:1.5px solid #F8F3EB}
.osa-legend .lg--milestone .dot{background:#F8F3EB;box-shadow:0 0 0 2.5px #080F24,0 0 0 4px rgba(255,255,255,.7)}
.osa-note{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.02em}

@media(max-width:640px){
  .osa-pt-year{display:none}
  .osa-panel{flex-direction:column;gap:18px}
  .osa-panel-left{width:auto;display:flex;align-items:center;gap:14px}
  .osa-tag{margin-top:0}
  .osa-panel-body{padding-top:0;min-height:0}
  .osa-nav{order:3}
}

/* ============ TECHNICKÝ PÁS (kolofon) — kompaktní, ne prodejní ============ */
.sec--tech{padding-top:36px;padding-bottom:36px}
.sec--tech .sec-label{margin-bottom:20px}
.tech-row{display:grid;grid-template-columns:1fr;border-top:0.5px solid var(--line-strong)}
.tech-item{padding:18px 0;border-bottom:0.5px solid var(--line)}
.tech-item:last-child{border-bottom:none}
@media(min-width:760px){
  .tech-row{grid-template-columns:repeat(3,1fr)}
  .tech-item{border-bottom:none;border-right:0.5px solid var(--line);padding:20px 26px}
  .tech-item:first-child{padding-left:0}
  .tech-item:last-child{border-right:none;padding-right:0}
}
.tech-item .tn{display:block;font-size:11px;color:var(--faint);letter-spacing:.06em;margin-bottom:9px}
.tech-item b{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:5px}
.tech-item p{font-size:11.5px;color:var(--muted);line-height:1.6}
.disclaimer{font-size:11px;color:var(--faint);border-top:0.5px solid var(--line);padding-top:20px;margin-top:44px;line-height:1.85}

/* ============ NÁSTROJE — dvě tmavé karty na papíru ============
   Pořadí v kartě: ikona (inline SVG) → eyebrow → nadpis → chipy / přepínač → okno ukázky → popis → cena → CTA.
   JS: „NÁSTROJE · karta 1“ (chipy + typewriter) a „NÁSTROJE · karta 2“ (graf dvou křivek). */
.sec--tools{background:var(--paper);text-align:center;padding:110px 26px}
.sec--tools .sec-label{color:var(--muted)}
.sec--tools h2{color:var(--ink);margin:0 auto 18px}
.sec--tools .sec-lede{color:var(--muted);margin:0 auto 56px;font-size:12.5px;max-width:48ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tools{display:grid;grid-template-columns:1fr 1fr;gap:28px;text-align:left;align-items:stretch}
.tool{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#080F24;padding:48px;transition:transform .3s}
.tool:hover{transform:translateY(-3px)}
/* jemné hvězdné pole čistě v CSS — pod obsahem karty */
.tool::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 25% 28%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 62%,rgba(255,255,255,.3),transparent 60%),
    radial-gradient(1px 1px at 48% 88%,rgba(255,255,255,.25),transparent 60%);
  background-size:130px 130px,100px 100px,175px 175px;
  background-position:0 0,42px 26px,14px 60px}
.tool > *{position:relative;z-index:1}

/* ikony: tenké linky (krémová), akcent fialová mlhovina */
.tool-icon{width:72px;height:72px;margin-bottom:28px;overflow:visible}
.tool-icon path,.tool-icon ellipse{fill:none;stroke:rgba(248,243,235,.86);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.tool-icon .tool-icon-acc{stroke:var(--nebula-soft)}
.tool-icon-dot{fill:rgba(248,243,235,.86)}
.tool-icon-fill{fill:rgba(248,243,235,.86)}
.tool-icon-fill--acc{fill:var(--nebula-soft)}

.tool-eyebrow{font-size:10.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px}
.tool-head{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;font-size:clamp(28px,3.2vw,38px);line-height:1.18;color:#F8F3EB;margin:14px 0 24px;transition:opacity .18s ease}
.tool-head.is-fading{opacity:0}

/* karta 1: chipy s otázkami */
.t1-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.t-chip{min-height:40px;padding:9px 16px;border:1px solid rgba(248,243,235,.28);background:transparent;color:rgba(248,243,235,.86);
  font-family:var(--font-body);font-size:13.5px;line-height:1.3;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.t-chip:hover{border-color:rgba(248,243,235,.6);color:#F8F3EB}
.t-chip[aria-pressed="true"]{background:var(--nebula-soft);border-color:var(--nebula-soft);color:var(--navy)}
.t-chip:focus-visible,.t2-seg-btn:focus-visible,.tool-cta:focus-visible{outline:1px solid #F8F3EB;outline-offset:3px}

/* okno ukázky (obě karty) */
.tool-demo{padding:22px;border:0.5px solid rgba(248,243,235,.12);background:rgba(248,243,235,.04);display:flex;flex-direction:column;justify-content:center;margin-bottom:28px}
.t1-demo{min-height:236px}
.t1-topic{display:inline-block;align-self:flex-start;margin-bottom:14px;padding:5px 10px;border:1px solid rgba(201,200,236,.45);
  font-family:var(--font);font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--nebula-soft)}
.t1-dialog{display:flex;flex-direction:column}
.t1-answer{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.6;color:rgba(248,243,235,.92)}
.t1-caret{display:inline-block;width:1px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--nebula-soft);opacity:0}
.is-typing .t1-caret{opacity:1;animation:blink 1.1s infinite}
.t-note{margin-top:16px;padding-top:14px;border-top:0.5px solid rgba(255,255,255,.1);font-family:var(--font);font-size:11.5px;letter-spacing:.06em;color:rgba(248,243,235,.6);line-height:1.5}

/* karta 2: přepínač + graf */
.t2-seg{display:inline-flex;align-self:flex-start;margin-bottom:22px;border:1px solid rgba(248,243,235,.28)}
.t2-seg-btn{min-height:40px;padding:8px 18px;background:transparent;border:none;border-left:1px solid rgba(248,243,235,.28);color:rgba(248,243,235,.8);
  font-family:var(--font);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.t2-seg-btn:first-child{border-left:none}
.t2-seg-btn:hover{color:#F8F3EB}
.t2-seg-btn[aria-pressed="true"]{background:var(--nebula-soft);color:var(--navy)}
.t2-demo{min-height:236px}
.t2-chart{position:relative}
.t2-svg{display:block;overflow:visible}
.t2-sync{transition:opacity .3s ease}
.t2-sync.is-out{opacity:0}
.t2-now{stroke:rgba(248,243,235,.32);stroke-width:1;stroke-dasharray:2 3}
.t2-now-lbl{fill:rgba(248,243,235,.66);font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.t2-curve{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.t2-curve--you{stroke:var(--nebula);stroke-width:2.2}
.t2-curve--other{stroke:rgba(248,243,235,.6);stroke-width:1.6}
.t2-edge{fill:rgba(248,243,235,.6);font-family:var(--font);font-size:11px;letter-spacing:.06em}
.t2-pt{cursor:pointer;outline:none}
.t2-pt-hit{fill:transparent}
.t2-pt-dot{fill:#F8F3EB;stroke:var(--nebula);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.t2-pt:hover .t2-pt-dot,.t2-pt:focus-visible .t2-pt-dot{transform:scale(1.35)}
.t2-pt:focus-visible .t2-pt-hit{stroke:#F8F3EB;stroke-width:1}
.t2-pt-lbl{fill:rgba(248,243,235,.86);font-family:var(--font);font-size:11.5px;letter-spacing:.04em}
.t2-tip{position:absolute;z-index:2;max-width:220px;padding:9px 12px;background:#F8F3EB;color:var(--navy);font-family:var(--font-body);font-size:13px;line-height:1.45;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.t2-tip[hidden]{display:none}
/* intro: křivky se jednou nakreslí, body a popisky doběhnou */
.t2-svg.is-waiting .t2-curve{stroke-dashoffset:1}
.t2-svg.is-waiting .t2-pt,.t2-svg.is-waiting .t2-sync{opacity:0}
.t2-svg.is-intro .t2-curve{animation:tools-draw 1.5s cubic-bezier(.4,0,.2,1) both}
.t2-svg.is-intro .t2-curve--you{animation-delay:.2s}
.t2-svg.is-intro .t2-pt,.t2-svg.is-intro .t2-sync{animation:chartFade .5s ease 1.4s both}
@keyframes tools-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes chartFade{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.t2-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-family:var(--font);font-size:12px;letter-spacing:.04em;color:rgba(248,243,235,.78)}
.t2-legend .lg{display:inline-flex;align-items:center;gap:8px}
.t2-legend i{display:inline-block;width:9px;height:9px;border-radius:50%}
.t2-legend .lg--you i{background:var(--nebula)}
.t2-legend .lg--other i{background:rgba(248,243,235,.6)}
.t2-legend .lg--sync i{width:16px;height:10px;border-radius:0;background:linear-gradient(180deg,rgba(119,117,184,.6),rgba(119,117,184,.12))}

.tool-desc{font-family:var(--font);font-size:14px;color:rgba(255,255,255,.66);line-height:1.7;margin-bottom:24px}
/* cena: samostatný řádek nad CTA — číslo zvýrazněné, doplněk tlumeně */
.tool-price{margin-top:auto;padding-top:20px;border-top:0.5px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-family:var(--font-body);font-size:15px;line-height:1.5}
.tool-price-main{color:#F8F3EB}
.tool-price-main b{font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--nebula-soft);letter-spacing:-.01em}
.tool-price-more{color:rgba(248,243,235,.7)}
.tool-price-more::before{content:"·";margin-right:14px;color:rgba(248,243,235,.4)}
.tool-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;font-family:var(--font);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#F8F3EB}
.tool-cta-arrow{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--nebula-soft);border-radius:50%;color:var(--nebula-soft);font-size:13px;letter-spacing:0;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.tool-cta:hover .tool-cta-arrow{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){.tool-head{transition:none}}
@media(max-width:899px){
  .tools{grid-template-columns:1fr;max-width:640px;margin:0 auto}
}
@media(max-width:600px){
  .sec--tools{padding:84px 20px}
  .tool{padding:34px 22px}
  .tool-demo{padding:18px 16px}
  .t1-demo{min-height:0}
  .t-chip{font-size:14px}
  .t2-seg{display:flex;align-self:stretch}
  .t2-seg-btn{flex:1;padding:8px 6px;letter-spacing:.1em}
  .t2-now-lbl,.t2-edge,.t2-pt-lbl{font-size:12px}
  .t-note,.t1-topic{font-size:12px}
  .tool-price-more::before{content:none}
  .tool-price{flex-direction:column;gap:2px}
}

/* ============ FAQ ============ */
.faq-item{border-top:0.5px solid var(--line)}
.faq-item:last-child{border-bottom:0.5px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;background:none;border:none;cursor:pointer;padding:20px 0;text-align:left;font-family:var(--font);font-size:13.5px;font-weight:500;color:var(--ink);transition:color .2s}
.faq-q:hover{color:var(--muted)}
.faq-plus{font-size:14px;color:var(--muted);transition:transform .3s}
.faq-item.open .faq-plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.6,.2,1),padding .4s;font-size:12.5px;color:var(--muted);line-height:1.7}
.faq-item.open .faq-a{max-height:280px;padding-bottom:20px}

/* ============ FORMULÁŘ ============ */
label{display:block;font-size:11px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.field{flex:1;min-width:150px}
input{width:100%;padding:13px 14px;border:0.5px solid var(--line-strong);font-family:var(--font);font-size:13px;background:#FFFCF7;color:var(--ink)}
input:focus{outline:none;border-color:var(--ink)}
.form-note{font-size:11px;color:var(--faint);margin-top:16px;line-height:1.6}
.pole-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ CTA (černá plocha) ============ */
.cta{position:relative;padding:150px 26px;text-align:center;background:#080F24;color:#F8F3EB;overflow:hidden;isolation:isolate}
.cta-bg{position:absolute;inset:0;background-image:url("img/cta.jpg");background-size:cover;background-position:center;opacity:.5;z-index:-2}
.cta-veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(8,15,36,.42) 0%,rgba(8,15,36,.85) 100%);z-index:-1}
.cta .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:24px}
.cta h2{font-weight:500;font-size:clamp(42px,8vw,92px);line-height:1.02;margin-bottom:22px;color:#F8F3EB}
.cta > .wrap > p{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:44px}
.form-card{max-width:440px;margin:0 auto;text-align:left}
.cta label{color:rgba(255,255,255,.55)}
.cta input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#F8F3EB}
.cta input::placeholder{color:rgba(255,255,255,.4)}
.cta input:focus{border-color:#F8F3EB}
.cta .btn{border-color:rgba(255,255,255,.6);color:#F8F3EB}
.cta .btn:hover{background:#F8F3EB;color:#080F24}
.cta .form-note{color:rgba(255,255,255,.4)}

/* ============ VÝPOČET / ZAČNI TADY — formulář + výsledek (poloprůhledné karty na fotku) ============ */
.calc{max-width:none;margin:0 auto;text-align:left}   /* výsledek plná šířka .wrap (formulářová karta zůstává úzká) */
.calc-card{max-width:560px;margin:0 auto;background:rgba(10,10,14,.85);border:1px solid rgba(255,255,255,.14);padding:34px}
.calc .err{font-family:var(--font);font-size:12px;color:#F8F3EB;border:1px solid rgba(255,255,255,.14);padding:12px 16px;margin-bottom:18px;display:none;line-height:1.6}
.calc label{display:block;font-family:var(--font);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.62);margin:0 0 8px;text-transform:lowercase}
.calc .opt{color:rgba(255,255,255,.4)}
.calc .field{margin-bottom:22px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc input,.calc select{width:100%;background:transparent;border:1px solid rgba(255,255,255,.14);color:#F8F3EB;font-family:var(--font);font-size:14px;padding:14px 16px;border-radius:0;outline:none;transition:border-color .25s;color-scheme:dark;appearance:none;-webkit-appearance:none}
.calc select{background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.4) 50%),linear-gradient(135deg,rgba(255,255,255,.4) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.calc input:focus,.calc select:focus{border-color:rgba(255,255,255,.3)}
.calc input:focus-visible,.calc select:focus-visible,.calc button:focus-visible{outline:1px solid #F8F3EB;outline-offset:2px}
/* spojená skupina den/měsíc/rok a hodina/minuta */
.calc .dategroup,.calc .timegroup{display:flex;align-items:center;border:1px solid rgba(255,255,255,.14)}
.calc .dategroup input,.calc .timegroup input{border:none;width:auto;flex:1 1 0;text-align:center;letter-spacing:.14em;min-width:0}
.calc #by{flex:1.7 1 0}
.calc .dategroup .sep,.calc .timegroup .sep{font-family:var(--font);font-size:13px;color:rgba(255,255,255,.35);padding:0 2px;user-select:none}
.calc .dategroup input:focus,.calc .timegroup input:focus{background:rgba(255,255,255,.06)}
.calc .timegroup.off{opacity:.4}
.calc .chk{display:flex;align-items:center;gap:10px;margin-top:10px;cursor:pointer;text-transform:none}
.calc .chk input{width:14px;height:14px;padding:0;accent-color:#F8F3EB;cursor:pointer;border:none}
.calc .chk span{font-family:var(--font);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.calc button.go{width:100%;background:transparent;border:1px solid rgba(255,255,255,.3);color:#F8F3EB;font-family:var(--font);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:18px;border-radius:0;cursor:pointer;transition:background .25s,color .25s;margin-top:6px}
.calc button.go:hover{background:#F8F3EB;color:#080F24}
.calc .note{font-family:var(--font);font-size:11px;line-height:1.8;color:rgba(255,255,255,.4);text-align:center;margin-top:20px}
/* ---- formulářová KARTA invertovaná na světlou (papír na noci); výsledek .calc-result zůstává tmavý ---- */
.calc-card{background:var(--paper);border:none;padding:44px;box-shadow:0 20px 60px rgba(8,15,36,.5)}
.calc-card .err{color:var(--ink);border-color:rgba(8,15,36,.3)}
.calc-card label{color:var(--muted)}
.calc-card .opt{color:rgba(8,15,36,.35)}
.calc-card input,.calc-card select{border-color:rgba(8,15,36,.25);color:var(--ink);color-scheme:light}
.calc-card input::placeholder{color:rgba(8,15,36,.35)}
.calc-card select{background-image:linear-gradient(45deg,transparent 50%,rgba(8,15,36,.45) 50%),linear-gradient(135deg,rgba(8,15,36,.45) 50%,transparent 50%)}
.calc-card input:focus,.calc-card select:focus{border-color:rgba(8,15,36,.6)}
.calc-card input:focus-visible,.calc-card select:focus-visible,.calc-card button:focus-visible{outline-color:var(--ink)}
.calc-card .dategroup,.calc-card .timegroup{border-color:rgba(8,15,36,.25)}
.calc-card .dategroup .sep,.calc-card .timegroup .sep{color:rgba(8,15,36,.55)}
.calc-card .dategroup input:focus,.calc-card .timegroup input:focus{background:rgba(8,15,36,.04)}
.calc-card .chk input{accent-color:var(--ink)}
.calc-card .chk span{color:var(--muted)}
/* tlačítko = nejtmavší objekt karty (plný inkoust, papírový text) */
.calc-card button.go{background:#080F24;border-color:#080F24;color:var(--paper)}
.calc-card button.go:hover{background:#080F24;color:var(--paper);opacity:.85}
/* mikrocopy pod tlačítkem — poslední řádek uvnitř karty, tlumený inkoust */
.calc-card .note{color:var(--muted)}
/* ============ VÝSLEDEK — světlá plocha „první vrstva" na noci ============ */
.calc-result{display:none;margin-top:56px;background:var(--paper);padding:clamp(28px,5vw,56px);box-shadow:0 20px 60px rgba(8,15,36,.5)}
.calc-result.show{display:block}
.calc-result .res-eyebrow{font-family:var(--font);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:20px}
.calc-result .res-h{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,5vw,42px);text-align:center;margin-bottom:10px;color:var(--ink)}
.calc-result .res-sub{font-family:var(--font);font-size:12px;color:var(--muted);text-align:center;margin-bottom:48px;letter-spacing:.06em}
/* jemný fade-in bloků v pořadí trojka → Slunce → pás → kapitoly → osa */
.sun-read,.belt,.portrait,.chapters,.miniosa{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.sun-read.in,.belt.in,.portrait.in,.chapters.in,.miniosa.in{opacity:1;transform:none}
/* velká trojka (světlá) */
.calc-result .big3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong);background:transparent}
.calc-result .b3{padding:38px 30px 34px;border-right:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.calc-result .b3:last-child{border-right:none}
.calc-result .b3.in{opacity:1;transform:none}
.calc-result .b3 .what{font-family:var(--font);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.calc-result .b3 .glyph{font-size:30px;line-height:1;margin-bottom:16px;color:var(--ink)}
.calc-result .b3 .sign{font-family:var(--font-display);font-weight:400;font-size:30px;margin-bottom:6px;color:var(--ink)}
.calc-result .b3 .deg{font-family:var(--font);font-size:12px;color:rgba(8,15,36,.7);margin-bottom:20px;letter-spacing:.08em}
.calc-result .b3 p{font-size:13.5px;line-height:1.75;color:rgba(8,15,36,.6)}
.calc-result .moon-warn{font-family:var(--font);font-size:10.5px;line-height:1.7;color:var(--muted);margin-top:14px}
/* Slunce — plný odstavec výkladu (první doušek, zdarma; bez fade/zámku) */
.sun-read{margin-top:26px;padding:24px 26px;border-left:2px solid var(--ink);background:rgba(8,15,36,.02)}
.sun-read .sr-lbl{font-family:var(--font);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.sun-read p{font-family:var(--font);font-size:14px;line-height:1.8;color:rgba(8,15,36,.72);max-width:64ch}
/* pás planet (světlá datová mřížka) */
.belt{margin-top:44px}
.belt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-strong);background:transparent}
.belt-item{font-family:var(--font);font-size:12px;letter-spacing:.03em;color:rgba(8,15,36,.62);padding:15px 8px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.belt-item:nth-child(4n){border-right:none}
.belt-item:nth-child(n+5){border-bottom:none}
.belt-g{color:var(--ink);margin-right:2px}
/* blok „Kdo jsi" — portrét (úvodní věta + nejtěsnější aspekt + uzly), ochutnávka s fade + zámek */
.portrait{margin-top:44px}
.portrait[hidden]{display:none}
.portrait-h{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:6px 0 20px;line-height:1.12}
.portrait-intro{font-family:var(--font);font-size:14.5px;line-height:1.8;color:rgba(8,15,36,.72);max-width:66ch}
/* nejtěsnější aspekt = spočítaný datový trhák (mono, orbis klíčové číslo) */
.portrait-aspect{font-family:var(--font);font-size:13px;letter-spacing:.03em;color:var(--ink);line-height:1.6;margin:26px 0;padding:16px 20px;border:1px solid var(--line-strong);background:rgba(8,15,36,.02)}
.portrait-aspect .pa-orb{font-weight:600;letter-spacing:.02em}
.portrait-aspect .pa-note{color:var(--muted)}
/* náznak uzlů: datový řádek (plný) + věta o směru (fade) */
.portrait-nodes-line{font-family:var(--font);font-size:12px;letter-spacing:.06em;color:var(--ink);margin-bottom:10px}
.portrait-nodes-text{font-family:var(--font);font-size:13.5px;line-height:1.75;color:rgba(8,15,36,.62);max-width:64ch}
/* fade do ztracena (jen výkladové věty, ne data) */
.portrait-fade{overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#080F24 52%,transparent);mask-image:linear-gradient(180deg,#080F24 52%,transparent)}
.portrait-intro.portrait-fade{max-height:80px}
.portrait-nodes-text.portrait-fade{max-height:64px}
.portrait-lock{font-family:var(--font);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* sedm kapitol jako karty atlasu: ORNAMENT IKONA, DATA štědře, výklad ochutnávka s fade */
.chapters{margin-top:52px}
.chap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong)}
.chap{position:relative;padding:34px 32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.chap-ico{position:absolute;top:26px;right:26px;width:40px;height:40px;object-fit:contain;object-position:top right;opacity:.42;pointer-events:none}
.chap-name{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--ink);margin-bottom:4px;padding-right:48px}
.chap-sub{font-family:var(--font);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:20px}
.chap-data{font-family:var(--font);font-size:11px;letter-spacing:.03em;color:var(--ink);line-height:1.65;padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.chap-frag{position:relative;max-height:104px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#080F24 46%,transparent);mask-image:linear-gradient(180deg,#080F24 46%,transparent)}
.chap-frag p{font-family:var(--font);font-size:13px;line-height:1.72;color:rgba(8,15,36,.6)}
.chap-lock{font-family:var(--font);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
@media(max-width:900px){.chap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.chap-grid{grid-template-columns:1fr}}
/* náhledová osa = KLON widgetu #osa (sdílené .osa-* třídy) na vlastním černém panelu */
.miniosa{margin-top:44px}
.osa-widget--preview{position:relative;isolation:isolate;background:#080F24;padding:clamp(26px,4vw,44px)}
/* noční atmosféra: jemné CSS hvězdné pole + tlumený střed (žádný foto soubor) */
.osa-widget--preview::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(120% 90% at 50% 24%,rgba(255,255,255,.05) 0%,transparent 60%),
    radial-gradient(1px 1px at 16% 30%,rgba(255,255,255,.35),transparent 60%),
    radial-gradient(1.3px 1.3px at 67% 58%,rgba(255,255,255,.28),transparent 60%),
    radial-gradient(1px 1px at 42% 82%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(1px 1px at 86% 22%,rgba(255,255,255,.26),transparent 60%);
  background-size:100% 100%,150px 150px,120px 120px,185px 185px,140px 140px;
  background-position:0 0,0 0,40px 30px,20px 60px,60px 12px}
/* body rozmístěné ROVNOMĚRNĚ přes celou šířku (flex etalonu #osa) — dědí z .osa-track */
/* rozbalený rok: výkladová ukázka mizí do ztracena (fade) */
.osa-widget--preview .osa-panel-body p.pv-fade{max-height:90px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#080F24 48%,transparent);mask-image:linear-gradient(180deg,#080F24 48%,transparent)}
.miniosa-note{font-family:var(--font);font-size:11px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:64ch}
/* technický řádek */
.calc-result .tech{font-family:var(--font);font-size:10.5px;letter-spacing:.1em;color:var(--muted);text-align:center;margin-top:32px;line-height:2}
/* zamčené CTA */
.calc-result .locked{margin-top:52px}
.calc-result .locked .res-eyebrow{margin-bottom:26px}
.calc-result .cta-row{text-align:center;margin-top:6px}
.calc-result button.cta-unlock{background:#080F24;color:var(--paper);border:1px solid #080F24;font-family:var(--font);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:18px 46px;border-radius:0;cursor:pointer;transition:opacity .25s}
.calc-result button.cta-unlock:hover{opacity:.85}
.calc-result .cta-note{font-family:var(--font);font-size:11px;color:var(--muted);margin-top:16px;letter-spacing:.08em}
@media(max-width:760px){
  .calc-result .big3{grid-template-columns:1fr}
  .calc-result .b3{border-right:none;border-bottom:1px solid var(--line)}
  .calc-result .b3:last-child{border-bottom:none}
  .belt-grid{grid-template-columns:repeat(2,1fr)}
  .belt-item{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .belt-item:nth-child(2n){border-right:none}
  .belt-item:nth-child(n+7){border-bottom:none}
  .calc .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sun-read,.belt,.portrait,.chapters,.miniosa{opacity:1;transform:none;transition:none}
  .calc-result .b3{transition:none;opacity:1;transform:none}
}

/* ============ PATIČKA ============ */
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:36px 26px;font-size:11px;color:var(--faint)}
.footer a{text-decoration:underline}

/* ============ DISPLEJOVÉ NADPISY — Fraunces (teplý serif) ============ */
/* jen velké nadpisy; vše drobné a datové zůstává IBM Plex Mono */
.hero h1,.osa-panel-year{font-family:var(--font-display);font-weight:300;letter-spacing:-.015em}
.sec h2,.cta h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em}

/* =====================================================
   VRSTVA 2 — LIDŠTĚJŠÍ TÓN
   Pravidlo: Fraunces = nadpisy · Manrope = čtecí text · Plex Mono = data a štítky.
   Přepisuje pravidla výše (sdílené homepage + placená stránka).
   ===================================================== */

/* --- čtecí text → Manrope (o chlup větší, mono při stejné velikosti působí větší) --- */
.hero-sub,.sec-lede,.krok p,.atlas-card p,.atlas-summary,.faq-a,.tool-desc,.osa-panel-body p,.cta > .wrap > p,
.tech-item p,.disclaimer,.form-note,.calc-result .b3 p,.sun-read p,.portrait-intro,.portrait-nodes-text,
.chap-frag p,.miniosa-note,.calc .note,.demo-q,.osa-lock,.calc-result .moon-warn,.footer{font-family:var(--font-body)}
.hero-sub{font-size:16px;line-height:1.7;color:rgba(255,255,255,.76);max-width:46ch}
.sec-lede{font-size:15.5px;line-height:1.7}
.sec--tools .sec-lede{font-size:14.5px}
.krok p,.atlas-card p{font-size:14.5px;line-height:1.7}
.atlas-summary,.faq-a{font-size:14px}
.tool-desc,.cta > .wrap > p{font-size:15px}
.osa-panel-body p{font-size:15px;color:rgba(255,255,255,.72)}
.tech-item p,.form-note,.disclaimer,.footer{font-size:12.5px}
.calc-result .b3 p,.sun-read p,.portrait-intro,.portrait-nodes-text,.chap-frag p,.mapa .chap-frag p{font-size:15px;line-height:1.8;color:rgba(8,15,36,.78)}
.mapa .b3 p{font-size:14.5px}
.demo-q{font-size:12px;letter-spacing:.02em}

/* --- podnadpisy karet a kroků → Fraunces, otázky FAQ → Manrope --- */
.atlas-card h3,.krok h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.atlas-card h3{font-size:clamp(22px,2.4vw,26px);margin-bottom:10px}
.krok h3{font-size:clamp(20px,2.3vw,24px)}
.faq-q,.tech-item b{font-family:var(--font-body);font-weight:600}
.faq-q{font-size:15px}
.tech-item b{font-size:13px}

/* --- štítky: fialové, kratší prostrkání, bez „//“ (prefix odstraněn v HTML) --- */
.sec-label,.calc-result .res-eyebrow,.sun-read .sr-lbl{color:var(--violet);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sec--osa .sec-label,.hero .eyebrow,.cta .eyebrow,.tool-eyebrow{color:#C9C8EC;letter-spacing:.16em}
.calc-result .res-eyebrow{letter-spacing:.16em}
.calc-result .b3 .what{letter-spacing:.14em}
.chap-sub,.atlas-tags{letter-spacing:.1em}
.nav-links a::before,.nav-links a::after{content:none}
.nav-links a.on{color:var(--violet)}

/* --- karty atlasu (homepage) i kapitol: hairline mřížka bez mezer (jako předchozí design) ---
   Technika: gap 1px + podklad mřížky = linka, buňky mají barvu papíru. Vně jen horní a dolní linka. */
.atlas-cards,.chap-grid{gap:1px;background:var(--line);border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.atlas-card,.chap,.mapa .chap,.mapa .chap:last-child{background:var(--paper);border:none;border-radius:0;box-shadow:none;transform:none;transition:none}
.atlas-card{padding:40px 90px 40px 36px}
.atlas-card:hover{border-color:transparent;box-shadow:none;transform:none}
.atlas-card:first-child .atlas-body{max-width:64ch}
/* kicker: fialový, bez verzálek a bez tečky */
.atlas-kicker{color:var(--violet);font-size:12px;text-transform:none;letter-spacing:.18em;font-weight:400;margin-bottom:16px}
.atlas-kicker::before{content:none}
.atlas-card h3{font-size:24px;font-weight:500;margin-bottom:14px;padding-right:0}
.atlas-tags{color:var(--ink);letter-spacing:.14em;margin-bottom:18px}
/* ikona: velká, bledě šedá (žádné obarvení) */
.atlas-ico{width:64px;height:64px;top:30px;right:30px;filter:brightness(0);opacity:.16}
.atlas-card:hover .atlas-ico,.atlas-card[data-anim]:hover .atlas-ico{opacity:.34}
.atlas-card[data-anim="coins"]::before,.atlas-card[data-anim="coins"]::after{filter:brightness(0);width:64px;height:64px;top:30px;right:30px}
.atlas-card[data-anim="shadow"]::before{background:rgba(8,15,36,.08)}
/* odkaz „celý výklad“: kroužek se šipkou + verzálky (šipka „→“ v HTML odstraněna) */
.atlas-lock,.chap-lock,.portrait-lock{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-top:none;padding-top:0}
.atlas-lock::before,.chap-lock::before,.portrait-lock::before{content:"→";flex-shrink:0;width:28px;height:28px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--font);font-weight:400;font-size:13px;line-height:1}
.atlas-lock{margin-top:26px}
.chap-lock,.portrait-lock{margin-top:26px}

/* --- kapitoly: 2 sloupce na homepage i na placené stránce; lichá poslední přes celou šířku --- */
.chap-grid,.mapa .chap-grid{grid-template-columns:repeat(2,1fr)}
.chap,.mapa .chap{padding:40px 36px 36px}
.chap:last-child:nth-child(odd){grid-column:1 / -1}
.chap-ico{width:64px;height:64px;top:30px;right:30px;filter:brightness(0);opacity:.16}
.chap-sub{color:var(--violet);font-size:12px;text-transform:none;letter-spacing:.18em;margin-bottom:16px}
.chap-name{font-size:24px;font-weight:500;margin-bottom:14px;padding-right:80px}
.chap-data{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:none;padding-bottom:0;margin-bottom:18px}
@media(max-width:760px){.chap-grid,.mapa .chap-grid{grid-template-columns:1fr}.chap,.mapa .chap{padding:30px 22px 28px}}

/* --- měkčí plochy bez zaoblení (ostré hrany jsou součást charakteru) --- */
.btn{padding:15px 28px}
.btn-ghost,.hero .btn-ghost{padding-left:0;padding-right:0}
.sun-read{border-left-color:var(--violet);background:var(--violet-soft)}
.portrait-aspect{background:var(--violet-soft);border-color:transparent}
.faq-q:hover{color:var(--violet)}
.faq-plus{color:var(--violet)}
.footer a{text-decoration-color:var(--violet-line)}
.arrow-scroll{border-color:rgba(185,176,243,.55);color:#C9C8EC}
@media(max-width:600px){.atlas-card{padding:30px 24px 28px}.atlas-card h3{padding-right:60px}.atlas-ico,.chap-ico{width:48px;height:48px;top:22px;right:22px}}
/* hlavní akce formuláře a odemknutí = fialové (jediné plné tlačítko na stránce) */
.calc-card button.go,.calc-result button.cta-unlock{background:var(--violet-ink);border-color:var(--violet-ink);color:#F8F3EB}
.calc-card button.go:hover,.calc-result button.cta-unlock:hover{opacity:1;background:var(--violet);border-color:var(--violet)}
/* hover karty: fialová linka „obkreslí“ horní hranu zleva doprava a zůstane, plocha karty se zesvětlí na bílou
   (linka = gradient v pozadí s animovanou šířkou, pseudo-elementy zůstávají volné pro animace ikon) */
.atlas-card,.chap{background-image:linear-gradient(var(--violet),var(--violet));background-repeat:no-repeat;background-size:0 2px;background-position:left top;
  transition:background-size .7s cubic-bezier(.2,.7,.2,1),background-color .35s ease}
.atlas-card:hover,.chap:hover{background-color:#F8F3EB;background-size:100% 2px}
@media(prefers-reduced-motion:reduce){.atlas-card,.chap{transition:none}}

/* ============ HERO — SCROLL ZOOM (nebe letí na diváka, text mizí) ============
   Průběh efektu = proměnná --p (0 → 1). Nastavuje ji CSS scroll-driven animace (Chrome, Edge, Safari),
   ve Firefoxu ji dopočítá malý skript v index.html. Všechny vrstvy jsou navázané jen na --p.
   Ladění: --hero-zoom (síla přiblížení), --hero-scroll (délka přilepení v násobcích výšky okna). */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.hero-stage{--p:0;--hero-zoom:.25;--hero-scroll:1.25;background:#080F24}
@keyframes heroScroll{from{--p:0}to{--p:1}}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  /* rozpěrka jako obsah (ne padding): sticky je omezené obsahovým boxem rodiče */
  .hero-stage::after{content:"";display:block;height:calc(var(--hero-scroll) * 100vh)}
  .hero-stage .hero{position:sticky;top:0;min-height:100vh;min-height:100svh}
  /* nebe: přiblížení; planety: rychlejší rozjezd ke krajům = hloubka */
  .hero-stage .hero-bg{transform:scale(calc(1 + var(--hero-zoom) * var(--p)));transform-origin:50% 45%;will-change:transform}
  .hero-stage .hero-planets{transform:scale(calc(1 + var(--hero-zoom) * 2.2 * var(--p)));transform-origin:50% 50%;will-change:transform}
  /* text zmizí v první polovině dráhy, šipka hned na začátku */
  .hero-stage .hero-inner{opacity:calc(1 - var(--p) * 1.7);transform:translateY(calc(var(--p) * -48px)) scale(calc(1 - var(--p) * .06))}
  .hero-stage .arrow-scroll{opacity:calc(1 - var(--p) * 5)}
  /* ke konci lehké ztmavení, ať se nebe předá další sekci */
  .hero-stage .hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#080F24;opacity:calc(var(--p) * .45)}
  @supports(animation-timeline:view()){
    .hero-stage{animation:heroScroll linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
  }
}


/* =====================================================
   VRSTVA 3 — LIGHT / NOČNÍ MODRÁ
   Sonar Sans = display 300 (Light) · text 400 · štítky 500 + verzálky s prostrkáním.
   Tmavé plochy = noční modrá s fialovou mlhovinou, ne černá.
   ===================================================== */
body{font-weight:400;letter-spacing:0;line-height:1.65}

/* --- display --- */
.hero h1,.osa-panel-year{font-family:var(--font-display);font-weight:300;letter-spacing:-.01em}
.hero h1{font-size:clamp(46px,8.6vw,104px);line-height:1.04}
.sec h2,.cta h2{font-family:var(--font-display);font-weight:300;letter-spacing:-.01em}
.atlas-card h3,.krok h3,.osa-panel-body h3,.tool-head,.calc-result .res-h,.calc-result .b3 .sign,.portrait-h,.chap-name{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em}
.tool-head{font-weight:300}
.demo-a{font-family:var(--font-body);font-style:normal;font-weight:300;color:rgba(248,243,235,.9)}

/* --- štítky / eyebrows: geometrické verzálky, široké prostrkání (jako v referenci) --- */
.hero .eyebrow,.sec-label,.calc-result .res-eyebrow,.sun-read .sr-lbl,.cta .eyebrow,.tool-eyebrow,.atlas-hint,.chap-sub,.atlas-tags,.calc-result .b3 .what,.nav-links,.btn,.calc button.go,.calc-result button.cta-unlock,.atlas-lock,.chap-lock,.portrait-lock{font-family:var(--font);font-weight:500;text-transform:uppercase}
.hero .eyebrow{letter-spacing:.34em;color:var(--nebula-soft);font-size:11.5px}
.sec-label,.cta .eyebrow,.tool-eyebrow{letter-spacing:.3em;font-size:11px}
.sec--osa .sec-label,.cta .eyebrow,.tool-eyebrow{color:var(--nebula-soft)}
.nav{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.brand{font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.brand .tld{letter-spacing:.1em}
.nav-links{gap:30px}
.nav-links a.on{color:var(--ink)}
.atlas-kicker{text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:500}
.atlas-n{font-weight:500;letter-spacing:.2em}
.atlas-tags{color:var(--muted);font-weight:500;letter-spacing:.2em}
.calc label,.calc .chk span{font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;font-weight:500}

/* --- tlačítka: pilulky (jediný zásah do tvaru; návrat = border-radius:0) --- */
.btn,.calc button.go,.calc-result button.cta-unlock{border-radius:0;letter-spacing:.2em;font-size:11px;padding:16px 30px}
.btn-ghost,.hero .btn-ghost{border-radius:0;padding:16px 0}
.hero .btn{background:var(--warm);color:var(--navy);border-color:var(--warm)}
.hero .btn:hover{background:transparent;color:var(--warm)}
.hero .btn-ghost,.hero .btn-ghost:hover{background:transparent;border-color:transparent}
.hero .btn-ghost{color:rgba(248,243,235,.7)}
.hero .btn-ghost:hover{color:var(--warm)}
.calc-card button.go,.calc-result button.cta-unlock{background:var(--navy);color:var(--warm);border-color:var(--navy)}
.calc-card button.go:hover,.calc-result button.cta-unlock:hover{background:var(--nebula);border-color:var(--nebula);color:var(--warm);opacity:1}
.calc-card{background:var(--card);box-shadow:0 24px 70px rgba(2,6,20,.55)}

/* --- hero: fotka přeladěná do noční modré + fialová mlhovina (fotka zůstává, jen tónování) --- */
.hero,.hero-stage{background:var(--navy)}
.hero-bg{background-image:
    radial-gradient(70% 60% at 62% 38%,rgba(119,117,184,.34) 0%,rgba(119,117,184,0) 70%),
    linear-gradient(rgba(8,15,36,.42),rgba(8,15,36,.42)),
    url("img/2599-hero.jpg");background-color:var(--navy)}
.hero-veil{background:
    linear-gradient(to bottom,rgba(8,15,36,.5) 0%,transparent 22%,transparent 70%,var(--navy) 100%),
    radial-gradient(100% 70% at 50% 48%,rgba(8,15,36,.5) 0%,rgba(8,15,36,.32) 38%,rgba(8,15,36,.1) 64%,transparent 85%)}
.hero-sub{color:rgba(248,243,235,.8);font-weight:300;font-size:17px}
.arrow-scroll{border-color:rgba(248,243,235,.45);color:rgba(248,243,235,.8)}

/* --- tmavé sekce: noční modrá + mlhovina místo černé --- */
.osa-pin::after{background:radial-gradient(120% 90% at 50% 42%,rgba(8,15,36,.25) 0%,rgba(8,15,36,.6) 55%,rgba(8,15,36,.96) 100%),
    radial-gradient(60% 50% at 80% 20%,rgba(119,117,184,.28) 0%,rgba(119,117,184,0) 70%)}
.cta{background-color:var(--navy)}
.tool{background:var(--navy);background-image:radial-gradient(80% 60% at 100% 0%,rgba(119,117,184,.22) 0%,rgba(119,117,184,0) 70%)}
.tool-demo{background:rgba(248,243,235,.04);border-color:rgba(248,243,235,.12)}

/* --- světlé plochy: teplá bílá, linky do béžova, čtecí text v noční modré --- */
.sec-lede,.krok p,.atlas-card p,.atlas-summary,.faq-a,.tech-item p{color:rgba(8,15,36,.68);font-weight:400}
.calc-result .b3 p,.sun-read p,.portrait-intro,.portrait-nodes-text,.chap-frag p,.mapa .chap-frag p{color:rgba(8,15,36,.74)}
.faq-q{font-family:var(--font-body);font-weight:500}
.tech-item b{font-weight:500}
.atlas-lock::before,.chap-lock::before,.portrait-lock::before{border-color:var(--nebula);color:var(--nebula)}
.atlas-lock,.chap-lock,.portrait-lock{font-weight:500;letter-spacing:.2em}
.atlas-ico{filter:var(--ico-tint);opacity:.28}
.atlas-card:hover .atlas-ico,.atlas-card[data-anim]:hover .atlas-ico{opacity:.55}
.atlas-card[data-anim="coins"]::before,.atlas-card[data-anim="coins"]::after{filter:var(--ico-tint)}
.footer{color:var(--muted);letter-spacing:.06em}


/* =====================================================
   VRSTVA 4 — HERO REDESIGN (2026-10-12)
   Natální kruh (SVG, nízká intenzita, pomalá rotace + parallax kurzoru),
   2–3 planety asymetricky, hlubší vesmír (kontrast + vinětace), hierarchie h1.
   ===================================================== */
.hero{--mx:0;--my:0}
:root{--font-hand:'Caveat','Segoe Print',cursive}
/* display: Sonar Sans Light (nejlehčí řez rodiny) */
.hero h1,.osa-panel-year,.sec h2,.cta h2{font-weight:300;letter-spacing:-.015em}
.atlas-card h3,.krok h3,.osa-panel-body h3,.tool-head,.calc-result .res-h,.calc-result .b3 .sign,.portrait-h,.chap-name{font-weight:300;letter-spacing:-.01em}
.hero h1{display:flex;flex-direction:column;align-items:center;gap:.04em;line-height:1;max-width:none}
.hero .h1-a{font-size:clamp(28px,4.6vw,56px);font-weight:300;opacity:.92;letter-spacing:-.01em;color:rgba(248,243,235,.86)}
.hero .h1-b{font-size:clamp(50px,9.4vw,122px);font-weight:300;letter-spacing:-.025em;color:var(--warm);margin-top:.02em}
.hero .eyebrow{margin-bottom:34px}
.hero-sub{font-size:18px;line-height:1.55;max-width:540px;margin:30px auto 0;color:rgba(248,243,235,.86);font-weight:400}
@media(max-width:600px){.hero-sub{font-size:16px;line-height:1.6}}

/* --- pozadí: hlubší, kontrastnější, hvězdy kolem titulku utlumené --- */
.hero-bg{filter:contrast(1.18) saturate(.82) brightness(.92);
  background-image:
    radial-gradient(60% 55% at 50% 50%,rgba(8,15,36,.55) 0%,rgba(8,15,36,.28) 45%,rgba(8,15,36,0) 75%),
    radial-gradient(70% 60% at 66% 34%,rgba(119,117,184,.26) 0%,rgba(119,117,184,0) 68%),
    linear-gradient(rgba(8,15,36,.5),rgba(8,15,36,.5)),
    url("img/2599-hero.jpg")}
.hero-veil{background:
    radial-gradient(42% 36% at 50% 50%,rgba(76,74,142,.30) 0%,rgba(119,117,184,.12) 45%,rgba(119,117,184,0) 100%),
    radial-gradient(130% 100% at 50% 50%,rgba(8,15,36,0) 40%,rgba(8,15,36,.55) 78%,rgba(4,8,22,.92) 100%),
    linear-gradient(to bottom,rgba(8,15,36,.6) 0%,transparent 24%,transparent 68%,var(--navy) 100%)}

/* --- natální kruh --- */
.hero-wheel{position:absolute;z-index:1;pointer-events:none;color:var(--nebula-soft);opacity:.22;
  width:min(112vh,1040px);aspect-ratio:1;right:-26%;top:50%;
  transform:translate3d(calc(var(--mx) * -18px),calc(-50% + var(--my) * -18px),0);
  transition:transform .9s cubic-bezier(.2,.6,.2,1);will-change:transform}
.wheel-svg{width:100%;height:100%;display:block;animation:wheelSpin 260s linear infinite;transform-origin:50% 50%}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
.wheel-svg text{font-size:22px}
@media(max-width:1100px){.hero-wheel{right:-42%;opacity:.18}}
@media(max-width:760px){.hero-wheel{width:150vw;right:-78vw;top:46%;opacity:.14}}
@media(prefers-reduced-motion:reduce){.wheel-svg{animation:none}.hero-wheel{transform:translateY(-50%)}}

/* --- ruční anotace (Caveat) — jen drobné poznámky, nikdy nadpis --- */
.hand{font-family:var(--font-hand);font-weight:400;text-transform:none;letter-spacing:0}
.calc .note.hand{font-size:16px;color:var(--muted);letter-spacing:0;line-height:1.4}
/* --- planety: tři, asymetricky, různé velikosti; parallax kurzoru po vrstvách --- */
.orbit--4{width:150px;left:5%;top:14%;opacity:.85}
.orbit--3{width:64px;right:12%;top:68%;opacity:.8}
.orbit--2{width:38px;left:17%;bottom:18%;opacity:.7}
.hero-planets{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
@media(min-width:761px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-stage .hero-planets{transform:translate3d(calc(var(--mx) * 22px),calc(var(--my) * 22px),0) scale(calc(1 + var(--hero-zoom) * 2.2 * var(--p)))}
}
@media(max-width:600px){.orbit--4{width:84px;left:-4%;top:9%}.orbit--3{width:40px;right:6%;top:74%}.orbit--2{display:none}}

/* --- CTA --- */
.hero-cta{margin-top:44px;gap:28px}
.hero .btn-primary{padding:19px 34px;font-size:11.5px;letter-spacing:.2em;gap:12px}
.hero .btn-primary:hover{background:#fffdf8;color:var(--navy);filter:brightness(1.04)}
.btn-arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.hero .btn-ghost{font-size:11.5px;letter-spacing:.2em;color:rgba(248,243,235,.84);gap:10px;padding:19px 0}
.hero .btn-ghost:hover{color:var(--warm)}
@media(max-width:600px){.hero-cta{flex-direction:column;gap:14px}.hero .btn-primary{width:100%;max-width:360px;justify-content:center}.hero{padding-left:20px;padding-right:20px}}
.hero{overflow:hidden}
/* nav na mobilu: verzálky s prostrkáním se nevejdou → těsněji (layout nav jinak beze změny) */
@media(max-width:600px){.nav{padding:18px 20px}.nav-links{gap:14px;font-size:10px;letter-spacing:.1em}.brand{letter-spacing:.16em;font-size:11px}}



/* ============ ATLAS — KOLO MAPY ============
   Desktop (≥900px): vlevo sticky kolo (7 uzlů po kružnici od 01 nahoře, po směru hodinových ručiček),
   vpravo kapitoly jako běžně scrollující bloky — žádné překrývání ani pinování.
   Mobil: kolo jednou nahoře, pod ním sticky pruh 7 ikon (≤ 64 px), kapitoly jako karty pod sebou.
   Animuje se jen transform / opacity / stroke-dashoffset. JS: „ATLAS — kolo mapy“ na konci index.html. */
.sec--atlas{padding:116px 26px 110px;text-align:left;border-bottom:0.5px solid var(--line-strong)}
.atlas-intro{text-align:center;margin-bottom:76px}
.atlas-intro h2{font-size:clamp(40px,7vw,84px);line-height:1.02;letter-spacing:-.025em;max-width:none;margin:0 auto 26px}
.atlas-intro .sec-lede{font-size:clamp(15px,1.4vw,18px);max-width:44ch;margin:0 auto;line-height:1.65}

.atlas-top{display:flex;justify-content:center;margin-bottom:76px}
.atlas-wheel-col{display:flex;flex-direction:column;align-items:center;width:100%}

/* kolo */
.wheel{position:relative;width:min(100%,440px);aspect-ratio:1;container-type:inline-size}
.wheel-rot{position:absolute;inset:0;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.wheel-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wheel-ring{fill:none;stroke:var(--line-strong);stroke-width:.75}
.wheel-ring--dots{stroke:var(--line-strong);stroke-dasharray:1 7;stroke-linecap:round;transform-box:view-box;transform-origin:200px 200px;animation:wheel-spin 160s linear infinite}
@keyframes wheel-spin{to{transform:rotate(360deg)}}
.wheel-const{fill:none;stroke:var(--violet);stroke-width:1;stroke-dasharray:6;stroke-dashoffset:6;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.wheel-ray{stroke:var(--violet);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform-box:view-box;transform-origin:200px 200px}
.wheel-ray.is-drawing{animation:ray-draw .55s .5s cubic-bezier(.2,.6,.2,1) both}
@keyframes ray-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* uzly: celé tlačítko 44×44 (dotykový cíl), uvnitř kroužek s číslem + popisek; .wn-in protirotuje proti kolu */
.wheel-node{--R:30cqw;position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;background:none;border:none;cursor:pointer;font:inherit;color:inherit;
  transform:rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1))}
.wheel-node:focus-visible{outline:none}
.wheel-node:focus-visible .wn-dot{outline:1px solid var(--ink);outline-offset:6px}
.wn-in{position:relative;display:block;width:44px;height:44px;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.wn-dot{position:absolute;inset:5px;border-radius:50%;background:var(--card);border:1px solid var(--line-strong);display:grid;place-items:center;
  font-family:var(--font);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#3A3F57}
.wn-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--violet);opacity:0;transform:scale(.7);transition:opacity .45s,transform .45s cubic-bezier(.2,.6,.2,1)}
.wn-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;transition:transform .9s cubic-bezier(.65,0,.25,1);
  font-family:var(--font);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#3A3F57}
.wheel-node:hover .wn-dot{border-color:var(--violet)}
.wheel-node.is-done .wn-dot{border-color:var(--violet);color:var(--violet-ink)}
.wheel-node.is-active .wn-dot{border-color:var(--violet);color:var(--violet-ink)}
.wheel-node.is-active .wn-dot::after{opacity:1;transform:none}
.wheel-node.is-active .wn-label{color:var(--violet-ink)}

/* střed: ikona aktivní kapitoly (rastr 1250 px, zobrazený ≤ 1:1 → ostrý; crossfade + scale) */
.wheel-core{position:absolute;left:50%;top:50%;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;border-radius:50%;background:var(--card);border:1px solid var(--line)}
.wheel-core img{position:absolute;left:18%;top:18%;width:64%;height:64%;object-fit:contain;filter:var(--ico-tint);opacity:0;transform:scale(.88);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.wheel-core img.is-on{opacity:1;transform:none}


/* BONUS hra „spoj souhvězdí“ */
.wheel-game path{fill:none;stroke-dasharray:7;stroke-dashoffset:7;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.wheel-game-line{stroke:var(--violet-ink);stroke-width:1.6}
.wheel-game-glow{stroke:var(--violet);stroke-width:8;opacity:0;filter:blur(5px);transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),opacity 1.2s ease}
.wheel.is-complete .wheel-game-glow{opacity:.5}
.wheel-node.is-linked .wn-dot{background:var(--violet-soft)}
.wheel.is-complete .wn-dot::after{opacity:.55;transform:none}
.wheel-game-msg{margin:18px auto 0;max-width:34ch;text-align:center;font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--violet-ink)}
.wheel-game-msg[hidden]{display:none}

/* kapitoly */
.atlas-chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ach{position:relative;min-height:min(56vh,520px);padding:56px 0 52px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.ach-ico{display:none}
.ach-n{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--violet-ink);margin-bottom:24px}
.ach-n span{color:var(--muted)}
.ach-kicker{display:block;font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-ink);margin-bottom:12px}
.ach h3{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin-bottom:16px}
.ach-tags{font-family:var(--font);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ach p{font-family:var(--font-body);font-size:15.5px;line-height:1.7;color:rgba(8,15,36,.68);max-width:44ch}
/* zamčená kapitola = jednotný stav: zámek + „celý výklad po odemčení“ → výpočet mapy */
.ach-cta{align-self:flex-start;margin-top:22px;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ach-lock{width:12px;height:14px;flex-shrink:0;fill:none;stroke:var(--violet-ink);stroke-width:1.3}
.ach:not([data-locked="true"]) .ach-lock{display:none}
.ach-arrow{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--nebula);border-radius:50%;color:var(--nebula);font-size:13px;letter-spacing:0;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.ach-cta:hover .ach-arrow{transform:translateX(4px)}
/* rejstříkové záložky — desktop (≥1024px): sticky svislá lišta vlevo; sticky jen uvnitř .atlas-body (mimo seznam zmizí) */
.atlas-body{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:clamp(48px,7vw,112px);align-items:start}
.ach{scroll-margin-top:96px}
.atabs{position:sticky;top:96px;z-index:5}
.atabs-list{position:relative;display:flex;flex-direction:column;padding:2px 0}
.atabs-line{position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line-strong)}
.atabs-line-fill{position:absolute;inset:0;background:var(--violet);transform:scaleY(0);transform-origin:top}
.atab{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;margin:2px 0;padding:4px 12px 4px 20px;color:#3A3F57;
  font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  transition:transform .25s ease,color .25s ease,background-color .25s ease}
.atab::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--violet);opacity:0;transition:opacity .25s ease,transform .25s ease}
.atab-ico{width:26px;height:26px;flex-shrink:0;object-fit:contain;filter:brightness(0)}
.atab-n{min-width:2.2ch;color:var(--violet-ink);letter-spacing:.12em}
.atab-done{position:absolute;left:-2.5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--violet);opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .25s ease}
.atab:hover{color:var(--ink)}
.atab:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.atab.is-active{transform:translateX(10px);color:var(--ink);background-color:var(--violet-soft)}
.atab.is-active::before{opacity:1}
.atab.is-done .atab-done{opacity:1;transform:none}
.atabs::before,.atabs::after{content:none}
@media(prefers-reduced-motion:reduce){.atab.is-active{transform:none}}
.atlas-outro .atlas-summary{margin:56px auto 0;max-width:52ch;text-align:center}

/* mobil / tablet */
@media(max-width:1023px){
  .sec--atlas{padding:84px 0 76px}
  .atlas-intro{padding:0 22px;margin-bottom:36px}
  .atlas-intro h2{font-size:clamp(38px,11vw,64px);margin-bottom:20px}
  .atlas-top{padding:0 22px;margin-bottom:40px}
  .atlas-body{display:block}
  .wheel{width:min(100%,380px)}
  .atlas-chapters{padding:0 22px;border-top:none;max-width:640px;margin:0 auto}
  .ach{min-height:0;display:block;padding:36px 0 32px}
  .ach-ico{display:block;position:absolute;top:32px;right:0;width:48px;height:48px;object-fit:contain;filter:var(--ico-tint);opacity:.55}
  .ach-n{margin-bottom:16px;padding-right:64px}
  .ach-kicker{padding-right:64px}
  .ach h3{font-size:clamp(25px,7vw,32px)}
  .ach-cta{display:flex;width:fit-content}
  /* rejstříkové záložky — mobil/tablet: sticky vodorovný pruh (56 px), swipe se scroll-snap, fade na krajích */
  .ach{scroll-margin-top:72px}
  .atabs{position:sticky;top:0;z-index:5;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .atabs-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .atabs-scroll::-webkit-scrollbar{display:none}
  .atabs-list{flex-direction:row;width:max-content;padding:0 18px}
  .atabs-line{display:none}
  .atab{height:54px;min-height:54px;margin:0;padding:0 12px;gap:8px;scroll-snap-align:center;background-color:transparent}
  .atab.is-active{transform:none;background-color:transparent}
  .atab-ico{display:none}
  .atab::before{left:12px;right:12px;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(.4)}
  .atab.is-active::before{transform:none}
  .atab-done{left:50%;top:9px;width:5px;height:5px;margin:0 0 0 -2.5px}
  .atabs::before,.atabs::after{content:"";position:absolute;top:0;bottom:0;width:36px;z-index:1;pointer-events:none;transition:opacity .2s ease}
  .atabs::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(248,243,235,0))}
  .atabs::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(248,243,235,0))}
  .atabs.at-start::before,.atabs.at-end::after{opacity:0}
  .atlas-outro{padding:0 22px}
  .atlas-outro .atlas-summary{margin-top:40px}
}

/* ============ MÍSTO NAROZENÍ — našeptávač obcí (světlá karta formuláře) ============ */
.calc .ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;max-height:300px;overflow-y:auto;display:none;
  background:var(--card);border:1px solid rgba(8,15,36,.18);box-shadow:0 18px 40px rgba(8,15,36,.18);text-align:left}
.ac-list.on{display:block}
.ac-item{display:flex;justify-content:space-between;align-items:baseline;gap:14px;min-height:44px;padding:11px 14px;cursor:pointer;
  font-family:var(--font-body);font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.ac-item:last-child{border-bottom:none}
.ac-item.is-hl,.ac-item:hover{background:var(--violet-soft)}
.ac-item b{font-weight:500}
.ac-sub{flex-shrink:0;font-family:var(--font);font-size:12px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.ac-empty,.ac-loading{padding:13px 14px;font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--muted)}
.calc .ac.has-pick input{border-color:var(--violet)}
.ac-hint{margin-top:7px;font-family:var(--font-body);font-size:12.5px;color:var(--muted)}
@media(max-width:600px){.ac-item{flex-direction:column;gap:2px}.ac-sub{white-space:normal}}

/* ============ KAPITOLY VE VÝSLEDKU — osobní ochutnávka ============
   .chap-lead = vždy čitelná osobní věta (z fragmenty-kapitoly.js), .chap-frag hned za ní = visící věta do fade. */
.chap-lead{font-family:var(--font-body);font-size:15px;line-height:1.8;color:rgba(8,15,36,.84);margin:0}
.chap-lead + .chap-frag{max-height:84px;margin-top:2px;
  -webkit-mask-image:linear-gradient(180deg,#000 8%,transparent 94%);mask-image:linear-gradient(180deg,#000 8%,transparent 94%)}