/* ═══════════════════════════════════════════
   TOKENS
════════════════════════════════════════════ */
:root{
  --bg:          #ffffff;
  --bg-soft:     #f6f8fb;
  --bg-mesh:     #f2f5f9;
  --line:        #e6eaf0;
  --line-strong: #d6dce6;

  --ink:         #0b1220;
  --ink-2:       #1f2a3d;
  --muted:       #5a6578;
  --muted-2:     #8a93a3;

  --brand:       #1e4bd8;      /* kobalt */
  --brand-ink:   #0f2c9c;
  --brand-soft:  #eaf0ff;
  --accent:      #d97706;      /* jantár – výstraha/teplo, stavbárske */
  --accent-soft: #fff1d6;

  --ok:          #0a8754;
  --ok-soft:     #e4f6ed;
  --warn:        #b45309;
  --warn-soft:   #fff1d6;
  --info:        #1e4bd8;
  --info-soft:   #eaf0ff;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 4px 14px -4px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 24px 48px -18px rgba(15,23,42,.18), 0 8px 20px -10px rgba(15,23,42,.08);

  --ease:        cubic-bezier(.2,.7,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════════
   RESET
════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ margin:0; padding:0 }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; letter-spacing:-0.02em; font-weight:700; color:var(--ink) }
h1{ font-size:clamp(2.2rem, 4.2vw, 3.6rem); line-height:1.05; letter-spacing:-0.03em; font-weight:800 }
h2{ font-size:clamp(1.6rem, 2.6vw, 2.25rem); line-height:1.15 }
h3{ font-size:1.1rem; line-height:1.3 }
p{ margin:0; color:var(--muted) }
::selection{ background:var(--brand); color:#fff }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px }
section{ padding:96px 0; position:relative }
.text-center{ text-align:center }
.mt-3{ margin-top:2rem }

/* ═══════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.85);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink);
}
.nav-brand span{ color:var(--accent) }
.nav-brand svg{ transition:transform .4s var(--ease-out) }
.nav-brand:hover svg{ transform:rotate(-8deg) scale(1.06) }

.nav-links{
  display:flex; align-items:center; gap:4px;
}
.nav-links > a{
  position:relative; padding:8px 12px; border-radius:8px;
  font-size:.92rem; font-weight:500; 
  transition:color .15s var(--ease), background .15s var(--ease);
}
.nav-links > a:hover{ color:var(--brand); background:var(--brand-soft) }
.nav-links > a.active{ color:var(--brand) }
.nav-links > a.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--brand); border-radius:2px;
}
.lang-switcher{ position:relative; margin-left:6px }
.lang-btn{
  appearance:none; font:inherit; font-size:.85rem; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  padding:7px 12px; border-radius:8px; cursor:pointer; min-width:56px;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.lang-btn:hover{ border-color:var(--brand); color:var(--brand) }
.lang-btn::after{ content:"▾"; font-size:.7rem; opacity:.6 }

.nav-cta{
  margin-left:6px;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:10px;
  background:var(--ink); color:#fff; font-weight:600; font-size:.9rem;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .15s var(--ease);
}
.nav-cta:hover{
  background:var(--brand);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(30,75,216,.55);
}
.nav-cta::after{
  content:"→"; transition:transform .2s var(--ease);
}
.nav-cta:hover::after{ transform:translateX(3px) }

/* mobile nav */
.nav-toggle{ display:none; appearance:none; border:none; background:transparent; cursor:pointer; padding:8px }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .25s var(--ease), opacity .2s }
@media (max-width: 900px){
  .nav-toggle{ display:block }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:16px; display:none;
  }
  .nav-links.open{ display:flex }
  .nav-links > a{ padding:12px }
  .nav-cta{ justify-content:center; margin:8px 0 0 }
  .lang-switcher{ margin:8px 0 0 }
}

