/* ======================================================================================
   ROOT & GLOBAL PRESETS
   ====================================================================================== */

/* ---------- CSS Variables (Theme & Tokens) ---------- */
:root{
  /* Colors */
  --color-bg:           #212529;
  --color-card:         #1f1f1f;
  --color-fg:           #e6f1ff;
  --color-muted:        #b8c7dd;
  --color-accent:       #64ffda;
  --color-border:       #565656;

  /* Neutral lines / overlays (reuse everywhere) */
  --line-weak-04: rgba(255,255,255,.04);
  --line-weak-06: rgba(255,255,255,.06);
  --line-weak-10: rgba(255,255,255,.10);
  --line-weak-12: rgba(255,255,255,.12);
  --line-weak-14: rgba(255,255,255,.14);
  --line-weak-16: rgba(255,255,255,.16);
  --line-weak-22: rgba(255,255,255,.22);

  /* Glass / panel tokens */
  --glass-start:        rgba(16,24,38,.28);
  --glass-end:          rgba(16,24,38,.18);
  --glass-bg:           linear-gradient(180deg, var(--glass-start), var(--glass-end));
  --glass-stroke:       rgba(100,255,218,.18);
  --glass-blur:         5px;
  --glass-shadow:       0 10px 28px rgba(0,0,0,.30);
  --glass-inset:        inset 0 0 0 1px var(--line-weak-04);

  /* Pills / chips background variants */
  --pill-bg:            rgba(16,24,38,.45);
  --pill-bg-strong:     rgba(16,24,38,.40);
  --chip-bg:            rgba(16,24,38,.35);
  --chip-stroke:        var(--line-weak-16);

  /* Layout */
  --left:               440px;
  --right:              72px;
  --maxw:               980px;

  /* Radii */
  --radius-xl:          24px;
  --radius-lg:          20px;
  --radius-md:          16px;
  --radius-pill:        999px;

  /* Spacing / sizes */
  --control-h:          44px;
  --btn-h:              48px;
  --space-2:            12px;
  --space-3:            16px;
  --space-4:            18px;
  --space-5:            22px;
  --panel-pad:          18px;

  /* Typography families */
  --font-sans:          'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title:         'Roboto', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;

  /* Hero / sections */
  --hero-pad-x:         clamp(24px, 6vw, 80px);
  --hero-pad-y:         clamp(48px, 6vw, 96px);
  --section-pad-x:      24px;
  --section-pad-y:      40px;
  --text-max:           720px;

  /* Focus ring */
  --focus-ring:         color-mix(in oklab, var(--color-accent) 60%, white);

  /* Background video overlay tokens */
  --bg-mask-radial:     radial-gradient(1200px 700px at 60% 0%, rgba(0,0,0,.35), transparent 60%);
  --bg-mask-linear:     linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.38));

  :root{ --dur: 1.5s; --stagger: .32s; }
}

#uvod{
  --dur: 1.5s;
  --stagger: .32s;
}

#omne{
  --dur: 1.5s;
  --stagger: .32s;
}

#timeline{
  --dur: 1.5s;
  --stagger: .32s;
}

/* ---------- Global box sizing ---------- */
*{ box-sizing:border-box; }

/* ---------- Document height, scroll behavior ---------- */
html{
  height:100%;
  scroll-behavior:smooth;
  font-synthesis-weight:none;
}
body{
  height:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ======================================================================================
   BASE TYPOGRAPHY & BODY
   ====================================================================================== */

body{
  margin:0;
  color:var(--color-fg);
  background:var(--color-bg);
  overflow-x:hidden;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Hero title + accent ---------- */
.hero-title{
  font-family:var(--font-title);
  font-weight:300;
  letter-spacing:-0.015em;
  line-height:1.04;
}
.hero-title .accent{ font-weight:300; }

/* ---------- Technická čísla (KPI) ---------- */
.num{ font-family:var(--font-mono); }

/* ======================================================================================
   BACKGROUND (FIXED VIDEO + OVERLAY)
   ====================================================================================== */

.bg{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:var(--color-bg);
  isolation:isolate;
}
.bg video{
  position:absolute;
  left:50%; top:50%;
  min-width:100%; min-height:100%;
  transform:translate(-50%, -50%);
  object-fit:cover;
  opacity:.2;
  mix-blend-mode:screen;
}
.bg::after{
  content:"";
  position:absolute; inset:0;
  background: var(--bg-mask-radial), var(--bg-mask-linear);
  pointer-events:none;
}

/* ======================================================================================
   LEFT SIDEBAR CARD (PROFILE)
   ====================================================================================== */

/* Panel */
.left.dash{
  position:fixed; z-index:10; top:12%; bottom:12%; left:24px;
  width:var(--left); max-width:var(--left); min-width:var(--left);
  display:flex; flex-direction:column; gap:12px;
  padding:var(--panel-pad);
  border-radius:var(--radius-xl);
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--glass-shadow), var(--glass-inset);
  backdrop-filter:blur(var(--glass-blur));
  isolation:isolate; overflow:hidden;
}

/* Chip „QA tester“ v outlinu */
.left.dash .l-chip{
  display:inline-block;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted);
  padding:6px 10px; border-radius:var(--radius-pill);
  background:var(--chip-bg);
  border:1px solid var(--chip-stroke);
  box-shadow:inset 0 1px 0 var(--line-weak-04);
}

/* Jméno + kontakty (větší) */
.left.dash .l-name{
  margin:8px 0 4px;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(24px, 2.3vw, 28px);
}
.left.dash .l-lines{
  list-style:none; margin:6px 0 2px; padding:0;
  display:flex; flex-direction:column; gap:8px;
  font-size:clamp(16px, 1.5vw, 17px); line-height:1.45;
}
.left.dash .l-lines li{ display:flex; align-items:center; gap:10px; opacity:.97; }
.left.dash .l-lines a{ color:var(--color-fg); text-decoration:none; }
.left.dash .l-lines a:hover{ color:var(--color-accent); }
.left.dash .l-lines svg{ width:18px; height:18px; fill:var(--color-accent); opacity:.9; flex:0 0 18px; }

/* Oddělovač */
.left.dash .l-hr{
  width:100%; height:1px; margin:10px 0;
  background:linear-gradient(90deg, var(--line-weak-06), var(--line-weak-14), var(--line-weak-06));
  border-radius:1px;
}

/* Stack – větší čipy */
.left.dash .l-stack h3{
  margin:0 0 8px; font-size:14px; color:var(--color-muted);
  font-weight:600; letter-spacing:.02em;
}
.left.dash .l-chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.left.dash .l-chips li{
  font-size:14px; font-weight:600; color:var(--color-fg);
  padding:11px 16px; border-radius:var(--radius-pill);
  background:linear-gradient(180deg, rgba(16,24,38,.45), rgba(16,24,38,.35));
  border:1px solid var(--line-weak-14);
  box-shadow:inset 0 1px 0 var(--line-weak-04);
  transition:border-color .12s ease, transform .12s ease, color .12s ease;
}
.left.dash .l-chips li:hover{
  border-color:color-mix(in oklab, var(--color-accent) 54%, white 0%);
  color:var(--color-accent);
  transform:translateY(-1px);
}

/* Tlačítka – plná šířka, menší mezery */
.left.dash .l-cta{ display:flex; flex-direction:column; gap:10px; }
.left.dash .btnx{
  width:100%; height:var(--btn-h);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; font-weight:700; text-decoration:none; padding:0 18px;
  color:var(--color-fg);
  background:var(--pill-bg);
  border:1px solid var(--line-weak-14);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.left.dash .btnx.primary{
  background:var(--color-accent); color:#06221c; border-color:transparent;
  box-shadow:0 12px 28px rgba(100,255,218,.22);
}
.left.dash .btnx.primary:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(100,255,218,.28); }
.left.dash .btnx.ghost:hover{ color:var(--color-accent); border-color:rgba(100,255,218,.28); transform:translateY(-1px); }

/* Sociální ikony + copyright uprostřed */
.left.dash .l-social{ display:flex; justify-content:center; gap:10px; }
.left.dash .soc{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--radius-pill); text-decoration:none;
  color:var(--color-fg); background:var(--pill-bg-strong);
  border:1px solid var(--line-weak-14);
  box-shadow:inset 0 1px 0 var(--line-weak-04);
  font-weight:800; letter-spacing:.02em;
  transition:transform .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.left.dash .soc:hover{
  color:var(--color-accent);
  border-color:rgba(100,255,218,.38);
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(100,255,218,.22), 0 8px 18px rgba(100,255,218,.14);
}
.left.dash .l-copy{
  text-align:center; margin-top:4px; color:var(--color-muted); font-size:12px; opacity:.9;
}

/* Na mobilu panel schovat (ponechána tvoje logika) */
@media (max-width:920px){
  .left.dash{ display:none; }
}

/* ======================================================================================
   RIGHT FIXED MENU (ELEVATOR)
   ====================================================================================== */

.right{
  position:fixed; right:24px; top:50%;
  translate:0 -50%;
  width:var(--right); z-index:10;
  display:flex; flex-direction:column; gap:16px; padding:16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-card);
  backdrop-filter:blur(6px);
}
.nav-dot{
  width:40px; height:40px; border-radius:var(--radius-pill);
  border:1px solid var(--color-border);
  display:grid; place-items:center;
  color:var(--color-muted); text-decoration:none; font-size:14px;
}
.nav-dot.active{
  border-color:var(--color-accent); color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(100,255,218,.18) inset;
}
.nav-dot:hover{ border-color:var(--color-accent); color:var(--color-accent); }

/* ======================================================================================
   HERO (INTRO)
   ====================================================================================== */

#uvod{
  min-height:100vh;
  display:flex; align-items:center; justify-content:flex-start;
  padding:var(--hero-pad-y) var(--hero-pad-x);
  position:relative; isolation:isolate;
}
#uvod .wrap{
  max-width:1100px; padding:0; border:none; background:transparent;
}
/* eyebrow chip */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .8rem;
  border:1px solid var(--line-weak-22);
  border-radius:var(--radius-pill);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted);
  backdrop-filter:blur(6px);
}
/* HUGE title */
#uvod h1.hero-title{
  font-family:var(--font-title) !important;
  font-size:clamp(26px, 6vw, 64px) !important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--color-fg);
  -webkit-text-stroke:0; text-shadow:none;
  margin:0.67em 0 .25rem 0; text-wrap:balance;
}
#uvod h1.hero-title .accent{ color:var(--color-accent); }
/* subtitle + perex */
.hero-sub{ font-size:clamp(20px, 2.8vw, 26px); color:var(--color-muted); margin:.3rem 0 0; }
.hero-perex{
  max-width:var(--text-max);
  font-size:clamp(16px, 2vw, 18px);
  color:var(--color-fg); opacity:.92; margin-top:2.8rem;
}
/* CTA row */
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin:clamp(18px, 3vw, 28px) 0 0; }
/* buttons */
.btn{
  appearance:none; border:0; cursor:pointer; padding:12px 18px;
  border-radius:12px; font-weight:700; text-decoration:none;
}
.btn-primary{ background:var(--color-accent); color:#06221c; box-shadow:0 10px 24px rgba(100,255,218,.22); }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--color-fg); border:1px solid var(--line-weak-28, rgba(255,255,255,.28)); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.btn:focus-visible, .pill:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ===== HERO: sekvenční náběh (bez podtržení) ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* výchozí stav – skryté */
#uvod .hero-eyebrow,
#uvod .hero-title,
#uvod .hero-sub,
#uvod .hero-perex,
#uvod .cta-row,
#uvod .kpi .kpi-item {
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}

/* sekvenční zobrazení po přidání .in */
#uvod.in .hero-eyebrow { animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 0) both; }
#uvod.in .hero-title   { animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 1) both; }
#uvod.in .hero-sub     { animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 2) both; }
#uvod.in .hero-perex   { animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 3) both; }
#uvod.in .cta-row      { animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 4) both; }

#uvod.in .kpi .kpi-item:nth-child(1){ animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 5) both; }
#uvod.in .kpi .kpi-item:nth-child(2){ animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 6) both; }
#uvod.in .kpi .kpi-item:nth-child(3){ animation: fadeUp var(--dur) ease-out calc(var(--stagger) * 7) both; }

