:root{
  --bg:#071f1f;
  --panel:#0f2e2e;
  --ink:#e7f6f5;
  --muted:#b9d8d6;
  --accent:#2dc2b2;
  --accent-2:#ffc857;
  --ok:#3ddc97;
  --warn:#ff8c42;
  --danger:#ff5964;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 10% -10%, #103a3a 0%, var(--bg) 60%);
  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:Montserrat, system-ui, sans-serif; letter-spacing:.3px}
h1{font-size:clamp(32px, 4vw, 56px); line-height:1.1; margin:0 0 .3em}
h2{font-size:clamp(24px, 3vw, 40px); margin:1.2em 0 .4em}
h3{font-size:clamp(18px, 2.2vw, 26px); margin:1em 0 .4em}
p{margin:.4em 0 1em}
.small{font-size:.92rem; color:var(--muted)}
a{color:var(--accent)}
a:hover{opacity:.9}
.container{max-width:1100px; margin:0 auto; padding:28px 20px}
.grid{
  display:grid; gap:20px;
}
@media(min-width:880px){ .grid-2{grid-template-columns:1.1fr .9fr} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:saturate(120%) blur(4px);
  transform:translateY(6px);
  opacity:0;
  animation:rise .7s ease forwards;
}
@keyframes rise{ to{ transform:translateY(0); opacity:1 } }
.hero{
  padding-top:20px; padding-bottom:20px;
}
.hero-slab{
  position:relative;
  border-radius:var(--radius);
  padding:34px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  overflow:hidden;
}
.hero .kpis{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px }
.kpi{background:rgba(0,0,0,.25); padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.btn{
  display:inline-block; padding:12px 18px;
  border-radius:14px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, var(--accent), #1ea393);
  color:#052424; font-weight:700; text-decoration:none;
  transition:transform .2s ease, filter .2s ease;
}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.18)}
.btn:hover{ transform:translateY(-1px); filter:saturate(110%) }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.logo svg{width:40px; height:18px}
.logo-crown{ fill:var(--accent-2); stroke:var(--accent-2); stroke-width:1 }
.brand-text{ font-family:Montserrat, sans-serif; font-weight:700; letter-spacing:.5px }
.menu{ display:flex; gap:10px; list-style:none; margin:0; padding:0 }
.menu a{ text-decoration:none; padding:10px 12px; border-radius:10px }
.menu a:hover{ background:rgba(255,255,255,.07) }
.nav-toggle{ display:none; }
@media(max-width:760px){
  .menu{ display:none; flex-direction:column; width:100%; background:#0a2626; position:absolute; top:64px; left:0; padding:10px 16px; border-top:1px solid rgba(255,255,255,.08) }
  .nav-toggle{ display:inline-block; background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2); padding:8px 12px; border-radius:10px }
  .menu.open{ display:flex }
}
.feature{
  display:flex; gap:16px; align-items:flex-start;
}
.feature .badge{ font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06) }
.check{ border-left:4px solid var(--ok); padding-left:12px }
.callout{
  border-left:3px solid var(--accent-2); padding:12px 16px; border-radius:10px; background:rgba(255,255,255,.06)
}
.footer{
  margin-top:36px; border-top:1px solid rgba(255,255,255,.08); padding:24px 0;
}
.footer .grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) }
.copy{ margin-top:12px; text-align:center; color:var(--muted) }
.list-plain{ list-style:none; padding:0; margin:0 }
.list-plain li{ margin:.4em 0 }
.badge{font-size:.84rem; color:#042; background:var(--ok); padding:3px 8px; border-radius:999px}
.table{ width:100%; border-collapse:collapse; font-size:.98rem }
.table th,.table td{ padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.08) }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.section{ margin:28px 0 }
.card.reveal{ opacity:0; transform:translateY(12px) }
.revealed{ opacity:1!important; transform:none!important; transition:all .6s ease }
.cookie-banner{
  position:fixed; inset:auto 10px 10px 10px; border-radius:14px; background:rgba(10,30,30,.95); color:var(--ink);
  border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow); padding:14px; z-index:9999; display:none;
}
.cookie-inner{ display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap }
.cookie-actions{ display:flex; gap:8px }
kbd{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:2px 6px; border-radius:6px}
blockquote{ margin:0; padding:10px 14px; border-left:3px solid rgba(255,255,255,.25); background:rgba(255,255,255,.05); border-radius:8px }
.invalid{ outline:2px solid #ff5964; outline-offset: 1px }