/* ============ Tokens ============ */
:root{
  --bg:        #0D1517;
  --bg-alt:    #121C1F;
  --surface:   #16232A;
  --ink:       #EAF2F1;
  --ink-soft:  #9FB4B8;
  --ink-faint: #6C8286;
  --line:      #223034;
  --teal:      #53B2A8;
  --teal-deep: #1E6968;
  --teal-tint: rgba(83,178,168,0.16);
  --teal-light:#A9DED8;
  --amber:     #E3963A;
  --amber-tint:rgba(227,150,58,0.16);
  --charge-green:  #34D399;
  --discharge-red: #F87171;
  --navy:      #0B1A22;
  --navy-soft: #16303A;

  --display: "Inter", sans-serif;
  --body:    "Inter", sans-serif;
  --mono:    "Roboto", monospace;

  --radius: 10px;
  --wrap: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  width:16px; height:2px;
  background:var(--amber);
  display:inline-block;
}

section{position:relative;}
.section-pad{padding:96px 0;}

/* ============ Waveform divider (signature motif) ============ */
.wave-divider{
  width:100%; height:34px;
  display:block;
  color:var(--line);
}
.wave-divider path{ fill:none; stroke:currentColor; stroke-width:1.5; }
.wave-divider .accent{ stroke:var(--amber); opacity:0.6; }

/* ============ Header ============ */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,21,23,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-logo-img{ height:34px; width:auto; }
.logo{
  display:flex; align-items:center; gap:12px;
}
.logo-mark{
  width:34px; height:34px;
  display:grid; place-items:center;
}
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-text .name{
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:0.01em;
}
.logo-text .sub{
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--ink-faint); text-transform:uppercase;
}
nav.primary-nav{ display:flex; align-items:center; gap:40px; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber);
}
.nav-links a.btn{ color:#fff; padding:11px 22px; margin-left:6px; }
.nav-links a.btn:hover{ color:#fff; }
.has-dropdown{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.has-dropdown .caret{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.has-dropdown:hover .caret{ transform:rotate(225deg) translateY(2px); }
.dropdown-wrap{ position:relative; }
.dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px; min-width:230px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:10;
}
.dropdown-wrap:hover .dropdown-menu{ opacity:1; visibility:visible; transform:translate(-50%,10px); }
.dropdown-menu a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:7px; font-size:14px; color:var(--ink);
}
.dropdown-menu a:hover{ background:var(--bg-alt); }
.dropdown-menu a small{ font-weight:400; color:var(--ink-faint); font-size:12px; }

/* Mobile nav toggle (checkbox-driven, no JS needed) */
.nav-toggle-checkbox{ display:none; }
.nav-toggle-label{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:20px; cursor:pointer; flex:none;
}
.nav-toggle-label span{
  display:block; height:2px; width:100%; background:var(--ink); border-radius:2px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14.5px;
  padding:11px 22px; border-radius:7px;
  border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-deep); box-shadow:0 6px 18px -6px rgba(14,124,121,0.55); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.btn-on-dark{ border-color:rgba(255,255,255,0.25); color:#fff; }
.btn-on-dark:hover{ border-color:#fff; }

/* ============ Hero ============ */
.hero{ padding:88px 0 80px; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;
}
.hero h1{
  font-size:clamp(38px, 4.6vw, 58px);
  line-height:1.06;
  margin:18px 0 22px;
}
.hero h1 .hl{ color:var(--teal); }
.hero p.lead{
  font-size:18px; color:var(--ink-soft); max-width:480px; margin-bottom:34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Chart card */
.chart-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 26px 20px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,0.45);
}
.chart-card-head{
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;
}
.chart-card-head h3{ font-size:15px; font-weight:600; }
.chart-card-head .tag{
  font-family:var(--mono); font-size:11px; color:var(--teal);
  background:var(--teal-tint); padding:4px 9px; border-radius:20px;
}
.legend{ display:flex; flex-wrap:wrap; gap:14px; row-gap:6px; margin:14px 2px 4px; }
.legend .dot-line{
  width:14px; height:0; border-radius:0; background:none;
  border-top:2px dashed var(--teal);
}

/* Looping load timeline (used on the flagship product chart) */
.status-charging{ fill:var(--charge-green); opacity:.65; }
.status-deploy{ fill:var(--discharge-red); opacity:.85; }
.scroll-track{ animation:scrollTrack 16s linear infinite; }
@keyframes scrollTrack{
  from{ transform:translateX(0); }
  to{ transform:translateX(-460px); }
}
@media (prefers-reduced-motion:reduce){
  .scroll-track{ animation:none; }
}
.legend span{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft);
}
.legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.dot-amber{ background:var(--amber); }
.dot-red{ background:var(--discharge-red); }
.dot-green{ background:var(--charge-green); }

.chart-axis-labels{
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
  margin-top:6px;
}

@keyframes drawline{
  to{ stroke-dashoffset:0; }
}
@keyframes pulse{
  0%,100%{ opacity:0.55; r:3.4; }
  50%{ opacity:1; r:5; }
}
.demand-line{
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:drawline 2.2s ease forwards 0.2s;
}
.shave-line{
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:drawline 2.2s ease forwards 0.5s;
}
.peak-dot{ animation:pulse 2.2s ease-in-out infinite; transform-origin:center; }
.spoke-line{
  stroke-dasharray:200; stroke-dashoffset:200;
  animation:drawline 1.1s ease forwards 0.15s;
}
@media (prefers-reduced-motion:reduce){
  .spoke-line{ animation:none; stroke-dashoffset:0; }
}
@media (prefers-reduced-motion:reduce){
  .demand-line,.shave-line{ animation:none; stroke-dashoffset:0; }
  .peak-dot{ animation:none; }
}

/* ============ Stat band ============ */
.stat-band{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:56px 0;
}
.stat-grid .stat{ border-left:2px solid var(--amber); padding-left:20px; }
.stat .num{ font-family:var(--display); font-weight:700; font-size:32px; }
.stat .num small{ font-size:16px; font-weight:600; color:var(--ink-soft); }
.stat .desc{ margin-top:8px; font-size:14.5px; color:var(--ink-soft); max-width:260px; }

/* ============ Two-col feature ============ */
.feature{
  display:grid; grid-template-columns:0.95fr 1.05fr; gap:70px; align-items:center;
}
.feature.reverse{ grid-template-columns:1.05fr 0.95fr; }
.feature.reverse .feature-media{ order:2; }
.feature h2{ font-size:clamp(26px,2.6vw,34px); margin:14px 0 18px; line-height:1.15; }
.feature p{ color:var(--ink-soft); margin-bottom:16px; max-width:480px; }
.check-list{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.check-list li{
  display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink);
}
.check-list .mark{
  flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--teal-tint); color:var(--teal);
  display:grid; place-items:center; font-size:12px; margin-top:1px;
}
.media-placeholder{
  width:100%; height:340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--bg-alt), var(--surface));
  color:var(--ink-faint);
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  text-align:center; padding:20px;
}
.feature-media{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 18px 40px -26px rgba(0,0,0,0.5);
}
.feature-media img{ width:100%; height:340px; object-fit:cover; display:block; }

