/* Krngle — minimal, strict, responsive design system */
:root{
  --bg:#0b1020;           /* almost-black blue */
  --card:#0e1530;
  --muted:#1b2240;
  --edge:#101633;
  --text:#e7ecf5;
  --sub:#a9b4c7;
  --accent:#10b981;       /* emerald */
  --accent-2:#34d399;
  --warning:#f59e0b;
  --error:#ef4444;
  --ok:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 20% -10%, #11193a 0%, transparent 60%) , var(--bg);
  color:var(--text); font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 980px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.nav{position:sticky;top:0;background:rgba(11,16,32,.7);backdrop-filter: blur(10px);border-bottom:1px solid var(--edge);z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:42px;width:auto}
.brand span{font-weight:800;letter-spacing:.5px}
.menu a{margin-left:18px;color:#c8d1e6}
.menu a:hover{color:#fff}

.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--accent);color:var(--text);
     padding:12px 18px;border-radius:14px;background:linear-gradient(180deg, rgba(16,185,129,.15), rgba(16,185,129,.05)); transition:.25s transform,.25s filter}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05); text-decoration:none}
.btn-plain{border-color:#334155;background:transparent}

.hero{position:relative;overflow:hidden}
.hero .container{padding:80px 24px 48px}
.kicker{color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.h1{font-size: clamp(30px, 6vw, 56px); line-height:1.1; font-weight:900; margin:10px 0 8px}
.punch{font-size: clamp(15px, 2.4vw, 20px); color:var(--sub); max-width:740px}

.card{background:linear-gradient(180deg,var(--card),#0b122a);border:1px solid var(--edge);border-radius:18px; padding:20px; box-shadow:var(--shadow)}
.card:hover{border-color:#1f2a4d}
.icon{font-size:22px;opacity:.9}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.badge{border:1px dashed #2a345f;color:#cbd5e1;padding:6px 10px;border-radius:999px;font-size:12px}

.section{padding:56px 0}
.section.dark{background:linear-gradient(180deg,#0b122a, #0b1020)}
.section h2{font-size: clamp(22px, 3.2vw, 34px); margin:0 0 10px; line-height:1.2}
.section p.lead{color:var(--sub); margin:0 0 14px; max-width:800px}

.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:12px;margin:8px 0}
.list .check{color:var(--accent)}

.footer{border-top:1px solid var(--edge);padding:24px 0;color:#b7c0d6}
.footer a{color:#b7c0d6}
.footer a:hover{color:#fff}

.legal{max-width:900px;margin:0 auto;padding:24px}
.legal h1{font-size:28px}
.legal h2{font-size:20px;margin-top:26px}

.cookie{position:fixed;left:20px;right:20px;bottom:20px;background:#0e1530;border:1px solid #223065;border-radius:18px;padding:18px;display:none;z-index:99;box-shadow: var(--shadow)}
.cookie.show{display:block}
.cookie p{margin:0 0 10px;color:#cdd6ea}
.cookie .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie button{cursor:pointer}
.cookie .btn{border-color:#475569;background:#132050}

.notice{font-size:12px;color:#9fb0cf;margin-top:8px}

/* animations */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.floaty{animation:floaty 6s ease-in-out infinite}

/* simple reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform:none}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #243055;padding:10px;text-align:left;font-size:14px}
.table th{color:#9fb0cf;font-weight:600}

.small{font-size:13px;color:#9fb0cf}
hr{border:none;border-top:1px solid var(--edge);margin:20px 0}

/* forms */
input, textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a345f;background:#0f1734;color:#e5e7eb}
label{display:block;margin:10px 0 6px;color:#cbd5e1}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){ form .row{grid-template-columns:1fr}}
button[type=submit]{background:linear-gradient(180deg, rgba(16,185,129,.25), rgba(16,185,129,.1));border:1px solid var(--accent);padding:12px 16px;border-radius:12px;color:#fff;cursor:pointer}
button[type=submit]:hover{filter:brightness(1.05)}