/* jemný hover na tlačítkách */
#uvod .btn { transition: transform .15s ease, box-shadow .15s ease; }
#uvod .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }

/* reduced motion = bez animací */
@media (prefers-reduced-motion: reduce){
  #uvod .hero-eyebrow, #uvod .hero-title, #uvod .hero-sub,
  #uvod .hero-perex, #uvod .cta-row, #uvod .kpi .kpi-item {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ======================================================================================
   KPI STRIP
   ====================================================================================== */

.kpi{
  display:grid; gap:28px;
  grid-template-columns:repeat(3, minmax(120px, 1fr));
  margin:10vh 0 0;
}
.kpi-item .num{
  font-size:clamp(36px, 5.2vw, 56px);
  font-weight:800; color:var(--color-accent);
  font-family:var(--font-mono); letter-spacing:0;
}
.kpi-item .label{
  margin-top:6px; text-transform:uppercase; letter-spacing:.08em;
  font-size:12px; color:var(--color-muted);
}

/* ======================================================================================
   MAIN LAYOUT & GENERIC SECTIONS
   ====================================================================================== */

main{
  position:relative; z-index:2;
  margin-left:calc(var(--left) + 24px);
  margin-right:calc(var(--right) + 24px);
}
section{
  min-height:auto;
  padding:var(--section-pad-y) var(--section-pad-x);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
.wrap{
  width:min(100%, var(--maxw));
  padding:32px 0; backdrop-filter:blur(6px); background:transparent;
}
h2{ margin:0 0 .25em; font-size:clamp(24px, 3.2vw, 34px); }
p.lead{ color:var(--color-muted); margin:.25em 0 1em; }
section + section{ border-top:1px solid var(--line-weak-16); }

/* ======================================================================================
   SECTION: O MNĚ (#omne)
   ====================================================================================== */

#omne{
  min-height:auto; display:flex; align-items:center; justify-content:flex-start;
  padding:var(--hero-pad-y) var(--hero-pad-x);
  position:relative; isolation:isolate;
}
#omne .wrap{ max-width:1100px; padding:0; border:none; background:transparent; }
#omne .hero-eyebrow{ margin-bottom:0; }
#omne h2.hero-title{
  font-family:var(--font-title) !important;
  font-size:clamp(24px, 5vw, 56px) !important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--color-fg);
  -webkit-text-stroke:0; text-shadow:none;
  margin:0.67em 0 .25rem 0; text-wrap:balance;
}
#omne h2.hero-title .accent{ color:var(--color-accent); }
#omne .hero-sub{ display:none; }
#omne .hero-perex{
  max-width:var(--text-max); font-size:clamp(16px, 2vw, 18px);
  color:var(--color-fg); opacity:.92; margin-top:2rem;
}
#omne .hero-perex p{ margin:12px 0; line-height:1.7; }
#omne .hero-perex p:first-of-type{
  padding:12px 14px 12px 16px; border-left:3px solid var(--color-accent);
  border-radius:10px; background:rgba(100,255,218,0.06);
  box-shadow:0 1px 0 var(--line-weak-04) inset;
}
#omne .hero-perex p > strong:first-child{
  display:inline-block; margin-right:.35ch; color:var(--color-accent); letter-spacing:.01em;
}
#omne .hero-perex ul{ list-style:none; margin:6px 0 10px; padding:0; }
#omne .hero-perex ul li{ position:relative; padding-left:16px; margin:2px 0; line-height:1.6; }
#omne .hero-perex ul li::before{ content:"•"; position:absolute; left:0; top:.15em; color:var(--color-accent); }
#omne .cta-row{ display:none; }

/* ===== O MNĚ: jiné než shora/zdola ===== */
@keyframes fadeScale {
  from { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(2px); }
  to   { opacity: 1; transform: none;                filter: blur(0); }
}
@keyframes sideInL {
  from { opacity: 0; transform: translateX(-28px); filter: blur(2px); }
  to   { opacity: 1; transform: none;              filter: blur(0); }
}
@keyframes sideInR {
  from { opacity: 0; transform: translateX(28px); filter: blur(2px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* výchozí stav – skryté */
#omne .hero-eyebrow,
#omne .hero-title,
#omne .hero-perex p {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* vstup po přidání .in (sekvenčně, jiný charakter než v hero) */
#omne.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#omne.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* odstavce – střídavě zleva/zprava, postupné zpoždění */
#omne.in .hero-perex p:nth-of-type(1){ animation: sideInL var(--dur) ease-out calc(var(--stagger) * 2) both; }
#omne.in .hero-perex p:nth-of-type(2){ animation: sideInR var(--dur) ease-out calc(var(--stagger) * 3) both; }
#omne.in .hero-perex p:nth-of-type(3){ animation: sideInL var(--dur) ease-out calc(var(--stagger) * 4) both; }
#omne.in .hero-perex p:nth-of-type(4){ animation: sideInR var(--dur) ease-out calc(var(--stagger) * 5) both; }

/* respektuj preferenci omezených animací */
@media (prefers-reduced-motion: reduce){
  #omne .hero-eyebrow, #omne .hero-title, #omne .hero-perex p {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ===========================================================================
   TIMELINE
   =========================================================================== */
#timeline{ padding: var(--hero-pad-y) var(--hero-pad-x); }
#timeline .wrap{ max-width:1100px; padding:0; background:transparent; }
#timeline h2.hero-title{
  font-family:var(--font-title) !important;
  font-size:clamp(24px, 5vw, 56px) !important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--color-fg);
  -webkit-text-stroke:0; text-shadow:none;
  margin:0.67em 0 .25rem 0; text-wrap:balance;
}
#timeline h2.hero-title .accent{ color:var(--color-accent); }
#timeline .hero-eyebrow{ margin-bottom:0; }

/* Grid + svislá osa */
.tl{
  --tl-left: 180px;
  position:relative;
  display:grid; grid-template-columns:var(--tl-left) 1fr;
  gap:24px; margin-top:1.6rem; list-style:none; padding:0;
}
.tl::before{
  content:""; position:absolute; left:var(--tl-left); top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, var(--line-weak-10), var(--line-weak-06));
}
.tl-item{ display:contents; }

/* Levý sloupec – rok + tečka */
.tl-year{
  grid-column:1; color:var(--color-muted); font-size:14px; letter-spacing:.02em;
  padding-top:8px; position:relative;
}
.tl-year::before{
  content:""; position:absolute; right:-5px; top:14px;
  width:10px; height:10px; border-radius:var(--radius-pill);
  background:var(--color-accent);
  box-shadow:0 0 0 4px rgba(100,255,218,.14), 0 0 14px rgba(100,255,218,.25);
}

/* Pravý sloupec – karta */
.tl-body{
  grid-column:2; padding:14px 16px 18px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(100,255,218,.05), rgba(100,255,218,.03));
  box-shadow:0 1px 0 var(--line-weak-04) inset;
}
.tl-title{ margin:0 0 2px; font-size:clamp(18px, 2.4vw, 22px); font-weight:600; }
.tl-meta{ margin:0 0 8px; color:var(--color-muted); font-size:14px; }
.tl-bullets{ list-style:none; padding:0; margin:0; }
.tl-bullets li{ position:relative; padding-left:16px; margin:4px 0; line-height:1.6; }
.tl-bullets li::before{ content:"•"; position:absolute; left:0; top:.15em; color:var(--color-accent); }

