:root { --ink:#10231e; --forest:#0b4a3c; --mint:#b8f0d6; --lime:#d8ff72; --paper:#f5f5ef; --line:#d9ddd5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
svg { width:1.15em; height:1.15em; flex:none; }

.site-header { height:82px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:28px; background:#fff; border-bottom:1px solid #e7e9e4; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:-.04em; line-height:.9; }
.official-brand { width:248px; height:54px; display:block; overflow:hidden; flex:none; }
.official-logo { width:248px; height:106px; display:block; object-fit:contain; object-position:top; transform:translateY(-1px); }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; background:var(--forest); color:white; border-radius:50%; font-family:Georgia,serif; font-size:22px; font-style:italic; }
.brand small { display:block; margin-top:5px; color:#68736e; font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.brand-accent { color:#37a77d; }
.site-header nav { display:flex; gap:36px; color:#40524c; font-size:14px; }
.site-header nav a, footer a { transition:color .2s ease; }
.site-header nav a:hover, footer a:hover { color:#2a9c73; }
.header-cta { display:flex; align-items:center; gap:10px; padding:12px 17px; color:white; background:var(--forest); border-radius:3px; font-size:13px; font-weight:700; }

.hero { min-height:760px; background:var(--ink); color:white; padding:clamp(72px,9vw,132px) clamp(22px,7vw,108px) 0; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); column-gap:7vw; }
.hero-grid { position:absolute; inset:0; opacity:.08; 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:72px 72px; mask-image:linear-gradient(to right,transparent,black); }
.hero-copy,.hero-panel,.trust-strip { position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 28px; font-size:11px; text-transform:uppercase; letter-spacing:.19em; font-weight:700; color:#b6c8c1; }
.eyebrow span { width:25px; height:1px; background:var(--lime); }
.eyebrow.dark { color:#607069; }
.eyebrow.dark span { background:#2b9a74; }
.hero h1 { max-width:780px; margin:0; font-size:clamp(54px,6.4vw,94px); line-height:.98; letter-spacing:-.065em; font-weight:650; }
h1 em,h2 em { color:#76d4ad; font-family:Georgia,serif; font-weight:400; }
.hero-lead { max-width:660px; margin:34px 0 0; font-size:clamp(17px,1.6vw,21px); line-height:1.65; color:#b8c5c0; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:42px; }
.button { min-height:52px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:24px; border-radius:3px; font-size:13px; font-weight:750; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--lime); color:var(--ink); }
.text-link { color:#e2e9e6; font-size:13px; border-bottom:1px solid #50625c; padding-bottom:6px; }
.text-link span { color:var(--lime); margin-left:8px; }
.hero-panel { align-self:center; height:440px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.025); backdrop-filter:blur(8px); padding:23px; }
.trade-panel { display:flex; flex-direction:column; }
.electric-graphic { height:285px; margin-top:18px; position:relative; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 58% 45%,rgba(106,208,165,.18),transparent 31%),linear-gradient(145deg,#15382f,#0d211b); }
.electric-graphic::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:35px 35px; }
.bolt { width:105px; height:105px; border:1px solid rgba(216,255,114,.35); border-radius:50%; display:grid; place-items:center; color:var(--lime); font:72px/1 Georgia,serif; box-shadow:0 0 55px rgba(216,255,114,.08); position:relative; z-index:2; }
.wire { position:absolute; height:1px; background:linear-gradient(90deg,transparent,#5bb38f,transparent); transform-origin:center; }.wire-a{width:340px;transform:rotate(22deg)}.wire-b{width:330px;transform:rotate(-28deg)}.wire-c{width:260px;transform:rotate(90deg)}
.terminal { position:absolute; width:9px; height:9px; border:2px solid var(--lime); border-radius:50%; z-index:2; }.terminal-a{left:17%;top:30%}.terminal-b{right:15%;bottom:25%}.terminal-c{right:21%;top:20%}
.voltage { position:absolute; right:15px; bottom:10px; color:#668079; font:28px Georgia,serif; }.voltage small{font:11px Arial,sans-serif;margin-left:2px}
.signal { display:flex; align-items:center; gap:8px; color:#b8c8c2; text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
.signal-dot { width:6px; height:6px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 5px rgba(216,255,114,.1); }
.panel-graphic { height:285px; display:grid; place-items:center; position:relative; }
.orbit { position:absolute; border:1px solid rgba(184,240,214,.2); border-radius:50%; }
.orbit-one { width:220px; height:220px; }
.orbit-two { width:310px; height:120px; transform:rotate(-25deg); }
.core { display:grid; place-items:center; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#78d8b1,#176b57); box-shadow:0 0 70px rgba(68,204,151,.2); font-family:Georgia,serif; font-size:33px; font-style:italic; }
.node { position:absolute; width:10px; height:10px; border:2px solid var(--lime); border-radius:50%; background:var(--ink); }
.node-a { top:37px; left:49%; }.node-b { bottom:48px; left:25%; }.node-c { right:16%; top:53%; }
.panel-stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
.panel-stats div { display:flex; flex-direction:column; gap:5px; }.panel-stats div+div { padding-left:20px; border-left:1px solid rgba(255,255,255,.12); }
.panel-stats strong { font-size:14px; }.panel-stats span { color:#83968f; font-size:11px; }
.trust-strip { grid-column:1/-1; align-self:end; height:75px; margin-top:70px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:22px; color:#91a19b; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.trust-strip span::before { content:"●"; color:#6ec9a4; font-size:6px; margin-right:12px; }

.section { padding:120px clamp(22px,7vw,108px); }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:end; margin-bottom:68px; }
.section-heading.compact { grid-template-columns:1fr; }
.section h2,.statement h2,.contact h2 { margin:0; font-size:clamp(42px,5vw,70px); line-height:1.04; letter-spacing:-.055em; font-weight:650; }
.section h2 em { color:#2c9771; }
.section-heading>p { max-width:520px; margin:0 0 6px; line-height:1.75; color:#607069; font-size:16px; }
.service-list { border-top:1px solid var(--line); }
.service-card { min-height:190px; display:grid; grid-template-columns:75px 1.35fr 1fr; align-items:center; gap:38px; border-bottom:1px solid var(--line); transition:background .25s ease,padding .25s ease; }
.service-card:hover { background:#fff; padding-left:20px; padding-right:20px; }
.service-number { width:45px; height:45px; display:grid; place-items:center; border:1px solid #bfcbc4; color:#2a8d69; font:italic 12px Georgia,serif; }
.service-content h3 { margin:0 0 13px; font-size:25px; letter-spacing:-.03em; }
.service-content p { max-width:560px; margin:0; color:#64736d; font-size:14px; line-height:1.7; }
.service-tags { display:flex; gap:7px; flex-wrap:wrap; }
.service-tags span { border:1px solid #cfd6d1; color:#627169; border-radius:20px; padding:7px 11px; font-size:10px; }
.gallery { background:#e8eee9; }
.solution-grid { display:grid; grid-template-columns:1.2fr .9fr .9fr; min-height:430px; gap:16px; }
.solution-card { position:relative; overflow:hidden; padding:30px; display:flex; flex-direction:column; justify-content:space-between; background:#15372d; color:white; }
.solution-card>span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:#9bb0a8; }.solution-card strong { position:relative; z-index:2; font-size:clamp(28px,3.2vw,50px); line-height:1.04; letter-spacing:-.045em; }.solution-card strong em { color:#77d4ad; font-family:Georgia,serif; font-weight:400; }
.solution-symbol { position:absolute; right:-12px; top:25px; color:rgba(216,255,114,.16); font:300px/1 Georgia,serif; }
.solution-mobility { background:#d8ff72; color:var(--ink); }.solution-mobility>span { color:#54715e; }.solution-mobility strong em { color:#227557; }
.charge-line { position:absolute; right:28px; top:55px; display:flex; gap:8px; }.charge-line i { width:8px; height:40px; display:block; background:#12382d; border-radius:5px; }.charge-line i:nth-child(2){height:58px}.charge-line i:nth-child(3){height:28px}
.solution-energy { background:#fff; color:var(--ink); }.solution-energy>span { color:#687a72; }.solution-energy strong em { color:#2e9872; }
.sun-symbol { position:absolute; right:-65px; top:25px; width:220px; height:220px; border:1px solid #a7c2b6; border-radius:50%; box-shadow:0 0 0 32px rgba(47,152,113,.05),0 0 0 64px rgba(47,152,113,.035); }

.statement { background:#0b4a3c; color:white; padding:120px clamp(22px,7vw,108px); display:grid; grid-template-columns:1fr 2fr; gap:8vw; }
.statement-number { font:italic 180px/1 Georgia,serif; color:rgba(255,255,255,.07); }
.statement h2 { max-width:850px; }
.statement p:not(.eyebrow) { max-width:780px; margin:30px 0; color:#b8cec6; font-size:17px; line-height:1.75; }
.statement ul { list-style:none; padding:0; margin:35px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.statement li { display:flex; align-items:center; gap:10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); color:#d6e5df; font-size:12px; }
.statement li svg { color:var(--lime); }

.method { background:#fff; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.steps article { min-height:225px; padding:34px 28px 0 0; border-right:1px solid var(--line); }
.steps article+article { padding-left:28px; }
.steps article:last-child { border-right:0; }
.steps span { font:italic 13px Georgia,serif; color:#2f956f; }
.steps h3 { margin:50px 0 13px; font-size:22px; }.steps p { margin:0; color:#68766f; font-size:13px; line-height:1.65; }

.contact { padding:100px clamp(22px,7vw,108px); background:#13251f; color:white; display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; }
.contact-copy p { color:#a9b9b3; line-height:1.7; margin:0 0 28px; }.button-light { background:white; color:var(--ink); max-width:100%; }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }.contact-links>a:not(.button),.contact-links span { color:#a9b9b3; font-size:13px; }.contact-links>a:not(.button) { border-bottom:1px solid #53635d; padding-bottom:3px; }
footer { background:#0b1713; color:#798983; min-height:190px; padding:52px clamp(22px,7vw,108px); display:grid; grid-template-columns:1fr 1.5fr 1fr auto; gap:30px; align-items:center; font-size:11px; }
.footer-brand { color:white; } footer p { max-width:300px; line-height:1.6; } footer>div { display:flex; gap:22px; }

@media (max-width:900px) {
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:86px; }
  .hero-panel { margin-top:70px; }
  .section-heading,.statement,.contact { grid-template-columns:1fr; }
  .statement-number { display:none; }
  .statement ul { grid-template-columns:1fr; }
  .service-card { grid-template-columns:55px 1fr; padding:25px 0; }
  .service-tags { grid-column:2; }
  .solution-grid { grid-template-columns:1fr 1fr; }.solution-electric { grid-column:1/3; min-height:340px; }
  .steps { grid-template-columns:1fr 1fr; }.steps article:nth-child(2) { border-right:0; }.steps article { border-bottom:1px solid var(--line); }
  footer { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .site-header { height:70px; }.official-brand { width:190px; height:44px; }.official-logo { width:190px; height:81px; }.header-cta { font-size:0; width:42px; height:42px; padding:0; justify-content:center; }.header-cta svg { font-size:15px; }
  .hero { min-height:auto; padding-top:70px; }.hero h1 { font-size:50px; }.hero-lead { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }.hero-panel { height:390px; }.panel-graphic { height:240px; }.orbit-two { width:260px; }
  .trust-strip { overflow:hidden; justify-content:flex-start; }.trust-strip span { white-space:nowrap; }
  .section { padding-top:85px; padding-bottom:85px; }.section-heading { gap:28px; margin-bottom:45px; }
  .service-card { grid-template-columns:45px 1fr; gap:18px; }.service-tags { grid-column:2; }
  .solution-grid { display:block; }.solution-card { min-height:290px; margin-bottom:14px; }
  .steps { grid-template-columns:1fr; }.steps article { border-right:0; padding:28px 0; min-height:170px; }.steps article+article { padding-left:0; }.steps h3 { margin-top:28px; }
  .statement,.contact { padding-top:85px; padding-bottom:85px; }.contact h2 { font-size:43px; }
  footer { grid-template-columns:1fr; padding-top:45px; padding-bottom:45px; } footer>div { order:3; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }