:root {
  --ink: #082f3a;
  --deep: #063e4c;
  --deep-2: #052f3c;
  --teal: #00a983;
  --mint: #35d3a6;
  --lime: #bdde57;
  --cream: #f3f3e9;
  --white: #fff;
  --muted: #688088;
  --danger: #ef5b4e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Fira GO", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 76px; padding: 0 clamp(24px, 5vw, 78px); display: flex; align-items: center;
  justify-content: space-between; background: rgba(6, 52, 64, .96); color: white;
  position: fixed; inset: 0 0 auto; z-index: 30; backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.brand > span:last-child > span { color: var(--mint); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.brand-mark svg { width: 29px; fill: none; stroke: var(--mint); stroke-width: 2; }
nav { display: flex; gap: 36px; font-size: 13px; color: rgba(255,255,255,.76); }
nav a:hover { color: var(--mint); }
.live-pill { padding: 8px 13px; border-radius: 30px; background: rgba(62, 219, 174, .1); border: 1px solid rgba(72,222,178,.24); font-size: 11px; color: #9fead3; }
.live-pill i, .status-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); display: inline-block; margin-right: 7px; box-shadow: 0 0 0 4px rgba(53,211,166,.12); }

.hero { min-height: 720px; padding: 150px clamp(24px, 7vw, 110px) 90px; color: white; background: linear-gradient(120deg, #063944 0%, #075363 58%, #0e6e74 100%); display: grid; grid-template-columns: .95fr 1.05fr; position: relative; overflow: hidden; }
.hero-glow { position: absolute; width: 550px; height: 550px; border-radius: 50%; background: rgba(39, 201, 166, .12); filter: blur(30px); right: 7%; top: 7%; }
.hero-copy { position: relative; z-index: 3; align-self: center; max-width: 650px; }
.eyebrow { margin: 0 0 21px; font: 700 11px/1.2 Manrope, sans-serif; text-transform: uppercase; letter-spacing: 2.4px; color: #8ee0c8; }
.eyebrow > span { width: 27px; height: 2px; background: var(--mint); display: inline-block; vertical-align: middle; margin-right: 10px; }
.eyebrow.dark { color: #568077; }
.hero h1 { font: 800 clamp(48px, 5.7vw, 83px)/.98 Manrope, "Fira GO", sans-serif; letter-spacing: -4.5px; margin: 0; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-text { max-width: 570px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.9; margin: 30px 0 37px; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; }
.button.primary { background: var(--mint); color: #073e47; padding: 15px 20px; border-radius: 5px; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.button.primary:hover { transform: translateY(-2px); background: #4de2b8; }
.button.text-button { color: rgba(255,255,255,.75); }
.play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: var(--mint); font-size: 9px; }
.scroll-hint { position: absolute; left: 50%; bottom: 21px; transform: translateX(-50%); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center; }
.scroll-hint span { display: block; font-size: 18px; color: var(--mint); }

.hero-art { position: relative; min-height: 530px; align-self: center; }
.sun { position: absolute; width: 305px; height: 305px; right: 18%; top: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(189,222,87,.18), rgba(53,211,166,.03) 63%, transparent 64%); border: 1px solid rgba(174,231,193,.05); }
.mountain { position: absolute; bottom: 44%; width: 75%; height: 34%; right: -5%; clip-path: polygon(0 100%, 30% 40%, 46% 67%, 65% 17%, 100% 100%); }
.mountain-back { background: #176e6b; opacity: .65; transform: translateX(-22%); }
.mountain-front { background: #0a5e62; }
.water-lines { position: absolute; left: 0; right: -15%; bottom: 0; height: 48%; background: repeating-linear-gradient(176deg, transparent 0 16px, rgba(124,222,205,.13) 17px, transparent 19px); transform: skewY(-4deg); }
.fish { position: absolute; fill: rgba(31,182,159,.14); stroke: rgba(115,224,199,.23); stroke-width: 1; }
.fish-one { width: 115px; right: 9%; bottom: 24%; }
.fish-two { width: 72px; right: 36%; bottom: 13%; transform: scaleX(-1); opacity: .65; }
.reeds { position: absolute; bottom: 0; color: #118b75; font-size: 120px; letter-spacing: -32px; font-family: serif; opacity: .5; transform: rotate(-4deg); }
.reeds-left { left: -10%; }.reeds-right { right: -3%; }
.sensor { position: absolute; width: 70px; height: 200px; left: 34%; top: 34%; filter: drop-shadow(0 25px 22px rgba(0,0,0,.26)); }
.sensor-cap { width: 46px; height: 22px; margin: 0 auto; border-radius: 10px 10px 3px 3px; background: linear-gradient(90deg,#183d43,#42666a,#17383e); }
.sensor-body { width: 64px; height: 127px; padding: 20px 13px; margin: -3px auto 0; border-radius: 13px; background: linear-gradient(90deg, #0b2730, #416168 45%, #18363d 72%); border: 2px solid #587075; }
.sensor-body i { height: 5px; border-radius: 5px; display: block; margin: 13px 0; background: #05242d; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.sensor-tip { width: 22px; height: 38px; margin: -2px auto; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); background: #142d33; }
.sensor-light { position: absolute; z-index: 2; top: 11px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.sensor-beam { position: absolute; width: 250px; height: 250px; border: 1px solid rgba(53,211,166,.26); border-radius: 50%; left: 17%; top: 24%; box-shadow: 0 0 0 25px rgba(53,211,166,.035), 0 0 0 55px rgba(53,211,166,.025); animation: breathe 3.2s infinite ease-in-out; }

.monitor-section { padding: 92px max(24px, calc((100vw - 1050px)/2)) 75px; background: #f4f3e9; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 38px; }
.section-heading h2, .how-section h2 { font: 800 clamp(29px,3vw,42px)/1.1 Manrope, "Fira GO"; letter-spacing: -1.5px; margin: 0; }
.section-heading > p { max-width: 430px; color: var(--muted); line-height: 1.7; font-size: 13px; margin: 0; }
.device-card { border-radius: 10px; overflow: hidden; background: white; box-shadow: 0 18px 60px rgba(14,50,56,.08); border: 1px solid #e1e6dc; }
.card-top { display: flex; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid #edf0e8; }
.device-title { display: flex; align-items: center; gap: 13px; }
.device-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 8px; background: #e7f7f0; }
.device-icon svg { width: 29px; fill: none; stroke: var(--teal); stroke-width: 2; }
.tiny-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #86969a; }
.device-title h3 { font: 700 21px/1.2 Manrope, "Fira GO"; margin: 3px 0 0; }.device-title h3 b{ color: var(--teal); }
.status-badge { align-self: center; padding: 7px 11px; background: #edf9f4; border-radius: 3px; color: #218b70; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.status-display { min-height: 335px; padding: 48px 20px 32px; text-align: center; background: radial-gradient(circle at center 35%, #fbfff9, #fff 50%); }
.pulse-wrap { width: 102px; height: 102px; margin: 0 auto 24px; position: relative; display: grid; place-items: center; }
.pulse-ring { position: absolute; inset: 0; border: 1px solid rgba(35,178,137,.3); border-radius: 50%; animation: pulse 2.4s infinite; }
.pulse-ring.delay { animation-delay: 1.2s; }
.shield { width: 67px; height: 67px; border-radius: 50%; background: #e6f8f1; display: grid; place-items: center; position: relative; z-index: 2; }
.shield svg { width: 34px; fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.status-kicker { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.status-display h4 { margin: 8px 0; font: 800 clamp(23px, 2.6vw, 34px)/1.15 Manrope, "Fira GO"; letter-spacing: -1px; }
.status-display > p:last-of-type { margin: 0; color: #829297; font-size: 12px; }
.alert-time { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--danger); }
.card-metrics { min-height: 86px; padding: 14px 26px; background: #f8faf6; border-top: 1px solid #edf0e8; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; }
.card-metrics > div { display: flex; gap: 10px; align-items: center; border-right: 1px solid #e4e9e2; margin-right: 20px; }
.metric-icon { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: var(--teal); background: #e8f7f1; }
.card-metrics p { margin: 0; color: #8b999c; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.card-metrics strong { display: block; margin-top: 4px; color: #294a52; font-size: 11px; text-transform: none; letter-spacing: 0; }
.demo-button { border: 1px solid #cddbd5; color: #47726b; background: white; border-radius: 4px; padding: 9px 12px; font-size: 10px; cursor: pointer; }
.demo-button:hover { border-color: var(--teal); color: var(--teal); }
.integration-note { text-align: center; color: #81908f; font-size: 10px; margin: 20px 0 0; }
.integration-note span { display: inline-grid; place-items:center; width: 17px;height:17px;border:1px solid #aebbb6;border-radius:50%;margin-right:5px;font-family:serif; }

.device-card[data-state="alert"] { border-color: rgba(239,91,78,.55); box-shadow: 0 18px 60px rgba(239,91,78,.14); }
.device-card[data-state="alert"] .status-display { background: radial-gradient(circle at center 35%, #fff3ef, #fff 55%); }
.device-card[data-state="alert"] .shield { background: #ffe8e4; animation: alertShake .55s infinite; }
.device-card[data-state="alert"] .shield svg { stroke: var(--danger); }
.device-card[data-state="alert"] .pulse-ring { border-color: rgba(239,91,78,.55); animation-duration: 1s; }
.device-card[data-state="alert"] .status-kicker, .device-card[data-state="alert"] .status-display h4 { color: var(--danger); }
.device-card[data-state="alert"] .status-badge { background: #fff0ed; color: var(--danger); }
.device-card[data-state="alert"] .status-badge i { background: var(--danger); box-shadow: 0 0 0 4px rgba(239,91,78,.13); }

.how-section { padding: 85px max(24px, calc((100vw - 1050px)/2)) 100px; background: #fff; text-align: center; }
.eyebrow.centered { display: flex; justify-content: center; align-items: center; color: #5c8b81; }
.steps { margin-top: 58px; display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr; align-items: center; }
.steps article { position: relative; padding: 0 24px; }
.steps article > span { position: absolute; top: -30px; right: 18%; color: #eef3ef; font: 800 52px Manrope; }
.step-icon { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 21px; display: grid; place-items: center; color: var(--teal); background: #e9f8f2; font-size: 25px; }
.steps h3 { font: 700 16px Manrope, "Fira GO"; margin: 0 0 10px; }.steps p { color: #819095; font-size: 12px; line-height: 1.7; margin:0; }
.step-line { height: 1px; border-top: 1px dashed #b9d9cf; }
.mission-section { padding: 80px max(24px, calc((100vw - 1050px)/2)); display:flex; justify-content:space-between; align-items:center; gap:40px; color:white; background: linear-gradient(110deg,#073e4b,#087065); }
.mission-section h2 { font: 800 clamp(30px,4vw,48px)/1.08 Manrope,"Fira GO"; letter-spacing:-2px; margin:0 0 20px; }.mission-section > div > p:last-child { max-width:650px; line-height:1.8;color:rgba(255,255,255,.68);font-size:13px; }
.mission-badge { min-width:190px; height:190px; border-radius:50%; display:grid; place-content:center; text-align:center; border:1px solid rgba(189,222,87,.35); box-shadow:0 0 0 16px rgba(189,222,87,.05); }.mission-badge strong{font:800 45px Manrope;color:var(--lime)}.mission-badge span{font-size:11px;line-height:1.5;color:#b9ddd6}
footer { min-height:110px; padding:25px clamp(24px,7vw,105px); background:#052e38; color:rgba(255,255,255,.45); display:flex;align-items:center;justify-content:space-between;font-size:10px; }
.footer-brand { color:#fff; }.footer-brand .brand-mark { color:var(--mint);font-size:25px; }

@keyframes pulse { 0% { transform:scale(.65); opacity:0 } 45%{opacity:1} 100%{transform:scale(1.35);opacity:0} }
@keyframes breathe { 50% { transform:scale(1.06); opacity:.65 } }
@keyframes alertShake { 0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)} }

@media (max-width: 850px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:130px; min-height:900px; }
  .hero-copy { max-width:680px; }
  .hero-art { position:absolute; inset:auto 0 0 20%; height:460px; min-height:0; opacity:.83; }
  .hero h1 { letter-spacing:-3px; }
  .section-heading { align-items:start; flex-direction:column; gap:18px; }
  .card-metrics { grid-template-columns:1fr 1fr; gap:18px; padding:22px; }
  .card-metrics > div { border:0; }
  .steps { grid-template-columns:1fr; gap:45px; }.step-line {display:none}
}
@media (max-width: 560px) {
  .site-header { height:66px; padding:0 18px; }.brand {font-size:15px}.brand-mark{width:34px;height:34px}.live-pill{font-size:0;padding:10px}.live-pill i{margin:0}
  .hero { min-height:820px; padding:112px 22px 70px; }.hero h1{font-size:48px;letter-spacing:-2.5px}.hero-text{font-size:13px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}
  .hero-art{left:0;height:380px}.sensor{transform:scale(.78);left:40%}.sensor-beam{transform:scale(.75);left:20%}
  .monitor-section,.how-section{padding-left:16px;padding-right:16px}.card-top{padding:17px}.status-display{min-height:320px}.card-metrics{grid-template-columns:1fr}.demo-button{width:100%}
  .mission-section{flex-direction:column;align-items:flex-start}.mission-badge{align-self:center}
  footer{flex-direction:column;gap:15px;text-align:center;padding:30px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }