/* /iot page: live network strip, hive dashboard, pipeline */
:root{--c-tmp:var(--accent);--c-hum:#6aa9ff;--c-out:#c9d1d6;--c-warm:#f2b84b}
:root[data-theme="light"]{--c-hum:#2f6fd6;--c-out:#5b666d;--c-warm:#b7791f}

/* live Helium strip */
.live-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 36px;margin-top:-24px;margin-bottom:48px}
.live-strip[hidden]{display:none}
.live-strip>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.live-strip b{font:800 clamp(1.7rem,4vw,2.3rem)/1 var(--head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.live-strip>div span{color:var(--muted);font-size:15px}
.live-strip p{flex-basis:100%;margin:0}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);align-self:center;box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* hive section */
.hive-intro{margin-bottom:28px}
.hive-intro h2{max-width:13em}
.hive-dash{padding:12px}
.hive-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.hive-tabs button{flex:0 0 auto;font:650 14px/1 var(--body);color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.hive-tabs button:hover{color:var(--text);border-color:var(--line-strong)}
.hive-tabs button[aria-selected="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.hive-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:880px){.hive-grid{grid-template-columns:1.2fr 1fr 1fr 1.1fr}}
.hv-tile{background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hv-tile .tl{display:flex;align-items:center;gap:8px;font:700 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hv-tile.now{grid-column:1/-1}
@media (min-width:880px){.hv-tile.now{grid-column:auto}}
.hv-tile .big{display:flex;align-items:flex-start;gap:4px;margin-top:auto}
.hv-tile .big b{font:800 clamp(2.6rem,6vw,3.4rem)/1 var(--head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hv-tile .big small{font:700 1rem/1.6 var(--head);color:var(--muted)}
.hv-tile .sub{font-size:13.5px;color:var(--c-warm);min-height:1.2em}
.bee{width:22px;height:22px;fill:none;stroke:var(--c-warm);stroke-width:1.6;stroke-linecap:round}
.bee ellipse:first-child{fill:color-mix(in srgb,var(--c-warm) 30%,transparent)}
.bee .wing{fill:color-mix(in srgb,var(--text) 10%,transparent);stroke:var(--muted);transform-origin:12px 9px;animation:buzz .12s linear infinite alternate}
@keyframes buzz{to{transform:scaleY(.6)}}
.gauge svg{width:100%;max-width:160px;margin:4px auto 0;display:block;overflow:visible}
.g-bg,.g-val{fill:none;stroke-width:10;stroke-linecap:round}
.g-bg{stroke:var(--line-strong)}
.gauge.t .g-val{stroke:var(--c-tmp)}
.gauge.h .g-val{stroke:var(--c-hum)}
.g-val{transition:stroke-dashoffset .9s cubic-bezier(.34,1.3,.64,1)}
.g-num{display:flex;flex-direction:column;align-items:center;margin-top:-18px}
.g-num b{font:800 1.35rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.g-num b span{font:inherit}
.g-num small{font-size:12px;color:var(--muted)}
.hv-tile.stats{list-style:none;margin:0;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
@media (min-width:880px){.hv-tile.stats{grid-column:auto;grid-template-columns:1fr}}
.hv-tile.stats li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:14px}
.hv-tile.stats li:last-child{border-bottom:0}
.hv-tile.stats span{color:var(--muted)}
.hv-tile.stats b{font-variant-numeric:tabular-nums}
.hv-tile.stats .batt{color:var(--accent)}
.hv-tile.chart{grid-column:1/-1}
@media (min-width:880px){.hv-tile.chart{grid-column:span 2}}
.key{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.key i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-left:6px}
.key i.tmp{background:var(--c-tmp)}.key i.hum{background:var(--c-hum)}
.key i.out{background:repeating-linear-gradient(90deg,var(--c-out) 0 3px,transparent 3px 5px)}
.is-outdoor .hide-out{display:none}
.plot{position:relative}
.plot svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.plot .axis text{font:11px/1 var(--body);fill:var(--muted)}
.plot .gridline{stroke:var(--line)}
.plot .zero{stroke:var(--line-strong)}
.plot .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.plot .ln.tmp{stroke:var(--c-tmp)}
.plot .ln.hum{stroke:var(--c-hum);stroke-width:1.6}
.plot .ln.out{stroke:var(--c-out);stroke-width:1.4;stroke-dasharray:3 4}
.plot .bars rect{fill:var(--c-tmp);opacity:.85}
.plot .cross{stroke:var(--line-strong);stroke-width:1}
.tip{position:absolute;top:0;min-width:30%;pointer-events:none;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tip[hidden]{display:none}
.tip .tmp{color:var(--c-tmp)}.tip .hum{color:var(--c-hum)}.tip .out{color:var(--c-out)}

/* pipeline */
.pipeline{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;counter-reset:p}
@media (min-width:720px){.pipeline{grid-template-columns:repeat(4,1fr)}}
.pipeline li{counter-increment:p;position:relative;padding:16px 16px 16px 48px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:2px}
.pipeline li::before{content:counter(p);position:absolute;left:14px;top:15px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--head);color:var(--accent-ink);background:var(--accent)}
.pipeline b{font:700 1rem/1.3 var(--head)}
.pipeline span{color:var(--muted);font-size:14px}

/* sticker tracker */
.tracker-sec .hive-intro,.fire-sec .hive-intro{margin-bottom:28px}
.sticker-row{display:grid;gap:14px;margin-bottom:18px}
@media (min-width:880px){.sticker-row{grid-template-columns:1.25fr 1fr;align-items:stretch}}
.sticker-photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative}
.sticker-photo img{width:100%;height:100%;object-fit:cover}
.sticker-photo figcaption{position:absolute;left:12px;bottom:10px;font-size:12.5px;color:#f1f3f4;background:rgba(8,9,10,.6);padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.spec-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spec-chips li{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:2px;justify-content:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.spec-chips li:hover{transform:translateY(-3px) rotate(-.6deg)}
.spec-chips b{font:800 1.05rem/1.25 var(--head)}
.spec-chips span{color:var(--muted);font-size:14px}
.trip-demo{padding:12px}
.trip-stage{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-alt)}
.trip-stage svg{display:block;width:100%;height:auto}
.trip-stage .land path{fill:color-mix(in srgb,var(--text) 7%,var(--bg-alt));stroke:var(--line-strong);stroke-width:.8;stroke-linejoin:round}
.trip-stage .ghost{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.trip-stage .route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trip-stage .pin circle{fill:#5b7cff;stroke:var(--bg-alt);stroke-width:2;transition:r .45s cubic-bezier(.34,1.8,.64,1)}
.trip-stage .pin .ring{fill:rgba(91,124,255,.18);stroke:none}
.trip-stage .dot{fill:var(--accent);stroke:var(--bg-alt);stroke-width:2.5;filter:drop-shadow(0 0 8px var(--accent))}
.trip-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0 0;font-size:14px}
.trip-card b{font:800 1.05rem/1.3 var(--head);display:block;margin-bottom:8px}
.trip-card dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.trip-card dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.trip-card dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
@media (min-width:880px){.trip-card{position:absolute;right:12px;top:12px;width:250px;margin:0;box-shadow:var(--shadow)}.trip-card dl{grid-template-columns:1fr}}

/* wildfire */
.fire-demo{padding:12px}
.fire-demo canvas{display:block;width:100%;height:auto;border-radius:10px;cursor:crosshair;touch-action:manipulation}
.fire-hud{display:flex;flex-wrap:wrap;gap:6px 20px;padding:4px 6px 10px;font-size:13.5px;color:var(--muted)}
.fire-hud b{color:var(--text);font-variant-numeric:tabular-nums}
.usecases{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:720px){.usecases{grid-template-columns:repeat(3,1fr)}}
.usecases li{padding:18px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:4px}
.usecases b{font:700 1rem/1.3 var(--head)}
.usecases span{color:var(--muted);font-size:14.5px}

@media (prefers-reduced-motion:reduce){.pulse,.bee .wing{animation:none}.g-val,.trip-stage .pin circle,.spec-chips li{transition:none}}