@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f4f7f5;
  --ink: #10201b;
  --muted: #61706b;
  --line: #dbe4df;
  --accent: #16a56b;
  --accent2: #b8f1d8;
  --dark: #0c1915;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:Inter,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }
a { color:inherit; text-decoration:none; }
.nav { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; position:absolute; top:0; width:100%; z-index:5; color:white; }
.brand { font-size:22px; font-weight:800; letter-spacing:-1px; }
.brand span { opacity:.55; }
.nav nav { display:flex; gap:28px; align-items:center; font-size:13px; font-weight:600; }
.nav nav a { opacity:.85; }
.nav-cta { border:1px solid rgba(255,255,255,.35); padding:9px 16px; border-radius:100px; }
.hero { min-height:720px; background:linear-gradient(120deg,#071510,#12382b 55%,#0b211a); color:white; padding:150px 6vw 90px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to right,black,transparent 80%); }
.hero-content { max-width:720px; position:relative; z-index:2; }
.eyebrow,.section-kicker { font-size:11px; letter-spacing:2.4px; font-weight:800; color:var(--accent); margin-bottom:18px; }
.hero h1 { font-size:clamp(48px,7vw,88px); line-height:.98; letter-spacing:-4px; margin:0 0 28px; max-width:850px; }
.hero h1 em { color:#73e7b3; font-style:normal; }
.lead { font-size:18px; line-height:1.65; color:#c7d5cf; max-width:670px; }
.actions { display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-block; padding:13px 20px; border-radius:100px; font-size:13px; font-weight:700; }
.primary { background:var(--accent); color:white; }
.secondary { border:1px solid rgba(255,255,255,.3); color:white; }
.energy-card { position:absolute; right:8vw; bottom:13%; width:300px; padding:28px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); backdrop-filter:blur(12px); border-radius:24px; z-index:2; }
.pulse { width:9px;height:9px;border-radius:50%;background:#65e9ad;box-shadow:0 0 22px #65e9ad;margin-bottom:28px; }
.card-label { font-size:10px;letter-spacing:2px;color:#8fa49b;font-weight:700; }
.flow { display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:14px;font-weight:800; }
.flow span { color:#6ce5ad;font-size:24px; }
.flow-sub { color:#9caf a6; font-size:11px; margin-top:18px; color:#9daf a6; }
.section { padding:110px 8vw; max-width:1400px; margin:auto; }
.section h2 { font-size:clamp(38px,5vw,64px); letter-spacing:-2.5px; line-height:1.05; margin:0 0 25px; }
.section-intro { max-width:760px; font-size:18px; color:var(--muted); }
.cards { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px; }
.cards article { border:1px solid var(--line); padding:32px;border-radius:20px;background:white; }
.icon { font-size:28px;color:var(--accent);margin-bottom:24px; }
.cards h3 { margin:0 0 10px;font-size:20px; }
.cards p,.split p { color:var(--muted);font-size:15px; }
.dark-section { background:var(--dark);color:white;padding:110px 8vw; }
.dark-section h2 span { color:#67e5ad; }
.architecture { display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:70px 0 45px; }
.asset { padding:22px 26px;border:1px solid #2d4b40;border-radius:14px;background:#12271f;font-weight:800;font-size:12px;letter-spacing:1px; }
.connector { color:#65dfaa;font-size:24px; }
.dark-copy { max-width:700px;color:#aebdb7;font-size:17px; }
.split { display:grid;grid-template-columns:1fr 1fr;gap:10vw; }
.future { color:var(--accent)!important;font-weight:700;letter-spacing:.5px; }
.contact { padding:120px 8vw; background:#dff7eb; text-align:center; }
.contact h2 { font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-3px;margin:0 0 20px; }
.contact p { color:#50645b;margin-bottom:28px; }
footer { display:flex;justify-content:space-between;padding:28px 8vw;background:#08130f;color:#81928b;font-size:11px;letter-spacing:.5px; }
footer div:first-child { color:white;font-weight:800; }
@media(max-width:800px){
  .nav { padding:0 5vw; }
  .nav nav a:not(.nav-cta){display:none;}
  .hero { min-height:760px;padding:130px 6vw 70px; }
  .hero h1 { letter-spacing:-2.5px; }
  .energy-card { position:relative;right:auto;bottom:auto;margin-top:55px;width:100%;max-width:330px; }
  .hero { display:block; }
  .cards,.split { grid-template-columns:1fr; }
  .section,.dark-section { padding:80px 6vw; }
  footer { flex-direction:column;gap:8px;padding:24px 6vw; }
}