@font-face{font-family:"Unbounded";src:url(/fonts/Unbounded.ttf) format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/SpaceGrotesk.ttf) format("truetype");font-weight:300 700;font-display:swap}

:root{
  --void:#070D33;        /* hluboká ultramarínová – pozadí */
  --void-2:#0E1A5A;      /* panely */
  --ultra:#2A3DFF;       /* ultramarín – akce */
  --ice:#D6E8FF;         /* text */
  --mist:#8FA3D9;        /* sekundární text */
  --signal:#5CF5E4;      /* signální cyan – ověření, akcent */
  --line:rgba(143,163,217,.22);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#BFD6FF 45%,#5CF5E4 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:var(--void);color:var(--ice);
  min-height:100svh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -10%,rgba(42,61,255,.45),transparent 70%),
    radial-gradient(circle at 1px 1px,rgba(214,232,255,.10) 1px,transparent 1.5px);
  background-size:auto,28px 28px;
}
a{color:inherit}
.obal{width:min(100% - 2.5rem,46rem);margin-inline:auto}
h1,h2,.logo,.cislo,.hlavni{font-family:"Unbounded",system-ui,sans-serif}

/* hlavička */
header{padding:1.4rem 0}
header .obal{display:flex;justify-content:space-between;align-items:center}
.logo{display:inline-flex;align-items:center;gap:0;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.01em}
.logo svg{width:30px;height:30px;margin-right:.6rem}
.logo span{color:var(--mist);font-weight:400}
header small{color:var(--mist);font-size:.8rem}

main{flex:1;display:flex;align-items:center;padding:2.5rem 0 4rem}

h1{
  font-size:clamp(1.45rem,4.6vw,2.4rem);font-weight:600;
  line-height:1.2;letter-spacing:-.01em;max-width:26ch;
}

/* zapečetěné počítadlo – jediný hlasitý prvek stránky */
.trezor{
  margin:2.2rem 0 2rem;
  border:1px solid var(--line);border-radius:1.25rem;
  background:linear-gradient(180deg,rgba(14,26,90,.85),rgba(7,13,51,.6));
  box-shadow:0 0 0 1px rgba(42,61,255,.15),0 30px 80px -30px rgba(42,61,255,.55),inset 0 1px 0 rgba(214,232,255,.12);
  padding:1.4rem 1.6rem 1.2rem;
  position:relative;overflow:hidden;
}
.trezor::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(7,13,51,.35) 3px 4px);
  mix-blend-mode:multiply;
}
.trezor .stav{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--mist);margin-bottom:.6rem}
.trezor .stav b{font-weight:500;color:var(--ice)}
.trezor .stav i{font-style:normal;display:inline-flex;align-items:center;gap:.45rem}
.trezor .stav i::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ultra);box-shadow:0 0 10px var(--ultra)}
.odhalene .trezor .stav i::before,.jsem .trezor .stav i::before{background:var(--signal);box-shadow:0 0 12px var(--signal)}

.cislo{
  display:flex;align-items:baseline;gap:.4em;
  font-size:clamp(3rem,13vw,6.6rem);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cislo .hodnota{
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(92,245,228,.28));
}
.cislo .jednotka{font-family:"Space Grotesk";font-size:.2em;font-weight:400;color:var(--mist);letter-spacing:.02em}
/* zamčené číslice – rozostřené, mění se */
.zamceno .cislo .hodnota{filter:blur(.24em) drop-shadow(0 0 22px rgba(92,245,228,.2));opacity:.7;user-select:none}
.zamceno .cislo .hodnota::selection{color:transparent}

/* platba */
.platba{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch;max-width:36rem}
.platba input{
  font:inherit;font-size:1rem;flex:1 1 14rem;min-width:0;color:var(--ice);
  padding:.95rem 1.2rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(14,26,90,.5);
}
.platba input::placeholder{color:var(--mist)}
.platba input:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-color:var(--signal)}
button.hlavni{
  font-weight:600;font-size:.95rem;
  background:var(--ultra);color:#fff;border:0;border-radius:999px;
  padding:1rem 1.6rem;cursor:pointer;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(214,232,255,.2) inset,0 12px 40px -10px rgba(42,61,255,.9);
  transition:transform .12s,box-shadow .12s;
}
button.hlavni:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(214,232,255,.3) inset,0 16px 48px -10px rgba(42,61,255,1)}
button.hlavni:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
button.hlavni[disabled]{opacity:.6;cursor:wait;transform:none}
.pozn{color:var(--mist);font-size:.9rem;max-width:44ch;line-height:1.5}
.chyba{margin-top:1rem;color:#FF7A9E;font-size:.95rem}
.chyba:empty{display:none}

/* otázky */
.otazky{margin-top:3.2rem;border-top:1px solid var(--line)}
.otazky details{border-bottom:1px solid var(--line)}
.otazky summary{cursor:pointer;padding:.95rem 0;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.otazky summary::-webkit-details-marker{display:none}
.otazky summary::after{content:"+";color:var(--signal);font-weight:400}
.otazky details[open] summary::after{content:"–"}
.otazky p{padding:0 0 1rem;color:var(--mist);max-width:60ch;line-height:1.55}

/* sdílení */
.sdileni{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.sdileni h2{font-size:1rem;font-weight:500;margin-bottom:.9rem}
.sdileni .radek{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
button.vedlejsi{
  font:inherit;font-weight:500;font-size:.95rem;background:transparent;color:var(--ice);
  border:1px solid var(--mist);border-radius:999px;padding:.8rem 1.3rem;cursor:pointer;
}
button.vedlejsi:hover{border-color:var(--signal);color:var(--signal)}
button.vedlejsi:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.odkaz{font-size:.85rem;color:var(--mist);word-break:break-all;margin-top:.7rem}

/* Jsem číslo N */
.jsem .cislo .hodnota::before{content:"#";font-weight:300;-webkit-text-fill-color:var(--signal);margin-right:.04em}
.overeni{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--mist)}
.overeni::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.overeni.ne::before{background:#FF7A9E;box-shadow:0 0 10px #FF7A9E}

footer{padding:1.5rem 0;border-top:1px solid var(--line);color:var(--mist);font-size:.8rem}
footer .obal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--signal)}

@media (max-width:600px){header small{display:none}.trezor{padding:1.1rem 1.1rem .9rem}}
@media (prefers-reduced-motion:no-preference){
  .odhalene .cislo .hodnota{animation:odhalit .8s cubic-bezier(.2,.8,.2,1)}
  @keyframes odhalit{from{filter:blur(10px);opacity:.4}to{filter:blur(0) drop-shadow(0 0 22px rgba(92,245,228,.28));opacity:1}}
}
.dobro{margin-top:.6rem;position:relative;padding-left:1.1rem;color:var(--ice)}
.dobro::before{content:"";position:absolute;left:0;top:.45em;width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.dobro b{font-weight:600}