:root {
  --night: #07150f;
  --night-2: #0c2118;
  --forest: #123b29;
  --leaf: #32d17f;
  --leaf-bright: #7af2ad;
  --mint: #c9f7d8;
  --cream: #f5f0e4;
  --paper: #fcfaf4;
  --ink: #10231a;
  --muted: #6f7c75;
  --line: rgba(14, 48, 32, 0.14);
  --gold: #e9c464;
  --radius: 30px;
  --shadow: 0 30px 90px rgba(4, 25, 15, 0.18);
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); overflow-x: hidden; }
body.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; border-radius: 999px; background: white; color: var(--night); }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; z-index: 50; top: 18px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 30px)); min-height: 66px; padding: 10px 12px 10px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: white; background: rgba(7,21,15,.72); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 18px 70px rgba(0,0,0,.2); transition: background .3s, top .3s; }
.site-header.scrolled { top: 10px; background: rgba(7,21,15,.9); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.045em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--leaf-bright); background: rgba(122,242,173,.09); }
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a { font-size: .82rem; color: rgba(255,255,255,.66); font-weight: 700; transition: color .2s; }
.desktop-nav a:hover { color: white; }
.system-button { border: 0; border-radius: 999px; background: white; color: var(--night); padding: 11px 12px 11px 18px; display: inline-flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 800; cursor: pointer; }
.system-count { min-width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: var(--night); font-family: var(--mono); font-size: .72rem; }

