/*  AiTop — FILM „Firma se rozsvěcuje"
 *  Tmavá kinematografická stránka řízená scrollem. Jedna osa t = 0..1.
 *  Předloha architektury: DioPro PODS (~/diochi.cz/diopro/web-cz/dp/).
 *  Prefix tříd: at-  (naše třídy mají prefix — viz feedback_nase_tridy_prefix_dad)
 */

:root{
  --at-tma:      #05080f;
  --at-tma2:     #0a1018;
  --at-bila:     #ffffff;
  --at-sedla:    #c9d2dc;   /* světle šedý text na tmavém */
  --at-seda:     #8d99a6;
  --at-jantar:   #f0a63a;   /* AI / jádro / teplo */
  --at-tyrkys:   #35c6e8;   /* data, tok informací */
  --at-zelena:   #62d05a;   /* peníze, růst */
  --at-modra:    #7fb2ff;   /* dohled */
  /* světlý závěr */
  --at-papir:    #f7f3ea;
  --at-papir2:   #efe7d7;
  --at-inkoust:  #1d1912;
  --at-tlum:     #665e50;
  --at-vlas:     #e2d9c6;
  --at-akcent:   #b85c06;

  --at-pismo: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{margin:0;padding:0}
body{
  background:var(--at-tma);
  color:var(--at-bila);
  font-family:var(--at-pismo);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* ⚠️ NE hidden — hidden zabíjí position:sticky */
}

/* ---------- plátno filmu ---------- */
#at-platno{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
/* jemný vinětový závoj, aby text držel kontrast nad jakoukoli scénou */
#at-zavoj{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 100%);
  opacity:.85; transition:opacity .6s ease;
}
body.at-den #at-zavoj{opacity:.12}

/* ---------- scéna a rámy ----------
   KLÍČ CELÉHO FILMU: titulky NEscrollují. Sekce jsou fixní přes celé okno
   a jen se rozsvěcují podle času t. Scrollovací délku dělá výška #at-scena.
   (Odkoukáno z DioPro — právě tím to působí jako film, ne jako stránka.) */
#at-scena{position:relative; z-index:2; height:900vh}

.at-krok{
  position:fixed; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px; pointer-events:none;
}
/* měkká podložka pod titulkem: text drží kontrast nad jakoukoli fotkou,
   a přitom není vidět žádný obdélník (gradient dojede do nuly uvnitř prvku) */
.at-ram::before{
  content:""; position:absolute; inset:-14% -16%; z-index:-1; pointer-events:none;
  background:radial-gradient(62% 58% at 50% 50%, rgba(3,7,14,.80), rgba(3,7,14,.45) 55%, rgba(3,7,14,0) 78%);
}
.at-ram.at-tmavy::before{
  background:radial-gradient(66% 62% at 50% 50%, rgba(253,251,246,.95), rgba(253,251,246,.78) 52%, rgba(253,251,246,0) 82%);
}
.at-ram{
  position:relative; isolation:isolate;
  max-width:960px; width:100%; text-align:center; pointer-events:auto;
  opacity:0; transform:translate3d(0,30px,0);
  /* starý titulek zhasne rychle, nový nabíhá pomalu — ať se nikdy nepřekrývají čitelné */
  /* průhlednost řídí film v JS; tenhle přechod je jen pojistka */
  transition:opacity .12s linear;
  will-change:opacity, transform;
  text-shadow:0 2px 30px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.7);
}
.at-ram.at-vidno{opacity:1; transform:none;
  transition:opacity .55s ease .08s, transform .6s cubic-bezier(.16,.8,.3,1) .08s}
