:root {
  --ink: #0c1312;
  --dark: #111918;
  --deep: #182220;
  --acid: #eefa56;
  --acid-soft: #dfea70;
  --mist: #e9eee8;
  --paper: #f2f3ed;
  --line: rgba(11, 19, 18, .15);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --display: "Outfit", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.noise {
  position: fixed; inset: 0; z-index: 100;
  opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center;
  background: var(--dark); color: var(--acid); text-align: center;
}
.loader__mark { display: flex; gap: 2px; justify-content: center; margin-bottom: 26px; }
.loader__mark span { width: 28px; height: 16px; background: var(--acid); transform: skewX(-35deg); }
.loader__mark span:last-child { transform: skewX(-35deg) translateY(9px); }
.loader__line { width: 180px; height: 1px; background: #35403d; overflow: hidden; }
.loader__line i { display: block; height: 100%; width: 0; background: var(--acid); }
.loader p { margin-top: 12px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .22em; }

.site-header {
  position: absolute; top: 0; left: 0; width: 100%; height: 96px; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 5vw; color: white; border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand svg { width: 31px; fill: none; stroke: var(--acid); stroke-width: 2; }
.brand > span { font: 500 24px var(--display); letter-spacing: -.04em; }
.brand sup { color: var(--acid); font: 8px var(--mono); letter-spacing: .08em; margin-left: 4px; vertical-align: top; }
.desktop-nav { display: flex; gap: 42px; font-size: 13px; }
.desktop-nav a { opacity: .75; transition: .3s; position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--acid); transition: .3s; }
.desktop-nav a:hover { opacity: 1; }
.desktop-nav a:hover::after { right: 0; }
.header-cta {
  justify-self: end; display: flex; align-items: center; gap: 24px;
  background: var(--acid); color: var(--ink); padding: 14px 18px 14px 22px;
  font-size: 12px; font-weight: 700; border-radius: 2px;
}
.header-cta svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu-toggle { display: none; background: none; border: 0; }

.hero { position: relative; min-height: 100svh; height: 850px; color: white; overflow: hidden; }
.hero__media, .hero__media img, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; transform: scale(1.06); }
.hero__veil { background: linear-gradient(90deg, rgba(7,14,13,.91) 0%, rgba(7,14,13,.54) 43%, rgba(7,14,13,.04) 72%), linear-gradient(0deg, rgba(7,14,13,.78) 0%, transparent 45%); }
.sun-glow { position: absolute; width: 380px; height: 380px; left: 53%; top: 42%; border-radius: 50%; background: rgba(238,250,86,.08); filter: blur(70px); }
.hero__grid { position: absolute; inset: 96px 0 0; opacity: .19; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 8.34vw 100%, 100% 25%; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.hero__content { position: absolute; z-index: 2; left: 8.3vw; top: 24%; max-width: 690px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.72); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 6px rgba(238,250,86,.12); }
.hero h1 { font: 300 clamp(62px, 7.7vw, 124px)/.82 var(--display); letter-spacing: -.065em; }
.hero h1 .line { display: block; overflow: hidden; padding: 0 .08em .08em 0; }
.hero h1 .line > span { display: block; }
.hero h1 .accent-line { color: var(--acid); font-style: italic; font-weight: 400; }
.hero__copy { max-width: 510px; margin-top: 30px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }
.hero__actions { display: flex; align-items: center; gap: 35px; margin-top: 35px; }
.primary-button { min-width: 236px; display: flex; justify-content: space-between; align-items: center; background: var(--acid); color: var(--ink); padding: 18px 18px 18px 22px; border: 0; cursor: pointer; font-size: 12px; font-weight: 700; }
.button-icon { display: grid; place-items: center; width: 29px; height: 29px; background: var(--ink); color: white; }
.text-link { font-size: 12px; padding-bottom: 8px; position: relative; }
.text-link i { position: absolute; height: 1px; background: rgba(255,255,255,.5); left: 0; right: 0; bottom: 0; transform-origin: left; }

.glass-card { background: rgba(21,34,32,.55); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(16px); }
.energy-card { position: absolute; z-index: 3; right: 5vw; bottom: 9%; width: 320px; padding: 22px; }
.energy-card__top { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.65); }
.live { font: 8px var(--mono); color: var(--acid); letter-spacing: .1em; }
.live i { display: inline-block; width: 5px; height: 5px; background: var(--acid); border-radius: 50%; margin-right: 5px; }
.energy-card__value { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.energy-card__value strong { font: 300 50px var(--display); letter-spacing: -.04em; }
.energy-card__value span { font: 11px var(--mono); color: var(--acid); }
.sparkline { height: 72px; margin: 2px 0 10px; }
.sparkline svg { width: 100%; height: 100%; overflow: visible; }
.sparkline .area { fill: url(#areaGradient); }
.sparkline .line-path { fill: none; stroke: var(--acid); stroke-width: 1.5; }
.energy-card__stats { border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; display: flex; justify-content: space-between; }
.energy-card__stats span { display: flex; flex-direction: column; gap: 5px; font-size: 8px; color: rgba(255,255,255,.45); text-transform: uppercase; }
.energy-card__stats strong { color: white; font: 10px var(--mono); }
.hero__badge { position: absolute; z-index: 3; top: 24%; right: 7.5vw; display: flex; align-items: center; gap: 10px; }
.hero__badge > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--acid); }
.hero__badge div { display: flex; flex-direction: column; }
.hero__badge strong { font: 500 19px var(--display); }
.hero__badge small { color: rgba(255,255,255,.5); font-size: 9px; }
.scroll-hint { position: absolute; z-index: 4; left: 5vw; bottom: 6%; display: flex; align-items: center; gap: 14px; transform: rotate(-90deg); transform-origin: left bottom; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.45); }
.scroll-hint i { display: block; width: 50px; height: 1px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: var(--acid); animation: scan 2s infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.impact, .results { padding: 130px 8.3vw; }
.section-label { display: flex; gap: 25px; align-items: center; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.section-label span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; }
.section-label p { color: #5e6965; }
.impact__intro, .results__header { margin: 70px 0 85px; display: grid; grid-template-columns: 2fr 1fr; gap: 10vw; align-items: end; }
.impact h2, .technology h2, .results h2, .simulator h2 { font: 300 clamp(48px, 5.2vw, 84px)/.98 var(--display); letter-spacing: -.05em; }
h2 em { color: #7a8883; font-weight: 300; }
.impact__intro > p, .results__header > p { color: #69736f; font-size: 14px; line-height: 1.8; max-width: 430px; }
.journey { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-card { min-height: 460px; position: relative; padding: 48px 38px; overflow: hidden; border-right: 1px solid var(--line); transition: color .45s, background .45s; }
.journey-card:last-child { border-right: 0; }
.journey-card:hover, .journey-card.featured { background: var(--dark); color: white; }
.journey-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; margin-bottom: 58px; }
.journey-card:hover .journey-card__icon, .journey-card.featured .journey-card__icon { border-color: rgba(255,255,255,.25); }
.journey-card__icon svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.journey-card > span { font: 8px var(--mono); letter-spacing: .12em; color: #89938f; }
.journey-card h3 { margin: 15px 0 22px; font: 400 30px/1.1 var(--display); letter-spacing: -.03em; }
.journey-card p { max-width: 290px; font-size: 12px; line-height: 1.7; color: #7c8783; }
.journey-card.featured p { color: rgba(255,255,255,.55); }
.card-orbit { position: absolute; right: -90px; bottom: -120px; width: 270px; height: 270px; border: 1px solid var(--line); border-radius: 50%; }
.card-orbit::before, .card-orbit::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; inset: 30px; }
.card-orbit::after { inset: 70px; background: var(--acid); opacity: .7; }
.mini-panels { position: absolute; right: -15px; bottom: -24px; display: grid; grid-template-columns: repeat(3, 62px); gap: 4px; transform: rotate(-12deg) skewY(8deg); }
.mini-panels i { height: 94px; background: linear-gradient(135deg,#243633,#111a19); border: 1px solid #4c5e59; box-shadow: inset 0 0 0 3px #162320; }

.technology { height: 100vh; min-height: 760px; background: var(--dark); color: white; overflow: hidden; }
.tech-sticky { height: 100%; position: relative; display: grid; grid-template-columns: 42% 58%; align-items: center; padding: 0 8.3vw; }
.section-label.light span { border-color: rgba(255,255,255,.2); }
.section-label.light p { color: rgba(255,255,255,.5); }
.tech-copy h2 { margin: 65px 0 30px; }
.tech-copy h2 em { color: var(--acid); }
.tech-copy > p { max-width: 360px; color: rgba(255,255,255,.5); line-height: 1.8; font-size: 13px; }
.panel-visual { height: 80%; position: relative; perspective: 1100px; }
.solar-panel { position: absolute; width: 470px; height: 560px; left: 52%; top: 50%; transform: translate(-50%,-50%) rotateX(58deg) rotateZ(-30deg); background: #142823; border: 8px solid #41504c; box-shadow: -50px 70px 80px rgba(0,0,0,.45), inset 0 0 70px rgba(87,155,139,.15); overflow: hidden; }
.cells { position: absolute; inset: 8px; background-image: linear-gradient(rgba(163,210,196,.25) 2px, transparent 2px), linear-gradient(90deg, rgba(163,210,196,.25) 2px, transparent 2px), radial-gradient(circle at 70% 20%, #284c43, #12211e 60%); background-size: 100% 70px, 77px 100%, 100% 100%; }
.scanner { position: absolute; left: 0; width: 100%; height: 70px; background: linear-gradient(transparent, rgba(238,250,86,.16), var(--acid)); filter: blur(1px); opacity: .8; }
.panel-glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; transform: translate(-50%,-50%); background: rgba(238,250,86,.13); filter: blur(90px); border-radius: 50%; }
.tech-tag { position: absolute; display: flex; align-items: center; gap: 12px; z-index: 3; }
.tech-tag i { width: 9px; height: 9px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 0 7px rgba(238,250,86,.1); }
.tech-tag span { padding: 12px 16px; min-width: 120px; background: rgba(24,34,32,.75); border: 1px solid rgba(255,255,255,.17); backdrop-filter: blur(10px); font: 12px var(--mono); }
.tech-tag small { display: block; color: rgba(255,255,255,.45); font: 7px var(--mono); text-transform: uppercase; margin-bottom: 4px; }
.tag-one { top: 20%; left: 3%; }
.tag-two { right: -4%; top: 41%; }
.tag-three { bottom: 15%; left: 14%; }

.results { background: var(--paper); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metric { padding: 50px 25px 20px 0; border-right: 1px solid var(--line); min-height: 210px; }
.metric + .metric { padding-left: 30px; }
.metric:last-child { border-right: 0; }
.metric strong { font: 300 clamp(48px, 5vw, 78px) var(--display); letter-spacing: -.06em; }
.metric sup { color: #8a9591; font: 300 18px var(--display); }
.metric span { display: block; margin-top: 28px; color: #69736f; font-size: 11px; }

.simulator { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: center; padding: 100px 8.3vw; position: relative; overflow: hidden; background: var(--acid); }
.simulator__orb { position: absolute; width: 650px; height: 650px; border-radius: 50%; border: 1px solid rgba(12,19,18,.12); left: -280px; bottom: -400px; box-shadow: 0 0 0 70px rgba(12,19,18,.03), 0 0 0 140px rgba(12,19,18,.02); }
.tiny-label { font: 9px var(--mono); letter-spacing: .13em; }
.simulator h2 { margin: 45px 0 30px; }
.simulator h2 em { color: rgba(12,19,18,.5); }
.simulator__copy p { max-width: 460px; line-height: 1.7; font-size: 13px; }
.solar-form { position: relative; z-index: 2; background: var(--paper); padding: 45px; box-shadow: 18px 18px 0 rgba(12,19,18,.1); }
.solar-form > label { display: block; font-size: 11px; color: #6b7571; margin-bottom: 25px; }
.input-wrap { display: flex; align-items: baseline; border-bottom: 1px solid #a5ada8; padding-bottom: 8px; }
.input-wrap span { font: 15px var(--mono); color: #7e8985; }
.input-wrap input { width: 100%; border: 0; background: none; outline: 0; font: 300 60px var(--display); letter-spacing: -.05em; padding-left: 12px; color: var(--ink); }
.range { width: 100%; height: 2px; margin-top: 30px; appearance: none; background: linear-gradient(to right, var(--ink) 19%, #cdd2cc 19%); }
.range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--acid); border: 4px solid var(--ink); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font: 8px var(--mono); color: #939b97; margin-top: 9px; }
.estimate { margin: 35px 0 25px; padding: 20px; background: #e6e9e2; display: flex; justify-content: space-between; align-items: center; }
.estimate > span { max-width: 120px; font-size: 9px; line-height: 1.4; color: #68716d; }
.estimate strong { font: 400 23px var(--display); }
.estimate b { font-weight: 500; }
.primary-button.dark { width: 100%; max-width: none; background: var(--ink); color: white; }
.primary-button.dark .button-icon { background: var(--acid); color: var(--ink); }

footer { background: var(--ink); color: white; padding: 90px 8.3vw 30px; }
.footer-brand { display: flex; justify-content: space-between; align-items: start; padding-bottom: 80px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand--footer > span { font-size: 30px; }
.footer-brand > p { text-align: right; font: 300 34px/1.1 var(--display); color: rgba(255,255,255,.65); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 80px; margin: 70px 0; margin-left: 40%; }
.footer-links div { display: flex; flex-direction: column; gap: 12px; font-size: 11px; }
.footer-links div > span { font: 8px var(--mono); color: var(--acid); margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.55); transition: .25s; }
.footer-links a:hover { color: white; transform: translateX(3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 25px; display: flex; justify-content: space-between; color: rgba(255,255,255,.35); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .07em; }

.cursor-dot, .cursor-ring { position: fixed; pointer-events: none; z-index: 999; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 5px; height: 5px; background: var(--acid); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(238,250,86,.7); transition: width .2s, height .2s, background .2s; }
.cursor-ring.hovered { width: 54px; height: 54px; background: rgba(238,250,86,.1); }

@media (max-width: 900px) {
  .site-header { height: 74px; grid-template-columns: 1fr auto; padding: 0 24px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; flex-direction: column; gap: 6px; }
  .menu-toggle span { width: 26px; height: 1px; background: white; }
  .hero { height: 780px; }
  .hero__grid { top: 74px; }
  .hero__media img { object-position: 62% center; }
  .hero__veil { background: linear-gradient(90deg, rgba(7,14,13,.9), rgba(7,14,13,.28)), linear-gradient(0deg, rgba(7,14,13,.85), transparent 60%); }
  .hero__content { left: 24px; right: 24px; top: 20%; }
  .hero h1 { font-size: clamp(54px, 15vw, 78px); }
  .hero__copy { font-size: 13px; max-width: 420px; }
  .hero__badge, .scroll-hint { display: none; }
  .energy-card { left: 24px; right: auto; bottom: 30px; width: calc(100% - 48px); }
  .hero__actions { margin-top: 28px; }
  .impact, .results { padding: 90px 24px; }
  .impact__intro, .results__header { grid-template-columns: 1fr; margin: 55px 0; gap: 25px; }
  .journey { grid-template-columns: 1fr; }
  .journey-card { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line); }
  .technology { height: auto; min-height: 900px; }
  .tech-sticky { grid-template-columns: 1fr; padding: 80px 24px; }
  .panel-visual { height: 520px; }
  .solar-panel { width: 330px; height: 400px; }
  .tag-two { right: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-top: 1px solid var(--line); }
  .simulator { grid-template-columns: 1fr; padding: 90px 24px; }
  .footer-links { margin-left: 0; }
  .cursor-dot, .cursor-ring { display: none; }
}

@media (max-width: 560px) {
  .brand > span { font-size: 21px; }
  .hero { height: 850px; }
  .hero__content { top: 15%; }
  .hero h1 { font-size: 16vw; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .primary-button { width: 100%; }
  .energy-card { bottom: 22px; }
  .impact h2, .technology h2, .results h2, .simulator h2 { font-size: 12vw; }
  .journey-card { padding: 40px 28px; }
  .solar-panel { width: 270px; height: 340px; }
  .tag-one { left: 0; }
  .tag-three { left: 2%; }
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric + .metric { border-right: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .solar-form { padding: 28px 22px; }
  .input-wrap input { font-size: 50px; }
  .estimate { align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-brand { flex-direction: column; gap: 45px; }
  .footer-brand > p { text-align: left; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 45px 20px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}