/* ============================================================
   SECTIONS — části stránky, které jsou na webu právě jednou.
   Obsah: stavový pruh · ukazatel scrollu · navigace · mobilní
          menu · hero · závěrečné CTA · patička · lepicí CTA
   ============================================================ */

/* ---- stavový pruh ---- */
.statusbar{
  border-bottom:1px solid var(--line);
  background:rgba(7,9,10,.7);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  position:sticky; top:0; z-index:60;
}
.statusbar .row{
  display:flex; align-items:center; gap:24px;
  padding:10px 0;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.statusbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent), 0 0 4px var(--accent); animation:pulse 2.4s ease-in-out infinite }
.statusbar .sep{ color:var(--line-3) }
.statusbar .live{ color:var(--accent); display:flex; align-items:center; gap:10px }
.statusbar .pushright{ margin-left:auto; display:flex; gap:18px; align-items:center }
.statusbar .clock{ color:var(--ink-dim); font-variant-numeric:tabular-nums }
.statusbar .section-now{
  color:var(--ink-dim); padding:4px 10px; border:1px solid var(--line-2); border-radius:999px;
  background:rgba(15,18,20,.6); font-size:11px;
}
.statusbar .section-now b{ color:var(--accent); font-weight:500; margin-right:6px }
.statusbar .hide-sm{ display:flex; gap:24px; align-items:center }
@media (max-width:820px){ .statusbar .hide-sm{ display:none } .statusbar .row{ gap:14px } }

/* ---- ukazatel scrollu ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index:80; pointer-events:none;
  box-shadow:0 0 14px rgba(182,255,60,.6);
  transition: width .08s linear;
}

/* ---- navigace ---- */
.nav{ border-bottom:1px solid var(--line); background:rgba(7,9,10,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:38px; z-index:55 }
.nav .row{ display:flex; align-items:center; gap:32px; padding:16px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:-.01em; min-height:var(--tap) }
.brand .mark{
  width:36px; height:36px; border-radius:8px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(182,255,60,.18), transparent 60%),
    linear-gradient(135deg, #1a1d20, #0a0c0e);
  border:1px solid var(--line-2);
  display:grid; place-items:center;
  font-family:"JetBrains Mono", monospace; font-size:14px; color:var(--accent);
  box-shadow: inset 0 0 0 1px rgba(182,255,60,.10), 0 0 24px rgba(182,255,60,.08), 0 6px 18px -8px rgba(0,0,0,.6);
}
.brand .name{ display:flex; flex-direction:column; gap:1px }
.brand .name span{ font-size:15px; color:var(--ink-2); letter-spacing:-.01em }
.brand small{ font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-weight:400 }
.navlinks{ display:flex; gap:30px; margin-left:auto; align-items:center }
.navlinks a{ font-size:14px; color:var(--ink-dim); transition:color .15s; position:relative; padding:8px 2px }
.navlinks a:not(.cta)::after{ content:""; position:absolute; left:2px; right:2px; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.navlinks a:not(.cta):hover{ color:var(--ink) }
.navlinks a:not(.cta):hover::after{ transform:scaleX(1) }
.navlinks .cta{
  padding:11px 18px;
  border:1px solid var(--line-2);
  border-radius:999px;
  color:var(--ink);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  font-size:13.5px; letter-spacing:.01em; min-height:var(--tap); display:inline-flex; align-items:center; gap:8px;
  transition: border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.navlinks .cta:hover{ border-color:var(--accent); color:var(--accent); box-shadow: 0 0 0 1px rgba(182,255,60,.18), 0 10px 30px -10px rgba(182,255,60,.35) }

/* ---- hamburger ---- */
.menu-btn{ display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line-2); border-radius:10px; align-items:center; justify-content:center; background:linear-gradient(180deg, var(--panel-2), var(--panel)) }
.menu-btn span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .3s var(--ease), opacity .3s }
.menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), top .3s }
.menu-btn span::before{ top:-6px } .menu-btn span::after{ top:6px }
.menu-btn[aria-expanded="true"] span{ background:transparent }
.menu-btn[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg) }
.menu-btn[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg) }
@media (max-width:880px){
  .navlinks{ display:none }
  .menu-btn{ display:inline-flex }
}

