:root{
  --c-bg:#0f5d74; --c-bg-deep:#0e3f50; --c-accent:#2ec4b6;
  --c-text:#e9f4f7; --c-muted:#b8d3db; --c-line:#1a4355;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0c1e2d;color:var(--c-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.wrapper{max-width:1180px;margin:0 auto;padding:0 24px}

/* --- Header --- */
.site-header{position:sticky;top:0;z-index:15;background:linear-gradient(0deg,var(--c-bg),var(--c-bg-deep));box-shadow:0 10px 26px rgba(0,0,0,.25)}
.nav-wrap{display:flex;align-items:center;min-height:76px}
.branding{display:flex;gap:14px;align-items:center}
.logo-mark img{width:36px;height:36px;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.logo{font-family:Montserrat,Inter,Arial,sans-serif;font-weight:800;letter-spacing:.6px;color:#fff}
.tagline{color:#cfe3e8;opacity:.85;font-size:13px;margin-top:2px}

/* --- Hero (organic art) --- */
.hero{position:relative;min-height:68vh;display:grid;place-items:center;text-align:center;overflow:hidden;background:linear-gradient(180deg,#0f5d74 0%, #0e3f50 100%)}
.hero .art{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 60% at 80% -10%, rgba(46,196,182,.22) 0%, rgba(46,196,182,0) 40%),
  url('../images/organic-waves.svg');
background-size:cover, 1400px 800px; background-repeat:no-repeat, repeat;
animation: drift 22s ease-in-out infinite alternate;
opacity:.75; filter:saturate(108%) contrast(108%)}
@keyframes drift{0%{background-position:50% 0, 0 0} 100%{background-position:48% -6%, -80px -30px}}
.hero-inner{position:relative}
.title{font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(34px,5vw,58px);font-weight:800;margin:0 0 10px;letter-spacing:.2px}
.subtitle{max-width:900px;margin:0 auto;color:var(--c-muted);font-size:clamp(16px,2.2vw,20px)}

/* --- Sections with blended transitions --- */
.section{position:relative;padding:86px 0;background:#0c1e2d}
.section.alt{background:#0f2232}
.blend-top,.blend-bottom{position:absolute;left:0;right:0;height:90px;pointer-events:none}
.blend-top{top:-1px;background:linear-gradient(180deg, transparent 0%, rgba(12,30,45,0.6) 60%, rgba(12,30,45,1) 100%)}
.blend-bottom{bottom:-1px;background:linear-gradient(0deg, transparent 0%, rgba(12,30,45,0.55) 55%, rgba(12,30,45,1) 100%)}
.section.alt .blend-top{background:linear-gradient(180deg, transparent 0%, rgba(15,34,50,0.6) 60%, rgba(15,34,50,1) 100%)}
.section.alt .blend-bottom{background:linear-gradient(0deg, transparent 0%, rgba(15,34,50,0.55) 55%, rgba(15,34,50,1) 100%)}

.section h2{text-align:center;margin:0 0 20px;font-family:Montserrat,Inter,Arial,sans-serif}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:linear-gradient(180deg,#0f2232,#0b1d29);border:1px solid var(--c-line);border-radius:18px;padding:22px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.card h3{margin:0 0 8px;font-family:Montserrat,Inter,Arial,sans-serif}
.icon{width:46px;height:46px;margin-bottom:8px;opacity:.95}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.list{margin:10px 0 0 0;padding-left:18px}
.list li{margin:6px 0}
.visual img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 18px 46px rgba(0,0,0,.32);border:1px solid var(--c-line);background:#0d2030}
.caption{font-size:13px;color:#a6c9d1;margin-top:8px;text-align:center}
.panel{background:linear-gradient(180deg,#0c1f2c,#0a1a25);border:1px solid var(--c-line);padding:22px;border-radius:18px}

/* --- CTA --- */
.cta{position:relative;text-align:center;padding:90px 0;background:linear-gradient(180deg,#0e3f50,#0b2d3a)}
.cta .blend-top{background:linear-gradient(180deg, transparent 0%, rgba(14,63,80,0.6) 60%, rgba(14,63,80,1) 100%)}

/* --- Reveal micro-animations (on scroll) --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}

/* --- Footer --- */
.site-footer{background:#0b2130;color:#cfe3e8;padding:26px 0}
.small{font-size:13px;color:#a8cdd6}

/* --- Responsive --- */
@media (max-width:980px){
  .grid-3{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
}