/* zvýraznění „nyní“ */
.tl-item.is-now .tl-year{ color:var(--color-accent); font-weight:600; }
.tl-item.is-now .tl-year::before{
  width:12px; height:12px; right:-6px;
  box-shadow:0 0 0 6px rgba(100,255,218,.14), 0 0 18px rgba(100,255,218,.32);
}

/* Responsivní */
@media (max-width:1024px){
  .tl{
    --axis-x: 18px; --gap-x: 10px;
    grid-template-columns:1fr; gap:12px;
    padding-left:calc(var(--axis-x) + var(--gap-x));
    position:relative;
  }
  .tl::before{ left:var(--axis-x); }
  .tl-year{
    font-size:13px; line-height:1.35; padding-left:var(--gap-x);
    margin-bottom:-2px; position:relative;
  }
  .tl-year::before{
    left:calc(-1 * var(--gap-x)); transform:translateX(-50%);
    top:.62em; width:8px; height:8px; border-radius:var(--radius-pill);
    background:var(--color-accent);
    box-shadow:0 0 0 3px rgba(100,255,218,.12), 0 0 8px rgba(100,255,218,.20);
  }
  .tl-item.is-now .tl-year::before{
    width:9px; height:9px;
    box-shadow:0 0 0 4px rgba(100,255,218,.14), 0 0 12px rgba(100,255,218,.30);
  }
  .tl-body{ padding:12px 14px 16px; border-radius:12px; }
}
@media (max-width:480px){
  .tl{ gap:10px; }
  .tl-year{ font-size:12.5px; }
  .tl-year::before{ width:7px; height:7px; top:.6em; }
}

@keyframes fadeScale {
  from { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(2px); }
  to   { opacity: 1; transform: none;                          filter: blur(0); }
}

/* karty posun zprava k ose */
@keyframes slideToLine {
  from { opacity: 0; transform: translateX(36px); filter: blur(2px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* výchozí stav */
#timeline .hero-eyebrow,
#timeline .hero-title { opacity: 0; will-change: transform, opacity, filter; }

#timeline .tl-item .tl-body{
  opacity: 0;
  transform: translateX(36px);
  will-change: transform, opacity, filter;
}

/* aktivace nadpisu/eyebrow (stejný feeling jako jinde) */
#timeline.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#timeline.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* karta jede zprava, když má <li> .on */
#timeline .tl-item.on .tl-body{
  animation: slideToLine var(--dur) ease-out 0s both;
}

/* jistota že animace není ořezaná */
#timeline .wrap, #timeline .tl { overflow: visible; }

/* a11y: reduced motion */
@media (prefers-reduced-motion: reduce){
  #timeline .hero-eyebrow, #timeline .hero-title, #timeline .tl-item .tl-body {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ===========================================================================
   SPECIALIZACE
   =========================================================================== */
#specializace{ padding:var(--hero-pad-y) var(--hero-pad-x); }
#specializace .wrap{ max-width:1100px; padding:0; background:transparent; }
#specializace h2.hero-title{
  font-family:var(--font-title) !important;
  font-size:clamp(24px, 5vw, 56px) !important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--color-fg);
  margin:.67em 0 .25rem 0; text-wrap:balance;
}
#specializace h2.hero-title .accent{ color:var(--color-accent); }
#specializace .hero-eyebrow{ margin-bottom:0; }

/* Seznam karet */
#specializace .spec-list{
  --spec-gap: 22px;
  list-style:none; margin:1.3rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--spec-gap);
}
/* Karta */
#specializace .spec-card{
  --spec-pad: clamp(30px, 5vw, 56px);
  position:relative; padding:var(--spec-pad); border-radius:18px;
  background:linear-gradient(180deg, rgba(20,28,40,.38), rgba(20,28,40,.28));
  border:1px solid var(--line-weak-14);
  backdrop-filter:blur(6px) saturate(108%);
  box-shadow:0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 var(--line-weak-04);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#specializace .spec-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(900px 160px at 18% 0%, rgba(100,255,218,.06), transparent 70%);
  pointer-events:none;
}
/* Ikona vpravo nahoře */
#specializace .spec-icon{
  position:absolute;
  top:clamp(12px, 1.6vw, 18px); right:clamp(12px, 1.6vw, 18px);
  width:clamp(34px, 3.6vw, 40px); height:clamp(34px, 3.6vw, 40px);
  display:grid; place-items:center; border-radius:12px; color:var(--color-accent);
  background:linear-gradient(180deg, rgba(100,255,218,.18), rgba(100,255,218,.06));
  border:1px solid rgba(100,255,218,.28);
  box-shadow:inset 0 0 0 1px var(--line-weak-04), 0 6px 16px rgba(100,255,218,.18);
}
#specializace .spec-icon svg{ width:62%; height:62%; }
/* Hover / Focus */
#specializace .spec-card:hover,
#specializace .spec-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(100,255,218,.22);
  box-shadow:0 14px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(100,255,218,.16);
}
/* Typografie */
#specializace .spec-title{ margin:0 0 8px; font-size:clamp(18px, 2.2vw, 22px); font-weight:700; letter-spacing:.005em; }
#specializace .spec-meta{ margin:0 0 12px; color:var(--color-muted); font-size:14px; opacity:.95; }
#specializace .spec-points{ list-style:none; margin:0; padding:0; }
#specializace .spec-points li{
  position:relative; padding-left:16px; margin:8px 0; line-height:1.68;
}
#specializace .spec-points li::before{
  content:"•"; position:absolute; left:0; top:.22em; color:var(--color-accent); opacity:.9;
}
@media (max-width:920px){
  #specializace .spec-card{ border-radius:16px; }
  #specializace .spec-title{ margin-bottom:6px; }
  #specializace .spec-meta{ margin-bottom:10px; }
}

