
:root{
  --bg:#071026;
  --card:#081428;
  --muted:#9fb8d9;
  --accent1:#0ea5a4;
  --accent2:#60a5fa;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:
  radial-gradient(1200px 400px at 10% 10%, rgba(96,165,250,0.08), transparent 8%),
  radial-gradient(800px 300px at 90% 90%, rgba(14,165,164,0.05), transparent 8%),
  var(--bg); color:#dbeafe; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:0 18px;}
.container{max-width:1100px;margin:28px auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img, .brand svg{height:64;width:auto;display:block}
nav.nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-weight:600;opacity:0.95}
nav.nav a:hover{color:var(--accent2)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start;margin-top:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px;padding:20px;box-shadow: 0 6px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px)}
.lead{color:var(--muted);line-height:1.5}
.metrics{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.metric{background:var(--glass);padding:10px 14px;border-radius:10px;min-width:110px;text-align:center}
.metric .num{font-weight:800;font-size:18px;color:var(--accent1)}

/* Features grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.feature{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);transition:transform .28s ease, box-shadow .28s ease}
.feature:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(2,6,23,0.6)}

/* Contact card */
.contact-box{position:sticky;top:22px;height:max-content}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px;align-items:center}
.kv .label{color:var(--muted);font-size:13px}

/* Footer */
.footer{display:flex;justify-content:space-between;align-items:center;padding:16px 0;color:var(--muted)}

/* Buttons */
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:10px 14px;border-radius:10px;color:#021426;text-weight:700;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(10,150,200,0.08);transition:transform .18s ease}
.btn:active{transform:translateY(1px)}

/* Animated background blobs */
.blob{position:absolute;filter:blur(36px);opacity:0.12;pointer-events:none}
.blob.b1{width:340px;height:340px;left:-60px;top:-120px;background:linear-gradient(45deg,var(--accent1),var(--accent2));border-radius:50%;animation:float1 8s ease-in-out infinite}
.blob.b2{width:260px;height:260px;right:-40px;bottom:-60px;background:linear-gradient(45deg,var(--accent2),var(--accent1));border-radius:50%;animation:float2 9s ease-in-out infinite}
@keyframes float1{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(6deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes float2{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-6deg)}100%{transform:translateY(0) rotate(0)}}

/* Cookie banner */
.cookie-banner{position:fixed;left:18px;right:18px;bottom:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 40px rgba(2,6,23,0.6)}
.cookie-banner p{margin:0;color:var(--muted)}
.cookie-banner .accept{margin-left:auto}

/* Responsive */
@media (max-width:900px){.hero{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}nav.nav{display:none}}
@media (max-width:520px){.features{grid-template-columns:1fr}.brand h1{font-size:18px}}
