/* ==========================================================================
   Sdílený engine pro planetární prezentace
   Barevné téma nastaví data.js přes proměnné --c1 / --c2 / --accent na <body>.
   ========================================================================== */

:root{
  --bg:      #04060e;
  --ink:     #e9eff8;
  --muted:   #8ea0bd;
  --line:    rgba(255,255,255,.09);
  --panel:   rgba(255,255,255,.035);

  --c1:      #6fb4e8;      /* světlá barva planety  */
  --c2:      #1b4a78;      /* tmavá barva planety   */
  --accent:  #4dd0e1;      /* akcent prezentace     */

  --f-disp:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease:    cubic-bezier(.22,.8,.28,1);
  --pad:     clamp(24px, 4.5vw, 80px);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100%; overflow:hidden }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body); font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block }

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 55%),
    radial-gradient(90% 80% at 85% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
}

/* --- slidy -------------------------------------------------------------- */
.deck{ position:fixed; inset:0; z-index:2 }

.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
  opacity:0; visibility:hidden; transform:scale(.985) translateY(18px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .6s;
  overflow:hidden;
}
.slide.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .55s var(--ease), transform .7s var(--ease), visibility 0s;
}
.slide.is-prev{ transform:scale(.985) translateY(-18px) }

.inner{ width:min(1240px,100%); max-height:100% }
.inner.center{ text-align:center; display:flex; flex-direction:column; align-items:center }

/* --- typografie --------------------------------------------------------- */
.kicker{
  font-family:var(--f-disp); font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; font-size:clamp(10px,1vw,13px);
  color:var(--accent); margin-bottom:10px;
}
h1.title{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(40px,7.2vw,112px); line-height:.95;
  letter-spacing:-.02em; margin:4px 0 14px;
}
h2{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(28px,4.2vw,58px); line-height:1.05;
  letter-spacing:-.02em; margin-bottom:clamp(16px,2.4vh,30px);
}
h3{ font-family:var(--f-disp); font-weight:600; font-size:clamp(15px,1.5vw,20px); margin-bottom:6px; color:#fff }
p{ color:var(--muted); font-size:clamp(13px,1.15vw,16px) }
strong{ color:var(--ink); font-weight:600 }

.grad{
  background:linear-gradient(100deg, var(--c1) 0%, var(--accent) 55%, #fff 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:clamp(15px,1.55vw,21px); color:#c3d1e6; max-width:62ch; font-weight:300 }
.lead.center-t{ margin:0 auto; text-align:center }
.note{
  margin-top:clamp(14px,2.2vh,26px); padding:12px 16px;
  border-left:2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
  color:var(--muted); font-size:clamp(12px,1.05vw,14.5px); border-radius:0 8px 8px 0;
}

/* --- rozvržení ---------------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center }
.two-col--flip{ direction:rtl } .two-col--flip > *{ direction:ltr }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,34px); margin-top:clamp(18px,3vh,34px) }
.cols-3 p{ font-size:clamp(12px,1.02vw,14.5px) }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px) }

.card{
  padding:clamp(14px,1.5vw,22px); border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s;
}
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, transparent) }
.card__num{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(20px,2.5vw,34px); line-height:1.1;
  background:linear-gradient(120deg,#fff, var(--c1)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card__lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin:4px 0 10px }
.card p{ font-size:clamp(11.5px,.95vw,13.5px) }

.ticks{ list-style:none; margin-top:clamp(14px,2.4vh,26px); display:grid; gap:12px }
.ticks li{ position:relative; padding-left:26px; color:var(--muted); font-size:clamp(13px,1.1vw,15.5px) }
.ticks li::before{
  content:''; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
}

.mini-stats{ display:grid; gap:14px; margin-top:clamp(16px,2.6vh,28px) }
.mini-stats>div{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; padding-bottom:12px; border-bottom:1px solid var(--line) }
.mini-stats b{ font-family:var(--f-disp); font-size:clamp(17px,1.9vw,26px); color:#fff; white-space:nowrap }
.mini-stats span{ color:var(--muted); font-size:clamp(12px,1vw,14px) }

/* --- proužky ------------------------------------------------------------ */
.bars{ display:grid; gap:10px; margin-top:clamp(16px,2.6vh,28px) }
.bar-row{ display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr auto; gap:14px; align-items:center }
.bar-lbl{ font-size:clamp(11.5px,1vw,14px); color:var(--muted) }
.bar{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden }
.bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--c2), var(--c1));
  box-shadow:0 0 16px color-mix(in srgb, var(--c1) 50%, transparent);
}
.bar i.is-hi{ background:linear-gradient(90deg, var(--accent), #fff) }
.is-active .bar i{ animation:barGrow 1.1s var(--ease) .35s forwards }
@keyframes barGrow{ to{ width:var(--w) } }
.bar-val{ font-family:var(--f-disp); font-size:clamp(11.5px,1vw,14px); color:#fff; white-space:nowrap; min-width:92px; text-align:right }

/* --- animace ------------------------------------------------------------ */
.anim{ opacity:0; transform:translateY(22px) }
.is-active .anim{ animation:riseIn .8s var(--ease) forwards; animation-delay:var(--d,0s) }
@keyframes riseIn{ to{ opacity:1; transform:none } }
@keyframes fadeIn{ to{ opacity:1 } }
@keyframes popIn{ to{ transform:scale(1); opacity:1 } }

/* --- UI ----------------------------------------------------------------- */
.ui{ position:fixed; inset:0; z-index:20; pointer-events:none }
.progress{ position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.07) }
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--c1), var(--accent));
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:width .5s var(--ease);
}
.nav{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--ink); font-size:26px; line-height:1;
  cursor:pointer; backdrop-filter:blur(8px); opacity:.35; transition:opacity .3s, background .3s;
}
.nav:hover{ opacity:1; background:color-mix(in srgb, var(--accent) 18%, transparent) }
.nav--prev{ left:16px } .nav--next{ right:16px }

