:root{
  --bg:#0f172a;
  --card:#111827;
  --muted:#94a3b8;
  --primary:#22c55e;
  --primary-700:#16a34a;
  --white:#ffffff;
  --border:#1f2937;
  --gradient: radial-gradient(1200px 600px at 10% -10%, #22c55e30, transparent),
              radial-gradient(900px 500px at 100% 0%, #38bdf830, transparent);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--white); background:var(--bg);
  background-image:var(--gradient);
}
a{color:#9ae6b4; text-decoration:none}
a:hover{color:#d1fae5}
img{display:block; max-width:100%; border-radius:12px}
.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6));
  border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:12px 20px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--white)}
.brand-logo{border-radius:8px; border:1px solid var(--border)}
.navbar{display:flex; gap:16px; align-items:center}
.navbar a, .dropbtn{
  color:var(--white); padding:10px 14px; border-radius:10px; background:transparent; border:1px solid transparent; cursor:pointer
}
.navbar a.active, .dropbtn.active{border-color:#224; background:#0b1220}
.navbar a:hover, .dropbtn:hover{background:#0b1220}
.dropdown{position:relative}
.dropdown-content{
  display:none; position:absolute; background:#0b1220; border:1px solid var(--border);
  border-radius:12px; min-width:280px; padding:8px; box-shadow:var(--shadow)
}
.dropdown:hover .dropdown-content{display:block}
.dropdown-content a{display:block; padding:10px 12px; border-radius:8px}
.dropdown-content a:hover{background:#0f172a}

.hero{position:relative; min-height:60vh; display:grid; place-items:center; overflow:hidden}
.hero.slim{min-height:40vh}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; filter:grayscale(10%) saturate(120%)}
.hero-content{position:relative; padding:24px; max-width:950px; text-align:center}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 10px; display:flex; gap:10px; align-items:center; justify-content:center}
.icon{display:inline-flex; vertical-align:middle}
.icon.sm svg{width:18px; height:18px}
.hero-cta{display:flex; gap:12px; justify-content:center; margin-top:10px}

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--border); color:var(--white); background:#0b1220}
.btn.primary{background:var(--primary); color:#052e12; border-color:transparent; font-weight:600}
.btn.primary:hover{background:var(--primary-700); color:#052e12}
.btn.ghost{background:transparent; border-color:var(--border)}

.cards{max-width:1100px; margin:50px auto; padding:0 16px}
.cards h2, .errors h2, .featured-posts h2, .contact-info h2, .contact-form h2{display:flex; align-items:center; gap:10px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow)}
.card h3{display:flex; align-items:center; gap:8px}
.card .link{display:inline-block; margin-top:8px}

.errors{max-width:1100px; margin:40px auto; padding:0 16px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.error-item{background:#0b1220; border:1px solid var(--border); border-radius:14px; padding:12px}
.error-item h3{display:flex; align-items:center; gap:8px}

.featured-posts{max-width:1100px; margin:40px auto 60px; padding:0 16px}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.mini-card{background:#0b1220; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.mini-card span{padding:10px; font-weight:600}

.blog-list{max-width:1100px; margin:40px auto; padding:0 16px; display:grid; grid-template-columns:2fr 1fr; gap:20px}
.post-card{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr}
.post-card>div{padding:16px}
.more-posts{background:#0b1220; border:1px solid var(--border); border-radius:12px; padding:14px}
.more-posts h3{display:flex; align-items:center; gap:8px}

.post{max-width:900px; margin:30px auto; padding:0 16px}
.post-header h1{display:flex; align-items:center; gap:10px}
.post-hero{margin:14px 0}
.checklist{list-style: none; padding:0; margin:0}
.checklist li{position:relative; padding-left:26px; margin:8px 0}
.checklist li::before{
  content:""; position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%;
  background:conic-gradient(var(--primary), var(--primary-700));
}

.team{max-width:1100px; margin:30px auto 60px; padding:0 16px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.team-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px; text-align:center}
.team-card img{object-fit:cover}

.contact-grid{max-width:1100px; margin:40px auto 60px; padding:0 16px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px}
.map{margin-top:10px}

.site-footer{border-top:1px solid var(--border); padding:20px; background:#0b1220; margin-top:40px}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; align-items:flex-start}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:6px 0}
.footer-bottom{border-top:1px solid var(--border); margin-top:14px; padding-top:12px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.socials{display:flex; gap:10px}
.socials a{display:inline-flex; width:36px; height:36px; background:#0f172a; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border)}
.socials a:hover{background:#0e1a2d}

.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:-300px; transition:.35s ease; background:#0b1220; border:1px solid var(--border);
  padding:12px; border-radius:14px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; z-index:50
}
.cookie-banner.show{bottom:12px}
.cookie-text a{color:#86efac; text-decoration:underline}
.cookie-actions{display:flex; gap:8px}
.cookie-close{background:transparent; color:var(--white); border:none; font-size:20px; cursor:pointer}

.cookie-modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.6); z-index:60}
.cookie-modal.show{display:grid}
.cookie-modal-content{background:#0b1220; border:1px solid var(--border); border-radius:16px; padding:18px; width:min(92%,480px)}
.switch{display:flex; gap:10px; align-items:center; margin:10px 0}
.cookie-modal-actions{display:flex; gap:10px; justify-content:flex-end}

@media (max-width:1100px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .blog-list{grid-template-columns:1fr}
  .post-card{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}