:root{
  --navy:#0b2a4a;
  --navy2:#0e355e;

  /* mint jen jako akcent */
  --mint:#7de2c5;
  --mintSoft: rgba(125,226,197,.16);

  /* pozadí a plochy */
  --bg:#f3f6fb;         /* hlavní pozadí místo bílé */
  --card:#ffffff;       /* karty */
  --card2:#f8fafc;      /* jemné panely */
  --border:#e3e9f3;

  --text:#0f172a;
  --muted:#55657a;

  --shadow: 0 12px 30px rgba(11,42,74,.10);
  --shadow2: 0 8px 18px rgba(11,42,74,.08);

  --r:16px;
  --r2:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 12% 6%, rgba(125,226,197,.18), transparent 60%),
    radial-gradient(900px 420px at 88% 0%, rgba(11,42,74,.08), transparent 55%),
    var(--bg);
}

a{color:var(--navy);text-decoration:none;font-weight:800}
a:hover{color:var(--navy2)}

.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2);}
.btn.primary{
  background: linear-gradient(135deg, var(--navy), rgba(11,42,74,.78));
  border-color: transparent;
  color:#fff;
}
.btn.ghost{background:transparent}

/* Topbar */
.top{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(243,246,251,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(227,233,243,.9);
}
.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.brand{font-weight:1000;letter-spacing:.02em;color:var(--navy)}
.nav{display:flex;gap:8px}
.nav a{
  padding:10px 12px;
  border-radius:12px;
  color:var(--navy);
  font-weight:900;
  transition: background .12s ease;
}
.nav a:hover{background: rgba(11,42,74,.06);}

.top-cta{display:flex;align-items:center;gap:10px}
.mini{
  display:flex;
  flex-direction:column;
  gap:2px;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:14px;
  background: rgba(248,250,252,.85);
  box-shadow: 0 6px 16px rgba(11,42,74,.05);
}
.burger{display:none}
.drawer{display:none;padding:10px 0 14px}
.drawer a{
  display:block;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(248,250,252,.9);
  margin:6px 0;
}

/* Hero */
.hero{
  padding:44px 0 36px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(800px 360px at 18% 10%, rgba(125,226,197,.22), transparent 60%),
    radial-gradient(800px 360px at 80% 0%, rgba(11,42,74,.10), transparent 60%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.hero-card{
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow);
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 10px}
.kicker{
  color:var(--navy);
  font-weight:900;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
}
.bullets{margin:10px 0 0;padding-left:18px;color:var(--muted);font-weight:650}

/* Sections */
.section{padding:56px 0}
.section.alt{
  background: rgba(248,250,252,.9);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Typography */
h1{margin:10px 0;color:var(--navy);line-height:1.15}
h2{margin:0 0 12px;color:var(--navy);line-height:1.2}
h3{margin:0 0 8px;color:var(--navy);line-height:1.2}
.muted{color:var(--muted)}

/* Cards & grids */
.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius:22px;
  padding:16px;
  box-shadow: 0 8px 20px rgba(11,42,74,.06);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* Quick chips */
.quick{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.chip{
  border:1px solid rgba(125,226,197,.55);
  background: rgba(125,226,197,.20);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  color:#062034;
}
.note{margin-top:10px;color:var(--muted);font-weight:650}

/* Accordion */
.accordion{margin-top:10px;display:grid;gap:8px}
.acc-btn{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background: var(--card2);
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}
.acc-body{
  display:none;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: var(--card);
  color:var(--muted);
  font-weight:650;
}

/* Row / switch / pricing */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.switch{
  display:flex;
  gap:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  padding:6px;
  border-radius:16px;
  box-shadow: 0 6px 16px rgba(11,42,74,.05);
}
.sw{
  border:0;
  background:transparent;
  border-radius:12px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  color:var(--navy);
}
.sw.active{
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: 0 10px 20px rgba(11,42,74,.08);
}
.price{
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius:22px;
  padding:14px;
  box-shadow: 0 8px 20px rgba(11,42,74,.06);
}
.price .big{font-weight:1000;margin:8px 0;color:#062034}
.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(125,226,197,.18);
  border:1px solid rgba(125,226,197,.45);
  font-weight:900;
  color:#062034;
}

/* Form */
label{display:grid;gap:6px;margin:10px 0;font-weight:900;color:var(--navy)}
input,select,textarea{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  background: rgba(255,255,255,.95);
}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-weight:650}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:18px 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footlinks{display:flex;gap:10px;flex-wrap:wrap}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;
  background: rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:100;
}
.modal{
  width:min(920px,100%);
  background: var(--card);
  border-radius:22px;
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.20);
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:14px;
  background: linear-gradient(135deg, var(--navy), rgba(11,42,74,.72));
  color:#fff;
}
.modal-title{font-weight:1000;font-size:1.15rem}
.modal-sub{opacity:.9}
.modal-body{padding:14px}
.media{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph{
  height:140px;
  border-radius:18px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(125,226,197,.30), rgba(11,42,74,.06));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  color:var(--navy);
}

/* Cookie */
.cookie{
  position:fixed;
  left:14px;right:14px;bottom:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-radius:22px;
  display:none;
  z-index:120;
  box-shadow: var(--shadow);
}
.cookie-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Responsive */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mini{display:none}
  .hero-grid,.grid2,.grid3,.grid4,.media{grid-template-columns:1fr}
}