:root {
  --bg: #f3fbf9;
  --surface: rgba(255,255,255,0.9);
  --surface-2: #f8fffd;
  --text: #0f1720;
  --muted: #4b5563;
  --line: #d7ece7;
  --primary: #0a6c63;
  --primary-2: #13b8a6;
  --primary-3: #0f8f84;
  --primary-soft: rgba(19, 184, 166, 0.12);
  --shadow: 0 20px 60px rgba(10, 108, 99, 0.12);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(19, 184, 166, 0.12), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(10, 108, 99, 0.10), transparent 24%),
    linear-gradient(180deg, #f9fffe 0%, #eef8f6 100%);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.site-shell { position: relative; overflow: hidden; min-height: 100vh; }
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 999px; filter: blur(12px); opacity: 0.35; animation: floatOrb 14s ease-in-out infinite; }
.orb.one { width: 280px; height: 280px; background: rgba(19, 184, 166, 0.20); top: 80px; left: -80px; }
.orb.two { width: 220px; height: 220px; background: rgba(10, 108, 99, 0.16); top: 480px; right: -60px; animation-delay: -4s; }
.orb.three { width: 180px; height: 180px; background: rgba(19, 184, 166, 0.12); bottom: 120px; left: 10%; animation-delay: -8s; }
@keyframes floatOrb { 0%,100%{transform:translateY(0) translateX(0) scale(1)} 50%{transform:translateY(-24px) translateX(18px) scale(1.06)} }

