/* Digitally Integrated — Minimal, modern, responsive */
:root{
  --bg:#0b1a2b;
  --bg-2:#0f2238;
  --text:#e8f0f7;
  --muted:#b7c5d3;
  --brand:#3bb273;       /* green pulse */
  --brand-2:#2b7cd3;     /* blue accent */
  --card:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.12);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

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

/* Header / Nav */
.site-header{position:sticky; top:0; backdrop-filter:saturate(120%) blur(6px); background:rgba(10,20,35,.45); border-bottom:1px solid var(--border); z-index:50}
.nav{max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none}
.brand img{filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.nav-links{display:flex; gap:16px; align-items:center}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}

/* Hero */
.hero{
  position:relative; min-height:90vh; display:grid; place-items:center; text-align:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background:url('assets/background.jpg') center/cover no-repeat;
  transform:scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(17,40,66,.35), rgba(11,26,43,.85) 60%);
}
.hero-content{
  position:relative; z-index:2; max-width:900px; padding:24px;
}
.hero-logo{
  width:min(160px, 35vw); height:auto; margin:0 auto 16px; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
h1{font-size:clamp(28px, 5vw, 56px); line-height:1.1; margin:8px 0 12px}
.subtitle{color:var(--muted); font-size:clamp(16px, 2.4vw, 20px); margin:0 auto 22px; max-width:700px}
.cta-group{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.scroll-hint{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:var(--muted); text-decoration:none; font-size:28px; opacity:.8}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:white; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{background:transparent; border-color:var(--border); color:var(--text)}
.btn-secondary:hover{border-color:var(--text)}
.btn-outline{border-color:var(--border); padding:8px 14px}
.btn-outline:hover{border-color:var(--text)}

/* Sections */
.section{padding:64px 20px}
.section-light{background:rgba(255,255,255,0.02); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-dark{background:transparent}
.section-accent{background:linear-gradient(180deg, rgba(59,178,115,.08), transparent); border-top:1px solid var(--border)}
.container{max-width:1100px; margin:0 auto}
h2{font-size:clamp(22px,3.4vw,36px); margin:0 0 16px}
p{line-height:1.6}

/* Pillars */
.pillars{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pillars li{padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:16px}
.pillars strong{display:block; color:#fff}

/* Features grid */
.features-grid{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.feature{padding:18px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.feature h3{margin:0 0 8px; font-size:18px}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:26px 20px; color:var(--muted)}
.site-footer .container{max-width:1100px; margin:0 auto}

/* Animations (reduced motion respected) */
.anim .hero-bg{animation:slow-zoom 18s ease-in-out infinite alternate}
@keyframes slow-zoom{
  from{transform:scale(1.03);}
  to{transform:scale(1.07);}
}

/* Responsive Tweaks */
@media (max-width:640px){
  .nav-links{gap:10px}
  .btn{padding:10px 14px}
}