:root{
  --bg:#0b132b;
  --bg-elev:#111a3a;
  --text:#e6ecff;
  --muted:#a8b3d1;
  --primary:#2dd4bf;
  --primary-2:#22c1a5;
  --accent:#7c9cff;
  --card:#0f1a3f;
  --border:#1b275a;
  --base-font-size:18px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Arial,Helvetica,sans-serif;
  font-size:var(--base-font-size);
  line-height:1.7;
  background:linear-gradient(180deg, var(--bg) 0%, #0a0f24 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

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

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(9,14,35,.65); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.brand .logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700}
.brand img{border-radius:50%}
.nav{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.nav a{padding:8px 12px; border-radius:12px; color:#dce6ff}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.active{background:linear-gradient(135deg, var(--primary), var(--accent)); color:#061123}
.actions button{
  background:var(--bg-elev); color:#dce6ff; border:1px solid var(--border);
  padding:8px 12px; border-radius:12px; cursor:pointer
}
.actions button:hover{background:#17214a}

.hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:58vh; background-size:cover; background-position:center;
  border-bottom:1px solid var(--border)
}
.hero.small{min-height:38vh}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,14,40,.55), rgba(8,14,40,.85))}
.hero-content{position:relative; z-index:1; text-align:center; max-width:920px; padding:40px 16px}
.hero-content h1{font-size:clamp(28px,5vw,56px); margin:0 0 8px; letter-spacing:.2px}
.hero-content p{color:var(--muted); margin:0 0 14px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-elev); color:#dce6ff; cursor:pointer; transition:.2s transform;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--accent)); color:#04101b; border:0}
.btn.ghost{background:transparent; border:1px solid var(--border)}

.grid.feature{
  display:grid; gap:18px; padding:32px 18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1200px; margin:0 auto;
}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card img{width:100%; height:auto; display:block}
.card-body{padding:18px}
.card-body h2{margin:0 0 8px}
.card-body p{margin:0 0 14px; color:var(--muted)}

.split{display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:center; max-width:1200px; margin:40px auto; padding:0 18px}
.split-text h2{margin:0 0 12px}
.icon-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px}
.icon-item{display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px dashed var(--border); border-radius:12px; color:#d0dbff}
.split-media img{width:100%; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow)}

.posts{max-width:1100px; margin:20px auto; padding:0 18px}
.post-card{display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.post-card img{width:100%; height:100%; object-fit:cover}
.post-card.large .post-card-body{padding:22px}
.post-card-body h2{margin:0 0 10px}
.post-card-body p{color:var(--muted)}

.team{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; max-width:1200px; margin:24px auto; padding:0 18px}
.team-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow)}
.team-card img{width:100%; height:auto; border-radius:12px; border:1px solid var(--border)}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1100px; margin:24px auto; padding:0 18px}
.contact-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.contact-list li{display:flex; gap:10px; align-items:center; color:#d0dcff}
.contact-form .form-row{display:grid; gap:8px; margin-bottom:12px}
.contact-form input, .contact-form textarea{
  width:100%; background:#0c173a; color:#e6ecff; border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; outline:none
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,156,255,.2)}

.post{max-width:900px; margin:0 auto; padding:24px 18px}
.post-content{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.post-content h2{margin-top:0}

.curated{max-width:1100px; margin:22px auto 40px; padding:0 18px}
.curated h2{margin-bottom:8px}
.curated ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.curated li a{display:block; padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev)}
.curated li a:hover{background:#1a244e}

.site-footer{border-top:1px solid var(--border); background:#070d25; padding:22px 18px}
.footer-cols{display:grid; grid-template-columns:2fr 2fr 2fr; max-width:1200px; margin:0 auto; gap:18px}
.footer-cols h4{margin:0 0 8px}
.footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.legal-links a{color:#cfe1ff}
.socials{display:flex; gap:10px; margin-top:8px}
.socials a{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:var(--bg-elev)}
.socials a:hover{border-color:var(--accent)}
address{font-style:normal; color:#cfe1ff}
copyright, .copyright{opacity:.7; text-align:center; margin-top:16px; color:#a8b3d1}

.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:14px; display:none
}
.cookie-content{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.cookie-actions{display:flex; gap:10px}
.cookie-close{position:absolute; top:10px; right:10px; background:transparent; color:#cfe1ff; border:0; font-size:22px; cursor:pointer}

.cookie-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:70
}
.cookie-modal-card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; width:min(560px, 92%); box-shadow:var(--shadow)}
.toggle{display:flex; gap:10px; align-items:center; margin:8px 0}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}

@media (max-width: 900px){
  .post-card{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cookie-content{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}