/* Unique color scheme */
:root{
  --bg:#f6faf8;
  --text:#15212b;
  --muted:#53616e;
  --brand:#0bbf8a;
  --brand-2:#1b8cf2;
  --accent:#ff6b6b;
  --card:#ffffff;
  --border:#e5eef1;
  --shadow:0 10px 30px rgba(13,31,52,.08);
  --radius:16px;

  /* Dark theme */
  --d-bg:#0b1520;
  --d-text:#e9f1f6;
  --d-muted:#9fb2c1;
  --d-card:#0f1d2a;
  --d-border:#1f3345;
  --glow:0 0 0 6px rgba(27,140,242,.12), 0 20px 60px rgba(11,191,138,.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Dark theme on scroll */
body.dark{
  background:var(--d-bg);
  color:var(--d-text);
}
body.dark .nav, body.dark header.hero, body.dark footer.site-footer{
  background:linear-gradient(135deg, rgba(15,29,42,.9), rgba(11,21,32,.9));
}
body.dark a{color:#7fdcc0}
body.dark .card{background:var(--d-card); border-color:var(--d-border); box-shadow:none}
body.dark .badge{background:#0e2a3f; color:#a7e5ff}
body.dark .btn-primary{background:linear-gradient(135deg,#15d09b,#1b8cf2)}
body.dark .features li svg{fill:#7fdcc0}

/* Utility */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.flex{display:flex; align-items:center}
.space-between{justify-content:space-between}
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:#e7f9f3;
  color:#0a7c5d;
}

/* Navbar */
.nav{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(135deg,#ffffff, #f4fbff);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(10px);
}
.nav .inner{height:70px}
.nav .brand{gap:12px}
.nav .brand img{width:40px; height:40px; border-radius:10px; object-fit:cover; box-shadow:0 8px 20px rgba(0,0,0,.06)}
.nav .brand h1{font-size:18px; margin:0}
.nav .menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  margin:0 14px;
  padding:10px 12px;
  border-radius:10px;
}
.nav .menu a:hover{background:rgba(27,140,242,.08); color:var(--brand-2)}
.nav .cta{gap:10px}
.btn, .btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:12px; cursor:pointer;
  padding:12px 18px; font-weight:700; letter-spacing:.2px;
}
.btn{background:#ebf6ff; color:#0f5fb8}
.btn-primary{
  background:linear-gradient(135deg,#0bbf8a,#1b8cf2);
  color:white; box-shadow:var(--glow)
}
.btn-outline{
  background:transparent; color:var(--brand-2);
  border:2px solid rgba(27,140,242,.35)
}

/* Hero */
header.hero{
  padding:70px 0 40px;
  background:radial-gradient(1200px 400px at 10% -10%, rgba(11,191,138,.20), transparent),
             radial-gradient(1200px 400px at 110% -20%, rgba(27,140,242,.18), transparent);
}
.hero .wrap{align-items:center; gap:38px}
.hero .text h2{font-size:44px; line-height:1.15; margin:0 0 12px}
.hero .text p{font-size:18px; color:var(--muted)}
.hero .media{
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)
}
.hero .media img{width:100%; height:420px; object-fit:cover}

/* Sections */
.section{padding:60px 0}
.section h3{font-size:28px; margin:0 0 10px}
.section p.lead{color:var(--muted); margin:0 0 16px}

/* Features */
.features li{list-style:none; display:flex; gap:14px; align-items:flex-start; margin:10px 0}
.features li svg{width:22px; height:22px; fill:var(--brand)}
.kpi{display:flex; gap:20px; flex-wrap:wrap}
.kpi .box{padding:16px 18px; border-radius:12px; background:#f1fbf7; color:#0a6a50; font-weight:700; border:1px dashed #bfead9}

/* Blog */
.post-card img{width:100%; height:220px; object-fit:cover; border-radius:12px}
.post-meta{display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px}
.post-meta .dot{width:6px; height:6px; background:#9fb2c1; border-radius:50%}

/* Breadcrumbs */
.breadcrumbs{font-size:14px; color:var(--muted); margin:6px 0 18px}
.breadcrumbs a{text-decoration:none; color:var(--brand-2)}

/* Contact */
.form{display:grid; gap:14px}
.form input,.form textarea, .form select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff;
}
.form textarea{min-height:140px; resize:vertical}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.map{
  width:100%; height:300px; background:url('images/8.jpg') center/cover no-repeat;
  border-radius:16px; border:1px solid var(--border)
}

/* Footer */
.site-footer{
  margin-top:40px; padding:40px 0; background:linear-gradient(135deg,#f5fbff,#f9fffb);
  border-top:1px solid var(--border)
}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.site-footer a{color:var(--text); text-decoration:none}
.site-footer a:hover{color:var(--brand-2)}
.social{display:flex; gap:12px; margin-top:10px}
.social a{display:inline-flex; width:36px; height:36px; border-radius:10px; align-items:center; justify-content:center; background:#eef7ff}
.social a:hover{background:#e1f6f0}
.legal{margin-top:18px; color:var(--muted); font-size:13px}

/* Cookie banner */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1200;
  display:none; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:14px; padding:14px 16px;
}
.cookie-banner.show{display:flex}
.cookie-actions{display:flex; gap:10px}
.cookie-customize{
  display:none; width:100%; padding-top:8px; border-top:1px dashed var(--border); margin-top:8px
}
.cookie-customize .opt{display:flex; align-items:center; gap:8px; margin:4px 0}

/* Modal */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1300;
  background:rgba(9,20,30,.6);
}
.modal .dialog{
  width:min(560px,92vw); background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px;
  box-shadow:var(--shadow); text-align:center;
}
.modal.show{display:flex}

/* Responsive */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .hero .wrap{flex-direction:column}
  .nav .menu{display:none}
}