/* callout card for "what is peak shaving" */
.callout-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px;
}
.callout-card h4{ font-family:var(--display); font-size:16px; margin-bottom:14px; }
.load-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
.load-row:first-of-type{ border-top:none; }
.load-row span.tag{
  font-family:var(--mono); font-size:11px; color:var(--amber); background:var(--amber-tint);
  padding:3px 8px; border-radius:20px;
}

/* ============ Built for infrastructure / CTA duo ============ */
.infra{ text-align:center; }
.infra h2{ font-size:clamp(28px,3vw,38px); margin:14px auto 12px; max-width:640px; }
.infra p{ color:var(--ink-soft); max-width:560px; margin:0 auto; }
.cta-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px;
}
.cta-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:34px; text-align:left;
  border-top:3px solid var(--teal);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-card.amber{ border-top-color:var(--amber); }
.cta-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,0,0,0.5); }
.cta-card h3{ font-size:19px; margin-bottom:8px; }
.cta-card p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:20px; }
.cta-card a.link{
  font-weight:600; font-size:14.5px; color:var(--teal); display:inline-flex; align-items:center; gap:6px;
}
.cta-card.amber a.link{ color:var(--amber); }

/* ============ About/Team band ============ */
.about-band{ background:var(--navy); color:#fff; }
.about-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;
}
.about-band .eyebrow{ color:#8FD6CF; }
.about-band .eyebrow::before{ background:var(--amber); }
.about-band h2{ color:#fff; font-size:clamp(26px,2.8vw,32px); margin:14px 0 16px; }
.about-band p{ color:#B8C8CC; max-width:420px; }
.team-row{ display:flex; gap:22px; flex-wrap:wrap; }
.team-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:20px; flex:1 1 160px;
}
.team-card img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:14px;
  border:2px solid rgba(255,255,255,0.15);
}
.team-card h4{ font-family:var(--display); font-size:15px; color:#fff; margin-bottom:3px; }
.team-card .role{ font-size:12.5px; color:var(--teal); margin-bottom:8px; }
.team-card .bg{ font-size:12.5px; color:#9AAAAE; line-height:1.5; }

/* ============ Footer ============ */
footer{ background:var(--navy-soft); color:#B8C8CC; padding:64px 0 28px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-top .logo-text .name{ color:#fff; }
.footer-logo img{ width:170px; max-width:100%; height:38px; object-fit:contain; object-position:left center; }
.footer-top p{ font-size:14px; margin-top:14px; max-width:260px; color:#93A6AB; }
.footer-col h5{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:#7C9296; margin-bottom:16px;
}
.footer-col a{ display:block; font-size:14px; color:#C4D3D6; padding:6px 0; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; color:#7C9296;
}

/* ============ Animated network globe (hero diagram, canvas-based) ============ */
.globe-canvas{
  width:100%; aspect-ratio: 460 / 300; display:block; border-radius:8px;
}

/* ============ Solution trio / application grid ============ */
.solution-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.app-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.info-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 24px; text-align:left; border-top:3px solid var(--teal);
}
.info-card.amber{ border-top-color:var(--amber); }
.info-card h3{ font-size:17px; margin-bottom:8px; }
.info-card p{ color:var(--ink-soft); font-size:14px; }
.app-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:22px 18px; text-align:left;
}
.app-card h4{ font-family:var(--display); font-size:15px; margin-bottom:6px; }
.app-card p{ color:var(--ink-soft); font-size:13px; }

.contact-split{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:760px; margin:0 auto;
}

/* ============ Process steps ============ */
.process-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:52px; }
.process-step .num{
  font-family:var(--mono); font-size:34px; font-weight:500; color:var(--teal); line-height:1;
}
.process-step h3{ font-size:17px; margin:14px 0 8px; }
.process-step p{ color:var(--ink-soft); font-size:14px; }
.process-step{ border-top:2px solid var(--line); padding-top:20px; }

/* ============ Responsive ============ */
/* ============ Spec list (project details) ============ */
.spec-row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-top:1px solid var(--line); font-size:13.5px;
}
.spec-row:first-of-type{ border-top:none; }
.spec-row .label{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-faint); flex:0 0 130px; padding-top:2px;
}
.spec-row .value{ color:var(--ink); text-align:right; min-width:0; overflow-wrap:anywhere; }
.spec-row .value a{ color:var(--teal); font-weight:600; }
.spec-row .value a:hover{ color:var(--teal-light); }

