/* contolx.com/live — matches the main site (deep navy, cyan / green accents, Space Grotesk + Inter) */
:root{ --bg:#00060f; --bg2:#000d1a; --card:rgba(10,25,45,.55); --line:rgba(120,190,255,.16); --accent:#00c8ff; --accent2:#0088ff; --green:#00ffaa;
  --lit:#f0f8ff; --mid:#c8dff0; --dim:#7a96ad; --red:#ff3b5c; --radius:18px; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--mid); font-family:Inter, system-ui, sans-serif; line-height:1.6; overflow-x:hidden; width:100%; max-width:100vw; position:relative; }
/* nothing may be wider than the screen: grid children can shrink, media and canvases follow their box
   (iPhone draws the graphs at 3× pixels — without this a graph's own width stretched the whole page) */
main > section, .hero > *, .request > *, .charts > *, .now-row > *, .dev-grid > *, .feat-grid > *, .steps > *, .strip > *, .sensors > *{ min-width:0; }
img, video, canvas, iframe{ max-width:100%; }
.chart-card{ position:relative; min-width:0; overflow:hidden; }
.chart-card canvas{ display:block; width:100% !important; max-width:100%; }
a{ color:var(--accent); text-decoration:none; }
.mono{ font-family:'JetBrains Mono', monospace; }
.muted{ color:var(--dim); font-size:.92rem; }
.bg-glow{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(900px 500px at 85% -10%, rgba(0,200,255,.16), transparent 60%), radial-gradient(800px 500px at -10% 30%, rgba(0,255,170,.10), transparent 60%),
             linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }

/* nav */
.nav{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:14px clamp(16px,4vw,48px);
  background:rgba(0,6,15,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand img{ display:block; height:34px; width:auto; background:#fff; border-radius:10px; padding:4px 10px; }
.nav nav{ display:flex; gap:22px; margin-left:auto; }
.nav nav a{ color:var(--mid); font-weight:500; font-size:.95rem; }
.nav nav a:hover{ color:var(--lit); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:999px; padding:12px 22px;
  font:600 .98rem Inter, sans-serif; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; text-decoration:none; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--green)); color:#00121f; box-shadow:0 10px 30px -10px rgba(0,200,255,.6); }
.btn-ghost{ background:rgba(255,255,255,.04); border-color:var(--line); color:var(--lit); }
.btn-wa{ background:#25d366; color:#04210f; padding:9px 18px; font-size:.9rem; }
.btn.wide{ width:100%; }

/* hero */
main{ padding:0 clamp(16px,4vw,48px); max-width:1320px; margin:0 auto; }
.hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(36px,6vw,80px) 0 40px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font:600 .78rem 'JetBrains Mono', monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.eyebrow .dot, .live-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(255,59,92,.7); animation:pulse 1.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(255,59,92,0); } 100%{ box-shadow:0 0 0 0 rgba(255,59,92,0); } }
h1{ font:700 clamp(2.1rem,3.9vw,3.4rem)/1.06 'Space Grotesk', sans-serif; color:var(--lit); margin:14px 0 18px; letter-spacing:-.02em; }
h2{ font:700 clamp(1.7rem,3vw,2.5rem)/1.15 'Space Grotesk', sans-serif; color:var(--lit); margin:10px 0 12px; }
h3{ font:600 1.15rem 'Space Grotesk', sans-serif; color:var(--lit); margin:8px 0 6px; }
.grad{ background:linear-gradient(90deg, var(--accent), var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:1.12rem; color:var(--mid); max-width:560px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 20px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.chips li{ font-size:.82rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--mid); }

/* player */
.player-card{ position:relative; border-radius:24px; padding:10px; background:linear-gradient(135deg, rgba(0,200,255,.35), rgba(0,255,170,.18) 40%, rgba(255,255,255,.04));
  box-shadow:0 40px 90px -30px rgba(0,160,255,.45); }
.player-top{ display:flex; align-items:center; gap:12px; padding:6px 8px 12px; flex-wrap:wrap; }
.live-badge{ display:inline-flex; align-items:center; gap:7px; font:700 .76rem 'JetBrains Mono', monospace; letter-spacing:.14em; padding:5px 11px; border-radius:8px;
  background:rgba(0,0,0,.45); color:var(--dim); }
.live-badge.on{ color:#fff; background:rgba(255,59,92,.18); border:1px solid rgba(255,59,92,.5); }
.live-badge:not(.on) .dot{ background:var(--dim); animation:none; }
.cam-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.cam-tabs button{ font:500 .84rem Inter, sans-serif; color:var(--mid); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; }
.cam-tabs button.on{ color:#00121f; background:var(--accent); border-color:var(--accent); }
.clock{ margin-left:auto; font-size:.8rem; color:var(--mid); }
.player{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; }
.player video, .player .poster{ width:100%; height:100%; object-fit:cover; display:block; }
.player .poster{ filter:blur(6px) brightness(.45) saturate(1.2); transform:scale(1.06); }
.player-msg{ position:absolute; inset:auto 0 0 0; padding:10px 14px; font-size:.85rem; color:var(--mid); background:linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.player-msg:empty{ display:none; }
.quality{ position:absolute; top:12px; right:12px; font-size:.72rem; padding:4px 9px; border-radius:6px; background:rgba(0,0,0,.55); color:var(--lit); }
.fs{ position:absolute; bottom:12px; right:12px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-size:1.1rem; }
.locked{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; gap:6px; }
.locked p{ max-width:420px; margin:0 0 12px; }
.lock-icon{ font-size:2.2rem; }

/* strip */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:10px 0 70px; background:var(--line); }
.strip div{ background:rgba(0,10,22,.85); padding:22px; display:flex; flex-direction:column; gap:2px; }
.strip b{ font:700 1.6rem 'Space Grotesk', sans-serif; color:var(--lit); }
.strip span{ font-size:.9rem; color:var(--dim); }

/* sections */
.sec-head{ text-align:center; max-width:760px; margin:0 auto 34px; }
.how{ margin:0 0 80px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; backdrop-filter:blur(8px); }
.step .num{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; font:700 1rem 'JetBrains Mono', monospace; color:#00121f;
  background:linear-gradient(135deg, var(--accent), var(--green)); }
.panel-wrap{ margin:0 0 80px; }
.panel-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#05080c; }
.panel-frame iframe{ width:100%; height:80vh; min-height:620px; border:0; display:block; }

/* request */
.request{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,4vw,56px); align-items:start; margin:0 0 90px; }
.ticks{ list-style:none; padding:0; margin:18px 0; }
.ticks li{ padding-left:28px; position:relative; margin:8px 0; color:var(--mid); }
.ticks li::before{ content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.glass{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; backdrop-filter:blur(14px); box-shadow:0 30px 70px -40px rgba(0,0,0,.8); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; font-weight:500; color:var(--mid); margin-bottom:14px; }
input, textarea{ font:inherit; font-size:.97rem; color:var(--lit); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none; }
input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,255,.18); }
.hp{ position:absolute; left:-9999px; }
.form-msg{ min-height:1.4em; margin:12px 0 0; font-size:.92rem; }
.form-msg.ok{ color:var(--green); } .form-msg.err{ color:#ff8fa3; }

/* faq */
.faq{ max-width:860px; margin:0 auto 90px; }
.faq details{ border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:10px 0; background:rgba(255,255,255,.02); }
.faq summary{ cursor:pointer; font:600 1.02rem 'Space Grotesk', sans-serif; color:var(--lit); list-style:none; }
.faq summary::after{ content:'+'; float:right; color:var(--accent); }
.faq details[open] summary::after{ content:'–'; }
.faq p{ margin:10px 0 0; }

/* footer + dialog */
.foot{ text-align:center; padding:40px 16px 50px; border-top:1px solid var(--line); color:var(--dim); font-size:.9rem; }
.foot img{ background:#fff; border-radius:8px; padding:3px 8px; }
.dlg{ max-width:420px; width:calc(100% - 32px); color:var(--mid); }
.dlg::backdrop{ background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.dlg-row{ display:flex; gap:10px; justify-content:flex-end; }

@media (max-width: 960px){
  .hero, .request{ grid-template-columns:minmax(0,1fr); }
  .steps{ grid-template-columns:minmax(0,1fr); }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .nav nav{ display:none; }
  .btn-wa{ margin-left:auto; }
}
@media (max-width: 560px){ .grid2{ grid-template-columns:1fr; } .clock{ display:none; } }

/* live climate graphs */
.climate{ margin:0 0 80px; }
.now-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 18px; }
.now{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.now span{ font-size:.82rem; color:var(--dim); }
.now b{ font:700 1.7rem 'Space Grotesk', sans-serif; color:var(--lit); }
.range-tabs{ display:flex; gap:8px; align-items:center; margin:0 0 14px; flex-wrap:wrap; }
.range-tabs button{ font:500 .86rem Inter, sans-serif; color:var(--mid); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; }
.range-tabs button.on{ color:#00121f; background:var(--accent); border-color:var(--accent); }
.range-tabs .muted{ margin-left:auto; font-size:.8rem; }
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px 12px; height:300px; display:flex; flex-direction:column; backdrop-filter:blur(8px); }
.chart-card.wide{ grid-column:1 / -1; }
.chart-card h3{ margin:0 0 8px; font-size:1rem; }
.chart-card h3 small{ color:var(--dim); font:500 .78rem Inter, sans-serif; margin-left:6px; }
.chart-card canvas{ flex:1; min-height:0; }
@media (max-width: 960px){ .charts{ grid-template-columns:minmax(0,1fr); } .now-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* scale-model note, devices, sensors, features */
.scale-tag{ display:inline-block; margin:-6px 0 12px; font-size:.8rem; letter-spacing:.08em; color:var(--accent); border:1px solid rgba(0,200,255,.35); background:rgba(0,200,255,.08); padding:4px 12px; border-radius:999px; }
.lead b{ color:var(--lit); font-weight:600; }
.model{ margin:0 0 70px; }
.model-note{ display:flex; gap:20px; align-items:flex-start; padding:26px 30px; border-radius:var(--radius); border:1px solid rgba(0,255,170,.28);
  background:linear-gradient(135deg, rgba(0,255,170,.08), rgba(0,200,255,.05)); }
.model-note h2{ font-size:clamp(1.25rem,2.2vw,1.7rem); margin:0 0 6px; }
.model-note p{ margin:0; }
.model-note b{ color:var(--lit); }
.model-ico{ font-size:2.2rem; line-height:1; }
.devices{ margin:0 0 80px; }
.dev-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dev{ position:relative; display:flex; flex-direction:column; gap:4px; padding:22px 20px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line);
  transition:transform .2s, border-color .2s, box-shadow .2s; overflow:hidden; }
.dev::after{ content:''; position:absolute; inset:auto -40% -60% auto; width:160px; height:160px; background:radial-gradient(circle, rgba(0,200,255,.14), transparent 70%); pointer-events:none; }
.dev:hover{ transform:translateY(-3px); border-color:rgba(0,200,255,.45); box-shadow:0 18px 40px -24px rgba(0,200,255,.6); }
.dev svg{ width:42px; height:42px; padding:9px; margin-bottom:8px; border-radius:12px; color:var(--accent);
  background:linear-gradient(135deg, rgba(0,200,255,.18), rgba(0,255,170,.10)); border:1px solid rgba(0,200,255,.3); }
.dev b{ font:600 1.02rem 'Space Grotesk', sans-serif; color:var(--lit); }
.dev span{ font-size:.86rem; color:var(--dim); line-height:1.4; }
.sensors{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.sensors div{ display:flex; flex-direction:column; gap:2px; padding:16px 20px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.sensors b{ color:var(--lit); font-weight:600; }
.sensors span{ font-size:.88rem; color:var(--dim); }
.sensors .adv{ border-color:rgba(255,209,102,.35); background:rgba(255,209,102,.05); }
.sensors .adv b{ color:#ffd166; }
.features{ margin:0 0 80px; }
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.feat{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); }
.feat-ico{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font-size:1.3rem; background:rgba(0,200,255,.1); border:1px solid rgba(0,200,255,.25); }
.feat h3{ margin:0 0 4px; font-size:1.02rem; }
.feat p{ margin:0; font-size:.92rem; color:var(--dim); line-height:1.5; }
@media (max-width: 960px){ .dev-grid{ grid-template-columns:repeat(2,1fr); } }

/* phones: compact everything so the page doesn't flood; graphs get full width and more height */
@media (max-width: 640px){
  main{ padding:0 14px; }
  .nav{ padding:10px 14px; gap:10px; }
  .brand img{ height:30px; }
  .btn{ padding:11px 18px; font-size:.93rem; }
  .btn-wa{ padding:8px 14px; font-size:.85rem; }
  .hero{ padding:22px 0 26px; gap:20px; }
  h1{ font-size:1.9rem; margin:10px 0 10px; }
  h2{ font-size:1.42rem; }
  .lead{ font-size:.98rem; }
  .cta-row{ margin:16px 0 0; gap:8px; }
  .cta-row .btn{ flex:1 1 auto; }
  .chips{ display:none; }
  .player-card{ padding:6px; border-radius:18px; }
  .player-top{ padding:4px 4px 8px; gap:8px; }
  .player{ border-radius:12px; }
  .strip{ margin:0 0 40px; }
  .strip div{ padding:12px 14px; }
  .strip b{ font-size:1.2rem; }
  .strip span{ font-size:.78rem; }
  .sec-head{ margin-bottom:18px; }
  .sec-head p{ font-size:.92rem; margin:0; }
  .model, .devices, .features, .climate, .how, .panel-wrap{ margin-bottom:48px; }
  .model-note{ padding:18px; gap:12px; }
  .model-ico{ font-size:1.6rem; }
  .model-note p{ font-size:.92rem; }
  .dev-grid{ gap:10px; }
  .dev{ padding:14px 12px; }
  .dev svg{ width:36px; height:36px; padding:7px; margin-bottom:4px; }
  .dev b{ font-size:.92rem; }
  .dev span{ font-size:.76rem; }
  .sensors{ grid-template-columns:1fr; gap:10px; }
  .sensors div{ padding:12px 14px; }
  .scale-tag{ font-size:.7rem; letter-spacing:.04em; white-space:nowrap; margin:0 0 10px; }
  .feat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .feat{ flex-direction:column; padding:12px; gap:6px; }
  .feat-ico{ width:32px; height:32px; font-size:1rem; border-radius:10px; }
  .feat h3{ font-size:.86rem; line-height:1.25; }
  .feat p{ font-size:.74rem; line-height:1.4; }
  .step{ display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:center; }
  .step .num{ grid-row:span 2; }
  .step h3{ margin:0; font-size:1rem; }
  .req-copy .ticks, .req-copy > p:not(.muted){ display:none; }
  .req-copy h2{ margin-bottom:0; }
  /* graphs */
  .now-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
  .now{ padding:10px; border-radius:12px; }
  .now span{ font-size:.7rem; line-height:1.2; }
  .now b{ font-size:1.12rem; }
  .range-tabs button{ padding:5px 12px; font-size:.8rem; }
  .range-tabs .muted{ width:100%; margin-left:0; }
  .charts{ gap:12px; margin:0; }
  .chart-card{ height:290px; padding:12px 8px 8px; border-radius:14px; }
  .chart-card.wide{ height:330px; }
  .chart-card h3{ padding-left:6px; font-size:.95rem; }
  .steps{ gap:10px; }
  .step{ padding:16px 18px; }
  .step p{ margin:4px 0 0; font-size:.9rem; }
  .request{ margin-bottom:50px; gap:18px; }
  .ticks{ margin:10px 0; }
  .glass{ padding:18px; }
  .faq{ margin-bottom:50px; }
  .faq details{ padding:12px 14px; }
  .faq summary{ font-size:.95rem; }
  .faq p{ font-size:.9rem; }
  .foot{ padding:26px 14px 34px; font-size:.82rem; }
}