.at-vlevo{text-align:left; margin-right:auto; max-width:760px}
/* rám nad rozsvícenou plochou — tam bílá nedrží, jde se do tmavého inkoustu */
.at-ram.at-tmavy{text-shadow:0 1px 22px rgba(255,255,255,.95), 0 1px 4px rgba(255,255,255,.95); color:#100c06}
.at-ram.at-tmavy .at-rec{color:#3f382c}
.at-ram.at-tmavy .at-rec b{color:#141009}
.at-ram.at-tmavy .at-oko{color:#a8560a}
.at-vpravo{text-align:right; margin-left:auto; max-width:760px}

/* očko — drobný prostrkaný nadpisek */
.at-oko{
  display:block; font-size:.74rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--at-tyrkys); margin-bottom:22px;
}
.at-oko.at-j{color:var(--at-jantar)}
.at-oko.at-z{color:var(--at-zelena)}

h1.at-velky, .at-velky{
  font-size:clamp(2.3rem, 7.2vw, 5.4rem);
  font-weight:800; line-height:1.02; letter-spacing:-.028em;
  margin:0 0 26px; text-wrap:balance;
}
.at-stredni{
  font-size:clamp(1.9rem, 5.2vw, 3.6rem);
  font-weight:800; line-height:1.06; letter-spacing:-.024em;
  margin:0 0 22px; text-wrap:balance;
}
.at-zvyraz{color:var(--at-tyrkys)}
.at-zvyraz.at-j{color:var(--at-jantar)}
.at-zvyraz.at-z{color:var(--at-zelena)}

.at-rec{
  font-size:clamp(1.02rem, 2.05vw, 1.38rem);
  line-height:1.62; color:var(--at-sedla);
  max-width:56ch; margin:0 auto; text-wrap:pretty;
}
.at-vlevo .at-rec, .at-vpravo .at-rec{margin-left:0; margin-right:0}
.at-vpravo .at-rec{margin-left:auto}
.at-rec b, .at-rec strong{color:#fff; font-weight:700}

/* ---------- sloupce specialistů ---------- */
.at-sloupce{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px,100%),1fr));
  gap:34px; margin-top:44px; text-align:left;
}
.at-sl{padding-top:16px; border-top:2px solid currentColor}
.at-sl h3{margin:0 0 10px; font-size:1.12rem; font-weight:700; letter-spacing:-.01em}
.at-sl p{margin:0; font-size:.95rem; line-height:1.55; color:var(--at-sedla)}
.at-sl.at-t{color:var(--at-tyrkys)} .at-sl.at-j{color:var(--at-jantar)}
.at-sl.at-z{color:var(--at-zelena)} .at-sl.at-m{color:var(--at-modra)}
.at-sl.at-b{color:#e6ecf2}

/* ---------- rozpis změn (dějství PLÁN) ---------- */
.at-rozpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr));
  gap:18px; margin-top:34px; text-align:left;
}
.at-rz{
  border:1px solid rgba(255,255,255,.16); border-top:2px solid currentColor;
  border-radius:14px; background:rgba(6,12,22,.42); padding:16px 18px;
}
.at-rz b{display:block; font-size:.97rem; margin-bottom:5px; color:currentColor}
.at-rz span{display:block; font-size:.89rem; line-height:1.5; color:var(--at-sedla)}
.at-rz.at-t{color:var(--at-tyrkys)} .at-rz.at-j{color:var(--at-jantar)}
.at-rz.at-z{color:var(--at-zelena)} .at-rz.at-m{color:var(--at-modra)}
.at-duraz{
  margin-top:28px; padding:16px 20px; border-left:3px solid var(--at-zelena);
  background:rgba(6,14,10,.5); border-radius:0 12px 12px 0; text-align:left;
}
.at-duraz p{margin:0; font-size:1.02rem; line-height:1.55; color:var(--at-sedla)}
.at-duraz b{color:#fff}

/* závěrečná otázka — poslední věta filmu */
.at-otazka{
  margin:30px 0 0; font-size:clamp(1.35rem,3.3vw,2.2rem); font-weight:800;
  line-height:1.16; letter-spacing:-.02em; text-wrap:balance;
}
.at-ram.at-tmavy .at-otazka{color:#141009}
.at-otazka em{font-style:normal; color:#1d7a35}

/* ---------- pobídka a ukazatel postupu ---------- */
.at-pobidka{
  position:fixed; left:0; right:0; bottom:24px; z-index:3;
  text-align:center; font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  transition:opacity .5s ease; pointer-events:none;
}
.at-pobidka.at-pryc{opacity:0}
.at-sipka{
  display:block; width:1px; height:26px; margin:12px auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation:at-kap 2.4s ease-in-out infinite;
}
@keyframes at-kap{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(7px);opacity:.9}}

.at-postup{
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:4;
  background:rgba(255,255,255,.08); pointer-events:none;
}
.at-postup i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--at-tyrkys), var(--at-jantar));
}

/* ---------- lišta volby pohybu ---------- */
.at-lista{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:20; display:flex; align-items:center; gap:14px;
  background:rgba(6,12,22,.94); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:10px 16px; font-size:.84rem; color:var(--at-sedla);
  box-shadow:0 10px 34px rgba(0,0,0,.6); max-width:calc(100vw - 32px);
}
.at-lista button{
  font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
  background:var(--at-tyrkys); color:#04121a; border:0;
  border-radius:999px; padding:7px 15px;
}
.at-lista button:hover{background:#5ad8f5}

/* ---------- ZÁVĚR: světlá, normální stránka ---------- */
/* ZÁVĚR nemá vlastní pozadí — film pod ním zůstává vidět a dál se točí.
   Čitelnost drží silnější a větší text plus jemná světlá aura, ne deska. */
#at-zaver{
  position:relative; z-index:6;
  background:transparent; color:#100c06;
  padding:96px 24px 110px;
  text-shadow:0 1px 16px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.85);
}
.at-obal{max-width:1060px; margin:0 auto}
.at-uzsi{max-width:780px}