.counter{ position:absolute; right:22px; bottom:18px; font-family:var(--f-disp); font-size:13px; color:var(--muted); display:flex; gap:5px; align-items:baseline }
.counter b{ color:#fff; font-size:19px }
.counter em{ font-style:normal }

.slide-name{
  position:absolute; left:24px; bottom:18px; font-family:var(--f-disp); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); opacity:.85;
}
.home{
  pointer-events:auto; position:absolute; left:24px; top:18px;
  font-family:var(--f-disp); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; opacity:.6; transition:.25s;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; backdrop-filter:blur(8px);
}
.home:hover{ opacity:1; color:#fff; border-color:var(--accent) }
.hints{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-size:11px; color:rgba(142,160,189,.55); display:flex; gap:6px; align-items:center; white-space:nowrap;
}
kbd{ font-family:var(--f-disp); font-size:10px; padding:2px 6px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.05) }

.overview{
  position:fixed; inset:0; z-index:40; background:rgba(4,6,14,.94); backdrop-filter:blur(14px);
  padding:clamp(20px,4vw,48px); display:flex; flex-direction:column; gap:22px;
  opacity:0; visibility:hidden; transform:scale(.98);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.overview.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
.overview__head{ display:flex; justify-content:space-between; align-items:center }
.overview__head h3{ font-size:20px; margin:0 }
.overview__head button{ background:none; border:1px solid var(--line); color:var(--muted); padding:7px 14px; border-radius:99px; cursor:pointer; font-family:var(--f-body); font-size:13px }
.overview__head button:hover{ color:#fff; border-color:var(--accent) }
.overview__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; overflow-y:auto; padding-right:6px }
.ov-item{
  text-align:left; cursor:pointer; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--ink); font-family:var(--f-body); font-size:13.5px;
  display:grid; gap:6px; transition:.25s var(--ease);
}
.ov-item:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); transform:translateY(-2px) }
.ov-item b{ font-family:var(--f-disp); color:var(--accent); font-size:12px; letter-spacing:.1em }
.ov-item.is-current{ border-color:#fff; background:rgba(255,255,255,.1) }

@media (max-width: 900px){
  .two-col{ grid-template-columns:1fr; gap:22px }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .cols-3{ grid-template-columns:1fr; gap:14px }
  .hints{ display:none }
  .nav{ width:38px; height:38px }
}
@media (max-height: 700px){
  .cols-3{ gap:14px; margin-top:14px }
  .cols-3 h3{ font-size:14px } .cols-3 p{ font-size:11.5px }
  .note{ font-size:12px; padding:9px 13px; margin-top:12px }
  h2{ margin-bottom:14px }
}
@media (max-height: 520px){ .cols-3{ display:none } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.15s !important } }

