* { box-sizing: border-box; }
:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --ink: #122018;
  --muted: #5e6b63;
  --line: #dfe6df;
  --accent: #1f7a4d;
  --accent-dark: #145638;
  --soft: #e8f3ec;
  --dark: #102119;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 16px 6%;
  background: rgba(245,247,243,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { font-size: 28px; }
.brand strong { display:block; font-size: 15px; letter-spacing:.2px; }
.brand small { display:block; color:var(--muted); font-size:11px; }
nav { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--muted); }
nav a:hover { color: var(--accent); }
.hero {
  min-height: 78vh; padding: 90px 6%;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:60px; align-items:center;
  background: radial-gradient(circle at 80% 30%, #dfeee4 0, transparent 35%), var(--bg);
}
.eyebrow { color:var(--accent); font-weight:800; font-size:11px; letter-spacing:2px; }
h1 { max-width: 820px; margin: 14px 0 20px; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing:-3px; }
h2 { margin: 10px 0 18px; font-size: clamp(30px, 4vw, 48px); line-height:1.05; letter-spacing:-1.5px; }
h3 { margin:8px 0; line-height:1.2; }
.hero-text { max-width: 720px; color:var(--muted); font-size:18px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; margin:30px 0; }
.btn { padding:12px 18px; border-radius:10px; font-weight:750; font-size:14px; border:1px solid var(--line); }
.btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-dark); }
.btn.secondary { background:var(--surface); }
.tech-row { display:flex; gap:8px; flex-wrap:wrap; }
.tech-row span { padding:7px 10px; background:var(--soft); border-radius:999px; color:var(--accent-dark); font-size:12px; font-weight:700; }
.hero-card {
  background: var(--dark); color:white; border-radius:26px; padding:32px;
  min-height:410px; display:flex; flex-direction:column; justify-content:center;
  box-shadow: 0 30px 80px rgba(16,33,25,.18);
}
.status-dot { width:11px; height:11px; background:#6ee7a5; border-radius:50%; box-shadow:0 0 0 8px rgba(110,231,165,.1); }
.status-label { margin-top:18px; color:#9db0a5; font-size:11px; letter-spacing:2px; font-weight:800; }
.mini-flow { text-align:center; margin-top:28px; font-weight:800; }
.mini-flow > div:not(.arrow):not(.split) { padding:14px; background:#1a3025; border:1px solid #2a4537; border-radius:12px; }
.arrow { padding:7px; color:#75d49d; }
.split { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.split span { padding:11px 5px; background:#1a3025; border-radius:10px; font-size:12px; }
.section { padding:90px 6%; max-width:1400px; margin:auto; }
.section-heading { margin-bottom:35px; }
.two-col { display:grid; grid-template-columns: .8fr 1.2fr; gap:50px; }
.two-col p { color:var(--muted); font-size:17px; }
.feature-grid, .cards, .future-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.feature-grid article, .card, .future-grid div {
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px;
}
.feature-grid span { color:var(--accent); font-weight:900; font-size:12px; }
.feature-grid p, .card p, .future-grid span { color:var(--muted); font-size:14px; margin-bottom:0; }
.dark-section { max-width:none; background:var(--dark); color:white; }
.dark-section .section-heading { max-width:1400px; margin-left:auto; margin-right:auto; }
.workflow { max-width:1400px; margin:auto; display:flex; align-items:stretch; gap:12px; }
.flow-card { flex:1; padding:24px; border:1px solid #294338; background:#172d23; border-radius:16px; }
.flow-card b { color:#78d69e; font-size:12px; }
.flow-card span { display:block; font-size:28px; margin-top:20px; }
.flow-card p { color:#b5c3bb; font-size:13px; }
.flow-line { display:flex; align-items:center; color:#6fd198; font-size:22px; }
.alert-flow { max-width:900px; margin:45px auto 0; text-align:center; display:grid; gap:10px; }
.alert-node, .alert-end { background:#173125; border:1px solid #2d4c3b; border-radius:12px; padding:12px; }
.alert-end { display:inline-block; margin:0 4px; }
.gsm-results { display:flex; justify-content:center; gap:10px; }
.gsm-results span { background:#78d69e; color:#102119; border-radius:999px; padding:6px 14px; font-weight:800; font-size:12px; }
.cards { grid-template-columns:repeat(3,1fr); }
.card-icon { font-size:32px; }
.wiring { margin-top:35px; padding:25px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.wiring-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.wiring-grid div { display:flex; justify-content:space-between; gap:15px; padding:12px; background:var(--bg); border-radius:10px; font-size:13px; }
.wiring-grid span { color:var(--muted); }
.software-list { border-top:1px solid var(--line); }
.software-list div { display:grid; grid-template-columns: .6fr 1fr; padding:18px 0; border-bottom:1px solid var(--line); }
.software-list span { color:var(--muted); }
.alert-section { background:#eef5f0; max-width:none; }
.timeline { max-width:1000px; margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.timeline div { background:white; border:1px solid var(--line); border-radius:16px; padding:22px; position:relative; }
.timeline b { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:white; font-size:12px; }
.timeline p { color:var(--muted); font-size:14px; margin-bottom:0; }
code { background:#e8eee9; padding:2px 6px; border-radius:5px; color:var(--accent-dark); }
.demo-section { padding-top:55px; padding-bottom:55px; }
.demo-panel { background:var(--dark); color:white; border-radius:22px; padding:35px; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.demo-panel p { color:#b5c3bb; }
.demo-status { display:grid; gap:10px; }
.status-item { display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:center; background:#173125; border:1px solid #294338; padding:14px; border-radius:12px; }
.indicator { width:10px; height:10px; border-radius:50%; background:#78d69e; }
.status-item small { color:#9db0a5; }
.future-grid { grid-template-columns:repeat(3,1fr); }
.future-grid div { display:grid; grid-template-columns:30px 1fr; gap:3px 10px; }
.future-grid span { grid-column:2; }
.qr-section { display:grid; grid-template-columns:1fr 260px; gap:50px; align-items:center; background:var(--soft); border-radius:24px; margin-bottom:70px; }
.qr-placeholder { width:220px; height:220px; border:3px dashed var(--accent); border-radius:15px; display:grid; place-items:center; align-content:center; gap:8px; background:white; color:var(--accent); }
.qr-placeholder div { font-size:50px; font-weight:900; }
.qr-placeholder small { color:var(--muted); text-align:center; padding:0 20px; }
footer { padding:28px 6%; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
footer strong { color:var(--ink); margin-right:10px; }
@media (max-width: 900px) {
  .navbar { align-items:flex-start; }
  nav { display:none; }
  .hero, .two-col, .demo-panel, .qr-section { grid-template-columns:1fr; }
  .workflow { flex-direction:column; }
  .flow-line { justify-content:center; transform:rotate(90deg); }
  .cards { grid-template-columns:repeat(2,1fr); }
  .future-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .hero { padding-top:60px; }
  h1 { letter-spacing:-2px; }
  .cards, .feature-grid, .future-grid, .timeline, .wiring-grid { grid-template-columns:1fr; }
  .section { padding-top:65px; padding-bottom:65px; }
  .split { grid-template-columns:1fr; }
  .wiring-grid div { flex-direction:column; gap:4px; }
  footer { flex-direction:column; }
}