header {
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.78); border-bottom: 1px solid rgba(215, 236, 231, 0.8);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:78px; }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:-0.03em; }
.brand-mark {
  width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 14px 30px rgba(10,108,99,0.22); position:relative; overflow:hidden;
}
.brand-mark::before,.brand-mark::after{content:""; position:absolute; border-radius:999px; background:rgba(255,255,255,0.18)}
.brand-mark::before{width:36px;height:36px;top:-10px;right:-10px}
.brand-mark::after{width:16px;height:16px;bottom:8px;left:8px}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text small{color:var(--muted); font-size:12px; font-weight:700; letter-spacing:0.12em; margin-top:5px}
.nav-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-links a{padding:10px 14px; border-radius:999px; color:var(--muted); font-weight:600; transition:.25s ease}
.nav-links a:hover,.nav-links a.active{background:var(--primary-soft); color:var(--primary); transform:translateY(-1px)}
.nav-cta{display:flex; align-items:center; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:999px; border:1px solid transparent; font-weight:800; letter-spacing:-0.01em; cursor:pointer; transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:white; box-shadow:0 16px 36px rgba(10,108,99,0.22)}
.btn-secondary{border-color:var(--line); background:rgba(255,255,255,0.8); color:var(--text)}
.menu-toggle{display:none; width:48px; height:48px; border-radius:14px; border:1px solid var(--line); background:white; font-size:20px; cursor:pointer}
.mobile-menu{display:none}
section{position:relative; z-index:1}
.hero{padding:72px 0 32px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,0.76); border:1px solid var(--line); box-shadow:0 10px 24px rgba(10,108,99,0.08); color:var(--primary); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; animation:fadeUp .8s ease both}
.eyebrow .dot{width:8px; height:8px; border-radius:999px; background:var(--primary-2); box-shadow:0 0 0 8px rgba(19,184,166,0.12)}
.hero h1,.page-hero h1{font-size:clamp(42px, 7vw, 82px); line-height:.95; letter-spacing:-.055em; margin:18px 0; max-width:760px; animation:fadeUp 1s ease .12s both}
.hero h1 .accent,.page-hero h1 .accent{background:linear-gradient(135deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead,.page-hero p.lead{font-size:18px; color:var(--muted); margin:0 0 26px; max-width:680px; animation:fadeUp 1s ease .24s both}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; animation:fadeUp 1s ease .36s both}
.hero-mini{display:flex; flex-wrap:wrap; gap:14px; animation:fadeUp 1s ease .46s both}
.mini-pill{padding:11px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.76); color:var(--muted); font-weight:700; font-size:14px}
.visual-card{position:relative; min-height:640px; border-radius:34px; background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(242,252,249,.9)), linear-gradient(135deg, var(--primary-soft), transparent); border:1px solid rgba(215,236,231,.9); box-shadow:var(--shadow); overflow:hidden; animation:fadeScale 1s ease .25s both}
.visual-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(10,108,99,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,108,99,0.05) 1px, transparent 1px); background-size:30px 30px; mask-image:linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.2))}
.float-card{position:absolute; background:rgba(255,255,255,.88); border:1px solid rgba(215,236,231,.95); border-radius:22px; box-shadow:0 20px 50px rgba(10,108,99,.10); backdrop-filter:blur(16px)}
.float-card.a{top:32px; left:26px; right:110px; padding:22px; animation:bob 5s ease-in-out infinite}
.float-card.b{top:200px; right:22px; width:240px; padding:20px; animation:bob 5.5s ease-in-out infinite -1.5s}
.float-card.c{left:34px; right:34px; bottom:30px; padding:24px; animation:bob 6s ease-in-out infinite -2s}
.float-label{display:inline-block; font-size:12px; font-weight:800; color:var(--primary); background:var(--primary-soft); border-radius:999px; padding:8px 10px; margin-bottom:12px; letter-spacing:.08em; text-transform:uppercase}
.float-card h3{margin:0 0 8px; font-size:22px; letter-spacing:-.03em}
.float-card p{margin:0; color:var(--muted)}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.stat-box{padding:16px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line)}
.stat-box strong{display:block; font-size:28px; margin-bottom:6px; letter-spacing:-.04em}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.section{padding:72px 0 20px}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:22px}
.section-head h2{margin:0 0 8px; font-size:clamp(28px,4vw,46px); line-height:1; letter-spacing:-.04em}
.section-head p{margin:0; color:var(--muted); max-width:620px}
.band{padding:34px 0}
.stats-strip,.grid-3,.grid-2,.grid-4{display:grid; gap:20px}
.stats-strip{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.strip-card,.card,.timeline-item{background:rgba(255,255,255,.86); border:1px solid var(--line); box-shadow:0 20px 44px rgba(15,23,32,.05)}
.strip-card{padding:24px; border-radius:var(--radius-lg)}
.strip-card .num{font-size:clamp(32px,4vw,44px); font-weight:900; letter-spacing:-.05em; color:var(--primary); margin-bottom:6px}
.strip-card p{margin:0; color:var(--muted); font-weight:600}
.card{position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:24px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.card:hover{transform:translateY(-8px); border-color:rgba(19,184,166,.35); box-shadow:0 28px 60px rgba(10,108,99,.12)}
.card::before{content:""; position:absolute; inset:auto -20% -60% auto; width:180px; height:180px; background:radial-gradient(circle, rgba(19,184,166,.14), transparent 70%); pointer-events:none}
.tag{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:13px; font-weight:800; margin-bottom:16px}
.card h3{margin:0 0 10px; font-size:26px; letter-spacing:-.03em}
.card p{margin:0 0 18px; color:var(--muted)}
.card ul{margin:0; padding-left:18px; color:var(--muted)}
.card li+li{margin-top:8px}
.metric-line{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.metric{padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); font-weight:700; font-size:13px}
.timeline{display:grid; gap:16px}
.timeline-item{display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:start; padding:22px; border-radius:24px}
.timeline-year{width:72px; height:72px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:white; font-weight:900; box-shadow:0 16px 34px rgba(10,108,99,.18)}
.timeline-item h3{margin:0 0 8px; font-size:24px; letter-spacing:-.03em}
.blog-card .read{display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:800; margin-top:8px}
.page-hero{padding:62px 0 24px}
.page-hero .lead{max-width:760px}
.contact-wrap{display:grid; grid-template-columns:1fr .9fr; gap:22px; align-items:start}
.contact-panel{padding:30px; border-radius:28px; background:linear-gradient(135deg, rgba(10,108,99,.96), rgba(19,184,166,.95)); color:white; box-shadow:0 24px 60px rgba(10,108,99,.22); position:relative; overflow:hidden}
.contact-panel::before{content:""; position:absolute; width:260px; height:260px; border-radius:999px; top:-80px; right:-80px; background:rgba(255,255,255,.08)}
.contact-panel>*{position:relative; z-index:1}
.contact-panel h3{margin:0 0 10px; font-size:30px; letter-spacing:-.03em}
.contact-list{display:grid; gap:14px; margin-top:22px}
.contact-item{padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12)}
.contact-item strong{display:block; margin-bottom:4px; font-size:13px; text-transform:uppercase; letter-spacing:.1em; opacity:.9}
form{display:grid; gap:14px}
.field{display:grid; gap:8px}
.field label{font-size:14px; font-weight:700; color:var(--muted)}
.field input,.field textarea{width:100%; border:1px solid var(--line); background:rgba(255,255,255,.88); border-radius:18px; padding:16px 18px; font:inherit; color:var(--text); outline:none; transition:.25s ease}
.field input:focus,.field textarea:focus{border-color:rgba(19,184,166,.55); box-shadow:0 0 0 5px rgba(19,184,166,.12)}
textarea{min-height:140px; resize:vertical}
.footer{padding:44px 0 70px}
.footer-wrap{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); color:var(--muted)}
.socials{display:flex; gap:10px; flex-wrap:wrap}
.socials a{min-height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.8); font-weight:700}
.reveal{opacity:0; transform:translateY(28px); transition:.8s ease}
.reveal.show{opacity:1; transform:translateY(0)}
.center{text-align:center}
.list-clean{list-style:none; padding:0; margin:0}
.list-clean li{padding:14px 0; border-bottom:1px solid var(--line); color:var(--muted)}
.list-clean li:last-child{border-bottom:none}
.kicker{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); font-weight:800}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeScale{from{opacity:0; transform:translateY(24px) scale(.98)}to{opacity:1; transform:translateY(0) scale(1)}}
@media (max-width:1080px){.hero-grid,.contact-wrap,.grid-3,.grid-2,.grid-4,.stats-strip{grid-template-columns:1fr}.visual-card{min-height:540px}}
@media (max-width:860px){.nav-links,.nav-cta .btn-secondary{display:none}.menu-toggle{display:inline-grid; place-items:center}.mobile-menu{display:none; padding:0 0 18px}.mobile-menu.open{display:grid; gap:10px}.mobile-menu a{padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.86); font-weight:700; color:var(--muted)}.hero{padding-top:44px}.visual-card{min-height:500px}.float-card.a{right:24px}.float-card.b{width:calc(100% - 48px); top:230px; left:24px; right:24px}.float-card.c{left:24px; right:24px}.timeline-item{grid-template-columns:1fr}.timeline-year{width:60px; height:60px}}
@media (max-width:560px){.hero h1,.page-hero h1{font-size:46px}.hero p.lead,.page-hero p.lead{font-size:16px}.hero-actions{flex-direction:column}.btn{width:100%}.section-head{flex-direction:column; align-items:start}.visual-card{min-height:580px}.float-card.a,.float-card.b,.float-card.c{padding:18px}.stat-row{grid-template-columns:1fr}}