#at-zaver h2{
  font-size:clamp(2.05rem,4.8vw,3.1rem); font-weight:800; letter-spacing:-.02em;
  line-height:1.1; margin:0 0 16px; text-wrap:balance;
}
#at-zaver h3{font-size:clamp(1.16rem,2.1vw,1.34rem); font-weight:800; margin:0 0 7px}
#at-zaver p{color:#2b2418; font-weight:500; margin:0 0 20px; line-height:1.66; text-wrap:pretty;
  font-size:clamp(1.08rem,2vw,1.26rem)}
#at-zaver p b, #at-zaver p strong{color:#0d0a05; font-weight:800}
#at-zaver .at-oko{color:#9c4d03; margin-bottom:16px; font-weight:800}
.at-sekce{padding-top:66px; margin-top:66px; border-top:1px solid rgba(60,45,20,.22)}
.at-sekce:first-of-type{padding-top:0; margin-top:0; border-top:0}

/* čísla */
.at-cisla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  background:transparent; border-top:1px solid rgba(60,45,20,.22); margin-top:26px;
}
.at-c{padding:26px 24px 26px 0; border-bottom:1px solid rgba(60,45,20,.18)}
.at-c .v{font-size:clamp(2rem,3.4vw,2.45rem); font-weight:800; letter-spacing:-.03em; line-height:1.02;
         font-variant-numeric:tabular-nums; color:var(--at-inkoust)}