/* ---- mobilní menu ---- */
.sheet{
  position:fixed; inset:auto 0 0 0; top:calc(38px + 70px); /* pod stavovým pruhem a navigací */
  background:rgba(7,9,10,.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition: transform .35s var(--ease), opacity .25s;
  z-index:54;
}
.sheet.open{ transform:translateY(0); opacity:1; pointer-events:auto }
.sheet .wrap{ padding-top:20px; padding-bottom:28px }
.sheet a{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-size:18px; color:var(--ink-2); letter-spacing:-.01em;
  min-height:var(--tap);
}
.sheet a small{ font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase }
.sheet .cta{ margin-top:18px; display:flex; gap:10px }
.sheet .cta a{ flex:1; justify-content:center; padding:14px 16px; border-radius:999px; border:1px solid var(--line-2); font-size:14px }
.sheet .cta a.primary{ background:var(--accent); color:#0a0a0a; border-color:var(--accent); font-weight:600 }

/* ---- hero ---- */
.hero{ padding: clamp(36px, 6.5vh, 80px) 0 clamp(28px, 4.5vh, 56px); position:relative; overflow:hidden }
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:120%;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(182,255,60,.10), transparent 60%),
    radial-gradient(40% 40% at 80% 30%, rgba(120,180,255,.06), transparent 60%);
  pointer-events:none; z-index:0;
}
.hero .wrap{ position:relative; z-index:1 }
.hero h1{
  font-size: clamp(40px, 6.8vw, 92px);
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:500;
  margin: 20px 0 18px;
  max-width: 18ch;
  color:var(--ink-2);
}
.hero h1 .accent{
  color:var(--accent);
  font-family:"Instrument Serif", serif;
  font-weight:400; font-style:italic;
  letter-spacing:-.02em;
  position:relative;
}
.hero h1 .accent::after{
  content:"_"; color:var(--accent); font-family:"JetBrains Mono", monospace; font-style:normal;
  animation:blink 1.1s steps(1) infinite;
  margin-left:.05em; font-size:.55em; vertical-align:.08em;
}
.hero .sub{
  font-size: clamp(16px, 1.55vw, 19px);
  color:var(--ink-dim);
  max-width: 58ch;
  margin: 0 0 10px;
  line-height:1.55;
}
.hero .sub b{ color:var(--ink-2); font-weight:500 }
.hero .forwhom{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px; letter-spacing:.08em; color:var(--muted);
  margin: 0 0 24px;
}
.hero .forwhom b{ color:var(--ink); font-weight:500 }
.hero .ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero .cta-trust{
  display:flex; flex-wrap:wrap; gap: 8px 22px;
  margin-top: 14px;
  font-family:"JetBrains Mono", monospace;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.hero .cta-trust span{ display:inline-flex; align-items:center; gap:8px }
.hero .cta-trust .tick{ color:var(--accent) }
.hero .cta-trust b{ color:var(--ink-2); font-weight:500 }

/* ---- závěrečné CTA ---- */
.final{ padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px) }
.final-card{
  border:1px solid var(--line-2);
  border-radius:14px;
  padding: clamp(26px, 3.4vw, 56px);
  background:
    radial-gradient(700px 400px at 88% -10%, rgba(182,255,60,.14), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(120,180,255,.05), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  position:relative; overflow:hidden;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
.final-card::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%); pointer-events:none }
.final-card > *{ position:relative }
.final-card .label{ margin-bottom:16px }
.final-card h2{ font-size: clamp(28px, 3.8vw, 48px); max-width: 18ch; margin: 0 0 14px }
.final-card .lead{ font-size: clamp(16px, 1.4vw, 18px); margin-bottom:22px; max-width: 50ch }
.final-card .ctas{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.final-card .micro{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:24px; flex-wrap:wrap; font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--ink-dim); letter-spacing:.06em }
.final-card .micro b{ color:var(--ink-2); font-weight:500 }

/* ---- patička ---- */
/* Patička je stažená tak, aby se na desktopu vešla na jeden řádek.
   Zalomení řeší flexbox sám — na užších displejích se skládá pod sebe,
   místo aby přetékala ze stránky. */
footer{ border-top:1px solid var(--line); padding: 28px 0 calc(40px + env(safe-area-inset-bottom)); font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--muted); letter-spacing:.04em }
footer .row{ display:flex; gap:18px; flex-wrap:wrap; align-items:center }
footer .row > span{ white-space:nowrap }
footer a{ color:var(--ink-dim); transition:color .2s; padding:8px 0; min-height:32px; display:inline-flex; align-items:center; white-space:nowrap }
footer a:hover{ color:var(--accent) }
footer .right{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap }
footer .legal{ font-variant-numeric:tabular-nums }
footer .ekrt{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-dim) }
footer .ekrt .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent) }

/* ---- lepicí CTA na mobilu ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7,9,10,.0), rgba(7,9,10,.9) 30%);
  display:none;
  transform: translateY(120%); transition: transform .35s var(--ease);
}
.sticky-cta.in{ transform: translateY(0) }
.sticky-cta .row{ display:flex; gap:10px }
.sticky-cta a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 18px; border-radius:999px; min-height:var(--tap);
  font-weight:600; font-size:15px;
}
.sticky-cta a.primary{ background: var(--accent); color:#0a0a0a; box-shadow: 0 18px 50px -10px rgba(182,255,60,.6) }
.sticky-cta a.secondary{ background: rgba(15,18,20,.85); color:var(--ink); border:1px solid var(--line-2); flex: 0 0 auto; padding: 14px 16px }
@media (max-width: 880px){ .sticky-cta{ display:block } body{ padding-bottom: 84px } }