:root {
      --bg:           #09061A;
      --surface:      #110C28;
      --surface2:     #1B1340;
      --border:       rgba(255,255,255,0.08);
      --border-p:     rgba(107,53,181,0.30);
      --purple:       #6B35B5;
      --purple-light: #8B55D5;
      --purple-glow:  rgba(107,53,181,0.40);
      --purple-soft:  rgba(107,53,181,0.14);
      --green:        #3DC96A;
      --green-glow:   rgba(61,201,106,0.35);
      --green-soft:   rgba(61,201,106,0.12);
      
      /* ZVÝŠENÝ KONTRAST */
      --text:         #FFFFFF; 
      --muted:        rgba(255,255,255,0.75); /* Pôvodne bolo 0.52 */
      --muted2:       rgba(255,255,255,0.50); /* Pôvodne bolo 0.28 */
      
      --radius:       16px;
      --radius-lg:    24px;
      --radius-pill:  999px;
    }
    
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 17px; /* Zväčšené zo 16px */
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    section-sub { font-size: 1.125rem; }
    .step-card p, .feature-card p, .audience-card p { font-size: 1rem; }
    
    
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    .display { font-family:'Syne',sans-serif; font-weight:800; line-height:1.05; letter-spacing:-0.03em; }
    .heading  { font-family:'Syne',sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.02em; }
    .container { max-width:1120px; margin:0 auto; padding:0 24px; }

    /* ── NAV ── */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:100;
      padding:16px 0;
      transition: background .3s, backdrop-filter .3s, border-color .3s;
    }
    nav.scrolled {
      background: rgba(9,6,26,0.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; }
    .logo {
      display:flex; align-items:center; gap:10px;
      font-family:'Syne',sans-serif; font-weight:800; font-size:1.2rem; letter-spacing:-0.025em;
    }
    .logo-icon {
      width:36px; height:36px; border-radius:9px; overflow:hidden; flex-shrink:0;
    }
    .logo-icon img { width:100%; height:100%; object-fit:cover; }
    .nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
    .nav-links a { font-size:.875rem; font-weight:500; color:var(--muted); transition:color .2s; }
    .nav-links a:hover { color:var(--text); }
    .nav-cta {
      background:var(--green) !important; color:#0a1a0e !important;
      padding:9px 20px; border-radius:var(--radius-pill);
      font-size:.875rem !important; font-weight:700 !important;
      transition:opacity .2s, transform .2s !important;
    }
    .nav-cta:hover { opacity:.88; transform:translateY(-1px); }
    .nav-mobile-cta { display:none; }
    
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
      padding: 5px;
      z-index: 101;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      transition: 0.3s;
    }
    
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    
    /* ── LANGUAGE DROPDOWN ── */
    .language-dropdown {
      position: relative;
      list-style: none;
      margin-left: 10px;
    }

    .dropdown-toggle {
      background: none;
      border: none;
      color: var(--muted);
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      transition: color 0.3s ease;
    }

    .dropdown-toggle:hover {
      color: var(--text);
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px 0;
      min-width: 80px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      z-index: 200;
      list-style: none;
      margin: 0;
    }

    /* Zobrazenie po prejdení myšou na desktope */
    .language-dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-item {
      display: block;
      padding: 8px 20px;
      color: var(--muted) !important;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      text-align: center;
      font-size: 0.95rem;
    }

    .dropdown-item:hover {
      background: var(--purple-soft);
      color: var(--text) !important;
    }

    /* Zvýraznenie aktuálneho jazyka vnútri roletky */
    .dropdown-item.active {
      color: var(--purple-light) !important;
      font-weight: 700;
      pointer-events: none;
    }

    /* ── MOBILE ADJUSTMENTS FOR DROPDOWN ── */
    @media(max-width:900px){
      .language-dropdown {
        margin-left: 0;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .dropdown-menu {
        position: relative;
        top: 0;
        right: auto;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        display: none; /* Skryté na mobile, kým sa neklikne */
        opacity: 1;
        visibility: visible;
        padding-top: 10px;
      }

      /* Třída pridávaná cez JavaScript pre mobil */
      .language-dropdown.active .dropdown-menu {
        display: block;
      }
    }

    /* ── HERO ── */
    .hero {
      min-height:100svh; display:flex; align-items:center;
      padding-top:88px; position:relative; overflow:hidden;
    }
    .hero::before {
      content:''; position:absolute;
      width:800px; height:800px; top:-200px; right:-200px;
      background:radial-gradient(circle, rgba(107,53,181,.22) 0%, transparent 65%);
      border-radius:50%; pointer-events:none;
    }
    .hero::after {
      content:''; position:absolute;
      width:500px; height:500px; bottom:-80px; left:-80px;
      background:radial-gradient(circle, rgba(61,201,106,.10) 0%, transparent 65%);
      border-radius:50%; pointer-events:none;
    }
    /* subtle grain */
    .hero-grain {
      position:absolute; inset:0; opacity:.03; pointer-events:none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px;
    }
    .hero-inner {
      display:grid; grid-template-columns:1fr 1fr; gap:60px;
      align-items:center; width:100%;
    }
    .hero-eyebrow {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--purple-soft); border:1px solid var(--border-p);
      border-radius:var(--radius-pill); padding:6px 14px;
      font-size:.77rem; font-weight:600; color:var(--purple-light);
      letter-spacing:.05em; text-transform:uppercase;
      margin-bottom:22px;
      animation:fadeUp .6s ease both;
    }
    .eyebrow-dot {
      width:6px; height:6px; background:var(--green);
      border-radius:50%; animation:pulse 1.8s ease infinite;
    }
    .hero h1 { font-size:clamp(2.5rem,5.2vw,4rem); margin-bottom:22px; animation:fadeUp .6s .1s ease both; }
    .hero h1 em { font-style:normal; color:var(--green); }
    .hero-sub {
      font-size:1.1rem; color:var(--muted); font-weight:300;
      max-width:440px; margin-bottom:36px; line-height:1.75;
      animation:fadeUp .6s .2s ease both;
    }
    .hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; animation:fadeUp .6s .3s ease both; }

    .btn-primary {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--green); color:#081A0F;
      font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem;
      padding:14px 26px; border-radius:var(--radius-pill);
      transition:transform .2s, box-shadow .2s;
      box-shadow:0 0 28px var(--green-glow);
    }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 44px var(--green-glow); }
    .btn-ghost {
      display:inline-flex; align-items:center; gap:8px;
      color:var(--muted); font-weight:500; font-size:.88rem;
      border:1px solid var(--border); padding:13px 20px; border-radius:var(--radius-pill);
      transition:color .2s, border-color .2s;
    }
    .btn-ghost:hover { color:var(--text); border-color:rgba(255,255,255,.2); }

    .hero-trust {
      margin-top:32px; display:flex; align-items:center; gap:10px;
      font-size:.82rem; color:var(--muted2);
      animation:fadeUp .6s .4s ease both;
    }

    /* phone */
    .hero-visual { display:flex; justify-content:center; align-items:center; position:relative; animation:fadeUp .8s .2s ease both; }
    .phone-wrap { position:relative; animation:floatPhone 4s ease-in-out infinite; }
    .phone-glow {
      position:absolute; inset:-40px;
      background:radial-gradient(ellipse at center, rgba(107,53,181,.28) 0%, transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .phone-frame {
      width:272px; height:548px;
      background:var(--surface); border-radius:42px;
      border:2px solid rgba(255,255,255,.10);
      position:relative; overflow:hidden;
      box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 0 6px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .phone-notch {
      position:absolute; top:12px; left:50%; transform:translateX(-50%);
      width:76px; height:22px; background:var(--bg); border-radius:999px; z-index:2;
    }
    .phone-screen { position:absolute; inset:0; background:var(--surface2); }
    .phone-img-placeholder {
      width:100%; height:100%; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:12px;
      color:var(--muted2); font-size:.77rem; text-align:center; padding:10px;
    }
    .placeholder-icon {
      width:56px; height:56px; background:var(--purple-soft); border-radius:14px;
      display:flex; align-items:center; justify-content:center; font-size:1.6rem;
      border:1px solid var(--border-p);
    }

    /* ── SECTIONS ── */
    section { padding:96px 0; position:relative; }
    .section-label {
      font-size:.73rem; font-weight:700; text-transform:uppercase;
      letter-spacing:.1em; color:var(--purple-light); margin-bottom:12px;
    }
    .section-title { font-size:clamp(1.75rem,3.3vw,2.7rem); margin-bottom:14px; }
    .section-sub { color:var(--muted); font-size:1rem; font-weight:300; max-width:560px; line-height:1.75; }
    .section-header { margin-bottom:60px; }
    .section-header.centered { text-align:center; display:flex; flex-direction:column; align-items:center; }
    .section-header.centered .section-sub { text-align:center; }
    .divider {
      width:100%; height:1px;
      background:linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
    }

    /* ── HOW IT WORKS ── */
    .steps-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:2px; background:var(--border); border-radius:var(--radius-lg);
      overflow:hidden; border:1px solid var(--border);
    }
    .step-card {
      background:var(--surface); padding:40px 32px;
      transition:background .25s;
    }
    .step-card:hover { background:var(--surface2); }
    .step-number {
      font-family:'Syne',sans-serif; font-size:3.2rem; font-weight:800;
      color:rgba(107,53,181,.18); line-height:1; margin-bottom:22px;
      transition:color .25s;
    }
    .step-card:hover .step-number { color:rgba(107,53,181,.38); }
    .step-icon {
      width:46px; height:46px; background:var(--purple-soft); border-radius:12px;
      display:flex; align-items:center; justify-content:center; font-size:1.35rem;
      margin-bottom:16px; border:1px solid var(--border-p);
    }
    .step-card h3 { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:10px; }
    .step-card p { color:var(--muted); font-size:.875rem; line-height:1.68; }

    /* ── FEATURES ── */
    .features-section { background:var(--surface); }
    .features-section::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse at 80% 50%, rgba(107,53,181,.07) 0%, transparent 60%);
      pointer-events:none;
    }
    .features-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .feature-card {
      background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
      padding:34px; transition:border-color .25s, transform .25s; position:relative; overflow:hidden;
    }
    .feature-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg, transparent, var(--purple), transparent);
      opacity:0; transition:opacity .3s;
    }
    .feature-card:hover { border-color:var(--border-p); transform:translateY(-3px); }
    .feature-card:hover::before { opacity:1; }
    .feature-card.featured {
      grid-column:span 2; display:grid;
      grid-template-columns:1fr 1fr; gap:40px; align-items:center;
    }
    .feature-icon {
      width:50px; height:50px; background:var(--purple-soft); border-radius:13px;
      display:flex; align-items:center; justify-content:center;
      font-size:1.45rem; margin-bottom:18px; border:1px solid var(--border-p);
    }
    .feature-card h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:10px; }
    .feature-card p { color:var(--muted); font-size:.875rem; line-height:1.68; }
    .feature-visual {
      border-radius:var(--radius); background:var(--surface2);
      aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
      color:var(--muted2); font-size:.78rem; text-align:center;
      flex-direction:column; gap:10px; border:1px dashed rgba(107,53,181,.25);
    }
    
    .feature-video {
      width: 365%;
      filter: saturate(1.1) brightness(1.05);
      object-fit: cover;
    }
    
    .feature-video {
      width: 100%;
    }
    
    .check-list { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:6px; }
    .check-list li {
      display:flex; align-items:center; gap:8px;
      font-size:.86rem; color:var(--muted);
    }
    .check-list .ck { color:var(--green); font-weight:700; font-size:.9rem; }

    /* ── PWA STRIP ── */
    .pwa-strip { padding:56px 0; }
    .pwa-inner {
      background:linear-gradient(135deg, var(--surface) 0%, rgba(107,53,181,.10) 100%);
      border:1px solid var(--border-p); border-radius:var(--radius-lg);
      padding:48px 52px; display:grid; grid-template-columns:1fr auto;
      gap:40px; align-items:center; position:relative; overflow:hidden;
    }
    .pwa-inner::after {
      content:''; position:absolute; top:-60px; right:-60px;
      width:260px; height:260px;
      background:radial-gradient(circle, rgba(107,53,181,.15) 0%, transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .pwa-badges { display:flex; gap:12px; flex-wrap:wrap; }
    .pwa-badge {
      display:flex; align-items:center; gap:7px;
      background:var(--bg); border:1px solid var(--border);
      border-radius:var(--radius-pill); padding:7px 14px;
      font-size:.8rem; font-weight:500; color:var(--muted);
    }
    .pwa-text h2 { font-size:1.55rem; margin-bottom:10px; }
    .pwa-text p { color:var(--muted); font-size:.92rem; max-width:460px; line-height:1.75; }
    
    .pwa-inner {
  display: flex;
  flex-direction: column; /* Zmena na stĺpec */
  align-items: center;    /* Zarovnanie na stred */
  text-align: center;     /* Text na stred */
  gap: 30px;              /* Medzera medzi textom a odznakmi */
  padding: 40px 20px;
}

.pwa-text {
  max-width: 700px;       /* Obmedzenie šírky textu pre lepšiu čitateľnosť */
}

.pwa-badges {
  display: flex;
  flex-wrap: wrap;        /* Odznaky sa zalomia na viac riadkov */
  justify-content: center; /* Zarovnanie odznakov na stred */
  gap: 12px;              /* Medzera medzi odznakmi */
}

/* Ak chcete zachovať horizontálne zobrazenie na veľkých desktope, použite media query: */
@media (min-width: 1024px) {
  .pwa-inner {
    flex-direction: row;  /* Na desktope opäť vedľa seba */
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .pwa-text {
    flex: 1;              /* Text získa viac priestoru */
    margin-right: 40px;
  }
  
  .pwa-badges {
    justify-content: flex-start; /* Odznaky budú zarovnané doľava */
    max-width: 300px;     /* Odznaky sa môžu naskladať pod seba v rámci bloku */
  }
}

    /* ── AUDIENCE ── */
    .audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .audience-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:30px 26px;
      transition:border-color .25s, transform .25s;
    }
    .audience-card:hover { border-color:rgba(61,201,106,.22); transform:translateY(-3px); }
    .audience-emoji { font-size:2rem; margin-bottom:14px; display:block; }
    .audience-card h3 { font-family:'Syne',sans-serif; font-size:1.02rem; font-weight:700; margin-bottom:8px; }
    .audience-card p { color:var(--muted); font-size:.86rem; line-height:1.68; }

    /* ── FINAL CTA ── */
    .final-cta { padding:120px 0; text-align:center; position:relative; overflow:hidden; }
    .final-cta::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse at 50% 60%, rgba(107,53,181,.18) 0%, transparent 60%);
      pointer-events:none;
    }
    .final-cta h2 { font-size:clamp(2rem,4.2vw,3.2rem); margin-bottom:18px; max-width:680px; margin-left:auto; margin-right:auto; }
    .final-cta h2 em { font-style:normal; color:var(--green); }
    .final-cta p { color:var(--muted); font-size:1rem; max-width:460px; margin:0 auto 36px; font-weight:300; }

    /* ── FOOTER ── */
    footer { padding:36px 0; border-top:1px solid var(--border); }
    .footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
    .footer-links { display:flex; gap:22px; list-style:none; }
    .footer-links a { font-size:.8rem; color:var(--muted2); transition:color .2s; }
    .footer-links a:hover { color:var(--muted); }
    .footer-copy { font-size:.8rem; color:var(--muted2); }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    @keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }
    @keyframes floatPhone { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-delay-1 { transition-delay:.1s; }
    .reveal-delay-2 { transition-delay:.2s; }
    .reveal-delay-3 { transition-delay:.3s; }

    /* ── RESPONSIVE ── */
    @media(max-width:900px){
      .hero-inner{grid-template-columns:1fr;text-align:center}
      .hero-sub,.hero-trust{margin-left:auto;margin-right:auto}
      .hero-actions{justify-content:center}
      .hero-eyebrow{margin-left:auto;margin-right:auto}
      /* .hero-visual{display:none} */
      .nav-links{display:none}
      .nav-mobile-cta{display:inline-flex}
      .steps-grid{grid-template-columns:1fr}
      .features-grid{grid-template-columns:1fr}
      .feature-card.featured{grid-column:span 1;grid-template-columns:1fr}
      .audience-grid{grid-template-columns:1fr}
      .pwa-inner{grid-template-columns:1fr;padding:32px 26px}
      .footer-inner{flex-direction:column;align-items:flex-start}
      
      .hamburger { display: flex; } 
      
      .nav-links {
        display: flex !important;
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 260px;
        background: var(--surface2);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 30px rgba(0,0,0,0.6);
        z-index: 100;
        margin: 0;
      }
      .nav-links.active {
        right: 0;
      }

      .nav-mobile-cta { display: none !important; }
      .nav-cta {
        padding: 7px 14px !important;
        font-size: .75rem !important;
      }
      
      .feature-video {
        width: 95%;
      }
      
    }
    @media(max-width:600px){
      section{padding:64px 0}
      .section-header{margin-bottom:36px}
      .step-card{padding:26px 22px}
      .feature-card{padding:26px 22px}
    }
    
    /* lightbox */
    .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 9999;
      }

      /* Zobrazenie lightboxu, keď sa naň odkáže (cez #lightbox) */
      .lightbox:target {
        visibility: visible;
        opacity: 1;
      }

      /* Štýl obrázku vo vnútri */
      .lightbox img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 8px;
      }

      /* Zatváracie tlačidlo */
      .close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 40px;
        text-decoration: none;
      }