.hero { min-height: 100svh; position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(30px, 6vw, 90px); padding: 145px max(6vw, 30px) 80px; color: white; background: radial-gradient(circle at 78% 35%, rgba(49,209,127,.16), transparent 25%), radial-gradient(circle at 20% 85%, rgba(88,140,104,.16), transparent 32%), linear-gradient(145deg, #06100c, #0b1e15 54%, #07130e); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to right, transparent, black 60%); }
.hero-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; right: -260px; bottom: -330px; border: 1px solid rgba(122,242,173,.12); box-shadow: 0 0 0 90px rgba(122,242,173,.025), 0 0 0 180px rgba(122,242,173,.02); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.eyebrow { margin: 0 0 22px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--leaf-bright); }
.eyebrow.dark { color: #168750; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf-bright); box-shadow: 0 0 0 0 rgba(122,242,173,.55); animation: livePulse 2s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 10px rgba(122,242,173,0); } 100% { box-shadow: 0 0 0 0 rgba(122,242,173,0); } }
.hero h1 { margin: 0; max-width: 800px; font-size: clamp(3.5rem, 6.7vw, 7.7rem); line-height: .88; letter-spacing: -.075em; font-weight: 600; }
.hero h1 em { color: var(--leaf-bright); font-style: normal; }
.hero-lead { margin: 32px 0 0; max-width: 590px; color: rgba(255,255,255,.68); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; }
.hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: .84rem; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--night); background: var(--leaf-bright); box-shadow: 0 14px 36px rgba(50,209,127,.15); }
.button-primary:hover { background: #9affc2; box-shadow: 0 18px 50px rgba(50,209,127,.23); }
.button-ghost { color: white; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.button-light { color: var(--forest); background: white; border-color: rgba(255,255,255,.4); }
.button.large { min-height: 60px; padding-inline: 30px; font-size: .92rem; }
.hero-proof { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 24px; color: rgba(255,255,255,.46); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }

.garden-stage { position: relative; justify-self: stretch; min-height: 650px; border: 1px solid rgba(255,255,255,.09); border-radius: 50% 50% 38% 42% / 45% 45% 55% 55%; background: radial-gradient(circle at 50% 46%, rgba(33,89,58,.54), rgba(5,19,13,.25) 55%, rgba(2,10,7,.86)); box-shadow: inset 0 0 120px rgba(122,242,173,.05), 0 60px 100px rgba(0,0,0,.28); isolation: isolate; }
.garden-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 12%; height: 21%; border-radius: 50%; background: radial-gradient(ellipse, rgba(9,5,2,.92), rgba(9,5,2,.35) 65%, transparent 66%); z-index: -1; }
.orbit { position: absolute; border: 1px dashed rgba(122,242,173,.2); border-radius: 50%; animation: orbitSpin 40s linear infinite; }
.orbit-one { inset: 17% 14%; }
.orbit-two { inset: 28% 25%; animation-direction: reverse; animation-duration: 25s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.communication-map { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.comm-line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-width: 1.35; stroke-dasharray: 3 7; animation: commFlow 1.8s linear infinite; }
.sensor-comm { stroke: rgba(122,242,173,.56); }
.command-comm { stroke: rgba(126,220,255,.72); stroke-width: 1.6; animation-duration: 1.3s; }
.communication-map marker path { fill: rgba(122,242,173,.8); }
.comm-packet { filter: url(#comm-glow); }
.sensor-packet { fill: #8bffbd; }
.command-packet { fill: #8de2ff; }
@keyframes commFlow { to { stroke-dashoffset: -20; } }
.plant { position: absolute; bottom: 10%; width: 190px; height: 360px; transform-origin: bottom center; animation: plantSway 7s ease-in-out infinite; filter: drop-shadow(0 22px 24px rgba(0,0,0,.22)); }
.plant-left { left: 4%; }
.plant-right { right: 1%; transform: scale(.82); animation-delay: -3s; }
@keyframes plantSway { 0%,100% { rotate: -1deg; } 50% { rotate: 2deg; } }
.plant-svg { width: 100%; height: 100%; overflow: visible; }
.plant-right .plant-svg { transform: scaleX(-1); }
.plant-stem,.plant-branch { fill: none; stroke: #3bb978; stroke-linecap: round; stroke-linejoin: round; }
.plant-stem { stroke-width: 8; }
.plant-branch { stroke-width: 4.5; opacity: .9; }
.plant-leaf { stroke: rgba(132,245,180,.28); stroke-width: 1.5; }
.plant-leaf.leaf-deep { fill: #1d7048; }
.plant-leaf.leaf-bright { fill: #3bb978; }
.plant-leaf.leaf-top { fill: #63dfa0; }
.plant-vein { fill: none; stroke: rgba(210,255,226,.42); stroke-width: 1.5; stroke-linecap: round; }
.device-node { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 7px; border: 0; color: rgba(255,255,255,.74); background: transparent; cursor: pointer; }
.node-icon { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; color: var(--leaf-bright); background: rgba(4,20,13,.88); backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,.27); font-family: var(--mono); font-size: .95rem; font-weight: 600; transition: transform .2s, background .2s, border-color .2s; }
.device-node:hover .node-icon,.device-node.active .node-icon { transform: translateY(-3px); background: #133a27; border-color: var(--leaf-bright); }
.node-label { padding: 6px 9px; border-radius: 99px; color: rgba(255,255,255,.76); background: rgba(6,18,13,.72); font: 550 .7rem var(--mono); white-space: nowrap; }
.node-label-detail { display: grid; gap: 3px; min-width: 120px; border-radius: 12px; text-align: left; line-height: 1.15; white-space: normal; }
.node-label-detail strong { color: rgba(255,255,255,.82); font: inherit; }
.node-label-detail small { color: rgba(255,255,255,.59); font: 500 .59rem var(--mono); }
.sensor-label { display: flex; align-items: center; gap: 9px; border-radius: 11px; }
.sensor-label > span { display: flex; align-items: center; gap: 3px; }
.sensor-label strong { color: rgba(255,255,255,.9); font: inherit; }
.light-reading { color: #ffe38a; }
.sensor-sun { position: relative; width: 15px; height: 15px; display: inline-block; flex: 0 0 15px; }
.sensor-sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg,#ffe38a 0 6deg,transparent 6deg 45deg); filter: drop-shadow(0 0 4px rgba(255,216,101,.48)); animation: sunRays 7s linear infinite; }
.sensor-sun::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #ffe38a; box-shadow: 0 0 7px rgba(255,216,101,.75); }
@keyframes sunRays { to { rotate: 360deg; } }
.node-hub { left: 45%; top: 39%; }
.node-hub .node-icon { width: 70px; height: 70px; border-radius: 22px; font-size: 1.12rem; }
.node-sensor { left: 15%; top: 54%; }
.node-sensor-two { left: auto; right: 5%; top: 52%; }
.node-pod { right: 13%; top: 35%; }
.node-controller { right: 27%; bottom: 19%; }
.node-tank { left: 31%; top: 17%; }
.node-pulse { position: absolute; width: 72px; height: 72px; top: -1px; border: 1px solid rgba(122,242,173,.3); border-radius: 24px; animation: nodePulse 2.3s ease-out infinite; }
@keyframes nodePulse { to { scale: 1.6; opacity: 0; } }
.valve-mist { position: absolute; z-index: 0; left: calc(50% + 17px); top: 11px; width: 108px; height: 58px; pointer-events: none; }
.valve-mist::before { content: ""; position: absolute; left: 2px; top: 13px; width: 95px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse at left,rgba(144,226,255,.48),rgba(119,213,247,.16) 42%,transparent 73%); filter: blur(5px); rotate: -5deg; animation: mistCloud 1.8s ease-in-out infinite; }
.valve-mist i { position: absolute; left: 4px; top: 27px; width: 3px; height: 3px; border-radius: 50%; background: #a8eaff; box-shadow: 0 0 7px rgba(133,224,255,.9); animation: valveMist 1.35s ease-out infinite; animation-delay: var(--mist-delay); }
@keyframes valveMist { 0% { translate: 0 0; scale: .5; opacity: 0; } 15% { opacity: .9; } 75% { opacity: .55; } 100% { translate: var(--mist-x) var(--mist-y); scale: 1.45; opacity: 0; } }
@keyframes mistCloud { 0%,100% { opacity: .42; scale: .88; } 50% { opacity: .78; scale: 1.06; } }
.garden-readout { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 3.5%; padding: 13px 14px; display: grid; grid-template-columns: .78fr 1.2fr auto; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(4,16,11,.82); backdrop-filter: blur(16px); }
.garden-readout span { display: block; color: rgba(255,255,255,.48); font: .67rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.garden-readout strong { display: block; margin-top: 4px; color: white; font-size: .94rem; }
.garden-readout p { margin: 0; color: rgba(255,255,255,.61); font-size: .8rem; line-height: 1.5; }
.automation-actions { display: grid; grid-template-columns: repeat(3,54px); gap: 6px; }
.automation-action { min-height: 55px; padding: 5px 3px 4px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.035); }
.automation-action small { color: rgba(255,255,255,.64); font: 500 .54rem var(--mono); white-space: nowrap; }
.action-symbol { position: relative; width: 30px; height: 27px; }
.light-symbol::before { content: ""; position: absolute; z-index: 2; left: 8px; top: 1px; width: 14px; height: 7px; border-radius: 7px 7px 3px 3px; background: #cbd8d1; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.light-symbol::after { content: ""; position: absolute; left: 3px; top: 7px; width: 24px; height: 20px; background: linear-gradient(180deg,rgba(255,237,130,.78),rgba(255,226,107,0)); clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); transform-origin: 50% 0; animation: growLightCycle 5.6s steps(1,end) infinite; }
.fan-symbol { display: grid!important; place-items: center; border: 1px solid rgba(157,217,255,.35); border-radius: 50%; background: rgba(119,195,235,.07); }
.fan-symbol i { color: #9edcff; font-style: normal; font-size: 1.15rem; line-height: 1; text-shadow: 0 0 7px rgba(113,205,255,.7); animation: fanCycle 5.6s ease-in-out infinite; }
.heater-symbol { display: flex!important; align-items: center; justify-content: center; gap: 4px; }
.heater-symbol i { width: 4px; height: 20px; border-left: 2px solid #ffb269; border-radius: 50%; filter: drop-shadow(0 0 4px rgba(255,142,70,.7)); animation: heaterCycle 1.45s ease-in-out infinite; }
.heater-symbol i:nth-child(2) { animation-delay: -.48s; }
.heater-symbol i:nth-child(3) { animation-delay: -.96s; }
@keyframes growLightCycle { 0%,12%,82%,100% { opacity: .12; scale: .82 1; } 18%,72% { opacity: 1; scale: 1; filter: drop-shadow(0 5px 5px rgba(255,226,107,.35)); } }
@keyframes fanCycle { 0%,14% { rotate: 0deg; opacity: .35; } 26%,72% { opacity: 1; } 82%,100% { rotate: 1080deg; opacity: .35; } }
@keyframes heaterCycle { 0%,100% { translate: 0 3px; scale: .75; opacity: .22; } 50% { translate: 0 -3px; scale: 1; opacity: 1; } }

.story { padding: 140px max(7vw, 30px); background: var(--cream); }
.story-intro { max-width: 820px; margin-bottom: 100px; }
.story h2,.section-heading h2,.dashboard-copy h2,.local-copy h2,.final-cta h2 { margin: 0; font-size: clamp(2.8rem, 5.6vw, 6.2rem); line-height: .96; letter-spacing: -.065em; font-weight: 600; }
.story-intro > p:last-child,.section-heading > p:last-child,.dashboard-copy > p,.local-copy > p { max-width: 660px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.story-steps { max-width: 1280px; margin: 0 auto; display: grid; gap: 120px; }
.story-step { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.story-step.reverse .step-visual { order: 2; }
.story-step.reverse > div:last-child { order: 1; }
.step-number { position: absolute; top: -25px; left: -14px; color: rgba(16,35,26,.06); font: 500 clamp(5rem, 12vw, 12rem) var(--mono); }
.step-visual { position: relative; min-height: 450px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(150deg, #0d261b, #07150f); box-shadow: var(--shadow); }
.story-step h3 { position: relative; margin: 8px 0 22px; font-size: clamp(2rem, 3.8vw, 4rem); letter-spacing: -.055em; line-height: 1.04; font-weight: 600; }
.story-step > div:last-child > p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.8; }
.chapter-label { margin: 0 0 10px; color: #168750; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.moisture-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 55% 30%, rgba(122,242,173,.16), transparent 30%); }
.soil-line { position: absolute; left: 0; right: 0; top: 48%; height: 52%; background: linear-gradient(#39281d, #17110d); clip-path: polygon(0 8%,8% 4%,16% 10%,28% 3%,40% 9%,51% 2%,65% 8%,77% 1%,88% 7%,100% 3%,100% 100%,0 100%); }
.probe { position: absolute; left: 25%; top: 18%; width: 68px; height: 250px; border-radius: 34px 34px 14px 14px; background: linear-gradient(145deg, #c6c7bb, #7e857c); box-shadow: 0 26px 60px rgba(0,0,0,.35); }
.probe i { position: absolute; width: 7px; height: 105px; bottom: -94px; border-radius: 5px; background: #171c19; }
.probe i:nth-child(1){left:15px}.probe i:nth-child(2){left:31px}.probe i:nth-child(3){left:47px}
.metric-orb { position: absolute; right: 15%; top: 29%; width: 150px; height: 150px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(122,242,173,.35); border-radius: 50%; color: white; background: rgba(50,209,127,.06); box-shadow: 0 0 0 28px rgba(50,209,127,.025), 0 0 0 56px rgba(50,209,127,.015); }
.metric-orb strong { font-size: 3rem; letter-spacing: -.07em; }.metric-orb span { color: var(--leaf-bright); font: .62rem var(--mono); text-transform: uppercase; }
.decide-visual { display: grid; align-content: center; justify-items: center; padding: 50px; }
.decision-card { width: min(100%, 360px); padding: 23px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: white; background: rgba(255,255,255,.05); }
.decision-card small { display: block; margin-bottom: 9px; color: var(--leaf-bright); font: .64rem var(--mono); letter-spacing: .12em; }
.decision-card strong { font-size: 1rem; }
.decision-card.action { background: var(--leaf-bright); color: var(--night); transform: translateX(38px); }
.decision-card.action small { color: #0a6b3b; }
.decision-line { height: 72px; width: 1px; background: linear-gradient(var(--leaf-bright), rgba(122,242,173,.1)); }
.act-visual { display: grid; place-items: center; }
.valve-wheel { position: relative; width: 145px; height: 145px; border: 17px solid #b8c3ba; border-radius: 50%; animation: wheelTurn 8s linear infinite; }
.valve-wheel::before,.valve-wheel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 15px; border-radius: 99px; background: #b8c3ba; transform: translate(-50%,-50%); }
.valve-wheel::after { rotate: 90deg; transform-origin: 0 0; }
@keyframes wheelTurn { to { rotate: 360deg; } }
.water-flow { position: absolute; left: 57%; top: 57%; display: flex; gap: 13px; transform: rotate(35deg); }
.water-flow i { width: 11px; height: 38px; border-radius: 60% 60% 70% 70%; background: #71c8ff; animation: drop 1.5s ease-in infinite; }
.water-flow i:nth-child(2){animation-delay:-.5s}.water-flow i:nth-child(3){animation-delay:-1s}
@keyframes drop { from { transform: translateY(-18px); opacity: 0; } 35% { opacity: 1; } to { transform: translateY(65px); opacity: 0; } }
.action-status { position: absolute; bottom: 36px; left: 36px; color: white; font: .68rem var(--mono); }.action-status i { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--leaf-bright);margin-right:8px; }

.system { padding: 140px max(6vw, 28px); color: white; background: var(--night); }
.section-heading { max-width: 900px; margin-bottom: 70px; }
.section-heading > p:last-child { color: rgba(255,255,255,.52); }
.device-showcase { max-width: 1380px; margin: 0 auto; }
.device-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.12); scrollbar-width: none; }
.device-tab { min-width: 150px; padding: 18px 12px; border: 0; border-bottom: 2px solid transparent; color: rgba(255,255,255,.38); background: transparent; font-weight: 700; cursor: pointer; text-align: left; transition: color .2s, border-color .2s; }
.device-tab span { margin-right: 8px; color: rgba(122,242,173,.55); font: .62rem var(--mono); }
.device-tab.active { color: white; border-bottom-color: var(--leaf-bright); }
.device-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(45px, 8vw, 120px); align-items: center; padding-top: 70px; }
.device-art { position: relative; min-height: 570px; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: radial-gradient(circle at 50% 45%, rgba(66,163,103,.24), transparent 28%), linear-gradient(140deg, #102d1f, #07130e); }
.device-art::after { content:""; position:absolute; left:15%; right:15%; bottom:9%; height:12%; border-radius:50%; background:rgba(0,0,0,.44); filter:blur(14px); }
.art-halo { position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(122,242,173,.16); box-shadow: 0 0 0 56px rgba(122,242,173,.025),0 0 0 112px rgba(122,242,173,.012); }
.product-object { position: relative; z-index: 2; width: 280px; height: 340px; border-radius: 32px; display: grid; place-content: center; text-align: center; color: #0a160f; background: linear-gradient(145deg,#b7b8a9,#6b746c); box-shadow: inset 10px 10px 30px rgba(255,255,255,.22),inset -12px -12px 32px rgba(0,0,0,.22),0 42px 70px rgba(0,0,0,.43); transform: perspective(900px) rotateY(-12deg) rotateX(3deg); transition: .45s ease; }
.product-object span { font: 500 .8rem var(--mono); letter-spacing:.24em; }.product-object strong{font-size:3rem;letter-spacing:-.08em}.product-object i{width:9px;height:9px;border-radius:50%;background:var(--leaf-bright);margin:22px auto 0;box-shadow:0 0 18px var(--leaf-bright)}
.product-controller strong { font-size: 1.55rem; letter-spacing: -.045em; }
.product-sensor strong { font-size: 2.15rem; }
.product-pump { width: 270px; height: 270px; border-radius: 50%; }
.product-pump strong { font-size: 2.35rem; }
.device-art:hover .product-object { transform: perspective(900px) rotateY(0) translateY(-6px); }
.art-caption { position: absolute; z-index: 3; left: 24px; bottom: 22px; font: .65rem var(--mono); color: rgba(255,255,255,.54); text-transform: uppercase; letter-spacing: .08em; }
.device-copy h3 { margin: 6px 0 20px; font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: .96; letter-spacing: -.065em; font-weight: 600; }
.device-description { color: rgba(255,255,255,.58); font-size: 1rem; line-height: 1.8; }
.device-features { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 13px; }
.device-features li { padding-left: 25px; color: rgba(255,255,255,.77); font-size: .88rem; line-height: 1.5; position: relative; }
.device-features li::before { content:""; position:absolute;left:0;top:.52em;width:8px;height:8px;border:1px solid var(--leaf-bright);border-radius:50%; }
.availability { color: rgba(255,255,255,.35); font: .63rem/1.6 var(--mono); }

.dashboard-story { padding: 140px max(6vw, 28px); display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px, 8vw, 110px); align-items: center; background: var(--paper); }
.dashboard-frame { padding: 10px; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow); overflow: hidden; transform: perspective(1200px) rotateY(4deg) rotateX(2deg); }
.dashboard-frame img { border-radius: 0 0 17px 17px; }
.dashboard-toolbar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--muted); font: .62rem var(--mono); }
.dashboard-toolbar > span { width: 8px; height: 8px; border-radius: 50%; background: #e7c764; }.dashboard-toolbar > span:first-child{background:#e2776d}.dashboard-toolbar > span:nth-child(3){background:#62c985}.dashboard-toolbar strong{margin-left:14px}.dashboard-toolbar em{margin-left:auto;color:#15884f;font-style:normal}
.dashboard-copy .eyebrow { margin-bottom: 16px; }.dashboard-copy h2 { font-size: clamp(2.6rem,4.4vw,5rem); }.dashboard-copy strong{color:var(--forest)}
.mini-stats { margin-top: 34px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.mini-stats div { padding: 20px 12px 0 0; }.mini-stats strong { display:block;font-size:2rem;letter-spacing:-.06em }.mini-stats span { display:block;color:var(--muted);font:.62rem var(--mono);text-transform:uppercase;line-height:1.4 }

.build { padding: 140px max(6vw, 28px); background: #e9efe8; }
.section-heading.centered { margin-inline: auto; text-align: center; }.section-heading.centered > p:last-child{margin-inline:auto;color:var(--muted)}
.build-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.build-card { position: relative; padding: 34px; border-radius: 26px; background: rgba(255,255,255,.7); border: 1px solid rgba(14,48,32,.09); display: flex; flex-direction: column; min-height: 500px; box-shadow: 0 18px 50px rgba(7,35,20,.06); }
.build-card.featured { color: white; background: var(--forest); transform: translateY(-16px); box-shadow: 0 30px 80px rgba(7,35,20,.22); }
.build-icon { width: 62px; height: 62px; display:grid;place-items:center;border-radius:18px;background:var(--mint);color:var(--forest);font-size:1.6rem;margin-bottom:42px }.build-card.featured .build-icon{background:rgba(122,242,173,.13);color:var(--leaf-bright)}
.build-card h3 { margin: 6px 0 14px; font-size: 2rem; letter-spacing: -.045em; }.build-card > p:not(.chapter-label){color:var(--muted);font-size:.88rem;line-height:1.7}.build-card.featured > p:not(.chapter-label){color:rgba(255,255,255,.58)}
.build-card ul { list-style:none;padding:20px 0;margin:auto 0 24px;border-top:1px solid var(--line);display:grid;gap:9px }.build-card li{font:.72rem var(--mono);color:var(--forest)}.build-card li::before{content:"+";color:#168750;margin-right:9px}.build-card.featured ul{border-color:rgba(255,255,255,.12)}.build-card.featured li{color:rgba(255,255,255,.78)}.build-card.featured li::before{color:var(--leaf-bright)}
.package-price { margin: 0 0 18px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 14px; }
.package-price span { color: #168750; font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.package-option{display:grid;gap:7px;margin:14px 0;color:inherit;font:.62rem var(--mono);text-transform:uppercase;letter-spacing:.06em}.package-option select{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:var(--night);background:white;font:700 .75rem var(--sans);text-transform:none;letter-spacing:0}.build-card:not(.featured) .package-option select{border-color:var(--line)}
.package-price strong { grid-row: 1 / span 2; grid-column: 2; font-size: 2rem; line-height: 1; letter-spacing: -.055em; }
.package-price del { color: #54665c; font: 500 .78rem/1.3 var(--mono); }
.build-card.featured .package-price span { color: var(--leaf-bright); }
.build-card.featured .package-price del { color: rgba(255,255,255,.76); }
.build-note { position:absolute;right:24px;top:24px;padding:6px 9px;border:1px solid rgba(122,242,173,.23);border-radius:99px;color:var(--leaf-bright);font:.56rem var(--mono);text-transform:uppercase }

.local-first { padding: 140px max(7vw, 30px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 140px); align-items: center; color: white; background: var(--night); }
.local-copy h2 { font-size: clamp(2.8rem, 4.8vw, 5.6rem); }.local-copy > p{color:rgba(255,255,255,.55)}
.text-link { border:0;background:transparent;padding:0 0 5px;border-bottom:1px solid currentColor;color:var(--leaf-bright);font-size:.8rem;font-weight:700;cursor:pointer }.text-link span{margin-left:12px}
.local-diagram { min-height: 540px; position: relative; display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:radial-gradient(circle at center,rgba(48,174,102,.13),transparent 42%) }
.home-node { width:160px;height:160px;border-radius:50%;display:grid;place-content:center;text-align:center;border:1px solid rgba(122,242,173,.3);background:rgba(122,242,173,.06);box-shadow:0 0 0 35px rgba(122,242,173,.025) }.home-node span{font-size:2rem}.home-node strong{font-size:.9rem}.home-node small,.cloud-node small{color:rgba(255,255,255,.4);font:.58rem var(--mono);margin-top:5px}
.local-path { position:absolute;left:15%;right:15%;top:56%;height:1px;background:rgba(122,242,173,.22);display:flex;justify-content:space-around }.local-path i{width:8px;height:8px;border-radius:50%;background:var(--leaf-bright);transform:translateY(-4px);box-shadow:0 0 14px var(--leaf-bright);animation:pathDot 2.4s ease-in-out infinite}.local-path i:nth-child(2){animation-delay:-.8s}.local-path i:nth-child(3){animation-delay:-1.6s}@keyframes pathDot{50%{opacity:.2;scale:.55}}
.local-device-row { position:absolute;left:7%;right:7%;bottom:18%;display:flex;justify-content:space-between }.local-device-row span{width:76px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:14px;color:rgba(255,255,255,.72);font:.6rem var(--mono);background:rgba(255,255,255,.03)}
.cloud-node { position:absolute;right:20px;top:20px;display:grid;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:rgba(255,255,255,.28);font-size:.65rem }

.final-cta { position: relative; min-height: 75vh; display:grid;place-items:center;text-align:center;padding:120px 28px;color:white;background:linear-gradient(145deg,#103823,#07150f);overflow:hidden }.final-cta > div:last-child{position:relative;z-index:2}.final-cta h2{margin-bottom:34px}.cta-orb{position:absolute;width:700px;height:700px;border-radius:50%;border:1px solid rgba(122,242,173,.12);box-shadow:0 0 0 100px rgba(122,242,173,.025),0 0 0 200px rgba(122,242,173,.012)}
footer { min-height: 120px; padding: 30px max(6vw,28px); display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;color:rgba(255,255,255,.46);background:#030b07;font-size:.72rem }.footer-brand{color:white}.footer-brand .brand-mark{width:20px;height:20px;background:var(--leaf-bright)}footer>div{display:flex;gap:24px}footer a:hover{color:white}

.cart-backdrop { position: fixed; z-index: 80; inset: 0; background: rgba(0,0,0,.54); opacity: 0; visibility: hidden; backdrop-filter: blur(3px); transition: .28s; }
.cart-backdrop.open { opacity: 1; visibility: visible; }
.system-drawer { position: fixed; z-index: 90; top: 0; right: 0; width: min(480px,100%); height: 100%; padding: 28px; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); box-shadow: -30px 0 90px rgba(0,0,0,.25); transform: translateX(105%); transition: transform .38s cubic-bezier(.22,.8,.28,1); overflow-y:auto; }
.system-drawer.open { transform: translateX(0); }
.drawer-head { display:flex;align-items:flex-start;justify-content:space-between;gap:20px }.drawer-head h2{margin:0;font-size:1.8rem;letter-spacing:-.05em}.drawer-close{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:white;font-size:1.5rem;cursor:pointer}
.drawer-progress{height:3px;margin:25px 0 14px;border-radius:99px;background:#dde6df;overflow:hidden}.drawer-progress span{display:block;width:0;height:100%;background:var(--leaf);transition:width .35s}.drawer-guidance{margin:0 0 22px;color:var(--muted);font-size:.78rem;line-height:1.6}.cart-lines{display:grid;gap:10px}.cart-line{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:15px;background:white}.cart-line-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#e5f5e9;color:var(--forest);font:500 .72rem var(--mono)}.cart-line strong{display:block;font-size:.82rem}.cart-line small{display:block;margin-top:3px;color:var(--muted);font:.58rem var(--mono)}.line-controls{display:flex;align-items:center;gap:7px}.line-controls button{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}.line-controls span{min-width:13px;text-align:center;font:500 .65rem var(--mono)}
.empty-system{text-align:center;margin:auto;padding:45px 20px}.empty-system.hidden{display:none}.empty-orbit{width:105px;height:105px;margin:0 auto 25px;border:1px dashed #9ab2a2;border-radius:50%;display:grid;place-items:center}.empty-orbit span{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--mint);font-size:1.3rem}.empty-system h3{margin:0 0 8px;font-size:1.1rem}.empty-system p{margin:0 0 18px;color:var(--muted);font-size:.75rem;line-height:1.6}.drawer-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}.configuration-note{display:flex;justify-content:space-between;gap:15px;font-size:.78rem}.configuration-note span{color:var(--muted)}.drawer-foot>p{color:var(--muted);font-size:.68rem;line-height:1.6}.drawer-checkout{width:100%;margin-top:10px}.drawer-foot>small{display:block;margin-top:10px;text-align:center;color:var(--muted);font:.58rem var(--mono)}
.drawer-addons{margin:22px 0;padding:20px 0;border-top:1px solid var(--line)}.drawer-addons.hidden{display:none}.addons-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:12px}.addons-head .chapter-label{margin-bottom:4px}.addons-head h3{margin:0;font-size:1rem}.addons-head>span{color:var(--muted);font:.55rem var(--mono)}.addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.addon-button{min-width:0;padding:10px;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;border:1px solid var(--line);border-radius:13px;text-align:left;color:var(--ink);background:white;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}.addon-button:hover{transform:translateY(-1px);border-color:#64c88d;box-shadow:0 8px 20px rgba(7,35,20,.07)}.addon-code{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--forest);background:#e5f5e9;font:500 .58rem var(--mono)}.addon-button strong{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--forest);font-size:.68rem;white-space:nowrap}.addon-button small{display:block;margin-top:2px;color:var(--muted);font:.55rem var(--mono)}.addon-button b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--forest);background:var(--mint);font-size:.8rem}
.drawer-package-option{margin:4px 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:white}.drawer-package-option.hidden{display:none}.drawer-package-option label{display:block;margin-bottom:7px;color:var(--forest);font-size:.75rem;font-weight:800}.drawer-package-option select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--forest);background:var(--paper);font-weight:800}.drawer-package-option small{display:block;margin-top:7px;color:var(--muted);font:.56rem var(--mono)}
.package-breakdown{margin:-5px 0 9px;padding:13px;border:1px dashed #b8d8c2;border-radius:14px;background:#f5fbf6}.package-breakdown-head{display:grid;gap:4px;margin-bottom:9px}.package-breakdown-head strong{color:var(--forest);font-size:.72rem}.package-breakdown-head small{color:var(--muted);font:.53rem/1.4 var(--mono)}.package-content-list{display:grid;gap:5px}.package-content-list>div{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 7px;border-radius:8px;background:white}.package-content-list span{overflow:hidden;text-overflow:ellipsis;color:var(--forest);font-size:.64rem;font-weight:700;white-space:nowrap}.package-content-list button{padding:4px 7px;border:1px solid #d6b3aa;border-radius:7px;color:#8d3e2c;background:#fff8f6;font-size:.55rem;font-weight:800;cursor:pointer}.package-content-list button:hover{border-color:#b85a43;color:#743020}
.toast{position:fixed;z-index:110;left:50%;bottom:24px;padding:13px 18px;border-radius:99px;color:white;background:var(--night);font-size:.75rem;font-weight:700;transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 150px; }.hero-copy{max-width:900px}.garden-stage{min-height:600px;width:min(760px,100%);justify-self:center}.story-step,.device-detail,.dashboard-story,.local-first{grid-template-columns:1fr}.story-step.reverse .step-visual,.story-step.reverse>div:last-child{order:initial}.device-art{min-height:500px}.dashboard-frame{transform:none}.build-grid{grid-template-columns:1fr}.build-card{min-height:auto}.build-card.featured{transform:none}
}
@media (max-width: 760px) {
  .site-header{top:10px;min-height:58px;padding:8px 8px 8px 14px}.desktop-nav{display:none}.brand{font-size:.9rem}.brand-mark{width:29px;height:29px}.system-button>span:first-child{display:none}.system-button{padding:7px}.hero{padding-inline:20px}.hero h1{font-size:clamp(3.2rem,16vw,5.2rem)}.hero-proof{gap:13px}.garden-stage{min-height:650px;border-radius:32px}.plant{scale:.7;bottom:10%}.plant-left{left:0}.plant-right{right:-4%}.node-hub{left:40%;top:35%}.node-sensor{left:8%;top:54%}.node-sensor-two{left:auto;right:0;top:53%}.node-sensor-two .sensor-label{display:grid;gap:3px}.node-pod{right:7%;top:18%}.node-controller{right:17%;bottom:22%}.node-tank{left:20%;top:8%}.valve-mist{scale:.82;transform-origin:left center}.garden-readout{left:5%;right:5%;grid-template-columns:1fr;gap:8px;padding:11px 12px}.garden-readout p{display:none}.automation-actions{width:100%;grid-template-columns:repeat(3,1fr)}.automation-action{min-height:46px;grid-template-columns:28px 1fr;justify-items:start;padding:4px 8px}.automation-action small{font-size:.58rem}.story,.system,.dashboard-story,.build,.local-first{padding-block:95px}.story-intro{margin-bottom:70px}.story-steps{gap:75px}.step-visual{min-height:370px}.device-tabs{margin-inline:-28px;padding-inline:20px}.device-tab{min-width:125px}.device-art{min-height:400px}.product-object{width:220px;height:270px}.art-halo{width:280px;height:280px}.mini-stats{grid-template-columns:repeat(3,1fr)}.local-diagram{min-height:460px}.local-device-row span{width:62px}.final-cta{min-height:70vh}footer{align-items:flex-start;flex-direction:column}footer>div{flex-wrap:wrap}.system-drawer{padding:23px}
}
@media (max-width: 420px) { .addon-grid{grid-template-columns:1fr}.addons-head>span{display:none} }
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.orbit,.plant,.node-pulse,.live-dot,.valve-wheel,.water-flow i,.local-path i,.comm-line,.valve-mist i,.valve-mist::before,.sensor-sun::before,.light-symbol::after,.fan-symbol i,.heater-symbol i{animation:none!important}.comm-packet{display:none}.valve-mist i{opacity:.4;translate:var(--mist-x) var(--mist-y)}.light-symbol::after{opacity:.75}.button,.product-object{transition:none}
}