/* ═══════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero{
  position:relative; padding:72px 0 48px; overflow:hidden;
  background:
    radial-gradient(1000px 500px at 90% -10%, #eaf0ff 0%, transparent 60%),
    radial-gradient(800px 400px at -10% 110%, #fff1d6 0%, transparent 55%),
    linear-gradient(180deg, #fcfdff 0%, #ffffff 100%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
@media (max-width: 960px){ .hero-grid{ grid-template-columns:1fr; gap:48px } }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-ink);
  background:var(--brand-soft);
  border:1px solid #d3deff;
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.hero-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px rgba(30,75,216,.18);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, var(--accent) 0%, #ef4444 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  font-size:1.125rem; color:var(--muted); margin:18px auto 30px; max-width:52ch;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:10px;
  font:inherit; font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease),
             background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  white-space:nowrap;
}
.btn-lg{ padding:14px 22px; font-size:1rem }
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:hover{
  background:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 18px 32px -12px rgba(30,75,216,.5);
}
.btn-primary::after{ content:"→"; transition:transform .2s var(--ease) }
.btn-primary:hover::after{ transform:translateX(4px) }

.btn-outline{
  background:#fff; color:var(--ink); border-color:var(--line-strong);
}
.btn-outline:hover{
  border-color:var(--ink); transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-dark{
  background:var(--ink); color:#fff;
  padding:12px 22px; border-radius:10px;
}
.btn-dark:hover{ background:var(--brand); transform:translateY(-2px) }

/* Hero mock dashboard */
.hero-visual{ position:relative }
.hero-visual::before{
  content:""; position:absolute; inset:-40px;
  background:radial-gradient(400px 300px at 60% 40%, rgba(30,75,216,.12), transparent 70%);
  z-index:-1;
}
.mock-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:20px; position:relative;
  transform:perspective(1400px) rotateY(-6deg) rotateX(4deg);
  transition:transform .6s var(--ease-out);
}
.hero-visual:hover .mock-card{ transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-4px) }

.mock-header{
  display:flex; align-items:center; gap:6px;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.mock-header .dot{ width:10px; height:10px; border-radius:50%; display:inline-block }
.mock-header strong{
  margin-left:auto; font-size:.85rem; font-weight:600; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px;
}
.mock-header strong::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);
}
.mock-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px; border-radius:12px;
  transition:background .15s var(--ease), transform .15s var(--ease);
  font-size:.92rem; color:var(--ink-2);
}
.mock-row + .mock-row{ margin-top:4px }
.mock-row:hover{ background:var(--bg-soft); transform:translateX(2px) }
.mock-row .left{
  display:inline-flex; align-items:center; gap:10px;
}
.mock-row .avatar{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, #e3e8f0, #f4f6fa);
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:var(--ink-2);
}
.badge-mini{
  font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid transparent;
}
.badge-mini::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.bg-success{ color:var(--ok); background:var(--ok-soft); border-color:#b7e3ca }
.bg-warning{ color:var(--warn); background:var(--warn-soft); border-color:#f0d699 }
.bg-primary{ color:var(--info); background:var(--info-soft); border-color:#c9d5ff }

/* decorative floating badges */
.float-badge{
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-md);
  display:inline-flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600;
  animation:float 5s ease-in-out infinite;
}
.float-badge .ic{
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.float-badge.fb-1{ top:-14px; left:-24px; animation-delay:0s }
.float-badge.fb-1 .ic{ background:var(--brand-soft); color:var(--brand) }
.float-badge.fb-2{ bottom:-20px; right:-10px; animation-delay:1.2s }
.float-badge.fb-2 .ic{ background:var(--accent-soft); color:var(--accent) }
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-8px) }
}
@media (max-width: 960px){ .float-badge{ display:none } }

