:root {
  --ink: #101615;
  --muted: #63706c;
  --paper: #f4f6f1;
  --white: #ffffff;
  --lime: #c8ff3d;
  --mint: #8de7ca;
  --line: rgba(16, 22, 21, 0.14);
  --display: "Space Grotesk", sans-serif;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
svg { display: block; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 88px; padding: 0 clamp(24px, 4vw, 72px); display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); color: white; }
.brand { display: flex; align-items: center; gap: 12px; font: 700 25px/1 var(--display); }
.brand-mark { width: 27px; height: 27px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transform: skew(-18deg); }
.brand-mark > span { background: var(--lime); }
.brand-mark > span:nth-child(2) { opacity: .65; }
.brand-mark > span:nth-child(3) { opacity: .32; }
.main-nav { display: flex; gap: clamp(24px, 3vw, 48px); margin: auto; font-size: 14px; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--lime); transition: right .25s; }
.main-nav a:hover::after { right: 0; }
.header-cta { height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 700; }
.header-cta svg { width: 17px; }
.menu-toggle { display: none; color: white; border: 0; background: none; padding: 8px; }

.hero { min-height: 760px; height: 100svh; position: relative; overflow: hidden; color: white; display: flex; align-items: center; }
.hero-image { position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1565043589221-1a6fd9ae45c7?auto=format&fit=crop&w=2200&q=88") center 54%/cover; animation: hero-in 1.4s ease-out both; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,14,13,.94) 0%, rgba(6,14,13,.72) 48%, rgba(6,14,13,.35) 100%), linear-gradient(0deg, rgba(4,10,9,.85), transparent 45%); }
.hero-grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, black, transparent 80%); }
.hero-content { z-index: 2; width: min(1000px, 90vw); margin-left: clamp(24px, 8vw, 150px); padding-top: 60px; }
.eyebrow, .kicker { text-transform: uppercase; font-size: 11px; line-height: 1; letter-spacing: .18em; font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lime); margin: 0 0 30px; }
.eyebrow span { width: 26px; height: 1px; background: currentColor; }
.hero h1 { max-width: 1000px; margin: 0; font: 600 clamp(56px, 6.6vw, 108px)/.98 var(--display); letter-spacing: 0; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-copy { width: min(650px, 90%); margin: 32px 0 40px; color: rgba(255,255,255,.76); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; }
.button { min-height: 54px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 700; font-size: 14px; transition: transform .25s, background .25s, color .25s; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; }
.button-primary { background: var(--lime); color: var(--ink); }
.button-primary:hover { background: white; }
.button-ghost { color: white; border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.button-ghost:hover { background: rgba(255,255,255,.1); }
.button-ghost svg { width: 15px; fill: currentColor; }
.hero-status { z-index: 3; position: absolute; right: clamp(24px, 4vw, 72px); bottom: 40px; display: flex; align-items: center; gap: 36px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.18); background: rgba(9,19,17,.62); backdrop-filter: blur(14px); }
.hero-status > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; }
.hero-status .pulse { grid-row: 1/3; align-self: center; }
.pulse { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(200,255,61,.12); animation: pulse 2s infinite; }
.hero-status small { color: rgba(255,255,255,.55); font-size: 10px; }
.hero-status strong { font-size: 12px; }
.status-value { border-left: 1px solid rgba(255,255,255,.18); padding-left: 28px; display: flex; align-items: baseline; gap: 8px; }
.status-value strong { font: 600 28px/1 var(--display); }
.scroll-cue { position: absolute; bottom: 0; left: clamp(24px, 4vw, 72px); z-index: 3; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-bottom: 0; }
.scroll-cue svg { width: 18px; }