.at-c .v.at-slovo{font-size:clamp(1.35rem,2.4vw,1.6rem); font-weight:700}
.at-c .l{margin-top:10px; font-size:clamp(1rem,1.8vw,1.1rem); line-height:1.52; color:#2b2418; font-weight:500}
.at-c .l b{color:#0d0a05; font-weight:800}
.at-pozn{font-size:clamp(.98rem,1.7vw,1.06rem); color:#4a4235; font-weight:500; max-width:68ch; margin-top:18px}
.at-pozn b{color:#100c06; font-weight:800}

/* pravidla / kroky / reference */
.at-pravidla{display:grid; gap:26px; margin-top:26px}
.at-pravidlo{border:0; border-left:3px solid var(--at-akcent); background:transparent;
             padding:2px 0 2px 20px}
.at-pravidlo b{display:block; margin-bottom:6px; font-size:clamp(1.08rem,1.9vw,1.22rem)}
.at-pravidlo span{display:block; font-size:clamp(1.06rem,1.9vw,1.2rem); color:#2b2418; font-weight:500; line-height:1.6}

.at-kroky{display:grid; gap:28px; margin-top:26px}
.at-krok2{display:flex; gap:20px; align-items:flex-start; background:transparent;
          border:0; padding:0}
.at-krok2 .n{font-size:clamp(1.5rem,2.6vw,1.85rem); font-weight:800; color:var(--at-akcent);
             min-width:1.35em; font-variant-numeric:tabular-nums; line-height:1.1}
.at-krok2 p{margin:0; font-size:clamp(1.06rem,1.9vw,1.2rem); line-height:1.6}

.at-refy{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:38px 34px; margin-top:26px}
.at-ref{background:transparent; border:0; border-top:1px solid rgba(60,45,20,.22); padding:20px 0 0}
.at-ref .st{display:block; font-size:.74rem; font-weight:800; text-transform:uppercase;
            letter-spacing:.1em; color:#9c4d03; background:transparent;
            padding:0; margin-bottom:9px}
.at-ref p{margin:0; font-size:clamp(1.04rem,1.85vw,1.16rem); line-height:1.6}

/* výzva */
.at-vyzva{margin-top:80px; background:transparent; border:0; border-top:1px solid rgba(60,45,20,.22);
          padding:56px 0 0; text-align:center}
.at-vyzva p{margin:0 auto 26px; max-width:54ch}
.at-tlacitka{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.at-tl{display:inline-block; padding:15px 30px; border-radius:999px; text-decoration:none;
       font-weight:800; font-size:1.02rem; border:1.5px solid rgba(60,45,20,.4);
       background:rgba(255,255,255,.72); color:#100c06; text-shadow:none; transition:transform .15s}
.at-tl:hover{transform:translateY(-1px)}
.at-tl.at-hlavni{background:var(--at-akcent); border-color:var(--at-akcent); color:#fff}

.at-pata{margin-top:64px; padding-top:26px; border-top:1px solid rgba(60,45,20,.22);
         font-size:.92rem; color:#4a4235; font-weight:500; text-align:center}
.at-pata a{color:#2b2418; font-weight:600; text-decoration:none; margin:0 6px}
.at-pata a:hover{color:var(--at-akcent)}

/* ---------- mobil ---------- */
@media(max-width:760px){
  /* Na telefonu se rám nesmí vejít „přes displej" — proto zhutněné rozestupy,
     menší nadpisy a dvousloupcový rozpis. Změřeno: 5. dějství mělo 998 px
     při okně ~700 px a lezlo pod stavovou lištu (Dad 30. 8. 2026). */
  .at-krok{
    padding:calc(env(safe-area-inset-top,0px) + 10px) 16px
            calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  .at-oko{font-size:.66rem; margin-bottom:12px}
  h1.at-velky, .at-velky{font-size:clamp(1.85rem,7.4vw,2.5rem); margin-bottom:16px}
  .at-stredni{font-size:clamp(1.5rem,6vw,2rem); margin-bottom:14px}
  .at-rec{font-size:.98rem; line-height:1.5}

  /* rozpis změn: dva sloupce a útlé karty */
  .at-rozpis{grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
  .at-rz{padding:11px 12px; border-radius:11px}
  .at-rz b{font-size:.88rem; margin-bottom:3px}
  .at-rz span{font-size:.79rem; line-height:1.36}
  .at-duraz{margin-top:16px; padding:12px 14px}
  .at-duraz p{font-size:.92rem; line-height:1.45}

  /* specialisté: dva sloupce místo čtyř řad pod sebou */
  .at-sloupce{grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
  .at-sl{padding-top:10px}
  .at-sl h3{font-size:.95rem; margin-bottom:5px}
  .at-sl p{font-size:.79rem; line-height:1.38}

  .at-otazka{margin-top:18px; font-size:clamp(1.1rem,4.6vw,1.4rem)}
  .at-oko{letter-spacing:.26em; margin-bottom:16px}
  .at-sloupce{gap:26px; margin-top:32px}
  #at-zaver{padding:64px 18px 70px}
  .at-sekce{padding-top:46px; margin-top:46px}
  .at-cisla{grid-template-columns:1fr}
  .at-c{padding:20px 0}
  .at-refy{gap:30px}
  .at-pravidla{gap:22px}
  .at-pravidlo{padding-left:16px}
  .at-kroky{gap:24px}
  .at-krok2{gap:14px}
  .at-vyzva{padding:34px 20px}
}

/* nejmenší displeje — ještě o stupeň těsněji, ať se rám vejde do okna */
@media(max-width:400px){
  .at-oko{font-size:.62rem; letter-spacing:.2em; margin-bottom:10px}
  h1.at-velky, .at-velky{font-size:clamp(1.6rem,6.8vw,2rem); margin-bottom:12px}
  .at-stredni{font-size:clamp(1.34rem,5.6vw,1.7rem); margin-bottom:11px}
  .at-rec{font-size:.92rem; line-height:1.45}
  .at-rozpis{gap:8px; margin-top:14px}
  .at-rz{padding:9px 10px}
  .at-rz b{font-size:.83rem}
  .at-rz span{font-size:.74rem; line-height:1.3}
  .at-duraz{margin-top:12px; padding:10px 12px}
  .at-duraz p{font-size:.86rem; line-height:1.4}
  .at-sloupce{gap:11px; margin-top:14px}
  .at-sl p{font-size:.75rem; line-height:1.34}
  .at-otazka{margin-top:14px; font-size:1.05rem}
}

/* velmi malé telefony (320 px) — poslední zúžení, ať se vejde i pátý rám */
@media(max-width:340px){
  .at-rozpis{gap:6px; margin-top:12px}
  .at-rz{padding:8px 9px}
  .at-rz span{font-size:.71rem}
  .at-duraz{margin-top:10px; padding:9px 11px}
  .at-duraz p{font-size:.82rem; line-height:1.36}
  .at-rec{font-size:.88rem}
}

/* ---------- bez JS ---------- */
.at-bezskriptu #at-platno,
.at-bezskriptu .at-pobidka,
.at-bezskriptu .at-postup{display:none}
.at-bezskriptu body{background:#0a1018}
.at-bezskriptu .at-ram{opacity:1; transform:none}
.at-bezskriptu #at-scena{height:auto}
.at-bezskriptu .at-krok{position:static; min-height:0; padding:56px 24px}

/* ---------- omezený pohyb ---------- */
@media(prefers-reduced-motion:reduce){
  .at-sipka{animation:none}
  .at-ram{transition:none}
}