/* ============ Map embed ============ */
.feature-media iframe{
  width:100%; height:340px; border:0; display:block;
}

/* ============ Testimonial quote card ============ */
.quote-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:32px;
}
.quote-card .quote-mark{
  font-family:var(--display); font-size:46px; color:var(--teal); line-height:1; margin-bottom:6px;
}
.quote-card .quote-text{ font-size:15px; color:var(--ink); line-height:1.65; margin-bottom:22px; }
.quote-person{ display:flex; align-items:center; gap:12px; }
.quote-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--teal-tint); }
.quote-person .name{ font-weight:600; font-size:14px; color:var(--ink); }
.quote-person .role{ font-size:12.5px; color:var(--ink-soft); }

/* ============ Team grid (About page) ============ */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.team-card-light{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 24px; text-align:left;
}
.team-card-light img{
  width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:16px;
  border:2px solid var(--teal-tint);
}
.team-card-light h3{ font-family:var(--display); font-size:17px; margin-bottom:4px; }
.team-card-light .role{ font-size:12.5px; color:var(--teal); font-weight:600; margin-bottom:12px; }
.team-card-light p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.team-card-light .linkedin-link{ font-size:13px; font-weight:600; color:var(--teal); }
.team-card-light .linkedin-link:hover{ color:var(--teal-light); }
.deploy-photo{
  position:relative; display:block;
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(0,0,0,0.5);
  cursor:zoom-in;
}
.deploy-photo img{ width:100%; height:380px; object-fit:cover; display:block; }
.deploy-photo.graph{ background:var(--surface); }
.deploy-photo.graph img{ height:auto; object-fit:contain; }
.deploy-photo-caption{ font-size:13px; color:var(--ink-faint); margin-top:12px; }
.expand-hint{
  position:absolute; right:12px; bottom:12px;
  display:flex; align-items:center; gap:6px;
  background:rgba(11,26,34,0.78); color:#fff;
  font-size:12px; font-weight:500; padding:7px 12px; border-radius:20px;
  backdrop-filter:blur(4px);
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .nav-toggle-label{ display:flex; }
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:8px 32px 22px;
    box-shadow:0 20px 30px -20px rgba(0,0,0,0.45);
  }
  .nav-toggle-checkbox:checked ~ .nav-links{ display:flex; }
  .nav-links a{ padding:13px 0; }
  .nav-links a.btn{
    margin:14px 0 4px; padding:13px 22px; justify-content:center; width:100%;
  }
  .has-dropdown .caret{ display:none; }
  .dropdown-wrap{ width:100%; }
  .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    display:block; box-shadow:none; border:none; padding:0 0 6px 14px; min-width:0;
  }
  .hero-grid,.feature,.feature.reverse,.about-grid{ grid-template-columns:1fr; }
  .feature.reverse .feature-media{ order:0; }
  .stat-grid{ grid-template-columns:1fr; gap:26px; }
  .cta-duo{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .solution-trio,.process-row,.contact-split{ grid-template-columns:1fr; }
  .app-grid{ grid-template-columns:1fr 1fr; }
  .deploy-photo img{ height:260px; }
  .spec-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .spec-row .label{ flex:0 0 auto; }
  .spec-row .value{ text-align:left; }
  .team-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1 1 100%; }
}