:root{
        --bg:#0b0b0f;           /* základní pozadí */
        --fg:#f8f8fa;           /* primární text */
        --muted:#b8b8c2;        /* sekundární text */
        --gold1:#e7c773;        /* zlatá (světlejší) */
        --gold2:#b78a2a;        /* zlatá (tmavší) */
        --accent:#7c3aed;       /* jemná fialová pro akcenty */
        --card:#14141b;         /* karty/sekce */
        --shadow: 0 20px 60px rgba(0,0,0,.45);
      }
      *{box-sizing:border-box}
      html,body{height:100%}
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--fg);
    background: radial-gradient(1200px 800px at 70% -10%, rgba(124, 58, 237, .25), transparent 60%), 
                radial-gradient(800px 600px at 10% -20%, rgba(231, 199, 115, .25), transparent 60%), 
                var(--bg);
    background-attachment: fixed; /* fix pozadí */
    line-height: 1.5;
}
      a{color:inherit; text-decoration:none}
      .container{max-width:1120px; margin:0 auto; padding:24px}
      .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

      /* ======= HERO LERIA2 ======= */
      .hero{
        position:relative;
        overflow:hidden;
        border-radius:24px;
        background:
          linear-gradient(135deg, rgba(231,199,115,.14), rgba(231,199,115,0) 40%),
          linear-gradient(180deg, rgba(183,138,42,.18), rgba(183,138,42,0) 60%),
          radial-gradient(1000px 400px at 50% -10%, rgba(124,58,237,.35), transparent 55%),
          var(--card);
        box-shadow: var(--shadow);
        padding: clamp(28px, 4vw, 56px);
        margin-top: 28px;
      }
      .hero .topbar{
        display:flex; align-items:center; justify-content:space-between; gap:16px;
      }
.logo-slot {
  width:200px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.4px;
  background-image: url("../images/landing/logo_leria2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logo-slot2 {
  width:200px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.4px;
  background-image: url("../images/landing/logo_leria1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

      .ribbon{
        display:inline-flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.3px;
        padding:10px 14px; border-radius:999px;
        background:linear-gradient(90deg, rgba(231,199,115,.18), rgba(231,199,115,.04));
        border:1px solid rgba(231,199,115,.35);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      }
      .hero h1{font-size:clamp(32px, 5vw, 56px); line-height:1.05; margin:18px 0 10px}
      .sub{color:var(--muted); font-size:clamp(16px, 1.8vw, 20px)}

      .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
      .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
        padding:14px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px; border:0; cursor:pointer}
      .btn-primary{
        background:linear-gradient(180deg, var(--gold1), var(--gold2));
        color:#191514;
        box-shadow: 0 10px 24px rgba(183,138,42,.35), inset 0 1px 0 rgba(255,255,255,.5);
      }
      .btn-primary:hover{transform:translateY(-1px)}
      .btn-ghost{background:rgba(255,255,255,.06); color:var(--fg); border:1px solid rgba(255,255,255,.12)}
      .btn-ghost:hover{background:rgba(255,255,255,.1)}

      .grid{
        display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 3vw, 28px); margin-top:28px
      }
      @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

      .card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:18px}
      .features{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
      @media (max-width:700px){ .features{grid-template-columns: 1fr} }
      .feature{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.06)}
      .feature svg{flex:0 0 22px}

      .promo{margin-top:10px; padding:14px; border-radius:14px; border:1px dashed rgba(231,199,115,.45); background:rgba(231,199,115,.08)}
      .countdown{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap}
      .cd-box{min-width:84px; text-align:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px}
      .cd-box strong{font-size:28px; display:block}
      .cd-box span{color:var(--muted); font-size:12px}

      .divider{height:1px; margin:48px auto; width:100%; max-width:1120px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent)}

      /* ======= LERIA1 (de-emphasized) ======= */
      .legacy{
        margin: 18px auto 60px;
        max-width:1024px;
        filter: grayscale(100%);
        opacity:.6;
        transition: filter .2s ease, opacity .2s ease;
      }
      .legacy:hover{ filter: grayscale(60%); opacity:.78; }
      .legacy .wrap{background: #0f0f13; border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:22px}
      .legacy .top{display:flex; align-items:center; justify-content:space-between; gap:12px}
      .legacy .logo-slot{ border-color: rgba(255,255,255,.2); width:160px; height:50px; }
      .legacy h2{margin:12px 0 4px; font-size:28px}
      .legacy p{color:var(--muted)}
      .legacy .btn{padding:10px 14px; border-radius:12px}

      /* small footer */
      footer{color:var(--muted); text-align:center; font-size:13px; padding:40px 0 24px}
      footer a{color:var(--fg); opacity:.9}