/* Self-hosted fonts: no Google connection, keeps EU-only true */
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:400;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:500;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:600;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:700;src:url('/fonts/inter-v20-latin-700.woff2') format('woff2')}
/* Inter Tight: display face for headings */
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:700;src:url('/fonts/inter-tight-v9-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:800;src:url('/fonts/inter-tight-v9-latin-800.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:900;src:url('/fonts/inter-tight-v9-latin-900.woff2') format('woff2')}

:root{
  --bg:#FBFAF7; --bg-warm:#F1ECE2; --bg-dark:#0E0D0B; --surface:#FFFFFF;
  --text:#0E0D0B; --text-muted:#2A2D33; --text-subtle:#6B7280;
  --border:#E6E2D8; --border-light:#F0EDE5;
  --accent:#9B1C2E; --accent-hover:#7E1525;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04);
  --shadow:0 4px 16px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 18px 50px rgba(0,0,0,0.10),0 4px 14px rgba(0,0,0,0.06);
  --radius:10px; --radius-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:920px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:'Inter Tight',system-ui,sans-serif;font-weight:800;letter-spacing:-0.02em;line-height:1.1}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-inner{max-width:920px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:16px;letter-spacing:-0.02em}
.brand span{color:var(--accent)}
.nav-back{font-size:13px;font-weight:600;color:var(--text-subtle);display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.nav-back:hover{color:var(--text)}

/* HERO */
.hero{padding:56px 0 28px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,42px);font-weight:900;margin-bottom:14px}
.hero h1 em{font-style:normal}
.hero-sub{font-size:clamp(15px,2.4vw,17px);color:var(--text-muted);max-width:560px;margin:0 auto}

/* VIDEO */
.video-section{padding:8px 0 16px}
.video-frame{
  background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);position:relative;
}
.video-ratio{position:relative;padding-bottom:54.16%;height:0}
.video-ratio iframe,.video-ratio video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Video facade: page loads instantly, player loads on click */
.video-facade{position:absolute;top:0;left:0;width:100%;height:100%;border:0;cursor:pointer;background:var(--bg-dark);display:flex;align-items:center;justify-content:center}
.video-facade img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video-facade:hover img,.video-facade:focus-visible img{opacity:1}
.facade-play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.video-facade:hover .facade-play,.video-facade:focus-visible .facade-play{transform:scale(1.07)}
.facade-play svg{width:26px;height:26px;fill:var(--bg-dark);margin-left:4px}
.facade-hint{position:absolute;z-index:2;bottom:16px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.video-facade:focus-visible{outline:3px solid #fff;outline-offset:-3px}

.video-caption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--text-subtle)}
.video-caption .live-dot{width:7px;height:7px;border-radius:50%;background:var(--text-subtle)}
.video-note{text-align:center;font-size:13px;color:var(--text-subtle);margin-top:8px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.55}

/* BREAKDOWN */
.section{padding:46px 0}
.sec-head{text-align:center;margin-bottom:30px}
.sec-head h2{font-size:clamp(22px,3.5vw,30px);margin-bottom:8px}
.sec-head p{font-size:14px;color:var(--text-subtle);max-width:520px;margin:0 auto}
.steps{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border)}
.step-num{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:800;color:var(--text-subtle);letter-spacing:0.06em;margin-bottom:10px}
.step h3{font-size:16px;font-weight:700;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--text-muted)}

/* STACK */
.stack{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:6px}
.chip{font-size:12.5px;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:7px 14px;border-radius:var(--radius)}

/* CTA */
.cta-section{background:var(--bg-dark);color:#fff;padding:64px 0}
.cta-inner{text-align:center;max-width:560px;margin:0 auto}
.cta-section h2{font-size:clamp(22px,3.5vw,30px);font-weight:900;margin-bottom:14px;color:#fff}
.cta-section p{font-size:15px;color:rgba(255,255,255,0.62);margin-bottom:28px}
.cta-btns{display:flex;flex-direction:column;gap:14px;align-items:center}
@media(min-width:520px){.cta-btns{flex-direction:row;justify-content:center;align-items:center}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--radius);transition:all .2s;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.cta-alt{font-size:14px;font-weight:600;color:rgba(255,255,255,0.62);border-bottom:1px solid rgba(255,255,255,0.22);padding-bottom:1px;transition:color .15s,border-color .15s}
.cta-alt:hover{color:#fff;border-color:#fff}
.cta-price{margin-bottom:22px;font-size:15px;color:rgba(255,255,255,0.80);font-weight:600}
.cta-fine{margin-top:10px;font-size:12.5px;color:rgba(255,255,255,0.45)}

/* FOOTER */
.footer{padding:34px 0;text-align:center;border-top:1px solid var(--border)}
.footer .brand{font-size:15px;margin-bottom:6px}
.footer p{font-size:12.5px;color:var(--text-subtle)}
.footer a{color:var(--text-muted);font-weight:600;transition:color .15s}
.footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ── Language switcher (EN · SK · CS) ── */
.lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.04em}
.lang-switch a{color:var(--text-subtle);transition:color .15s}
.lang-switch a:hover{color:var(--accent)}
.lang-switch .lang-cur{color:var(--text)}
.lang-switch .lang-sep{color:var(--border)}
.nav-right{display:flex;align-items:center;gap:16px}

/* Anchor jumps clear of the sticky header */
[id]{scroll-margin-top:76px}

/* The facade still needs a surface with no poster behind it. Plain dark
   ground until a still from a clean run exists. */
.video-facade{background:var(--bg-dark)}

body{padding-bottom:var(--cookie-h,0px)}

/* The <em> in the H1 rendered identically to the rest, so the accent it was
   marking up did nothing. */
.hero h1 .h1-accent{color:var(--accent)}

/* REVERTED: align-items:start cured the empty box under card 04 but left the
   2x2 grid with four different bottoms, which both auditors called worse. The
   real fix is the length of the copy in card 04, which is Max's to write. */

/* Same defect the homepage had: Inter Tight at -0.02em with word-spacing:0
   closes the gaps between words, and a caron touches the next letter. The
   display face gets its spaces back here too. */
h1,h2,h3{word-spacing:.055em}

/* The two h2 on the page rendered at different sizes. The CTA heading keeps
   its 900 weight and the dark band; it does not need a second kegel too. */