/* ===== SPECIALIZACE: animace vstupu ===== */
#specializace{
  --dur: 1.5s;     /* trvání jedné animace (můžeš sjednotit s ostatními sekcemi) */
  --stagger: .32s; /* rozestup mezi prvky */
}
#specializace .spec-list{ perspective: 800px; }

/* keyframes – používáme tvé fadeScale + nové pro karty a ikonku */
@keyframes popTilt {
  from { opacity: 0; transform: translateY(22px) scale(.96) rotateX(4deg); filter: blur(2px); }
  to   { opacity: 1; transform: none;                                      filter: none;   }
}
@keyframes iconPop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none;       }
}

/* výchozí stav */
#specializace .hero-eyebrow,
#specializace .hero-title{
  opacity: 0; will-change: transform, opacity, filter;
}
#specializace .spec-card{
  opacity: 0;
  transform: translateY(22px) scale(.98);
  will-change: transform, opacity, filter;
}

/* aktivace nadpisu/eyebrow (stejný feeling jako jinde) */
#specializace.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#specializace.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* karty – jemný pop + tilt, sekvenčně dle --i */
#specializace .spec-card.on{
  animation: popTilt var(--dur) cubic-bezier(.18,.82,.22,1)
             calc(var(--stagger) * var(--i, 0)) both;
}

/* ikonka v rohu si „pípne“ chvilku po kartě */
#specializace .spec-card.on .spec-icon{
  animation: iconPop .6s ease-out calc(var(--stagger) * var(--i, 0) + .18s) both;
}

@media (prefers-reduced-motion: reduce){
  #specializace .hero-eyebrow,
  #specializace .hero-title,
  #specializace .spec-card,
  #specializace .spec-card .spec-icon{
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ======================================================================================
   SECTION: TECHNOLOGIE
   ====================================================================================== */

/* ===== Technologie – 6 skleněných bublin s procenty (bez zeleného podkladu) ===== */

#technologie{
  padding: var(--hero-pad-y) var(--hero-pad-x);
}
#technologie .wrap{
  max-width: 1100px;
  padding: 0;
  background: transparent;
}
#technologie h2.hero-title{
  font-family:'Roboto', sans-serif !important;
  font-size: clamp(24px, 5vw, 56px) !important;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--fg);
  margin: .67em 0 .25rem 0;
  text-wrap: balance;
}

#technologie h2.hero-title .accent{ color:var(--color-accent); }

/* Grid – 3×2 na desktopu */
.skills-grid{
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(12px, 1.8vw, 18px);
}
@media (max-width: 960px){
  .skills-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px){
  .skills-grid{ grid-template-columns: 1fr; }
}

/* Jedna bublina */
.skill{
  --size: clamp(150px, 21vw, 210px); /* průměr bubliny */
  --ring-thick: 6px;                 /* tloušťka prstence */
  --ring-gap: 16px;                  /* mezera mezi prstencem a obsahem */
  --val: 80;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

/* Skleněné tělo bubliny */
.skill .ring{
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(20,28,40,.36), rgba(20,28,40,.24));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.26),
              inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px) saturate(110%);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

/* Prstenec procent (donut) */
.skill .ring::before{
  content:"";
  position:absolute; inset: var(--ring-gap);
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) calc(var(--val) * 1%),
                   rgba(100,255,218,.12) 0);
  mask: radial-gradient(circle at 50% 50%,
          transparent calc(50% - var(--ring-thick)),
          #000 calc(50% - var(--ring-thick) + 1px));
}

/* Jemný spotlight shora – bez zelené plochy */
.skill .ring::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