.section { padding: clamp(90px, 10vw, 160px) clamp(24px, 8vw, 150px); }
.section-heading { max-width: 850px; }
.kicker { color: #4c655c; margin: 0 0 24px; }
.kicker-light { color: var(--mint); }
.section h2 { margin: 0; font: 600 clamp(42px, 5vw, 78px)/1.03 var(--display); letter-spacing: 0; }
.section h2 span { color: #81908b; }
.section-heading > p:last-child { max-width: 610px; color: var(--muted); font-size: 17px; line-height: 1.75; margin: 28px 0 0; }
.challenge { background: var(--paper); }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 90px; }
.pain-item { min-height: 320px; position: relative; padding: 44px clamp(20px, 3vw, 48px) 42px; border-right: 1px solid var(--line); }
.pain-item:first-child { padding-left: 0; }
.pain-item:last-child { border: 0; }
.pain-item .item-number { display: block; color: #88948f; font-size: 11px; margin-bottom: 50px; }
.pain-item > svg { width: 29px; height: 29px; color: #375b4e; margin-bottom: 22px; }
.pain-item h3 { margin: 0 0 14px; font: 600 23px/1.2 var(--display); }
.pain-item p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.platform { color: white; background: #101716; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 8vw, 130px); align-items: center; overflow: hidden; }
.platform-copy > p:not(.kicker) { color: #a9b4b0; line-height: 1.75; max-width: 520px; margin: 28px 0; }
.platform h2 span { color: var(--lime); }
.check-list { list-style: none; padding: 0; margin: 34px 0; border-top: 1px solid rgba(255,255,255,.14); }
.check-list li { padding: 16px 0; display: flex; gap: 13px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.check-list svg { width: 16px; color: var(--lime); }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--lime); font-size: 13px; font-weight: 700; }
.text-link svg { width: 17px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(5px); }
.system-map { position: relative; aspect-ratio: 1/1; max-width: 700px; width: 100%; margin: auto; background-image: radial-gradient(circle, rgba(141,231,202,.11) 1px, transparent 1px); background-size: 22px 22px; }
.system-map::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(141,231,202,.13); border-radius: 50%; }
.source { position: absolute; z-index: 2; width: 140px; height: 68px; padding: 0 15px; display: grid; grid-template-columns: 32px 1fr; align-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(23,34,32,.92); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.source svg { grid-row: 1/3; width: 22px; color: var(--mint); }
.source span { align-self: end; font: 600 13px var(--display); }
.source small { align-self: start; color: #7f928c; font-size: 9px; }
.source-erp { top: 10%; left: 8%; }.source-machine { top: 8%; right: 4%; }.source-ems { bottom: 13%; left: 5%; }.source-mes { right: 0; bottom: 17%; }
.core-node { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 180px; height: 180px; transform: translate(-50%,-50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #182522; box-shadow: 0 0 70px rgba(141,231,202,.16); }
.core-rings, .core-rings span { position: absolute; inset: 0; border: 1px solid rgba(141,231,202,.18); border-radius: 50%; }
.core-rings span:nth-child(1) { inset: -23px; }.core-rings span:nth-child(2) { inset: -48px; opacity: .6; }.core-rings span:nth-child(3) { inset: -75px; opacity: .3; }
.core-logo { margin-bottom: 13px; }
.core-node strong { font: 600 15px var(--display); }.core-node small { margin-top: 3px; color: #789088; font-size: 9px; }
.map-lines .line { position: absolute; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--mint), transparent); transform-origin: left; opacity: .45; }
.line-a { width: 39%; top: 26%; left: 25%; transform: rotate(35deg); }.line-b { width: 37%; top: 22%; left: 51%; transform: rotate(145deg); }.line-c { width: 39%; top: 69%; left: 22%; transform: rotate(-32deg); }.line-d { width: 37%; top: 70%; left: 54%; transform: rotate(-145deg); }
.map-caption { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #83928e; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.map-caption .pulse { width: 5px; height: 5px; margin-right: 10px; }

.solutions { background: #e9ede6; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1fr 400px; align-items: end; gap: 50px; }
.split-heading > p:last-child { margin: 0 0 7px; }
.solution-grid { margin-top: 80px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.solution-card { min-height: 500px; padding: 38px; background: var(--white); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.solution-card.featured { grid-row: span 2; min-height: 760px; background: #17201e; color: white; }
.card-copy > span { color: #718079; font-size: 9px; letter-spacing: .16em; }
.card-copy h3 { font: 600 clamp(25px, 2.2vw, 36px)/1.15 var(--display); margin: 14px 0; }
.card-copy p { max-width: 490px; color: #74817c; font-size: 13px; line-height: 1.65; }
.featured .card-copy p { color: #8e9c97; }
.energy-chart { margin: 30px 0 70px; }
.chart-label { display: flex; justify-content: space-between; align-items: end; }
.chart-label span { color: #81908b; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.chart-label strong { color: var(--lime); font: 600 32px var(--display); }
.energy-chart svg { width: 100%; height: 260px; margin-top: 30px; overflow: visible; }
.energy-chart .area { fill: url(#none); fill: rgba(200,255,61,.06); }.energy-chart .curve { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.metric-visual { padding: 10px 0 25px; display: flex; flex-direction: column; align-items: flex-end; }
.metric-visual > span { width: 100%; color: #7d8985; font-size: 10px; letter-spacing: .12em; }
.metric-visual strong { font: 600 clamp(70px, 8vw, 126px)/1 var(--display); letter-spacing: 0; }.metric-visual strong span { color: #89948f; font-size: .35em; }
.metric-visual small { display: flex; gap: 6px; color: #47715f; font-size: 10px; }.metric-visual svg { width: 13px; }
.flow-visual { padding: 12px 0 40px; color: #73817b; font-size: 10px; }
.flow-visual div { position: relative; display: flex; justify-content: space-between; margin: 40px 15px 20px; }
.flow-visual div::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: #d4dad5; }
.flow-visual i { position: relative; z-index: 1; width: 16px; height: 16px; border: 4px solid white; background: #8d9b95; border-radius: 50%; box-shadow: 0 0 0 1px #8d9b95; }
.flow-visual i:last-child { background: var(--lime); box-shadow: 0 0 0 1px #76911f; }

.process { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(60px, 9vw, 150px); background: var(--paper); }
.process-intro { position: sticky; top: 100px; align-self: start; }
.process-intro > p:last-child { color: var(--muted); line-height: 1.7; max-width: 430px; margin-top: 30px; }
.process-steps { border-top: 1px solid var(--line); }
.process-step { min-height: 220px; display: grid; grid-template-columns: 45px 80px 1fr; gap: 25px; align-items: center; border-bottom: 1px solid var(--line); }
.process-step > span { align-self: start; margin-top: 42px; color: #89948f; font-size: 10px; }
.step-icon { width: 66px; height: 66px; display: grid; place-items: center; background: #e1e7df; border-radius: 50%; }
.step-icon svg { width: 25px; color: #35594b; }
.process-step h3 { margin: 0 0 12px; font: 600 25px var(--display); }.process-step p { margin: 0; max-width: 480px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.proof { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; color: white; background: #13201c; }
.proof-image { min-height: 620px; background: linear-gradient(rgba(8,20,16,.12),rgba(8,20,16,.35)), url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1400&q=88") center/cover; }
.proof-content { padding: clamp(70px, 9vw, 140px) clamp(40px, 8vw, 130px); display: flex; flex-direction: column; justify-content: center; }
.proof blockquote { margin: 28px 0; font: 500 clamp(30px, 3vw, 48px)/1.18 var(--display); }
.proof-content > p:not(.kicker) { color: #9faca7; font-size: 14px; line-height: 1.8; max-width: 580px; }
.proof-stats { margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.14); display: flex; gap: 70px; }
.proof-stats div { display: flex; flex-direction: column; }.proof-stats strong { color: var(--lime); font: 600 33px var(--display); }.proof-stats span { margin-top: 5px; color: #8f9c97; font-size: 10px; text-transform: uppercase; }

.contact { background: var(--lime); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(70px, 12vw, 190px); }
.contact h2 { font-size: clamp(46px, 5vw, 78px); }.contact h2 span { color: #53681e; }
.contact-copy > p:not(.kicker) { max-width: 550px; margin: 30px 0; line-height: 1.7; }
.contact-copy > a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid; font-weight: 700; }.contact-copy > a svg { width: 17px; }
.contact-form { padding: 42px; background: white; box-shadow: 0 24px 80px rgba(45,59,8,.15); }
.contact-form label { display: block; margin-bottom: 23px; }.contact-form label > span { display: flex; justify-content: space-between; margin-bottom: 8px; text-transform: uppercase; font-size: 9px; letter-spacing: .12em; font-weight: 700; }.contact-form label small { color: #87918d; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid #cdd3cf; border-radius: 0; padding: 10px 0 13px; outline: none; color: var(--ink); background: transparent; font-size: 14px; transition: border-color .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--ink); }.contact-form textarea { resize: vertical; }
.button-dark { width: 100%; color: white; background: var(--ink); }.button-dark:hover { background: #314039; }
.form-note { margin: 14px 0 0; color: #73807a; text-align: center; font-size: 10px; }.form-note.success { color: #2d6a4f; font-weight: 700; }

.site-footer { padding: 75px clamp(24px, 8vw, 150px) 28px; color: white; background: #0d1312; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; padding-bottom: 70px; }.footer-brand .brand-mark { width: 24px; height: 24px; }.footer-main > p { margin: 0; color: #7e8a86; font: 500 21px/1.4 var(--display); }.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px; }.footer-nav a:hover { color: var(--lime); }
.footer-meta { display: flex; justify-content: space-between; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); color: #69736f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.footer-meta div { display: flex; gap: 28px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes hero-in { from { transform: scale(1.05); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(200,255,61,0); } }

@media (max-width: 960px) {
  .site-header { height: 72px; }.main-nav, .header-cta { display: none; }.menu-toggle { display: block; margin-left: auto; }
  .main-nav.open { position: fixed; inset: 72px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; color: white; background: rgba(10,18,16,.98); font: 600 28px var(--display); }
  .hero { min-height: 720px; }.hero-content { margin-left: 7vw; }.hero-status { display: none; }
  .platform, .process { grid-template-columns: 1fr; }.platform-copy { max-width: 650px; }.system-map { max-width: 620px; }
  .solution-grid { grid-template-columns: 1fr 1fr; }.solution-card.featured { grid-column: 1/-1; grid-row: auto; min-height: 630px; }.energy-chart svg { height: 200px; }
  .process-intro { position: static; }.proof { grid-template-columns: .85fr 1.15fr; }.contact { gap: 50px; }
}

@media (max-width: 700px) {
  .site-header { padding: 0 20px; }.brand { font-size: 22px; }.brand-mark { width: 23px; height: 23px; }
  .hero { min-height: 680px; align-items: flex-end; padding-bottom: 105px; }.hero-image { background-position: 58% center; }.hero-overlay { background: linear-gradient(0deg, rgba(5,13,11,.97) 0%, rgba(5,13,11,.68) 75%, rgba(5,13,11,.45)); }.hero-content { width: auto; margin: 0 20px; padding: 0; }.hero h1 { font-size: clamp(43px, 12vw, 62px); }.hero-copy { width: 100%; margin: 24px 0 30px; font-size: 15px; line-height: 1.55; }.eyebrow { margin-bottom: 22px; }.hero-actions { flex-direction: column; align-items: stretch; }.button { min-height: 52px; }.scroll-cue { display: none; }
  .section { padding: 82px 20px; }.section h2 { font-size: clamp(38px, 11vw, 54px); }.section-heading > p:last-child { font-size: 15px; }
  .pain-grid { grid-template-columns: 1fr; margin-top: 55px; }.pain-item, .pain-item:first-child { min-height: 260px; padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line); }.pain-item:last-child { border-bottom: 0; }.pain-item .item-number { margin-bottom: 30px; }
  .platform { gap: 60px; }.system-map { width: 110%; margin-left: -5%; }.source { width: 105px; height: 57px; grid-template-columns: 27px 1fr; padding: 0 10px; }.source svg { width: 18px; }.core-node { width: 125px; height: 125px; }.core-rings span:nth-child(1) { inset: -16px; }.core-rings span:nth-child(2) { inset: -32px; }.core-rings span:nth-child(3) { inset: -48px; }.core-logo .brand-mark { width: 20px; height: 20px; }.core-node strong { font-size: 12px; }.map-caption { bottom: -12px; font-size: 7px; }
  .split-heading { grid-template-columns: 1fr; gap: 25px; }.solution-grid { margin-top: 50px; grid-template-columns: 1fr; }.solution-card, .solution-card.featured { grid-column: auto; min-height: 470px; padding: 26px; }.solution-card.featured { min-height: 570px; }.energy-chart svg { height: 150px; }.metric-visual strong { font-size: 76px; }
  .process-step { grid-template-columns: 35px 55px 1fr; gap: 12px; min-height: 235px; }.step-icon { width: 50px; height: 50px; }.step-icon svg { width: 20px; }.process-step h3 { font-size: 21px; }
  .proof { grid-template-columns: 1fr; }.proof-image { min-height: 430px; }.proof-content { padding: 75px 20px; }.proof-stats { gap: 30px; }.proof-stats strong { font-size: 27px; }
  .contact { grid-template-columns: 1fr; gap: 50px; }.contact-form { padding: 28px 22px; }.contact h2 { font-size: 44px; }
  .site-footer { padding: 60px 20px 25px; }.footer-main { grid-template-columns: 1fr; gap: 38px; }.footer-nav { max-width: 250px; }.footer-meta { gap: 20px; flex-direction: column; }.footer-meta div { flex-wrap: wrap; gap: 18px; }
}

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