/* ==========================================================================
   Komponenty scén
   ========================================================================== */

/* --- planeta ------------------------------------------------------------ */
.globe{
  position:relative; width:var(--size,260px); height:var(--size,260px);
  border-radius:50%; flex:none; margin:0 auto;
  background:radial-gradient(circle at 34% 30%, var(--c1) 0%, var(--c2) 52%, #05070f 100%);
  box-shadow:
    inset -26px -14px 60px rgba(0,0,0,.85),
    inset 10px 8px 34px color-mix(in srgb, var(--c1) 35%, transparent),
    0 0 70px color-mix(in srgb, var(--c1) 32%, transparent),
    0 0 160px color-mix(in srgb, var(--c1) 14%, transparent);
}
.globe--md{ --size:clamp(180px,20vw,260px) }
.globe--lg{ --size:clamp(220px,26vw,340px) }
.globe--xl{ --size:clamp(190px,24vw,320px) }

.globe__skin{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
}
.globe__tex{
  position:absolute; top:0; left:0; height:100%; width:200%;
  background-size:50% 100%; background-repeat:repeat-x;
}
.is-active .globe__tex{ animation:spinTex 44s linear infinite }
@keyframes spinTex{ to{ transform:translateX(-50%) } }

/* textury podle typu planety */
.tex-rocky .globe__tex{
  background-image:
    radial-gradient(ellipse 9% 13% at 14% 30%, rgba(0,0,0,.35), transparent 100%),
    radial-gradient(ellipse 12% 16% at 34% 58%, rgba(0,0,0,.30), transparent 100%),
    radial-gradient(ellipse 7% 10% at 55% 26%, rgba(255,255,255,.16), transparent 100%),
    radial-gradient(ellipse 10% 14% at 72% 64%, rgba(0,0,0,.28), transparent 100%),
    radial-gradient(ellipse 6% 9%  at 88% 38%, rgba(255,255,255,.12), transparent 100%);
}
.tex-cloud .globe__tex{
  background-image:
    radial-gradient(ellipse 26% 9% at 18% 28%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(ellipse 32% 8% at 52% 52%, rgba(255,255,255,.28), transparent 100%),
    radial-gradient(ellipse 24% 7% at 80% 34%, rgba(255,255,255,.30), transparent 100%),
    radial-gradient(ellipse 30% 8% at 40% 76%, rgba(255,255,255,.22), transparent 100%);
}
.tex-desert .globe__tex{
  background-image:
    radial-gradient(ellipse 14% 18% at 20% 34%, rgba(0,0,0,.30), transparent 100%),
    radial-gradient(ellipse 10% 12% at 48% 62%, rgba(0,0,0,.26), transparent 100%),
    radial-gradient(ellipse 9% 12% at 70% 30%, rgba(255,255,255,.14), transparent 100%),
    radial-gradient(ellipse 50% 8% at 50% 3%,  rgba(255,255,255,.55), transparent 100%),
    radial-gradient(ellipse 50% 8% at 50% 97%, rgba(255,255,255,.5),  transparent 100%);
}
.tex-banded .globe__tex{
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.20) 0 6%, rgba(0,0,0,.16) 6% 12%,
    rgba(255,255,255,.10) 12% 17%, rgba(0,0,0,.22) 17% 24%);
}
.tex-spot .globe__skin::after{
  content:''; position:absolute; left:26%; top:56%; width:22%; height:11%;
  border-radius:50%; background:radial-gradient(ellipse, #e35b3c, #8d2a18 70%, transparent);
  box-shadow:0 0 18px rgba(227,91,60,.5);
}
.tex-ice .globe__tex{
  background-image:
    radial-gradient(ellipse 40% 7% at 30% 34%, rgba(255,255,255,.18), transparent 100%),
    radial-gradient(ellipse 44% 6% at 66% 60%, rgba(255,255,255,.14), transparent 100%);
}
.tex-ice-dark .globe__tex{
  background-image:
    radial-gradient(ellipse 34% 7% at 24% 40%, rgba(255,255,255,.16), transparent 100%),
    radial-gradient(ellipse 16% 9% at 62% 56%, rgba(10,20,60,.75), transparent 100%),
    radial-gradient(ellipse 40% 5% at 70% 30%, rgba(255,255,255,.12), transparent 100%);
}

/* hvězda — svítí sama, nemá tedy stínovanou stranu jako planety */
.globe.is-star{
  background:radial-gradient(circle at 50% 50%, #fffdf0 0%, #fff0b0 22%, var(--c1) 46%, var(--c2) 78%, #a8340a 100%);
  box-shadow:
    0 0 50px color-mix(in srgb, var(--c1) 85%, transparent),
    0 0 130px color-mix(in srgb, var(--c2) 60%, transparent),
    0 0 260px color-mix(in srgb, var(--c2) 32%, transparent);
  animation:starPulse 6s ease-in-out infinite;
}
@keyframes starPulse{ 50%{ filter:brightness(1.08) } }
.globe.is-star::after{
  content:''; position:absolute; inset:-26%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--c1) 22%, transparent), transparent 66%);
}
.tex-sun .globe__tex{
  mix-blend-mode:overlay; opacity:.55;
  background-image:
    radial-gradient(ellipse 4% 5% at 12% 26%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(ellipse 5% 6% at 27% 62%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(ellipse 3% 4% at 41% 34%, rgba(0,0,0,.35), transparent 100%),
    radial-gradient(ellipse 6% 7% at 58% 70%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(ellipse 4% 5% at 73% 30%, rgba(0,0,0,.30), transparent 100%),
    radial-gradient(ellipse 5% 6% at 88% 58%, rgba(255,255,255,.5), transparent 100%);
}

/* prstence */
.globe__rings{
  position:absolute; left:50%; top:50%; width:214%; height:60%;
  transform:translate(-50%,-50%) rotate(var(--tilt,-16deg));
  border-radius:50%; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--c1) 55%, transparent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--c1) 12%, transparent),
    0 0 0 8px color-mix(in srgb, var(--c1) 22%, transparent),
    0 0 0 13px color-mix(in srgb, var(--c1) 8%, transparent),
    0 0 0 15px color-mix(in srgb, var(--c1) 18%, transparent),
    0 0 26px color-mix(in srgb, var(--c1) 20%, transparent);
}
.globe-wrap{ position:relative; display:grid; place-items:center; padding:clamp(10px,4vh,40px) 0 }
.is-active .globe-wrap .globe{ animation:floatY 9s ease-in-out infinite }
@keyframes floatY{ 50%{ transform:translateY(-12px) } }