/* Logo (SVG/PNG) uprostřed – bez podkladu */
.skill .logo-img{
  position:absolute; inset:0; margin:auto;
  width: clamp(64px, 10vw, 100px);
  height: clamp(64px, 10vw, 100px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Hover */
.skill .ring:hover{
  transform: translateY(-2px);
  border-color: rgba(100,255,218,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(100,255,218,.12);
}

/* Popisky */
.skill .pct{
  color: var(--accent);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
}
.skill .label{
  color: var(--muted);
  font-size: clamp(12px, 1.6vw, 14px);
}
.skill figcaption{ margin-top: 6px; }

/* === Animace pro TECHNOLOGIE === */
#technologie{ --dur: 1.5s; --stagger: .32s; }
#technologie .skills-grid{ perspective: 800px; }

/* Registrace animovatelné proměnné pro vyplnění prstence */
@property --val {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* výchozí stav pro eyebrow + nadpis */
#technologie .hero-eyebrow,
#technologie .hero-title{
  opacity:0; will-change: transform, opacity, filter;
}

/* výchozí stav pro bublinu / logo / popisky */
.skill{
  --accent: var(--color-accent);   /* fallback když ji nenastavíš per-skill */
  opacity: 1;
}
.skill .ring{
  opacity: 0;
  transform: translateY(18px) scale(.96) rotateX(3deg);
  will-change: transform, opacity, filter;
  --val: 0;              /* start: 0 % */
  --target: 80;          /* default cíl (překryje se JS/inline) */
}
.skill .logo-img,
.skill figcaption{ opacity: 0; will-change: transform, opacity, filter; }

/* keyframes */
@keyframes ringIn {
  0%   { opacity:0; transform: translateY(18px) scale(.96) rotateX(3deg); filter: blur(2px); --val: 0; }
  100% { opacity:1; transform: none;                                      filter: none;     --val: var(--target); }
}
@keyframes logoPop { from { opacity:0; transform: scale(.88); } to { opacity:1; transform:none; } }
/* použij existující fadeScale z předchozích sekcí */

/* aktivace nadpisu/eyebrow */
#technologie.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#technologie.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* bublinám dáme indexované zpoždění přes --i */
.skill.on .ring{
  animation: ringIn var(--dur) cubic-bezier(.18,.82,.22,1)
             calc(var(--stagger) * var(--i, 0)) both;
}
.skill.on .logo-img{
  animation: logoPop .6s ease-out calc(var(--stagger) * var(--i, 0) + .18s) both;
}
.skill.on figcaption{
  animation: fadeScale var(--dur) ease-out calc(var(--stagger) * var(--i, 0) + .22s) both;
  opacity:1; /* pro jistotu, když by už byl obsah na místě */
}

@media (prefers-reduced-motion: reduce){
  #technologie .hero-eyebrow, #technologie .hero-title,
  .skill .ring, .skill .logo-img, .skill figcaption{
    animation: none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ======================================================================================
SECTION: Ceník
   ====================================================================================== */
#cenik{ padding: var(--hero-pad-y) var(--hero-pad-x); }
#cenik .wrap{ max-width:1100px; padding:0; background:transparent; }
#cenik h2.hero-title{
  font-family:'Roboto',sans-serif!important;
  font-size:clamp(24px,5vw,56px)!important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--fg);
  margin:.67em 0 .25rem 0; text-wrap:balance;
}
#cenik h2.hero-title .accent{ color:var(--color-accent); }
#cenik .hero-eyebrow{ margin-bottom:0; }

/* Grid tří karet */
#cenik .price-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3, 1fr);
  align-items:stretch;                 /* <- srovná výšky karet */
  margin-top:1.3rem;
}

/* Karta (glass jako z ostatních sekcí) */
#cenik .price-card{
  position:relative;
  padding: clamp(22px, 3.6vw, 34px);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(20,28,40,.38), rgba(20,28,40,.28));
  border: 1px solid rgba(148,163,184,.14);
  backdrop-filter: blur(6px) saturate(108%);
  box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;

  /* --- zarovnání CTA na dno --- */
  display:flex;                /* head -> features -> unit -> CTA */
  flex-direction:column;
}
#cenik .price-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(900px 160px at 18% 0%, rgba(100,255,218,.06), transparent 70%);
}
#cenik .price-card:hover{ transform:translateY(-2px); border-color:rgba(100,255,218,.22); }

/* Hlavička karty */
#cenik .price-head{ margin-bottom:10px; }
#cenik .price-title{ margin:0 0 4px 0; font-size:clamp(18px,2.3vw,22px); font-weight:800; letter-spacing:.01em; }
#cenik .price-range{ margin:0;   font-size: clamp(18px, 2.2vw, 24px); font-weight:800; color:var(--accent); }
#cenik .price-tag{ margin:2px 0 0 0; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* Výčet + jednotková cena */
#cenik .price-features{ list-style:none; margin:12px 0 12px; padding:0; flex:1 1 auto; } /* <- roztáhne střed */
#cenik .price-features li{
  position:relative; padding-left:16px; margin:6px 0; line-height:1.65;
}
#cenik .price-features li::before{
  content:"•"; position:absolute; left:0; top:.2em; color:var(--accent);
}
#cenik .unit-line{ margin:.5rem 0 .75rem; color:var(--muted); }   /* vyrovnané mezery */
#cenik .unit-line strong{ color:var(--fg); }

/* ===================== CENÍK: CTA button ===================== */
#cenik .btn-price{
  width:100%;
  height:var(--btn-h, 48px);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  padding:0 18px;
  margin-top:.1rem;                  /* jemný odstup od unit-line */

  color:var(--color-fg, var(--fg));
  background:var(--pill-bg, rgba(16,24,38,.45));
  border:1px solid var(--line-weak-14, rgba(255,255,255,.14));

  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
#cenik .btn-price.primary{
  background:var(--color-accent, var(--accent));
  color:#06221c;
  border-color:transparent;
  box-shadow:0 12px 28px color-mix(in oklab, var(--color-accent, var(--accent)) 22%, transparent);
}
#cenik .btn-price.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px color-mix(in oklab, var(--color-accent, var(--accent)) 28%, transparent);
}
#cenik .btn-price.ghost:hover{
  color:var(--color-accent, var(--accent));
  border-color:color-mix(in oklab, var(--color-accent, var(--accent)) 28%, transparent);
  transform:translateY(-1px);
}
#cenik .btn-price:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

/* ===================== CENÍK: badge (chip) ===================== */
#cenik .price-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted, var(--muted));
  background:var(--pill-bg, rgba(16,24,38,.35));
  border:1px solid var(--line-weak-14, rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
#cenik .price-badge svg{ width:14px; height:14px; }

#cenik .price-badge.pop{
  color:var(--color-accent, var(--accent));
  border-color:color-mix(in oklab, var(--color-accent, var(--accent)) 40%, transparent);
  background:linear-gradient(180deg,
              color-mix(in oklab, var(--color-accent, var(--accent)) 18%, transparent),
              rgba(16,24,38,.32));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),
              0 6px 16px color-mix(in oklab, var(--color-accent, var(--accent)) 18%, transparent);
}

/* Pozice badge a zvýraznění celé karty, když je "is-popular" */
#cenik .price-card.is-popular{
  border-color: color-mix(in oklab, var(--color-accent, var(--accent)) 28%, rgba(148,163,184,.14));
  box-shadow:
    0 10px 30px color-mix(in oklab, var(--color-accent, var(--accent)) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
}
#cenik .price-card.is-popular .price-badge{
  position:absolute;
  left:50%; top:0;
  transform:translate(-50%, -60%);     /* středově nahoře přes hranu */
  pointer-events:none; z-index:2;
}

/* Jednotkové sazby pod kartami */
#cenik .unit-box{
  margin-top:16px; padding:16px; border-radius:var(--radius-md);
  background: linear-gradient(180deg, rgba(16,24,38,.35), rgba(16,24,38,.28));
  border:1px solid rgba(148,163,184,.12);
}
#cenik .unit-title{ margin:0 0 8px 0; font-size:16px; color:var(--muted); letter-spacing:.02em; }
#cenik .unit-tiers{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
#cenik .unit-tiers li span{ color:var(--fg); }
#cenik .price-note{ margin:.5rem 0 0; color:var(--muted); font-size:13px; }