/* ═══════════════════════════════════════════
   STATS
════════════════════════════════════════════ */
.stats-wrap{ padding-top:0 }
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
@media (max-width: 720px){ .stats{ grid-template-columns:repeat(2,1fr) } }
.stat{
  padding:28px 24px;
  border-right:1px solid var(--line);
  transition:background .2s var(--ease);
}
.stat:last-child{ border-right:none }
@media (max-width: 720px){
  .stat{ border-right:none; border-bottom:1px solid var(--line) }
  .stat:nth-child(odd){ border-right:1px solid var(--line) }
  .stat:nth-last-child(-n+2){ border-bottom:none }
}
.stat:hover{ background:var(--bg-soft) }
.stat-val{
  font-size:2.25rem; font-weight:800; letter-spacing:-0.03em; color:var(--ink);
  line-height:1;
  font-family:'Inter',sans-serif;
}
.stat-val span{
  background:linear-gradient(135deg, var(--ink) 0%, var(--brand) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{
  margin-top:8px; font-size:.9rem; color:var(--muted);
}

/* ═══════════════════════════════════════════
   SECTION HEAD
════════════════════════════════════════════ */
.section-head{
  max-width:680px; margin:0 auto 48px; text-align:center;
}
.section-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
  padding:4px 10px; border-radius:6px; background:var(--brand-soft);
  margin-bottom:14px;
}
.section-head p{
  margin-top:14px; font-size:1.05rem; color:var(--muted);
}

/* ═══════════════════════════════════════════
   CARDS GRID
════════════════════════════════════════════ */
.grid{ display:grid; gap:20px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }
@media (max-width: 900px){
  .grid-3{ grid-template-columns:repeat(2,1fr) }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 560px){
  .grid-3,.grid-4{ grid-template-columns:1fr }
}

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(30,75,216,.05) 0%, transparent 60%);
  opacity:0; transition:opacity .3s var(--ease); z-index:-1;
}
.card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--brand), var(--accent));
  transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.card:hover::before{ opacity:1 }
.card:hover::after{ transform:scaleY(1) }
.card h3{ margin-bottom:6px; transition:color .15s var(--ease) }
.card:hover h3{ color:var(--brand) }
.card p{ font-size:.93rem; line-height:1.55 }

.card-icon{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand);
  font-size:1.2rem; font-weight:700;
  margin-bottom:18px;
  transition:transform .3s var(--ease-out), background .2s var(--ease);
}
.card-icon.alt{ background:var(--accent-soft); color:var(--accent) }
.card:hover .card-icon{ transform:rotate(-6deg) scale(1.08) }