/* měsíček obíhající planetu (hero) */
.moon-ring{
  position:absolute; width:168%; aspect-ratio:1/.34;
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:50%;
}
.moon-run{ position:absolute; width:168%; aspect-ratio:1/.34 }
.is-active .moon-run{ animation:moonSpin 16s linear infinite }
@keyframes moonSpin{ to{ transform:rotate(360deg) } }
.moon-run i{
  position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:radial-gradient(circle at 35% 32%, #fff, #9aa7bb 60%, #4d5769);
  box-shadow:0 0 16px rgba(255,255,255,.5);
}

.hero-meta{
  display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:16px;
  font-family:var(--f-disp); font-size:clamp(11px,1.05vw,14px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.hero-meta i{ font-style:normal; color:rgba(255,255,255,.25) }

/* --- řez planetou ------------------------------------------------------- */
.layers{ display:grid; place-items:center }
.layers svg{ width:100%; max-width:440px; height:auto; overflow:visible }
.ly-c{ transform-origin:210px 210px; transform:scale(0); opacity:0 }
.is-active .ly-c{ animation:popIn .9s var(--ease) forwards }
.ly-lead line{ stroke:rgba(255,255,255,.3); stroke-width:1 }
.ly-lead text{ fill:#c3d1e6; font-size:13px; font-family:'Space Grotesk',sans-serif }
.ly-lead{ opacity:0 }
.is-active .ly-lead{ animation:fadeIn .8s var(--ease) 1s forwards }

.layer-list{ display:grid; gap:14px; margin-top:20px }
.layer{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start }
.layer i{ width:12px; height:12px; border-radius:4px; margin-top:6px; box-shadow:0 0 14px currentColor }
.layer b{ font-family:var(--f-disp); display:block; font-size:15px; margin-bottom:2px }
.layer span{ color:var(--muted); font-size:clamp(12px,1vw,14px) }

/* --- dlaždice (měsíce, útvary) ------------------------------------------ */
.tiles{ display:grid; gap:clamp(10px,1.4vw,18px) }
.tiles--2{ grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto }
.tiles--3{ grid-template-columns:repeat(3,1fr) }
.tiles--4{ grid-template-columns:repeat(4,1fr) }
.tiles--5{ grid-template-columns:repeat(5,1fr) }
.tile{ text-align:center }
.tile__ball{
  display:block; width:100%; aspect-ratio:1; border-radius:50%; margin-bottom:12px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 34% 30%, var(--t1), var(--t2) 62%, #05070f 100%);
  box-shadow:inset -10px -6px 26px rgba(0,0,0,.7), 0 0 30px color-mix(in srgb, var(--t1) 22%, transparent);
}
.tile__ball::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  transform:translateX(-120%);
}
.is-active .tile__ball::after{ animation:shine 3.6s ease-in-out infinite }
@keyframes shine{ 0%{ transform:translateX(-120%) } 45%,100%{ transform:translateX(120%) } }
.tile b{ display:block; font-family:var(--f-disp); font-size:clamp(12px,1.05vw,15px) }
.tile span{ color:var(--muted); font-size:clamp(10.5px,.88vw,12.5px) }

/* --- časová osa misí ---------------------------------------------------- */
.tl2{ position:relative; margin-top:clamp(14px,2.6vh,28px); padding-left:26px }
.tl2::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line) }
.tl2-item{ position:relative; padding-bottom:clamp(14px,2.2vh,22px) }
.tl2-item::before{
  content:''; position:absolute; left:-25px; top:7px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tl2-item b{ font-family:var(--f-disp); color:#fff; font-size:clamp(13px,1.2vw,16px); margin-right:10px }
.tl2-item em{ font-style:normal; font-family:var(--f-disp); color:var(--accent); font-size:12px; letter-spacing:.1em }
.tl2-item p{ font-size:clamp(12px,1vw,14px); margin-top:2px }

/* --- srovnání se Zemí --------------------------------------------------- */
.compare{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(24px,5vw,72px); padding:20px 0 }
.cmp{ text-align:center }
.cmp__ball{
  display:block; border-radius:50%; margin:0 auto 14px;
  width:calc(var(--S,300px) * var(--k)); aspect-ratio:1;
  background:radial-gradient(circle at 34% 30%, var(--k1), var(--k2) 62%, #05070f 100%);
  box-shadow:inset -12px -8px 30px rgba(0,0,0,.75), 0 0 40px color-mix(in srgb, var(--k1) 25%, transparent);
  transform:scale(0);
}
.is-active .cmp__ball{ animation:popIn .9s var(--ease) .3s forwards }
.is-active .cmp:nth-child(2) .cmp__ball{ animation-delay:.45s }
.cmp b{ display:block; font-family:var(--f-disp); font-size:clamp(14px,1.4vw,19px) }
.cmp span{ color:var(--muted); font-size:clamp(11px,.95vw,13px) }

/* --- donut složení ------------------------------------------------------ */
.donut-wrap{ display:grid; place-items:center }
.donut-wrap svg{ width:100%; max-width:380px; height:auto }
.dn-arc{ fill:none; opacity:0 }
.is-active .dn-arc{ animation:fadeIn .8s var(--ease) forwards }
.dn-mid{ fill:#fff; font-family:'Space Grotesk',sans-serif; font-size:26px; text-anchor:middle }
.dn-sub{ fill:#8ea0bd; font-size:12px; text-anchor:middle }
.legend2{ display:grid; gap:12px; margin-top:22px }
.legend2>div{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center }
.legend2 i{ width:12px; height:12px; border-radius:4px }
.legend2 b{ font-family:var(--f-disp); font-weight:600; font-size:15px }
.legend2 span{ color:var(--muted); font-family:var(--f-disp) }

/* --- graf --------------------------------------------------------------- */
.chart-box{ width:100% }
.chart-box svg{ width:100%; height:auto; display:block; max-height:46vh }
.ch-grid{ stroke:rgba(255,255,255,.08) }
.ch-zero{ stroke:rgba(255,255,255,.28); stroke-dasharray:4 5 }
.ch-lbl{ fill:#8ea0bd; font-size:11px; font-family:'Space Grotesk',sans-serif }
.ch-area{ opacity:0 }
.is-active .ch-area{ animation:fadeIn 1.2s var(--ease) .5s forwards }
.ch-line{ fill:none; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:2400; stroke-dashoffset:2400 }
.is-active .ch-line{ animation:drawIn 2.2s var(--ease) .25s forwards }
@keyframes drawIn{ to{ stroke-dashoffset:0 } }
.ch-dot{ opacity:0 }
.is-active .ch-dot{ animation:fadeIn .5s var(--ease) forwards }
.ch-note{ fill:#fff; font-size:12px; font-family:'Space Grotesk',sans-serif }

/* --- velké číslo -------------------------------------------------------- */
.big{ text-align:center }
.big__n{
  font-family:var(--f-disp); font-weight:700; line-height:.9;
  font-size:clamp(64px,13vw,190px); letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff, var(--c1) 70%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.big__t{ font-family:var(--f-disp); font-size:clamp(16px,2vw,26px); color:#fff; margin-top:10px }
.big__d{ color:var(--muted); max-width:56ch; margin:12px auto 0; font-size:clamp(13px,1.15vw,16px) }

/* --- pás faktů ---------------------------------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,36px); margin-top:clamp(16px,3vh,30px) }
.facts>div{ padding-top:14px; border-top:1px solid var(--line) }
.facts b{ display:block; font-family:var(--f-disp); font-size:clamp(20px,2.4vw,32px); color:#fff; margin-bottom:4px }
.facts span{ color:var(--muted); font-size:clamp(11.5px,.98vw,13.5px) }

@media (max-width: 900px){
  .tiles--4, .tiles--5{ grid-template-columns:repeat(3,1fr) }
  .facts{ grid-template-columns:1fr }
  .compare{ gap:24px }
}