/* Responzivně */
@media (max-width:1100px){
  #cenik .price-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  #cenik .price-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  #cenik .price-card.is-popular .price-badge{ transform:translate(-50%, -55%); }
}

/* === Animace pro CENÍK === */
#cenik{ --dur: 1.5s; --stagger: .32s; }

/* výchozí stav eyebrow + nadpis */
#cenik .hero-eyebrow,
#cenik .hero-title{
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* výchozí stav karet a badge */
#cenik .price-card{
  opacity: 0;
  transform: translateY(24px) scale(.98);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}
#cenik .price-card .price-badge{
  opacity: 0;
  transform: translateY(-6px) scale(.94);
  will-change: transform, opacity;
}

/* keyframes */
@keyframes cardIn {
  0%   { opacity:0; transform: translateY(24px) scale(.98); filter: blur(2px); }
  100% { opacity:1; transform: none;                        filter: none; }
}
@keyframes badgePop {
  0%   { opacity:0; transform: translateY(-6px) scale(.94); }
  100% { opacity:1; transform: none; }
}

/* spuštění eyebrow+nadpis jako v ostatních sekcích */
#cenik.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#cenik.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* karty se spouštějí postupně dle --i */
#cenik .price-card.on{
  animation: cardIn var(--dur) cubic-bezier(.18,.82,.22,1)
             calc(var(--stagger) * var(--i, 0)) both;
}
/* badge přijde chvilku po kartě (kratké) */
#cenik .price-card.on .price-badge{
  animation: badgePop .5s ease-out
             calc(var(--stagger) * var(--i, 0) + .18s) both;
}

/* „is-popular“ může po dojezdu lehce „dýchat“ okrajem (volitelné) */
@keyframes pulseBorder {
  0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04); }
  50%     { box-shadow: 0 14px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(100,255,218,.10); }
}
#cenik .price-card.on.is-popular{
  animation-name: cardIn, pulseBorder;
  animation-duration: var(--dur), 2.2s;
  animation-delay: calc(var(--stagger) * var(--i, 0)), calc(var(--stagger) * var(--i, 0) + var(--dur));
  animation-timing-function: cubic-bezier(.18,.82,.22,1), ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: 1, 2; /* pulzne 2× a skončí */
}

/* reduced motion – bez animací */
@media (prefers-reduced-motion: reduce){
  #cenik .hero-eyebrow, #cenik .hero-title, #cenik .price-card, #cenik .price-badge{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

#cenik .price-card.is-popular{
  overflow: visible;
  position: relative;
}

/* badge – základní poloha vytažená do proměnné, aby ji animace nepřepsala */
#cenik .price-card.is-popular .price-badge{
  position: absolute;
  left: 50%;
  top: 0;
  /* základní transform pro centrování nad kartou */
  --badge-t: translate(-50%, -60%);
  transform: var(--badge-t);
  z-index: 2;
  will-change: transform, opacity, filter;
}

/* NOVÉ keyframes – animují kolem základní polohy (var(--badge-t)) */
@keyframes popBadgeFixed {
  from { opacity: 0; transform: var(--badge-t) translateY(-6px) scale(.96); filter: blur(2px); }
  to   { opacity: 1; transform: var(--badge-t) translateY(0)    scale(1);   filter: blur(0); }
}

/* spuštění animace badge u „doporučené“ karty */
#cenik .price-card.on.is-popular .price-badge{
  animation: popBadgeFixed var(--dur, 1.5s) ease-out .24s both;
}


/* ======================================================================================
   SECTION: Kontakt
   ====================================================================================== */
/* ===== Kontakt ===== */
#kontakt{
  padding: var(--hero-pad-y) var(--hero-pad-x);
}
#kontakt .wrap{
  max-width:1100px; padding:0; background:transparent;
}
#kontakt h2.hero-title{
  font-family:var(--font-title)!important;
  font-size:clamp(24px,5vw,56px)!important;
  letter-spacing:-0.02em; line-height:1.08; color:var(--fg);
  margin:.67em 0 .25rem 0; text-wrap:balance;
}
#kontakt h2.hero-title .accent{ color:var(--color-accent); }

/* Layout: form + info */
.kgrid{
  display:grid; gap:16px;
  grid-template-columns: 1fr; /* dříve: minmax(0,1fr) 340px */
  align-items:start;
  margin-top:1.3rem;
}
@media (max-width:980px){ .kgrid{ grid-template-columns:1fr; } }