/* ═══════════════════════════════════════════
   MODULES (soft bg)
════════════════════════════════════════════ */
.soft-bg{
  background:
    radial-gradient(700px 360px at 80% 0%, #eaf0ff 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-mesh) 0%, #ffffff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ═══════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════════ */
.cta-banner{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:64px 48px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(30,75,216,.45) 0%, transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(217,119,6,.35) 0%, transparent 60%),
    linear-gradient(135deg, #0b1220 0%, #1a2647 100%);
  color:#fff; text-align:center;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  pointer-events:none;
}
.cta-banner > *{ position:relative }
.cta-banner h2{ color:#fff; font-size:clamp(1.8rem, 3vw, 2.5rem) }
.cta-banner p{ color:rgba(255,255,255,.75); margin:14px auto 30px; max-width:52ch; font-size:1.05rem }
.cta-banner .btn-outline{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.3);
}
.cta-banner .btn-outline:hover{
  background:#fff; color:var(--ink); border-color:#fff;
}
.cta-banner .btn-primary{
  background:#fff; color:var(--ink);
}
.cta-banner .btn-primary:hover{
  background:var(--accent); color:#fff;
  box-shadow:0 18px 32px -12px rgba(217,119,6,.55);
}

/* ═══════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand p{ margin-top:12px; max-width:32ch; font-size:.92rem }
.footer h4{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:14px; font-weight:600;
}
.footer a{
  display:block; padding:4px 0; color:var(--ink-2); font-size:.92rem;
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.footer a:hover{ color:var(--brand); transform:translateX(3px) }
.footer-bottom{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.85rem; color:var(--muted);
}

/* ═══════════════════════════════════════════
   REVEAL ON SCROLL
════════════════════════════════════════════ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.reveal-stagger.in > *{ opacity:1; transform:none }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.00s }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.05s }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.10s }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.15s }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.20s }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.25s }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .reveal,.reveal-stagger > *{ opacity:1 !important; transform:none !important }
}

.lang-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #252b3b;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    min-width: 160px;
    z-index: 2000;
    overflow: hidden;
}
.hero{
  position:relative; padding:72px 0 48px; overflow:hidden;
  background:
    radial-gradient(1000px 500px at 90% -10%, #eaf0ff 0%, transparent 60%),
    radial-gradient(800px 400px at -10% 110%, #fff1d6 0%, transparent 55%),
    linear-gradient(180deg, #fcfdff 0%, #ffffff 100%);
  text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero .inner{ position:relative; max-width:760px; margin:0 auto }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-ink);
  background:var(--brand-soft);
  border:1px solid #d3deff;
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.hero-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px rgba(30,75,216,.18);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, var(--accent) 0%, #ef4444 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  font-size:1.125rem; color:var(--muted); margin:18px auto 0; max-width:56ch;
}

/* billing toggle */
.billing-toggle{
  margin-top:30px;
  display:inline-flex; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--line);
  padding:4px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.billing-toggle button{
  appearance:none; font:inherit; font-size:.88rem; font-weight:600;
  background:transparent; color:var(--muted); border:none; cursor:pointer;
  padding:9px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.billing-toggle button.active{ background:var(--ink); color:#fff }
.billing-toggle .save{
  font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid #f2d9a5;
}
.billing-toggle button.active .save{ background:rgba(255,255,255,.15); color:#fff; border-color:transparent }

/* ═══════════════════════════════════════════
   BUTTONS (zdieľané)
════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:10px;
  font:inherit; font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease),
             background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  white-space:nowrap;
}
.btn-lg{ padding:14px 22px; font-size:1rem }
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:hover{
  background:var(--brand); transform:translateY(-2px);
  box-shadow:0 18px 32px -12px rgba(30,75,216,.5);
}
.btn-primary::after{ content:"→"; transition:transform .2s var(--ease) }
.btn-primary:hover::after{ transform:translateX(4px) }

.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line-strong) }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow-md) }

.btn-ghost{
  background:#fff; color:var(--ink); border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-md) }
.btn-ghost::after{ content:"→"; transition:transform .2s var(--ease) }
.btn-ghost:hover::after{ transform:translateX(4px) }

.btn-dark{ background:var(--ink); color:#fff; padding:12px 22px; border-radius:10px }
.btn-dark:hover{ background:var(--brand); transform:translateY(-2px) }

.btn-block{ width:100%; justify-content:center }

/* ═══════════════════════════════════════════
   PLANS
════════════════════════════════════════════ */
.plans{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  align-items:stretch;
}
@media (max-width: 980px){ .plans{ grid-template-columns:1fr; max-width:460px; margin:0 auto } }

.plan{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:32px 28px;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow:hidden;
}
.plan::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--line), var(--line));
  transition:background .3s var(--ease);
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent }
.plan:hover::before{ background:linear-gradient(90deg, var(--brand), var(--accent)) }

.plan-name{
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:6px;
}
.plan-title{
  font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--ink);
  margin-bottom:8px;
}
.plan-desc{
  color:var(--muted); font-size:.92rem; line-height:1.55; margin-bottom:24px; min-height:42px;
}
.plan-price{
  display:flex; align-items:baseline; gap:8px; margin-bottom:4px;
}
.plan-price .amt{
  font-size:3rem; font-weight:800; letter-spacing:-0.03em; color:var(--ink);
  line-height:1;
}
.plan-price .per{ color:var(--muted); font-size:.92rem; font-weight:500 }
.plan-price-note{ color:var(--muted-2); font-size:.82rem; margin-top:8px }

.feature-list{
  list-style:none; padding:0; margin:28px 0;
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.feature-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.92rem; color:var(--ink-2);
}
.feature-list li::before{
  content:""; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:var(--ok-soft); color:var(--ok);
  display:inline-flex; align-items:center; justify-content:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' stroke='%230a8754' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center;
  margin-top:2px;
}

/* Featured */
.plan.featured{
  background:linear-gradient(180deg, #0b1220 0%, #1a2647 100%);
  border-color:transparent;
  color:#fff;
  transform:scale(1.02);
  box-shadow:0 30px 60px -24px rgba(11,18,32,.4);
}
.plan.featured::before{ background:linear-gradient(90deg, var(--brand), var(--accent)) }
.plan.featured:hover{ transform:scale(1.02) translateY(-4px) }
.plan.featured .plan-name{ color:#8fa8ff }
.plan.featured .plan-desc{ color:rgba(255,255,255,.72) }
.plan.featured .plan-price .amt{ color:#fff }
.plan.featured .plan-price .per{ color:rgba(255,255,255,.7) }
.plan.featured .plan-price-note{ color:rgba(255,255,255,.5) }
.plan.featured .feature-list li{ color:rgba(255,255,255,.92) }
.plan.featured .feature-list li::before{
  background-color:rgba(217,119,6,.2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-4.8' stroke='%23fbbf24' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.plan.featured .btn-primary{
  background:#fff; color:var(--ink);
}
.plan.featured .btn-primary:hover{
  background:var(--accent); color:#fff;
  box-shadow:0 18px 32px -12px rgba(217,119,6,.55);
}

.plan-badge{
  position:absolute; top:16px; right:16px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:linear-gradient(135deg, var(--accent), #ef4444);
  color:#fff;
  box-shadow:0 6px 16px -4px rgba(217,119,6,.55);
}

/* ═══════════════════════════════════════════
   COMPARISON TABLE
════════════════════════════════════════════ */
.compare-wrap{
  margin-top:80px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.compare-head{
  padding:26px 28px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.compare-head h3{ font-size:1.15rem }
.compare-head p{ font-size:.9rem }
.compare-scroll{ overflow-x:auto }
table.compare{
  width:100%; border-collapse:collapse; font-size:.93rem;
  min-width:620px;
}
table.compare thead th{
  text-align:center; padding:18px 14px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
table.compare thead th:first-child{ text-align:left; color:var(--ink) }
table.compare thead th.th-featured{
  color:var(--brand); background:var(--brand-soft);
}
table.compare tbody tr{ transition:background .15s var(--ease) }
table.compare tbody tr:hover{ background:var(--bg-soft) }
table.compare tbody td{
  padding:14px; border-bottom:1px solid var(--line);
  text-align:center; color:var(--ink-2);
}
table.compare tbody td:first-child{ text-align:left; font-weight:500 }
table.compare tbody tr:last-child td{ border-bottom:none }
.td-featured{ background:rgba(30,75,216,.035) }
.yes{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--ok-soft); color:var(--ok);
  font-size:.8rem; font-weight:700;
}
.no{ color:var(--muted-2); opacity:.6 }

/* ═══════════════════════════════════════════
   FAQ
════════════════════════════════════════════ */
.soft-bg{
  background:
    radial-gradient(700px 360px at 80% 0%, #eaf0ff 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-mesh) 0%, #ffffff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{ max-width:680px; margin:0 auto 48px; text-align:center }
.section-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
  padding:4px 10px; border-radius:6px; background:var(--brand-soft);
  margin-bottom:14px;
}
.section-head p{ margin-top:14px; font-size:1.05rem; color:var(--muted) }

.faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px }
.faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  overflow:hidden;
}
.faq details:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm) }
.faq details[open]{
  border-color:var(--brand);
  box-shadow:0 6px 20px -10px rgba(30,75,216,.25);
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:18px 22px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.98rem;
  transition:color .15s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--brand) }
.faq summary::after{
  content:""; flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%230b1220' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center;
  transition:transform .3s var(--ease), background-color .15s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(180deg); background-color:var(--brand-soft) }
.faq details[open] summary{ color:var(--brand) }
.faq .answer{
  padding:0 22px 18px;
  color:var(--muted); font-size:.95rem; line-height:1.65;
}
 /* ── LANG SWITCHER ── */
        .lang-switcher { position: relative; }
        .lang-switcher .btn-lang {
            background: transparent; border: 1px solid rgba(255,255,255,.2);
            color: #ced4da; font-size: .8rem; padding: .3rem .6rem;
            border-radius: 6px; cursor: pointer; display: flex; align-items: center;
            gap: .35rem; transition: background .2s, border-color .2s; white-space: nowrap;
        }
        .btn-lang:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
        .btn-lang .lang-flag { font-size: 1rem; line-height: 1; width:22px;}
        .lang-flag svg{ height:18px; }
   .lang-flag { width:22px; }
        .lang-dropdown {
            display: none; position: absolute; right: 0; top: calc(100% + 6px);
            background: #252b3b; border: 1px solid rgba(255,255,255,.12);
            border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
            min-width: 160px; z-index: 2000; overflow: hidden;
        }
        .lang-switcher.open .lang-dropdown { display: block; }
        .lang-dropdown a {
            display: flex; align-items: center; gap: .6rem;
            padding: .2rem .9rem; font-size: .85rem; color: #ced4da;
            text-decoration: none; transition: background .12s;
        }
        .lang-dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }
        .lang-dropdown a.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.06); }
        .lang-dropdown a .lang-flag { font-size: 1rem; }
        .user-name a { color: #fff; text-decoration:none }