/* Form – glass karta */
.kform{
  padding: clamp(22px, 3.6vw, 34px);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--line-weak-14);
  backdrop-filter: blur(6px) saturate(108%);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.kform .row-2{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:640px){ .kform .row-2{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.field label, .kform legend{
  font-size:13px; color:var(--color-muted); letter-spacing:.02em;
}
.ctrl{
  width:100%; height:var(--control-h);
  padding:10px 12px; color:var(--color-fg);
  background: linear-gradient(180deg, rgba(16,24,38,.45), rgba(16,24,38,.35));
  border:1px solid var(--line-weak-14);
  border-radius:12px;
  box-shadow: inset 0 1px 0 var(--line-weak-04);
}
.ctrl.textarea{ min-height:140px; height:auto; resize:vertical; padding:12px 12px; line-height:1.5; }
.ctrl:focus{ outline:none; border-color: color-mix(in oklab, var(--color-accent) 58%, white 0%); box-shadow:0 0 0 3px rgba(100,255,218,.18); }
.ctrl::placeholder{ color: color-mix(in oklab, var(--color-muted) 80%, black); }

/* Chips (výběr služeb) */
.chips-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip{
  display:inline-flex; align-items:center;
  background: var(--pill-bg);
  border:1px solid var(--line-weak-14);
  border-radius: var(--radius-pill);
  padding:8px 12px; gap:8px; cursor:pointer;
  user-select:none;
  box-shadow: inset 0 1px 0 var(--line-weak-04);
  transition: border-color .12s ease, transform .12s ease, color .12s ease;
}
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{ font-size:14px; font-weight:600; color:var(--color-fg); }
.chip:hover{ transform:translateY(-1px); border-color: color-mix(in oklab, var(--color-accent) 28%, transparent); }
.chip:has(input:checked){
  border-color: color-mix(in oklab, var(--color-accent) 54%, transparent);
  color:var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(100,255,218,.12), 0 8px 18px rgba(100,255,218,.10);
}
.chip:has(input:checked) span{ color:var(--color-accent); }

/* Nápověda + souhlas + stav */
.hint{ margin-top:6px; font-size:12px; color:var(--color-muted); }
.consent{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 6px; font-size:13px; color:var(--color-muted); }
.consent input{ margin-top:3px; }
.kform-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.submit-btn{ min-width:220px; }
#kontakt .btn{ height:var(--btn-h); display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }
.form-status{ margin-top:10px; font-size:14px; color:var(--color-muted); min-height:1.2em; }

/* Info panel */
.kinfo{
  padding: clamp(18px, 3.2vw, 24px);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(20,28,40,.38), rgba(20,28,40,.28));
  border:1px solid var(--line-weak-14);
  box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 var(--line-weak-04);
}
.kinfo-title{ margin:0 0 6px; font-size:16px; color:var(--color-muted); letter-spacing:.02em; }
.kinfo-list{ list-style:none; margin:8px 0 10px; padding:0; }
.kinfo-list li{ margin:6px 0; }
.kinfo a{ color:var(--color-fg); text-decoration:none; border-bottom:1px solid transparent; }
.kinfo a:hover{ color:var(--color-accent); border-color:var(--color-accent); }
.kinfo-note{ margin-top:8px; font-size:13px; color:var(--color-muted); }

/* Honeypot – schovat před lidmi, ne před roboty */
.kform .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* === Kontakt: animace === */
#kontakt{ --dur: 1.5s; --stagger: .16s; }

/* výchozí stavy */
#kontakt .hero-eyebrow,
#kontakt .hero-title{
  opacity:0;
  will-change:transform,opacity,filter;
}
#kontakt .kform,
#kontakt .kinfo{
  opacity:0;
  transform: translateX(28px); /* základ */
  filter: blur(2px);
  will-change:transform,opacity,filter;
}

/* keyframes – používáme globální fadeScale/sideInL/sideInR pokud už máš,
   pro jistotu přidám sideInR/L variantu (můžeš vynechat, když je máš výše) */
@keyframes sideInL { from {opacity:0; transform:translateX(-28px); filter:blur(2px);} to {opacity:1; transform:none; filter:none;} }
@keyframes sideInR { from {opacity:0; transform:translateX( 28px); filter:blur(2px);} to {opacity:1; transform:none; filter:none;} }

/* spuštění eyebrow + nadpis */
#kontakt.in .hero-eyebrow { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 0) both; }
#kontakt.in .hero-title   { animation: fadeScale var(--dur) ease-out calc(var(--stagger) * 1) both; }

/* bloky: formulář zleva, info zprava (každý má index --i) */
#kontakt .kform.on{ animation: sideInL var(--dur) ease-out calc(var(--stagger) * var(--i,0)) both; }
#kontakt .kinfo.on{ animation: sideInR var(--dur) ease-out calc(var(--stagger) * var(--i,1)) both; }

/* vnitřní sekvence ve formuláři – pole, chips, akce */
#kontakt .kform .field,
#kontakt .kform .chips-group .chip,
#kontakt .kform .kform-actions .btn{
  opacity:0;
  transform:translateY(10px);
  will-change:transform,opacity;
}
#kontakt .kform.on .field,
#kontakt .kform.on .chips-group .chip,
#kontakt .kform.on .kform-actions .btn{
  animation: fadeUp var(--dur) ease-out calc(.12s + var(--stagger) * var(--j,0)) both;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #kontakt .hero-eyebrow, #kontakt .hero-title,
  #kontakt .kform, #kontakt .kinfo,
  #kontakt .kform .field, #kontakt .kform .chips-group .chip, #kontakt .kform .kform-actions .btn{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}


/* ======================================================================================
   CONFIRM CONTACT MODAL
   ====================================================================================== */
.kmodal{ position:fixed; inset:0; z-index:1000; display:none; }
.kmodal.show{ display:block; }
.kmodal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}
.kmodal-dialog{
  position:relative; inset:0; margin:auto; max-width:min(520px, 92vw);
  background: var(--glass-bg);
  border:1px solid var(--line-weak-14);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.2vw, 28px);
  color: var(--color-fg);
  text-align: center;
  top: 50%; transform: translateY(-50%);
}
.kmodal-icon{
  width:56px; height:56px; margin:0 auto 10px;
  display:grid; place-items:center; border-radius:50%;
  background: linear-gradient(180deg, rgba(100,255,218,.18), rgba(100,255,218,.08));
  border:1px solid rgba(100,255,218,.28);
  font-weight:800; color:var(--color-accent);
  box-shadow:inset 0 0 0 1px var(--line-weak-04), 0 6px 16px rgba(100,255,218,.18);
}
.kmodal-title{ margin:.2rem 0 .25rem; font-size:clamp(18px, 2.4vw, 22px); font-weight:800; }
.kmodal-text{ margin:.1rem 0 1rem; color:var(--color-muted); }
.kmodal-close{ width:min(220px, 100%); margin:0 auto; }


/* ======================================================================================
   GRID & CARDS (GENERIC)
   ====================================================================================== */

.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.card{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:14px;
  background:#0f172acc;
}
.tag{ font-size:12px; color:var(--color-muted); }
.price{ font-weight:800; font-size:22px; }

/* ======================================================================================
   RESPONSIVE (BREAKPOINTS)
   ====================================================================================== */

@media (max-width:1100px){
  :root{ --left:290px; --right:64px; }
}
@media (max-width:920px){
  .left{ position:static; width:auto; margin:24px; inset:auto; border-radius:20px; }
  main{ margin:0 24px; }
  .right{ display:none; }
  section{ min-height:auto; padding:60px 0; }
  .kpi{ grid-template-columns:repeat(2, minmax(120px, 1fr)); }
  #omne .hero-perex{ max-width:100%; }
  #omne .hero-perex p{ line-height:1.65; }
}

/* ======================================================================================
   ACCESSIBILITY / REDUCED MOTION
   ====================================================================================== */
@media (prefers-reduced-motion: reduce){
  .bg video{ display:none; }
}