*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(8,173,210,.12),transparent 34%),radial-gradient(circle at bottom right,rgba(10,47,111,.10),transparent 38%),#fff;color:#0a2f6f;line-height:1.55;overflow-x:hidden}img{max-width:100%;height:auto}a{color:inherit}.container{width:min(1160px,calc(100% - 40px));margin:0 auto}.narrow{width:min(920px,calc(100% - 40px));margin:0 auto}.skip-link{position:absolute;left:12px;top:-80px;z-index:1000;background:#0a2f6f;color:#fff;padding:10px 14px;border-radius:10px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(8,173,210,.18)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:82px}.brand{display:inline-flex;align-items:center;text-decoration:none}.brand-logo{width:240px;max-height:60px;object-fit:contain}.site-nav{display:flex;align-items:center;gap:4px}.nav-link,.lang-switch{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;text-decoration:none;font-weight:800;color:#173f7d;font-size:14px;transition:background .18s ease,color .18s ease,transform .18s ease}.nav-link:hover,.lang-switch:hover,.nav-link.is-active{background:#e8faff;color:#0a2f6f}.lang-switch{border:1px solid rgba(8,173,210,.22);background:rgba(255,255,255,.78)}.menu-toggle{display:none;border:1px solid rgba(8,173,210,.24);background:#fff;color:#0a2f6f;border-radius:14px;padding:10px 12px;font-weight:900;align-items:center;gap:10px}.menu-icon{width:20px;height:14px;display:inline-block;position:relative;border-top:2px solid currentColor;border-bottom:2px solid currentColor}.menu-icon:before{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}.flag{position:relative;display:inline-block;width:30px;height:20px;overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(10,47,111,.16),0 3px 8px rgba(10,47,111,.14);flex:0 0 auto}.flag-pl{background:linear-gradient(to bottom,#fff 0 50%,#dc143c 50% 100%)}.flag-en{background:#012169}.flag-en:before{content:"";position:absolute;inset:0;background:linear-gradient(32deg,transparent 0 42%,#fff 42% 48%,#c8102e 48% 53%,#fff 53% 59%,transparent 59% 100%),linear-gradient(148deg,transparent 0 42%,#fff 42% 48%,#c8102e 48% 53%,#fff 53% 59%,transparent 59% 100%)}.flag-en:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 0 39%,#fff 39% 45%,#c8102e 45% 55%,#fff 55% 61%,transparent 61% 100%),linear-gradient(to bottom,transparent 0 35%,#fff 35% 43%,#c8102e 43% 57%,#fff 57% 65%,transparent 65% 100%)}.hero-section{padding:86px 0 76px;min-height:calc(100vh - 82px);display:grid;align-items:center}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#08add2;font-weight:900;text-transform:uppercase;letter-spacing:.11em;font-size:13px;margin-bottom:16px}.hero-copy h1,.page-hero h1{font-size:clamp(42px,7vw,78px);line-height:.98;letter-spacing:-.05em;color:#0a2f6f;margin-bottom:22px}.hero-copy h1 span{display:block;font-size:clamp(28px,4.7vw,50px);line-height:1.1;color:#173f7d;letter-spacing:-.035em;margin-top:12px}.hero-lead,.lead{font-size:clamp(18px,2.2vw,23px);color:#173f7d;line-height:1.55;margin-bottom:28px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 20px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:900;cursor:pointer;font-size:15px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:#08add2;color:#fff;box-shadow:0 14px 30px rgba(8,173,210,.24)}.btn-outline{background:#fff;color:#0a2f6f;border-color:rgba(8,173,210,.35);box-shadow:0 12px 28px rgba(10,47,111,.10)}.btn.full{width:100%}.pill-row{display:flex;flex-wrap:wrap;gap:9px}.pill-row span,.footer-pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid rgba(8,173,210,.22);border-radius:999px;background:rgba(255,255,255,.82);color:#0a2f6f;font-weight:800;font-size:13px}.hero-panel{background:rgba(255,255,255,.82);border:1px solid rgba(8,173,210,.22);border-radius:34px;padding:34px;box-shadow:0 18px 48px rgba(10,47,111,.12)}.hero-panel img{display:block;margin:0 auto 30px;width:min(100%,520px)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 28px}.stats-grid.compact{grid-template-columns:repeat(2,1fr);margin:0}.stats-grid div,.metric-card,.sensor-card,.side-panel,.info-card,.feature-card,.plan-card,.contact-form-card{border:1px solid rgba(8,173,210,.20);background:rgba(255,255,255,.88);border-radius:24px;box-shadow:0 16px 42px rgba(10,47,111,.08)}.stats-grid div{padding:18px;text-align:center}.stats-grid strong{display:block;color:#08add2;font-size:clamp(24px,3vw,38px);line-height:1;margin-bottom:8px}.stats-grid span{display:block;font-weight:900;color:#0a2f6f}.stats-grid small{display:block;color:#173f7d;margin-top:4px}.section{padding:82px 0}.section-soft{background:#f4fbfd}.section-dark{background:#0a2f6f;color:#fff}.section-gradient{background:linear-gradient(135deg,#0a2f6f,#08add2);color:#fff}.section-heading{text-align:center;max-width:840px;margin:0 auto 42px}.section-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.035em;color:#0a2f6f;margin-bottom:14px}.section-heading p{color:#173f7d;font-size:18px}.section-dark .section-heading h2,.section-dark .section-heading p,.section-gradient .section-heading h2,.section-gradient .section-heading p,.section-heading.light h2,.section-heading.light p{color:#fff}.card-grid{display:grid;gap:22px}.card-grid.two{grid-template-columns:repeat(2,1fr)}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.four{grid-template-columns:repeat(4,1fr)}.info-card,.feature-card,.plan-card,.metric-card,.sensor-card{padding:24px}.info-card h3,.feature-card h3,.plan-card h3,.metric-card strong,.sensor-card h3{color:#0a2f6f;font-size:21px;line-height:1.15;margin-bottom:10px}.info-card p,.feature-card p,.plan-card p,.metric-card p,.sensor-card p{color:#173f7d}.info-card a{display:inline-flex;margin-top:18px;color:#08add2;font-weight:900;text-decoration:none}.metric-card span,.sensor-card strong{display:block;color:#08add2;font-size:18px;margin-bottom:10px}.page-hero{padding:74px 0 56px;background:linear-gradient(180deg,rgba(232,250,255,.86),rgba(255,255,255,0))}.page-hero h1{font-size:clamp(38px,5.8vw,64px)}.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.timeline article{position:relative;padding:22px;border-radius:22px;background:#fff;border:1px solid rgba(8,173,210,.20);box-shadow:0 12px 30px rgba(10,47,111,.08)}.timeline span{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:#08add2;color:#fff;font-weight:900;margin-bottom:14px}.timeline h3{font-size:18px;margin-bottom:8px}.timeline p{font-size:14px;color:#173f7d}.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.check-grid div{padding:18px 18px 18px 44px;border-radius:20px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);position:relative}.check-grid div:before,.plain-list li:before,.plan-card li:before{content:"✓";position:absolute;color:#08add2;font-weight:900}.check-grid div:before{left:18px}.split{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}.side-panel{padding:24px}.side-panel h2,.side-panel h3{margin-bottom:16px;color:#0a2f6f}.stat-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(8,173,210,.16)}.stat-line:last-child{border-bottom:0}.stat-line strong{color:#08add2;text-align:right}.ordered-list{counter-reset:item;list-style:none;display:grid;gap:14px}.ordered-list li{counter-increment:item;padding:18px 18px 18px 68px;background:#fff;border:1px solid rgba(8,173,210,.2);border-radius:20px;box-shadow:0 10px 26px rgba(10,47,111,.07);position:relative}.ordered-list li:before{content:counter(item,decimal-leading-zero);position:absolute;left:18px;top:16px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#08add2;color:#fff;font-size:13px;font-weight:900}.comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.comparison-card{border-radius:28px;background:#fff;color:#0a2f6f;padding:28px;box-shadow:0 18px 48px rgba(10,47,111,.16)}.comparison-card.good{border:2px solid rgba(22,163,74,.30)}.comparison-card.warn{border:2px solid rgba(245,158,11,.40)}.comparison-card h3{font-size:28px;margin-bottom:4px}.comparison-card>p{font-weight:900;color:#08add2;margin-bottom:20px}.comparison-card div{padding:14px 0;border-top:1px solid rgba(8,173,210,.15)}.comparison-card div strong{display:block;margin-bottom:4px}.comparison-card div span{color:#173f7d}.table-wrap{overflow-x:auto;background:#fff;border-radius:24px;border:1px solid rgba(8,173,210,.2);box-shadow:0 16px 42px rgba(10,47,111,.08)}table{width:100%;border-collapse:collapse;min-width:960px}th,td{padding:16px;text-align:left;border-bottom:1px solid rgba(8,173,210,.16);vertical-align:top}th{background:#0a2f6f;color:#fff;font-size:14px}td:first-child{font-weight:900;color:#0a2f6f}.plan-card{position:relative;display:flex;flex-direction:column;gap:14px}.plan-card .badge{align-self:flex-start;background:#e8faff;border:1px solid rgba(8,173,210,.24);color:#0a2f6f;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.plan-card ul,.plain-list{list-style:none;display:grid;gap:10px}.plan-card li,.plain-list li{position:relative;padding-left:24px;color:#173f7d}.plan-card li:before,.plain-list li:before{left:0}.plan-card.muted{background:rgba(255,255,255,.72)}.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}.contact-form-card{padding:30px}.contact-form-card h2{font-size:32px;margin-bottom:8px}.form-message{padding:14px 16px;border-radius:16px;margin:18px 0;font-weight:800}.form-message.is-success{background:#dcfce7;color:#166534}.form-message.is-error{background:#fee2e2;color:#991b1b}.contact-form{display:grid;gap:18px;margin-top:22px}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}label{display:grid;gap:8px;color:#0a2f6f;font-weight:900}input,select,textarea{width:100%;border:1px solid rgba(8,173,210,.28);border-radius:16px;padding:13px 14px;font:inherit;color:#0a2f6f;background:#fff}textarea{resize:vertical}.checkbox{display:flex;align-items:flex-start;gap:12px;font-weight:500;color:#173f7d}.checkbox input{width:18px;height:18px;margin-top:3px}.hp-field{position:absolute;left:-9999px;opacity:0}.contact-side{display:grid;gap:18px}.legal-content{display:grid;gap:26px}.legal-content article{padding-bottom:22px;border-bottom:1px solid rgba(8,173,210,.16)}.legal-content h2{font-size:24px;margin-bottom:8px}.site-footer{background:#071f49;color:#dff7ff;padding-top:54px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}.footer-logo{width:260px;filter:brightness(0) invert(1);opacity:.95;margin-bottom:18px}.site-footer h2{font-size:18px;margin-bottom:14px;color:#fff}.site-footer p{margin-bottom:8px;color:#dff7ff}.site-footer a{color:#dff7ff;text-decoration:none}.site-footer a:hover{text-decoration:underline}.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;margin-top:36px;color:#b9eaf5}.language-page{min-height:100vh;display:grid;place-items:center}.language-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:24px}.language-card-main{width:min(920px,100%);text-align:center;background:rgba(255,255,255,.86);border:1px solid rgba(8,173,210,.22);border-radius:34px;padding:44px;box-shadow:0 18px 48px rgba(10,47,111,.12)}.language-logo{width:min(680px,94%);margin-bottom:28px}.language-card-main h1{font-size:clamp(36px,6vw,64px);letter-spacing:-.045em;line-height:1.02;margin-bottom:14px}.language-card-main p{font-size:18px;color:#173f7d}.language-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:32px auto 20px;width:min(520px,100%)}.language-buttons a{display:flex;align-items:center;justify-content:center;gap:12px;min-height:78px;border-radius:24px;border:1px solid rgba(8,173,210,.24);background:#fff;box-shadow:0 12px 30px rgba(10,47,111,.10);text-decoration:none;font-size:24px;font-weight:900}.language-footer{font-size:14px!important}.plain-list{margin-top:10px}@media(max-width:1050px){.hero-grid,.split,.contact-grid{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.contact-side{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.container,.narrow{width:min(100% - 28px,1160px)}.header-inner{min-height:72px}.brand-logo{width:205px}.menu-toggle{display:inline-flex}.site-nav{position:fixed;left:14px;right:14px;top:82px;display:grid;gap:8px;background:#fff;border:1px solid rgba(8,173,210,.22);border-radius:24px;padding:16px;box-shadow:0 18px 48px rgba(10,47,111,.18);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease}.site-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.nav-link,.lang-switch{justify-content:space-between;border-radius:16px;padding:13px 14px}.hero-section{min-height:auto;padding:46px 0 56px}.hero-copy h1,.page-hero h1{font-size:clamp(34px,11vw,48px)}.hero-copy h1 span{font-size:clamp(24px,7vw,34px)}.hero-panel{padding:22px;border-radius:26px}.section{padding:56px 0}.page-hero{padding:48px 0 36px}.card-grid.three,.card-grid.four,.card-grid.two,.comparison-grid,.footer-grid{grid-template-columns:1fr}.timeline{grid-template-columns:1fr}.check-grid{grid-template-columns:1fr}.contact-side{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.language-buttons{grid-template-columns:1fr}.language-card-main{padding:28px 18px;border-radius:26px}}@media(max-width:520px){.container,.narrow{width:min(100% - 24px,1160px)}.brand-logo{width:178px}.hero-actions{display:grid}.btn{width:100%}.stats-grid,.stats-grid.compact{grid-template-columns:1fr}.pill-row span{font-size:12px}.info-card,.feature-card,.plan-card,.metric-card,.sensor-card,.contact-form-card,.side-panel{padding:20px}.table-wrap{border-radius:18px}.site-nav{top:76px}.language-buttons a{font-size:22px}.language-logo{margin-bottom:18px}}
/* =========================
Production update: offer submenu, demo, company contact polish
========================= */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}.dropdown-trigger{padding-right:14px}.dropdown-arrow{font-size:15px;line-height:1;transform:translateY(-1px)}.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;display:grid;gap:6px;padding:10px;border:1px solid rgba(8,173,210,.22);border-radius:20px;background:rgba(255,255,255,.98);box-shadow:0 18px 48px rgba(10,47,111,.18);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease}.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:14px;text-decoration:none;font-weight:850;color:#173f7d;font-size:14px}.dropdown-item:hover,.dropdown-item.is-active{background:#e8faff;color:#0a2f6f}.offer-card{min-height:100%}.offer-card .btn{margin-top:auto}.section-contact-company{padding-bottom:0}.company-profile{position:relative;overflow:hidden;border:1px solid rgba(8,173,210,.22);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(232,250,255,.84));box-shadow:0 18px 48px rgba(10,47,111,.12);padding:34px}.company-profile:before{content:"";position:absolute;right:-110px;top:-120px;width:300px;height:300px;border-radius:50%;background:rgba(8,173,210,.12)}.company-profile-main{position:relative;max-width:820px;margin-bottom:26px}.company-profile-main h2{font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.04em;color:#0a2f6f;margin-bottom:8px}.company-subtitle{font-size:20px;font-weight:900;color:#08add2;margin-bottom:14px}.company-card-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.company-data-card{padding:18px;border-radius:22px;background:#fff;border:1px solid rgba(8,173,210,.18);box-shadow:0 10px 26px rgba(10,47,111,.07)}.company-data-card span{display:block;color:#173f7d;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.company-data-card strong,.company-data-card a{display:block;color:#0a2f6f;font-weight:900;text-decoration:none;line-height:1.25}.company-data-card a{color:#08add2}.company-note{position:relative;margin-top:18px;padding:14px 16px;border-radius:18px;background:rgba(10,47,111,.06);color:#173f7d;font-size:14px}.contact-methods p{padding:14px 0;border-bottom:1px solid rgba(8,173,210,.14)}.contact-methods p:last-child{border-bottom:0}.demo-section{padding-bottom:44px}.demo-dashboard{border:1px solid rgba(8,173,210,.22);border-radius:34px;background:linear-gradient(135deg,#0a2f6f,#08add2);box-shadow:0 22px 60px rgba(10,47,111,.20);padding:32px;color:#fff}.demo-dashboard .eyebrow,.demo-dashboard h2,.demo-dashboard p{color:#fff}.demo-dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}.demo-dashboard-head h2{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.035em;margin-bottom:10px}.live-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30);font-weight:900;white-space:nowrap}.live-badge:before{content:"";width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.15)}.demo-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.demo-metric-card{padding:22px;border-radius:24px;background:rgba(255,255,255,.94);color:#0a2f6f;box-shadow:0 12px 30px rgba(10,47,111,.16)}.demo-metric-card span{display:block;font-weight:900;color:#173f7d;margin-bottom:8px}.demo-metric-card strong{display:block;font-size:clamp(28px,4vw,42px);line-height:1;color:#08add2;margin-bottom:10px}.demo-metric-card em{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e8faff;color:#0a2f6f;font-style:normal;font-weight:900;font-size:13px;margin-bottom:12px}.demo-metric-card p{color:#173f7d!important;font-size:14px}.demo-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}.demo-chart-card,.demo-side-panel{border:1px solid rgba(8,173,210,.20);background:#fff;border-radius:28px;box-shadow:0 16px 42px rgba(10,47,111,.08);padding:28px}.section-heading.left{text-align:left;margin:0 0 24px;max-width:none}.demo-bars{display:grid;gap:14px}.demo-bar-row{display:grid;grid-template-columns:70px 1fr 58px 1fr 48px 1fr 86px 1fr 96px;gap:10px;align-items:center;font-size:14px;color:#173f7d}.bar-track{height:12px;border-radius:999px;background:#e8faff;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:#08add2}.bar-track.alt i{background:#0a2f6f}.bar-track.dust i{background:#173f7d}.bar-track.fine i{background:#38bdf8}.demo-side-panel h2{font-size:24px;margin-bottom:16px}.compact-table table{min-width:720px}.status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.status-pill.online{background:#dcfce7;color:#166534}.status-pill.warning{background:#fef3c7;color:#92400e}
@media(max-width:1050px){.company-card-grid,.demo-metric-grid{grid-template-columns:repeat(2,1fr)}.demo-grid{grid-template-columns:1fr}.demo-bar-row{grid-template-columns:56px 1fr 50px}.demo-bar-row .bar-track.alt,.demo-bar-row .bar-track.alt + b,.demo-bar-row .bar-track.dust,.demo-bar-row .bar-track.dust + b,.demo-bar-row .bar-track.fine,.demo-bar-row .bar-track.fine + b{display:none}}
@media(max-width:860px){.nav-dropdown{display:grid;width:100%}.dropdown-trigger{justify-content:space-between}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;background:#f4fbfd;margin:4px 0 0 12px;border-radius:18px}.company-profile{padding:24px;border-radius:26px}.company-card-grid,.demo-metric-grid{grid-template-columns:1fr}.demo-dashboard{padding:24px;border-radius:26px}.demo-dashboard-head{display:grid}.live-badge{justify-self:start}.demo-chart-card,.demo-side-panel{padding:22px;border-radius:22px}}
@media(max-width:520px){.company-profile-main h2{font-size:30px}.company-subtitle{font-size:17px}.demo-bar-row{grid-template-columns:48px 1fr 44px;font-size:13px}.dropdown-menu{margin-left:0}.company-profile{padding:20px}.demo-dashboard{padding:20px}}
/* =========================
V5 — logo, about page, contact refactor, refined demo
========================= */
.brand-logo{width:clamp(220px,24vw,320px);max-height:68px;object-fit:contain}.header-inner{min-height:88px}.site-nav{gap:3px}.nav-link,.lang-switch{font-size:13.5px}.footer-logo-card{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;padding:12px 16px;margin-bottom:18px;box-shadow:0 16px 34px rgba(0,0,0,.16)}.footer-logo{width:min(320px,100%);filter:none!important;opacity:1!important;margin:0}.hero-panel img,.language-logo,.contact-company-logo img,.about-identity-card img{object-fit:contain}.about-intro-grid{display:grid;grid-template-columns:1fr 410px;gap:28px;align-items:stretch}.about-story-card,.about-identity-card,.about-cta-card{border:1px solid rgba(8,173,210,.2);border-radius:32px;background:rgba(255,255,255,.9);box-shadow:0 18px 48px rgba(10,47,111,.1);padding:34px}.about-story-card h2,.about-cta-card h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;line-height:1.08;margin-bottom:18px;color:#0a2f6f}.about-story-card p{color:#173f7d;margin-bottom:14px;font-size:17px}.about-identity-card{display:flex;flex-direction:column;justify-content:space-between;gap:26px;background:linear-gradient(155deg,#fff,#e8faff)}.about-identity-card img{width:100%;background:#fff;border-radius:20px;padding:16px;border:1px solid rgba(8,173,210,.14)}.identity-lines{display:grid;gap:12px}.identity-lines div{padding:16px;border-radius:18px;background:#fff;border:1px solid rgba(8,173,210,.16)}.identity-lines span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;color:#08add2;margin-bottom:6px}.identity-lines strong{display:block;color:#0a2f6f;line-height:1.25}.about-pillars .info-card{position:relative;overflow:hidden}.about-pillars .info-card:before{content:"";position:absolute;right:-34px;top:-34px;width:90px;height:90px;border-radius:50%;background:rgba(8,173,210,.1)}.about-process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.about-process article{border:1px solid rgba(8,173,210,.2);background:#fff;border-radius:26px;padding:24px;box-shadow:0 14px 34px rgba(10,47,111,.08)}.about-process span{display:inline-flex;width:44px;height:44px;border-radius:15px;align-items:center;justify-content:center;background:#08add2;color:#fff;font-weight:900;margin-bottom:18px}.about-process h3{color:#0a2f6f;font-size:20px;margin-bottom:10px}.about-process p{color:#173f7d}.about-audience-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}.about-audience-section h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.08;margin-bottom:24px;color:#fff}.about-quality-panel{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);border-radius:28px;padding:28px;box-shadow:0 18px 44px rgba(0,0,0,.12)}.about-quality-panel h3{font-size:26px;margin-bottom:12px;color:#fff}.about-quality-panel p{color:#dff7ff}.about-cta-section{padding-top:64px}.about-cta-card{text-align:center;background:linear-gradient(135deg,#fff,#e8faff)}.about-cta-card p{color:#173f7d;font-size:18px;margin:0 auto 24px;max-width:720px}.contact-refactor-section{padding-bottom:40px}.contact-company-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}.contact-company-hero{position:relative;overflow:hidden;border:1px solid rgba(8,173,210,.22);border-radius:36px;background:linear-gradient(135deg,#fff 0%,#f4fbfd 58%,#e8faff 100%);box-shadow:0 22px 60px rgba(10,47,111,.13);padding:36px}.contact-company-hero:after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(8,173,210,.12);pointer-events:none}.contact-company-logo{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;background:#fff;border:1px solid rgba(8,173,210,.16);border-radius:24px;padding:18px 22px;width:min(520px,100%);margin-bottom:26px;box-shadow:0 12px 28px rgba(10,47,111,.07)}.contact-company-logo img{width:100%;max-height:86px}.contact-company-hero h2{position:relative;z-index:1;font-size:clamp(34px,5vw,58px);letter-spacing:-.045em;line-height:1.02;color:#0a2f6f;margin-bottom:8px}.contact-company-hero>p,.contact-company-hero .eyebrow,.company-data-matrix,.company-note{position:relative;z-index:1}.company-data-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}.company-data-matrix div{padding:18px;border-radius:20px;background:#fff;border:1px solid rgba(8,173,210,.16);box-shadow:0 8px 22px rgba(10,47,111,.06)}.company-data-matrix span,.contact-channel-card p span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;color:#08add2;margin-bottom:7px}.company-data-matrix strong,.company-data-matrix a{display:block;color:#0a2f6f;font-weight:900;text-decoration:none;line-height:1.25}.company-data-matrix a{color:#08add2}.company-note.strong-note{border-left:4px solid #08add2;background:#fff;color:#173f7d}.contact-channel-stack{display:grid;gap:18px}.contact-channel-card{border:1px solid rgba(8,173,210,.2);border-radius:28px;background:#fff;box-shadow:0 16px 42px rgba(10,47,111,.08);padding:24px}.contact-channel-card.primary-channel{background:#0a2f6f;color:#fff}.contact-channel-card h3{font-size:24px;margin-bottom:16px;color:inherit}.contact-channel-card p{padding:14px 0;border-top:1px solid rgba(8,173,210,.14);color:inherit}.contact-channel-card p:first-of-type{border-top:0}.contact-channel-card.primary-channel p{border-color:rgba(255,255,255,.15)}.contact-channel-card a{color:#08add2;font-weight:900;text-decoration:none}.contact-channel-card strong{font-weight:900}.contact-form-layout{display:grid;grid-template-columns:370px 1fr;gap:28px;align-items:start}.brief-panel{position:sticky;top:110px;border:1px solid rgba(8,173,210,.2);border-radius:30px;background:#fff;box-shadow:0 16px 42px rgba(10,47,111,.08);padding:28px}.brief-panel h2{font-size:30px;letter-spacing:-.03em;line-height:1.1;color:#0a2f6f;margin-bottom:16px}.refined-form{padding:34px;border-radius:32px}.refined-form h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em;line-height:1.08;color:#0a2f6f;margin-bottom:10px}.refined-form>p{color:#173f7d;margin-bottom:12px}.form-required-note{display:inline-flex;padding:8px 12px;border-radius:999px;background:#e8faff;font-weight:900;font-size:13px}.contact-form{display:grid;gap:18px;margin-top:22px}.contact-form label{display:grid;gap:7px;color:#0a2f6f;font-weight:900}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(8,173,210,.28);border-radius:16px;background:#fff;padding:13px 14px;font:inherit;color:#0a2f6f;outline:none;transition:border .18s ease,box-shadow .18s ease}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#08add2;box-shadow:0 0 0 4px rgba(8,173,210,.13)}.consent-box{display:grid;gap:10px;padding:16px;border-radius:18px;background:#f4fbfd;border:1px solid rgba(8,173,210,.15)}.checkbox{display:grid!important;grid-template-columns:auto 1fr;align-items:start;gap:10px!important;font-weight:700!important;color:#173f7d!important}.checkbox input{width:18px;height:18px;margin-top:3px}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.demo-pro-section{padding-bottom:44px}.demo-command-center{position:relative;overflow:hidden;border:1px solid rgba(8,173,210,.22);border-radius:38px;background:radial-gradient(circle at top right,rgba(8,173,210,.42),transparent 30%),linear-gradient(135deg,#071f4d,#0a2f6f 52%,#08add2);box-shadow:0 26px 70px rgba(10,47,111,.24);padding:34px;color:#fff}.demo-command-center:before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.12);border-radius:28px;pointer-events:none}.demo-command-head,.demo-command-grid,.demo-metric-grid.refined{position:relative;z-index:1}.demo-command-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:28px}.demo-command-head h2{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.04em;line-height:1.02;margin-bottom:10px;color:#fff}.demo-command-head p,.demo-command-center .eyebrow{color:#dff7ff}.demo-live-box{display:grid;justify-items:end;gap:10px}.demo-live-box small{color:#dff7ff;font-weight:800}.demo-command-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-bottom:18px}.aqi-card{display:grid;align-content:center;min-height:220px;padding:26px;border-radius:28px;background:#fff;color:#0a2f6f;box-shadow:0 18px 44px rgba(0,0,0,.18)}.aqi-card span{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#08add2}.aqi-card strong{font-size:76px;line-height:.95;color:#0a2f6f;letter-spacing:-.06em;margin:12px 0 6px}.aqi-card em{display:inline-flex;justify-self:start;padding:7px 11px;border-radius:999px;background:#dcfce7;color:#166534;font-weight:900;font-style:normal;margin-bottom:12px}.aqi-card p{color:#173f7d;font-size:14px}.demo-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.demo-summary-grid article{padding:20px;border-radius:24px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}.demo-summary-grid span{display:block;color:#dff7ff;font-weight:800;margin-bottom:8px}.demo-summary-grid strong{display:block;color:#fff;font-size:30px;line-height:1;margin-bottom:8px}.demo-summary-grid small{display:block;color:#b9eaf5}.demo-metric-grid.refined{grid-template-columns:repeat(4,1fr);gap:14px}.demo-metric-card.refined{padding:22px;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(0,0,0,.15)}.metric-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.demo-metric-card.refined .metric-top span{color:#173f7d;margin:0}.demo-metric-card.refined em{margin:0;background:#e8faff;color:#0a2f6f}.demo-metric-card.refined strong{font-size:clamp(32px,4vw,46px)}.metric-trend{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f4fbfd;color:#08add2;font-weight:900;margin-bottom:10px}.demo-grid.refined{grid-template-columns:1fr 390px}.demo-chart-card.refined,.demo-side-panel.refined{border-radius:32px}.demo-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.demo-legend span{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e8faff;color:#0a2f6f;font-size:12px;font-weight:900}.demo-bar-row.refined{grid-template-columns:62px 1fr 48px 1fr 42px 1fr 44px 1fr 52px;padding:10px;border-radius:16px;background:#f8fdff}.demo-bar-row.refined b{font-size:13px}.bar-track.temp i{background:#08add2}.event-stream{display:grid;gap:12px;margin-top:14px}.event-stream article{display:grid;grid-template-columns:56px 48px 1fr;gap:10px;align-items:start;padding:12px;border-radius:16px;background:#f4fbfd;border:1px solid rgba(8,173,210,.14)}.event-stream span{font-weight:900;color:#08add2}.event-stream strong{font-size:12px;padding:4px 7px;border-radius:999px;background:#0a2f6f;color:#fff;text-align:center}.event-stream p{color:#173f7d;font-size:14px}.station-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.station-card{position:relative;border:1px solid rgba(8,173,210,.2);background:#fff;border-radius:28px;box-shadow:0 16px 42px rgba(10,47,111,.08);padding:24px;overflow:hidden}.station-card:before{content:"";position:absolute;right:-50px;top:-50px;width:130px;height:130px;border-radius:50%;background:rgba(8,173,210,.1)}.station-dot{position:relative;width:14px;height:14px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 8px rgba(245,158,11,.12);margin-bottom:16px}.station-dot.online{background:#22c55e;box-shadow:0 0 0 8px rgba(34,197,94,.14)}.station-card h3{position:relative;color:#0a2f6f;font-size:23px;margin-bottom:8px}.station-card>p{position:relative;color:#173f7d;margin-bottom:16px}.station-meta{position:relative;display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(8,173,210,.12)}.station-meta span{color:#173f7d}.station-meta strong{text-align:right;color:#0a2f6f}.status-pill.online{text-transform:none}.status-pill.warning{text-transform:none}@media(max-width:1120px){.about-intro-grid,.about-audience-grid,.contact-company-layout,.contact-form-layout,.demo-command-grid,.demo-grid.refined{grid-template-columns:1fr}.brief-panel{position:static}.demo-summary-grid,.demo-metric-grid.refined{grid-template-columns:repeat(2,1fr)}.station-grid{grid-template-columns:1fr 1fr}.about-process{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.brand-logo{width:220px}.header-inner{min-height:76px}.contact-company-hero,.about-story-card,.about-identity-card,.about-cta-card,.demo-command-center{border-radius:28px;padding:24px}.company-data-matrix{grid-template-columns:1fr}.contact-form-layout,.contact-company-layout{gap:20px}.demo-command-head{display:grid}.demo-live-box{justify-items:start}.demo-summary-grid,.demo-metric-grid.refined,.station-grid,.about-process{grid-template-columns:1fr}.about-audience-grid{gap:20px}.about-checks{grid-template-columns:1fr}.demo-bar-row.refined{grid-template-columns:52px 1fr 44px}.demo-bar-row.refined .bar-track.alt,.demo-bar-row.refined .bar-track.alt + b,.demo-bar-row.refined .bar-track.dust,.demo-bar-row.refined .bar-track.dust + b,.demo-bar-row.refined .bar-track.fine,.demo-bar-row.refined .bar-track.fine + b{display:none}.footer-logo-card{padding:10px 12px}.footer-logo{width:260px}}@media(max-width:520px){.brand-logo{width:190px}.contact-company-logo{padding:12px}.contact-company-hero h2{font-size:32px}.aqi-card strong{font-size:60px}.about-story-card h2,.about-cta-card h2,.refined-form h2{font-size:30px}.event-stream article{grid-template-columns:1fr}.demo-command-center{padding:20px}.contact-form-card.refined-form{padding:22px}.site-nav{top:82px}}
/* =========================
V6 refinement: menu order, footer without logo, company contact
========================= */
.site-nav{gap:6px}.nav-dropdown{order:0}.footer-grid.footer-grid-v6{grid-template-columns:1.25fr .85fr 1.05fr 1.05fr}.footer-brand-block h2{font-size:30px;line-height:1;color:#fff;letter-spacing:-.035em;margin-bottom:10px}.footer-tagline{color:#08add2!important;font-weight:900}.footer-legal-block p strong{color:#fff}.footer-grid-v6 p{font-size:14px}.about-company-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:28px;align-items:start}.about-story-v6 p{color:#173f7d;margin-bottom:14px}.company-facts-card{border:1px solid rgba(8,173,210,.2);border-radius:32px;background:linear-gradient(180deg,#fff,#f4fbfd);box-shadow:0 18px 48px rgba(10,47,111,.1);padding:30px}.company-facts-card h2{font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.04em;color:#0a2f6f;margin-bottom:8px}.company-facts-card>p{color:#173f7d;margin-bottom:20px;font-weight:800}.company-facts-list{display:grid;gap:12px}.company-facts-list div{padding:15px;border-radius:18px;background:#fff;border:1px solid rgba(8,173,210,.14)}.company-facts-list span,.registry-grid span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900;color:#08add2;margin-bottom:6px}.company-facts-list strong,.registry-grid strong{display:block;color:#0a2f6f;line-height:1.32}.contact-v6-section{padding-top:72px}.contact-v6-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:28px;align-items:start}.company-registry-card{position:relative;overflow:hidden;border:1px solid rgba(8,173,210,.2);border-radius:34px;background:linear-gradient(180deg,#fff,#f4fbfd);box-shadow:0 22px 58px rgba(10,47,111,.12);padding:34px}.company-registry-card:after{content:"";position:absolute;right:-90px;top:-90px;width:230px;height:230px;border-radius:50%;background:rgba(8,173,210,.11)}.company-registry-card h2{position:relative;z-index:1;font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.05em;color:#0a2f6f;margin-bottom:8px}.company-registry-card>p,.company-registry-card .eyebrow,.registry-grid{position:relative;z-index:1}.company-subtitle{font-weight:900;color:#08add2!important;margin-bottom:10px}.registry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}.registry-grid div{padding:17px;border-radius:20px;background:#fff;border:1px solid rgba(8,173,210,.14);box-shadow:0 8px 22px rgba(10,47,111,.055)}.registry-grid .wide{grid-column:1/-1}.contact-v6-side{display:grid;gap:18px}.contact-form-layout-v6{grid-template-columns:370px 1fr}.contact-form-layout-v6 .brief-panel{background:linear-gradient(180deg,#fff,#f4fbfd)}.contact-form-layout-v6 .brief-panel .plain-list li{font-size:15px}.contact-form-card.refined-form{border:1px solid rgba(8,173,210,.2);box-shadow:0 18px 48px rgba(10,47,111,.1)}.contact-form select{cursor:pointer}.page-hero .pill-row span:empty{display:none}@media(max-width:1120px){.footer-grid.footer-grid-v6,.about-company-grid,.contact-v6-grid,.contact-form-layout-v6{grid-template-columns:1fr}.company-facts-card{order:-1}.contact-v6-side{grid-template-columns:1fr 1fr}.contact-form-layout-v6 .brief-panel{position:static}}@media(max-width:860px){.contact-v6-side{grid-template-columns:1fr}.registry-grid{grid-template-columns:1fr}.company-registry-card,.company-facts-card{border-radius:26px;padding:24px}.footer-grid.footer-grid-v6{gap:24px}.footer-brand-block h2{font-size:26px}}
/* =========================
V7 compact/lite visual pass
Content and PHP templates are unchanged.
========================= */
body{line-height:1.48;background:radial-gradient(circle at top left,rgba(8,173,210,.085),transparent 30%),radial-gradient(circle at bottom right,rgba(10,47,111,.07),transparent 34%),#fff}.container{width:min(1120px,calc(100% - 32px))}.narrow{width:min(860px,calc(100% - 32px))}.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.header-inner{min-height:66px;gap:16px}.brand-logo{width:198px;max-height:48px}.site-nav{gap:2px}.nav-link,.lang-switch{padding:8px 10px;font-size:13px;gap:6px}.dropdown-menu{top:calc(100% + 7px);min-width:230px;padding:8px;border-radius:16px;box-shadow:0 14px 34px rgba(10,47,111,.14)}.dropdown-item{padding:9px 10px;border-radius:12px;font-size:13px}.flag{width:27px;height:18px}.menu-toggle{padding:8px 10px;border-radius:12px}.hero-section{min-height:auto;padding:58px 0 54px}.hero-grid{gap:34px}.eyebrow{font-size:12px;margin-bottom:11px;letter-spacing:.095em}.hero-copy h1,.page-hero h1{font-size:clamp(34px,5.8vw,62px);margin-bottom:16px}.hero-copy h1 span{font-size:clamp(23px,3.8vw,38px);margin-top:8px}.hero-lead,.lead{font-size:clamp(16px,1.8vw,20px);line-height:1.5;margin-bottom:20px}.hero-actions{gap:10px;margin-bottom:18px}.btn{min-height:42px;padding:10px 16px;font-size:14px;box-shadow:none}.btn-primary{box-shadow:0 10px 22px rgba(8,173,210,.18)}.btn-outline{box-shadow:0 8px 18px rgba(10,47,111,.075)}.pill-row{gap:7px}.pill-row span,.footer-pill{padding:6px 10px;font-size:12px}.hero-panel{border-radius:24px;padding:24px;box-shadow:0 12px 30px rgba(10,47,111,.08)}.hero-panel img{margin-bottom:20px;width:min(100%,460px)}.section{padding:56px 0}.section-heading{margin:0 auto 28px}.section-heading h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:10px}.section-heading p{font-size:16px}.page-hero{padding:50px 0 36px}.page-hero h1{font-size:clamp(32px,4.8vw,52px)}.card-grid{gap:16px}.stats-grid{gap:12px;margin-bottom:20px}.stats-grid div,.metric-card,.sensor-card,.side-panel,.info-card,.feature-card,.plan-card,.contact-form-card{border-radius:18px;box-shadow:0 8px 22px rgba(10,47,111,.06)}.stats-grid div{padding:14px}.stats-grid strong{font-size:clamp(22px,2.6vw,32px);margin-bottom:6px}.stats-grid span{font-size:14px}.stats-grid small{font-size:12px}.info-card,.feature-card,.plan-card,.metric-card,.sensor-card{padding:18px}.info-card h3,.feature-card h3,.plan-card h3,.metric-card strong,.sensor-card h3{font-size:18px;margin-bottom:8px}.info-card p,.feature-card p,.plan-card p,.metric-card p,.sensor-card p{font-size:14px}.info-card a{margin-top:12px}.metric-card span,.sensor-card strong{font-size:16px;margin-bottom:7px}.timeline{gap:12px}.timeline article{padding:16px;border-radius:18px;box-shadow:0 8px 20px rgba(10,47,111,.055)}.timeline span{width:34px;height:34px;margin-bottom:10px}.timeline h3{font-size:16px}.check-grid{gap:12px}.check-grid div{padding:14px 14px 14px 38px;border-radius:16px}.check-grid div:before{left:15px}.split{grid-template-columns:1fr 300px;gap:20px}.side-panel{padding:18px}.stat-line{padding:10px 0}.ordered-list{gap:10px}.ordered-list li{padding:14px 14px 14px 58px;border-radius:16px;box-shadow:0 7px 18px rgba(10,47,111,.055)}.ordered-list li:before{left:14px;top:13px;width:30px;height:30px}.comparison-grid{gap:18px}.comparison-card{border-radius:22px;padding:22px;box-shadow:0 12px 30px rgba(10,47,111,.12)}.comparison-card h3{font-size:24px}.comparison-card>p{margin-bottom:14px}.comparison-card div{padding:11px 0}.table-wrap{border-radius:18px;box-shadow:0 9px 24px rgba(10,47,111,.055)}th,td{padding:12px 13px;font-size:14px}.plan-card{gap:10px}.plan-card ul,.plain-list{gap:8px}.plan-card .badge{padding:5px 9px;font-size:11px}.form-row{gap:12px}label{gap:6px;font-size:14px}input,select,textarea,.contact-form input,.contact-form select,.contact-form textarea{padding:10px 12px;border-radius:12px;font-size:14px}.consent-box{padding:12px;border-radius:14px}.site-footer{padding-top:38px}.footer-grid.footer-grid-v6{gap:24px}.footer-brand-block h2{font-size:26px;margin-bottom:7px}.site-footer h2{font-size:16px;margin-bottom:10px}.site-footer p,.footer-grid-v6 p{font-size:13px;margin-bottom:6px}.footer-bottom{margin-top:24px;padding:13px 18px;font-size:13px}.language-shell{padding:18px}.language-card-main{border-radius:26px;padding:32px;box-shadow:0 12px 32px rgba(10,47,111,.09)}.language-logo{margin-bottom:20px}.language-card-main h1{font-size:clamp(31px,5vw,48px)}.language-card-main p{font-size:16px}.language-buttons{gap:12px;margin-top:22px}.language-button{padding:16px;border-radius:18px}.about-company-grid,.contact-v6-grid,.contact-form-layout-v6{gap:20px}.about-story-card,.about-identity-card,.about-cta-card,.company-facts-card,.company-registry-card,.contact-form-card.refined-form,.brief-panel{border-radius:24px;padding:24px;box-shadow:0 12px 32px rgba(10,47,111,.075)}.company-facts-card h2,.company-registry-card h2{font-size:clamp(28px,4vw,44px)}.company-facts-list,.registry-grid{gap:10px}.company-facts-list div,.registry-grid div{padding:13px;border-radius:15px}.company-facts-list span,.registry-grid span{font-size:11px;margin-bottom:4px}.contact-v6-section{padding-top:48px}.contact-v6-side{gap:14px}.contact-form-layout-v6{grid-template-columns:330px 1fr}.contact-form{gap:12px}.refined-form h2{font-size:clamp(26px,3.8vw,38px)}.contact-methods,.contact-channel-stack{gap:12px}.contact-channel-card{padding:16px;border-radius:18px}.demo-pro-section{padding-bottom:28px}.demo-command-center{border-radius:26px;padding:24px;box-shadow:0 16px 42px rgba(10,47,111,.18)}.demo-command-center:before{inset:10px;border-radius:20px}.demo-command-head{margin-bottom:20px}.demo-command-head h2{font-size:clamp(30px,4vw,46px)}.demo-command-grid{grid-template-columns:235px 1fr;gap:14px;margin-bottom:14px}.aqi-card{min-height:178px;padding:20px;border-radius:20px}.aqi-card strong{font-size:58px;margin:8px 0 4px}.aqi-card em{padding:5px 9px;margin-bottom:8px}.demo-summary-grid,.demo-metric-grid.refined{gap:10px}.demo-summary-grid article{padding:15px;border-radius:18px}.demo-summary-grid span{margin-bottom:5px}.demo-summary-grid strong{font-size:24px}.demo-metric-card,.demo-metric-card.refined{padding:16px;border-radius:18px;box-shadow:0 9px 24px rgba(10,47,111,.08)}.demo-metric-card strong,.demo-metric-card.refined strong{font-size:clamp(28px,3.4vw,38px)}.metric-top{margin-bottom:8px}.metric-trend{padding:5px 8px;font-size:12px;margin-bottom:8px}.demo-grid,.demo-grid.refined{grid-template-columns:1fr 340px;gap:20px}.demo-chart-card,.demo-side-panel,.demo-chart-card.refined,.demo-side-panel.refined{border-radius:22px;padding:20px;box-shadow:0 9px 24px rgba(10,47,111,.065)}.section-heading.left{margin-bottom:18px}.demo-legend{gap:6px;margin-bottom:14px}.demo-legend span{padding:5px 8px}.demo-bars{gap:10px}.demo-bar-row.refined{padding:8px;border-radius:12px}.event-stream{gap:9px}.event-stream article{padding:10px;border-radius:13px}.station-grid{gap:14px}.station-card{border-radius:20px;padding:18px;box-shadow:0 9px 24px rgba(10,47,111,.065)}.station-card h3{font-size:20px}.station-dot{margin-bottom:12px}.station-meta{padding:9px 0}.legal-content{gap:18px}.legal-content article{padding-bottom:16px}.legal-content h2{font-size:21px}
@media(max-width:1120px){.split,.contact-form-layout-v6,.demo-command-grid,.demo-grid,.demo-grid.refined{grid-template-columns:1fr}.contact-v6-side{grid-template-columns:1fr 1fr}.demo-summary-grid,.demo-metric-grid.refined{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.container,.narrow{width:min(100% - 26px,1120px)}.header-inner{min-height:62px}.brand-logo{width:178px;max-height:42px}.site-nav{top:62px}.hero-section{padding:42px 0 40px}.hero-grid{gap:24px}.section{padding:44px 0}.page-hero{padding:38px 0 28px}.section-heading{margin-bottom:22px}.card-grid.two,.card-grid.three,.card-grid.four,.timeline,.check-grid,.comparison-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.contact-v6-side,.demo-summary-grid,.demo-metric-grid.refined,.station-grid{grid-template-columns:1fr}.contact-company-hero,.about-story-card,.about-identity-card,.about-cta-card,.demo-command-center,.company-registry-card,.company-facts-card{border-radius:20px;padding:20px}.footer-grid.footer-grid-v6{gap:18px}.footer-brand-block h2{font-size:23px}.language-card-main{padding:24px;border-radius:22px}}
@media(max-width:520px){.container,.narrow{width:min(100% - 22px,1120px)}.brand-logo{width:160px}.hero-copy h1,.page-hero h1{font-size:clamp(30px,10vw,40px)}.hero-copy h1 span{font-size:clamp(22px,7vw,30px)}.hero-lead,.lead{font-size:16px}.hero-panel{padding:18px;border-radius:20px}.btn{width:100%;min-height:40px}.hero-actions{width:100%}.stats-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.language-buttons{grid-template-columns:1fr}.contact-form-card.refined-form{padding:18px}.demo-command-center{padding:18px}.aqi-card strong{font-size:52px}.demo-bar-row.refined{grid-template-columns:48px 1fr 42px}.site-footer{padding-top:30px}.footer-bottom{margin-top:18px}.site-nav{top:62px}}
/* =========================
V8 offer measurement catalogue
========================= */
.offer-measurements-section{padding-top:48px}.measurement-group-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.measurement-group-card{padding:16px;border:1px solid rgba(8,173,210,.20);border-radius:18px;background:linear-gradient(180deg,#fff,#f4fbfd);box-shadow:0 8px 22px rgba(10,47,111,.055)}.measurement-group-card h3{font-size:17px;line-height:1.15;color:#0a2f6f;margin-bottom:7px}.measurement-group-card p{font-size:13px;color:#173f7d}.measurement-catalog-card{overflow:hidden;border:1px solid rgba(8,173,210,.22);border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(10,47,111,.07)}.measurement-catalog-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#0a2f6f,#08add2);color:#fff;text-align:center}.measurement-catalog-head strong{font-size:34px;line-height:1}.measurement-catalog-head span{font-size:15px;font-weight:900}.measurement-table-wrap{overflow-x:auto}.measurement-table{min-width:0}.measurement-table th{padding:10px 14px;font-size:12px}.measurement-table td{padding:10px 14px;font-size:14px}.measurement-table td:first-child{width:30%;font-weight:700}.measurement-table code{display:inline-flex;padding:4px 8px;border-radius:999px;background:#e8faff;color:#0a2f6f;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:12px}.measurement-note{padding:13px 16px;margin:0;color:#173f7d;background:#f4fbfd;border-top:1px solid rgba(8,173,210,.16);font-size:13px}@media(max-width:980px){.measurement-group-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.measurement-group-grid{grid-template-columns:1fr}.measurement-catalog-head{align-items:flex-start;flex-direction:column;text-align:left}.measurement-catalog-head strong{font-size:30px}.measurement-table{min-width:520px}.measurement-table th,.measurement-table td{padding:9px 10px}}
/* =========================
DEMO / LIVE — REAL MEASUREMENTS
========================= */
.demo-live-section{padding-bottom:30px}.live-dashboard-shell,.live-panel-card{border:1px solid rgba(8,173,210,.20);background:rgba(255,255,255,.9);border-radius:24px;box-shadow:0 12px 32px rgba(10,47,111,.075)}.live-dashboard-shell{padding:24px;position:relative;overflow:hidden}.live-dashboard-shell:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,173,210,.08),transparent 44%),radial-gradient(circle at right top,rgba(10,47,111,.08),transparent 40%);pointer-events:none}.live-dashboard-shell>*{position:relative}.live-dashboard-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;margin-bottom:18px}.live-dashboard-head h2{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.035em;color:#0a2f6f;margin-bottom:8px}.live-dashboard-head p{color:#173f7d}.live-sync-card{display:grid;gap:6px;justify-items:end;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid rgba(8,173,210,.20)}.live-sync-card small{color:#173f7d;font-size:12px}.live-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#e8faff;color:#0a2f6f;font-weight:900;font-size:12px;letter-spacing:.08em}.live-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.12)}.live-badge-pulse:before{animation:livePulse 1.8s infinite}@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}.live-status-strip{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(8,173,210,.18);border-radius:16px;background:rgba(232,250,255,.62);margin-bottom:18px}.live-status-strip strong{color:#0a2f6f}.live-status-strip em{font-style:normal;color:#173f7d;font-size:13px}.status-dot{width:11px;height:11px;border-radius:50%;background:#94a3b8;display:inline-block;box-shadow:0 0 0 5px rgba(148,163,184,.14);flex:0 0 auto}.status-dot.online,.status-dot.ok{background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.14)}.status-dot.warning,.status-dot.stale{background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.14)}.status-dot.offline{background:#64748b;box-shadow:0 0 0 5px rgba(100,116,139,.14)}.live-overview-grid{display:grid;grid-template-columns:235px 1fr;gap:14px}.live-aqi-card{min-height:180px;border-radius:20px;padding:20px;background:#0a2f6f;color:#fff;display:flex;flex-direction:column;justify-content:center}.live-aqi-card span{font-weight:900;font-size:13px;opacity:.86}.live-aqi-card strong{font-size:58px;line-height:.95;margin:8px 0 4px}.live-aqi-card em{font-style:normal;align-self:flex-start;border-radius:999px;padding:5px 9px;background:rgba(255,255,255,.14);font-weight:900;font-size:12px;margin-bottom:8px}.live-aqi-card p{font-size:13px;opacity:.88}.live-aqi-card.ok{background:linear-gradient(135deg,#0a2f6f,#0f766e)}.live-aqi-card.warning{background:linear-gradient(135deg,#0a2f6f,#b45309)}.live-aqi-card.alert{background:linear-gradient(135deg,#0a2f6f,#991b1b)}.live-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.live-kpi-grid article{padding:16px;border:1px solid rgba(8,173,210,.18);border-radius:18px;background:rgba(255,255,255,.78)}.live-kpi-grid span{display:block;color:#173f7d;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.live-kpi-grid strong{display:block;color:#0a2f6f;font-size:24px;line-height:1.05;margin:6px 0}.live-kpi-grid small{color:#173f7d}.live-main-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}.live-main-grid.reverse{grid-template-columns:1fr 360px}.live-main-grid.reverse .live-devices-card{order:2}.live-panel-card{padding:20px}.live-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.live-metric-card{border:1px solid rgba(8,173,210,.18);border-radius:18px;padding:16px;background:#fff;box-shadow:0 8px 22px rgba(10,47,111,.055)}.live-metric-card .metric-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.live-metric-card .metric-top span{color:#173f7d;font-size:13px;font-weight:900}.live-metric-card .metric-top em{font-style:normal;font-size:11px;border-radius:999px;background:#e8faff;color:#0a2f6f;padding:4px 7px;font-weight:900}.live-metric-card strong{display:flex;align-items:flex-end;gap:6px;color:#0a2f6f;font-size:clamp(28px,3.4vw,38px);line-height:1;margin-bottom:7px}.live-metric-card strong small{font-size:13px;color:#173f7d;margin-bottom:4px}.metric-device-line{font-size:12px;color:#173f7d;margin-bottom:10px}.metric-bar{height:7px;border-radius:999px;background:#edf8fb;overflow:hidden}.metric-bar i{display:block;height:100%;border-radius:inherit;background:#08add2}.live-metric-card.warning .metric-bar i{background:#f59e0b}.live-metric-card.alert .metric-bar i{background:#dc2626}.live-events{display:grid;gap:9px}.live-events article{border:1px solid rgba(8,173,210,.16);border-radius:14px;padding:11px;background:#fff}.live-events span{display:block;color:#08add2;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}.live-events p{font-size:13px;color:#173f7d}.live-events article.warning{border-color:rgba(245,158,11,.28);background:#fffbeb}.live-events article.alert{border-color:rgba(220,38,38,.28);background:#fef2f2}.live-events article.ok{border-color:rgba(22,163,74,.22);background:#f0fdf4}.live-device-list{display:grid;gap:10px}.live-device-card{border:1px solid rgba(8,173,210,.18);border-radius:16px;padding:14px;background:#fff}.live-device-title{display:flex;align-items:center;gap:9px;margin-bottom:6px}.live-device-title strong{color:#0a2f6f;font-size:16px}.live-device-card p{color:#173f7d;font-size:13px;margin-bottom:10px}.live-device-meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(8,173,210,.12);padding-top:7px;margin-top:7px}.live-device-meta span{color:#173f7d;font-size:12px}.live-device-meta b{font-size:12px;color:#0a2f6f}.live-device-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.live-device-tags span{font-size:11px;font-weight:900;color:#0a2f6f;background:#e8faff;border-radius:999px;padding:4px 7px}.live-chart-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.live-chart-legend span{font-size:12px;font-weight:900;color:#0a2f6f;border:1px solid rgba(8,173,210,.18);background:#fff;border-radius:999px;padding:5px 8px}.live-chart{display:grid;gap:8px}.live-chart-row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;border:1px solid rgba(8,173,210,.12);border-radius:12px;padding:8px;background:#fff}.live-chart-row>span{font-size:12px;font-weight:900;color:#173f7d}.live-chart-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.live-mini-bar{height:10px;border-radius:999px;background:#edf8fb;overflow:hidden}.live-mini-bar i{display:block;height:100%;border-radius:inherit;background:#08add2}.live-mini-bar.pm10 i{background:#0a2f6f}.live-mini-bar.temperature i{background:#f59e0b}.live-mini-bar.humidity i{background:#14b8a6}.live-mini-bar.pressure i{background:#6366f1}.live-mini-bar.light_intensity i{background:#eab308}.live-skeleton{border:1px dashed rgba(8,173,210,.28);border-radius:16px;padding:18px;text-align:center;color:#173f7d;background:rgba(232,250,255,.45);font-weight:800}@media(max-width:1120px){.live-overview-grid,.live-main-grid,.live-main-grid.reverse{grid-template-columns:1fr}.live-metric-grid{grid-template-columns:repeat(2,1fr)}.live-main-grid.reverse .live-devices-card{order:initial}}@media(max-width:720px){.live-dashboard-head{grid-template-columns:1fr}.live-sync-card{justify-items:start}.live-kpi-grid,.live-metric-grid{grid-template-columns:1fr}.live-overview-grid{gap:12px}.live-status-strip{align-items:flex-start}.live-chart-bars{grid-template-columns:repeat(3,1fr)}.live-chart-row{grid-template-columns:45px 1fr}.live-panel-card,.live-dashboard-shell{padding:18px;border-radius:20px}}
/* =========================
Demo/Live v13 — professional device-focused layout
========================= */
.demo-live-section {
padding-bottom: 22px;
}
.live-measurements-section,
.live-trend-section {
padding-top: 34px;
padding-bottom: 34px;
}
.live-dashboard-shell {
border-color: rgba(8, 173, 210, 0.18);
background: linear-gradient(145deg, #ffffff 0%, #f7fdff 52%, #edfaff 100%);
box-shadow: 0 14px 40px rgba(10, 47, 111, 0.08);
}
.live-dashboard-head h2 {
max-width: 760px;
}
.live-status-strip {
border-radius: 18px;
background: linear-gradient(90deg, rgba(232, 250, 255, 0.92), rgba(255, 255, 255, 0.82));
}
.live-overview-grid {
align-items: stretch;
}
.live-aqi-card {
min-height: 170px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 14px 30px rgba(10, 47, 111, 0.14);
}
.live-kpi-grid article {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 118px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 22px rgba(10, 47, 111, 0.045);
}
.live-main-grid {
grid-template-columns: minmax(0, 1fr) 320px;
align-items: start;
}
.live-panel-card {
border-color: rgba(8, 173, 210, 0.18);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 36px rgba(10, 47, 111, 0.07);
}
.live-measurements-card {
padding: clamp(20px, 2.2vw, 28px);
}
.live-metric-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.live-device-section {
overflow: hidden;
border: 1px solid rgba(8, 173, 210, 0.18);
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
box-shadow: 0 12px 28px rgba(10, 47, 111, 0.06);
}
.live-device-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 18px 20px;
background:
radial-gradient(circle at right top, rgba(8, 173, 210, 0.12), transparent 34%),
linear-gradient(135deg, rgba(10, 47, 111, 0.06), rgba(232, 250, 255, 0.8));
border-bottom: 1px solid rgba(8, 173, 210, 0.14);
}
.live-device-kicker {
display: inline-flex;
margin-bottom: 6px;
color: #08add2;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.11em;
}
.live-device-section-head h3 {
margin: 0 0 4px;
color: #0a2f6f;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.05;
letter-spacing: -0.025em;
}
.live-device-section-head p {
margin: 0;
color: #173f7d;
font-size: 14px;
}
.live-device-section-status {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 10px;
align-items: center;
min-width: 190px;
padding: 12px 14px;
border: 1px solid rgba(8, 173, 210, 0.16);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
}
.live-device-section-status .status-dot {
grid-row: 1 / span 2;
}
.live-device-section-status strong {
color: #0a2f6f;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.live-device-section-status small {
color: #173f7d;
font-size: 12px;
}
.live-device-section-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 20px 0;
}
.live-device-section-meta span {
display: inline-flex;
gap: 5px;
align-items: center;
padding: 7px 10px;
border-radius: 999px;
background: #e8faff;
color: #173f7d;
font-size: 12px;
font-weight: 800;
}
.live-device-section-meta strong {
color: #0a2f6f;
}
.live-device-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
gap: 12px;
padding: 16px 20px 20px;
}
.live-metric-card {
position: relative;
overflow: hidden;
min-height: 132px;
padding: 15px;
border-radius: 18px;
border-color: rgba(8, 173, 210, 0.16);
background: #ffffff;
box-shadow: 0 8px 20px rgba(10, 47, 111, 0.045);
}
.live-metric-card:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #08add2;
}
.live-metric-card.warning:before { background: #f59e0b; }
.live-metric-card.alert:before { background: #dc2626; }
.live-metric-card.unknown:before,
.live-metric-card.is-empty:before { background: #94a3b8; }
.live-metric-card .metric-top span {
font-size: 12px;
letter-spacing: 0.02em;
}
.live-metric-card .metric-top em {
background: rgba(8, 173, 210, 0.09);
color: #173f7d;
}
.live-metric-card strong {
margin: 8px 0 8px;
font-size: clamp(27px, 3vw, 36px);
}
.live-metric-card strong small {
font-weight: 900;
}
.metric-bottom {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
color: #173f7d;
font-size: 12px;
font-weight: 800;
}
.metric-bottom b {
color: #08add2;
}
.live-metric-card.is-empty {
background: repeating-linear-gradient(135deg, #fff, #fff 12px, #f7fdff 12px, #f7fdff 24px);
}
.live-metric-card.is-empty strong,
.live-metric-card.is-empty .metric-bottom b {
color: #64748b;
}
.live-devices-card,
.live-events-card {
position: sticky;
top: 96px;
}
.live-device-card {
border-radius: 18px;
box-shadow: 0 8px 20px rgba(10, 47, 111, 0.045);
}
.live-device-title {
align-items: flex-start;
}
.live-device-title em {
margin-left: auto;
padding: 4px 8px;
border-radius: 999px;
background: #e8faff;
color: #0a2f6f;
font-size: 11px;
font-style: normal;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.live-device-tags span.ok { background: #dcfce7; color: #166534; }
.live-device-tags span.warning { background: #fef3c7; color: #92400e; }
.live-device-tags span.alert { background: #fee2e2; color: #991b1b; }
.live-device-tags span.unknown { background: #f1f5f9; color: #475569; }
.live-chart-card {
min-height: 320px;
}
.live-chart-row {
background: linear-gradient(90deg, #ffffff, #f8fdff);
}
.live-skeleton {
background: linear-gradient(135deg, rgba(232, 250, 255, 0.72), rgba(255, 255, 255, 0.88));
}
@media (max-width: 1120px) {
.live-main-grid,
.live-main-grid.reverse {
grid-template-columns: 1fr;
}
.live-devices-card,
.live-events-card {
position: static;
}
}
@media (max-width: 760px) {
.live-device-section-head {
grid-template-columns: 1fr;
padding: 16px;
}
.live-device-section-status {
min-width: 0;
}
.live-device-section-meta {
padding: 12px 16px 0;
}
.live-device-metric-grid {
grid-template-columns: 1fr;
padding: 14px 16px 16px;
}
.live-metric-card {
min-height: 118px;
}
}
/* =========================
V14 — Demo/Live compact professional dashboard
========================= */
.demo-live-section {
padding-top: 34px;
padding-bottom: 20px;
}
.live-measurements-section,
.live-trend-section {
padding-top: 34px;
padding-bottom: 34px;
}
.live-dashboard-shell,
.live-panel-card,
.live-device-section,
.live-device-card,
.live-metric-card {
box-shadow: 0 8px 24px rgba(10, 47, 111, 0.052);
}
.live-dashboard-shell {
padding: 18px;
border-radius: 20px;
}
.live-dashboard-head {
margin-bottom: 12px;
gap: 14px;
}
.live-dashboard-head h2 {
margin-bottom: 4px;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.03em;
}
.live-dashboard-head p {
max-width: 740px;
font-size: 14px;
line-height: 1.42;
}
.live-sync-card {
min-width: 230px;
padding: 10px 12px;
border-radius: 16px;
gap: 4px;
}
.live-sync-card small {
font-size: 11px;
}
.live-badge {
padding: 5px 9px;
font-size: 11px;
}
.live-status-strip {
min-height: 42px;
margin-bottom: 14px;
padding: 9px 12px;
border-radius: 14px;
gap: 8px;
}
.live-status-strip em {
font-size: 12px;
color: #426392;
}
.live-overview-grid {
grid-template-columns: 190px 1fr;
gap: 10px;
}
.live-aqi-card {
min-height: 128px;
padding: 16px;
border-radius: 18px;
}
.live-aqi-card span {
font-size: 11px;
}
.live-aqi-card strong {
margin: 5px 0 3px;
font-size: 44px;
}
.live-aqi-card em {
margin-bottom: 5px;
padding: 4px 8px;
font-size: 11px;
}
.live-aqi-card p {
font-size: 12px;
line-height: 1.35;
}
.live-kpi-grid {
gap: 8px;
}
.live-kpi-grid article {
min-height: 88px;
padding: 12px;
border-radius: 16px;
}
.live-kpi-grid span {
font-size: 10px;
letter-spacing: 0.075em;
}
.live-kpi-grid strong {
margin: 4px 0;
font-size: 21px;
}
.live-kpi-grid small {
font-size: 11px;
line-height: 1.25;
}
.live-main-grid,
.live-main-grid.reverse {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
}
.live-panel-card {
padding: 16px;
border-radius: 20px;
}
.live-panel-card .section-heading,
.live-panel-card .section-heading.left {
margin-bottom: 14px;
}
.live-panel-card .section-heading h2,
.live-panel-card .section-heading.left h2 {
font-size: clamp(25px, 2.7vw, 34px);
letter-spacing: -0.03em;
}
.live-panel-card .section-heading p,
.live-panel-card .section-heading.left p {
font-size: 14px;
line-height: 1.45;
}
.live-metric-grid {
gap: 12px;
}
.live-device-section {
border-radius: 18px;
background: #fff;
}
.live-device-section-head {
padding: 13px 15px;
gap: 12px;
background: linear-gradient(135deg, rgba(232, 250, 255, 0.64), rgba(255, 255, 255, 0.92));
}
.live-device-kicker {
margin-bottom: 4px;
font-size: 10px;
letter-spacing: 0.1em;
}
.live-device-section-head h3 {
margin-bottom: 2px;
font-size: clamp(19px, 2vw, 24px);
}
.live-device-section-head p {
font-size: 12px;
line-height: 1.35;
}
.live-device-section-status {
min-width: 166px;
padding: 9px 10px;
border-radius: 15px;
gap: 2px 8px;
}
.live-device-section-status strong {
font-size: 11px;
letter-spacing: 0.055em;
}
.live-device-section-status small {
font-size: 10px;
}
.status-dot {
width: 9px;
height: 9px;
box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}
.status-dot.online,
.status-dot.ok {
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.status-dot.warning,
.status-dot.stale {
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}
.status-dot.offline {
box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.12);
}
.live-device-section-meta {
padding: 9px 15px 0;
gap: 6px;
}
.live-device-section-meta span {
padding: 5px 8px;
font-size: 11px;
background: rgba(232, 250, 255, 0.72);
}
.live-device-metric-grid {
grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
gap: 9px;
padding: 11px 15px 15px;
}
.live-metric-card {
min-height: 104px;
padding: 11px 12px 10px 14px;
border-radius: 15px;
}
.live-metric-card:before {
width: 3px;
}
.live-metric-card .metric-top {
margin-bottom: 5px;
gap: 7px;
}
.live-metric-card .metric-top span {
font-size: 11px;
line-height: 1.15;
}
.live-metric-card .metric-top em {
padding: 3px 6px;
font-size: 9.5px;
letter-spacing: 0.02em;
}
.live-metric-card strong {
margin: 5px 0 6px;
font-size: clamp(22px, 2.5vw, 30px);
}
.live-metric-card strong small {
margin-bottom: 3px;
font-size: 11px;
}
.metric-bottom {
margin-bottom: 6px;
font-size: 10.5px;
}
.metric-bar {
height: 5px;
}
.live-events {
gap: 7px;
}
.live-events article {
padding: 9px 10px;
border-radius: 13px;
}
.live-events span {
margin-bottom: 3px;
font-size: 10px;
}
.live-events p {
font-size: 12px;
line-height: 1.38;
}
.live-device-list {
gap: 8px;
}
.live-device-card {
padding: 11px;
border-radius: 15px;
}
.live-device-title {
gap: 7px;
margin-bottom: 5px;
}
.live-device-title strong {
font-size: 14px;
}
.live-device-title em {
padding: 3px 7px;
font-size: 9.5px;
}
.live-device-card p {
margin-bottom: 8px;
font-size: 12px;
line-height: 1.35;
}
.live-device-meta {
padding-top: 6px;
margin-top: 6px;
}
.live-device-meta span,
.live-device-meta b {
font-size: 10.5px;
}
.live-device-tags {
gap: 4px;
margin-top: 8px;
}
.live-device-tags span {
padding: 3px 6px;
font-size: 9.5px;
}
.live-chart-card {
min-height: 260px;
}
.live-chart-legend {
gap: 5px;
margin-bottom: 10px;
}
.live-chart-legend span {
padding: 4px 7px;
font-size: 10.5px;
}
.live-chart {
gap: 6px;
}
.live-chart-row {
grid-template-columns: 48px 1fr;
gap: 8px;
padding: 6px 8px;
border-radius: 10px;
}
.live-chart-row > span {
font-size: 10.5px;
}
.live-chart-bars {
gap: 5px;
}
.live-mini-bar {
height: 8px;
}
.live-skeleton {
padding: 13px;
border-radius: 13px;
font-size: 13px;
}
@media (max-width: 1120px) {
.live-main-grid,
.live-main-grid.reverse {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.demo-live-section,
.live-measurements-section,
.live-trend-section {
padding-top: 24px;
padding-bottom: 24px;
}
.live-dashboard-shell,
.live-panel-card {
padding: 14px;
border-radius: 18px;
}
.live-dashboard-head,
.live-overview-grid,
.live-device-section-head {
grid-template-columns: 1fr;
}
.live-sync-card {
min-width: 0;
justify-items: start;
}
.live-aqi-card {
min-height: 116px;
}
.live-kpi-grid {
grid-template-columns: 1fr;
}
.live-device-section-head {
padding: 12px;
}
.live-device-section-status {
min-width: 0;
}
.live-device-section-meta {
padding: 8px 12px 0;
}
.live-device-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 10px 12px 12px;
}
.live-metric-card {
min-height: 98px;
}
}
@media (max-width: 460px) {
.live-device-metric-grid {
grid-template-columns: 1fr;
}
}
/* =========================
V15 — Demo/Live AJAX refresh polish
========================= */
[data-live-demo] {
position: relative;
}
.live-sync-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.live-refresh-button {
border: 1px solid rgba(8, 173, 210, 0.28);
background: rgba(255, 255, 255, 0.88);
color: #0a2f6f;
border-radius: 999px;
padding: 5px 9px;
font-size: 10.5px;
font-weight: 900;
line-height: 1;
cursor: pointer;
transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.live-refresh-button:hover {
transform: translateY(-1px);
background: #e8faff;
border-color: rgba(8, 173, 210, 0.44);
}
.live-refresh-button:disabled {
cursor: wait;
opacity: 0.62;
transform: none;
}
.live-sync-card.is-refreshing {
border-color: rgba(8, 173, 210, 0.38);
background: linear-gradient(135deg, rgba(232, 250, 255, 0.96), rgba(255, 255, 255, 0.92));
}
.live-sync-card.is-refreshing .live-badge::before {
animation: liveSpinPulse 0.95s infinite ease-in-out;
}
@keyframes liveSpinPulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.35); opacity: 1; }
}
.is-live-refreshing .live-dashboard-shell,
body.is-live-refreshing .live-measurements-section .live-panel-card {
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.has-live-update .live-metric-card,
.has-live-update .live-kpi-grid article,
.has-live-update .live-device-card,
.has-live-update .live-chart-row {
animation: liveValueUpdate 0.82s ease both;
}
@keyframes liveValueUpdate {
0% {
box-shadow: 0 0 0 0 rgba(8, 173, 210, 0.0), 0 8px 24px rgba(10, 47, 111, 0.052);
transform: translateY(0);
}
35% {
box-shadow: 0 0 0 4px rgba(8, 173, 210, 0.12), 0 10px 26px rgba(10, 47, 111, 0.075);
transform: translateY(-1px);
}
100% {
box-shadow: 0 8px 24px rgba(10, 47, 111, 0.052);
transform: translateY(0);
}
}
.live-status-strip strong::after {
content: '';
}
.is-live-refreshing .live-status-strip strong::after {
content: ' •';
color: #08add2;
}
@media (prefers-reduced-motion: reduce) {
.live-refresh-button,
.has-live-update .live-metric-card,
.has-live-update .live-kpi-grid article,
.has-live-update .live-device-card,
.has-live-update .live-chart-row,
.live-sync-card.is-refreshing .live-badge::before {
animation: none !important;
transition: none !important;
}
}
@media (max-width: 760px) {
.live-sync-top {
justify-content: flex-start;
}
.live-refresh-button {
padding: 6px 10px;
}
}
/* =========================
Demo/Live v16 — compact professional device board
========================= */
.demo-live-v16 {
padding-bottom: 24px;
}
.live-dashboard-v16 {
border: 1px solid rgba(8, 173, 210, .18);
border-radius: 22px;
background:
radial-gradient(circle at 100% 0%, rgba(8, 173, 210, .12), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,251,253,.96));
box-shadow: 0 14px 36px rgba(10, 47, 111, .09);
padding: 22px;
}
.live-dashboard-v16 .live-dashboard-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 18px;
align-items: start;
margin-bottom: 14px;
}
.live-dashboard-v16 .live-dashboard-head h2 {
margin: 0 0 7px;
color: var(--navy, #0a2f6f);
font-size: clamp(25px, 3vw, 38px);
line-height: 1.05;
letter-spacing: -.035em;
}
.live-dashboard-v16 .live-dashboard-head p:not(.eyebrow) {
max-width: 760px;
margin: 0;
color: var(--navy-soft, #173f7d);
font-size: 15px;
line-height: 1.5;
}
.live-sync-card-v16 {
border: 1px solid rgba(8, 173, 210, .18);
border-radius: 18px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 8px 22px rgba(10, 47, 111, .065);
padding: 14px;
}
.live-sync-card-v16 small {
display: block;
color: var(--navy-soft, #173f7d);
font-size: 12px;
line-height: 1.35;
margin-top: 6px;
}
.live-status-v16 {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid rgba(8, 173, 210, .14);
border-radius: 15px;
background: #fff;
color: var(--navy, #0a2f6f);
box-shadow: 0 6px 18px rgba(10, 47, 111, .04);
}
.live-status-v16 strong {
font-size: 13px;
white-space: nowrap;
}
.live-status-v16 em {
color: var(--navy-soft, #173f7d);
font-size: 13px;
font-style: normal;
min-width: 0;
}
.live-overview-v16 {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 12px;
margin-top: 12px;
}
.live-aqi-card-v16 {
min-height: 132px;
padding: 16px;
border-radius: 18px;
box-shadow: 0 8px 22px rgba(10, 47, 111, .065);
}
.live-aqi-card-v16 span,
.live-kpi-v16 span,
.live-reading-card-v16 .reading-label-v16 span,
.live-device-info-v16 span,
.live-device-state-v16 span,
.live-device-chip-v16 small {
color: var(--navy-soft, #173f7d);
}
.live-aqi-card-v16 strong {
display: block;
margin: 4px 0 2px;
color: var(--navy, #0a2f6f);
font-size: 44px;
line-height: 1;
letter-spacing: -.04em;
}
.live-aqi-card-v16 em {
display: inline-flex;
width: fit-content;
margin-bottom: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(8, 173, 210, .1);
color: var(--navy, #0a2f6f);
font-size: 12px;
font-style: normal;
font-weight: 900;
}
.live-aqi-card-v16 p {
margin: 0;
color: var(--navy-soft, #173f7d);
font-size: 12px;
line-height: 1.35;
}
.live-kpi-v16 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.live-kpi-v16 article {
min-height: 92px;
padding: 14px;
border: 1px solid rgba(8, 173, 210, .15);
border-radius: 18px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 8px 22px rgba(10, 47, 111, .055);
}
.live-kpi-v16 strong {
display: block;
margin: 4px 0 3px;
color: var(--navy, #0a2f6f);
font-size: 24px;
line-height: 1.05;
letter-spacing: -.025em;
}
.live-kpi-v16 small {
color: var(--navy-soft, #173f7d);
font-size: 12px;
}
.live-station-board-v16 {
padding-top: 36px;
}
.live-board-head-v16 {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 18px;
align-items: stretch;
margin-bottom: 18px;
}
.live-board-head-v16 .section-heading {
margin: 0;
}
.live-board-head-v16 .section-heading h2 {
font-size: clamp(26px, 3.2vw, 40px);
}
.live-device-overview-v16 {
border: 1px solid rgba(8, 173, 210, .16);
border-radius: 18px;
background: #fff;
padding: 14px;
box-shadow: 0 8px 22px rgba(10, 47, 111, .055);
}
.live-device-overview-v16 h3 {
color: var(--navy, #0a2f6f);
font-size: 15px;
margin-bottom: 10px;
}
.live-device-list-v16 {
display: grid;
gap: 8px;
}
.live-device-chip-v16 {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid rgba(8, 173, 210, .12);
border-radius: 14px;
background: #f8fcfd;
}
.live-device-chip-v16 strong {
display: block;
color: var(--navy, #0a2f6f);
font-size: 13px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
}
.live-device-chip-v16 small {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.25;
}
.live-metric-grid-v16 {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.live-device-panel-v16 {
position: relative;
overflow: hidden;
border: 1px solid rgba(8, 173, 210, .16);
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 28px rgba(10, 47, 111, .065);
padding: 16px;
}
.live-device-panel-v16:before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: #94a3b8;
}
.live-device-panel-v16.ok:before { background: #22c55e; }
.live-device-panel-v16.warning:before { background: #f59e0b; }
.live-device-panel-v16.unknown:before { background: #94a3b8; }
.live-device-head-v16 {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
margin-bottom: 10px;
}
.live-device-title-v16 {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
}
.live-device-title-v16 p {
margin: 0 0 1px;
color: var(--cyan, #08add2);
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.live-device-title-v16 h3 {
margin: 0;
color: var(--navy, #0a2f6f);
font-size: 21px;
line-height: 1.05;
letter-spacing: -.02em;
}
.live-device-state-v16 {
text-align: right;
}
.live-device-state-v16 strong {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: #e8faff;
color: var(--navy, #0a2f6f);
font-size: 12px;
line-height: 1;
}
.live-device-state-v16 span {
display: block;
margin-top: 5px;
font-size: 12px;
}
.live-device-info-v16 {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 9px 10px;
border-radius: 13px;
background: #f8fcfd;
color: var(--navy-soft, #173f7d);
font-size: 12.5px;
}
.live-device-info-v16 strong {
color: var(--navy, #0a2f6f);
white-space: nowrap;
}
.live-readings-grid-v16 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.live-reading-card-v16 {
position: relative;
min-height: 112px;
padding: 13px;
border: 1px solid rgba(8, 173, 210, .14);
border-radius: 16px;
background: linear-gradient(180deg, #fff, #f9fdfe);
box-shadow: 0 6px 16px rgba(10, 47, 111, .045);
}
.live-reading-card-v16.ok { border-color: rgba(34, 197, 94, .2); }
.live-reading-card-v16.warning { border-color: rgba(245, 158, 11, .28); }
.live-reading-card-v16.alert { border-color: rgba(239, 68, 68, .28); }
.live-reading-card-v16.is-empty { opacity: .68; }
.reading-label-v16 {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
margin-bottom: 8px;
}
.reading-label-v16 span {
font-size: 12px;
font-weight: 900;
line-height: 1.2;
}
.reading-label-v16 em {
color: var(--cyan, #08add2);
font-size: 10px;
font-style: normal;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
}
.live-reading-card-v16 strong {
display: block;
color: var(--navy, #0a2f6f);
font-size: clamp(24px, 3vw, 33px);
line-height: 1;
letter-spacing: -.04em;
}
.live-reading-card-v16 strong small {
margin-left: 4px;
color: var(--navy-soft, #173f7d);
font-size: 12px;
letter-spacing: 0;
}
.reading-foot-v16 {
margin-top: 7px;
color: var(--navy-soft, #173f7d);
font-size: 11.5px;
}
.reading-bar-v16 {
height: 5px;
margin-top: 9px;
overflow: hidden;
border-radius: 999px;
background: rgba(10, 47, 111, .08);
}
.reading-bar-v16 i {
display: block;
height: 100%;
min-width: 3px;
border-radius: inherit;
background: linear-gradient(90deg, #08add2, #22c55e);
transition: width .35s ease;
}
.has-live-update .live-reading-card-v16,
.has-live-update .live-kpi-v16 article,
.has-live-update .live-aqi-card-v16 {
animation: livePulseV16 .7s ease;
}
@keyframes livePulseV16 {
0% { box-shadow: 0 0 0 rgba(8, 173, 210, 0); transform: translateY(0); }
35% { box-shadow: 0 0 0 4px rgba(8, 173, 210, .1); transform: translateY(-1px); }
100% { box-shadow: 0 6px 16px rgba(10, 47, 111, .045); transform: translateY(0); }
}
.is-live-refreshing .live-refresh-button,
.live-sync-card-v16.is-refreshing {
opacity: .75;
}
.status-dot {
flex: 0 0 auto;
}
.status-dot.online,
.status-dot.ok {
background: #22c55e;
box-shadow: 0 0 0 5px rgba(34, 197, 94, .13);
}
.status-dot.stale,
.status-dot.warning {
background: #f59e0b;
box-shadow: 0 0 0 5px rgba(245, 158, 11, .13);
}
.status-dot.offline,
.status-dot.unknown {
background: #94a3b8;
box-shadow: 0 0 0 5px rgba(148, 163, 184, .13);
}
@media (max-width: 980px) {
.live-dashboard-v16 .live-dashboard-head,
.live-overview-v16,
.live-board-head-v16 {
grid-template-columns: 1fr;
}
.live-sync-card-v16 {
max-width: none;
}
.live-kpi-v16 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.demo-live-v16,
.live-station-board-v16 {
padding-top: 30px;
}
.live-dashboard-v16,
.live-device-panel-v16,
.live-device-overview-v16 {
border-radius: 18px;
padding: 14px;
}
.live-status-v16 {
align-items: flex-start;
}
.live-status-v16 strong,
.live-status-v16 em {
font-size: 12px;
}
.live-kpi-v16,
.live-readings-grid-v16 {
grid-template-columns: 1fr;
}
.live-device-head-v16 {
grid-template-columns: 1fr;
}
.live-device-state-v16 {
text-align: left;
}
.live-device-info-v16 {
display: grid;
}
.live-device-info-v16 strong {
white-space: normal;
}
.live-reading-card-v16 {
min-height: 100px;
}
}
/* =========================
V17 — Demo/Live refactor: compact professional device board
========================= */
.demo-live-page-v17 {
padding-top: 34px;
padding-bottom: 54px;
background:
radial-gradient(circle at 14% 0%, rgba(8, 173, 210, 0.09), transparent 26%),
linear-gradient(180deg, rgba(244, 251, 253, 0.55), rgba(255, 255, 255, 0.96));
}
.live-console-v17 {
border: 1px solid rgba(8, 173, 210, 0.16);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 48px rgba(10, 47, 111, 0.075);
overflow: hidden;
}
.live-console-head-v17 {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: stretch;
padding: 24px;
border-bottom: 1px solid rgba(8, 173, 210, 0.12);
background:
linear-gradient(135deg, rgba(232, 250, 255, 0.72), rgba(255, 255, 255, 0.94)),
radial-gradient(circle at top right, rgba(8, 173, 210, 0.16), transparent 34%);
}
.live-console-title-v17 .eyebrow {
margin-bottom: 8px;
font-size: 11px;
}
.live-console-title-v17 h2 {
max-width: 780px;
margin: 0 0 8px;
color: #0a2f6f;
font-size: clamp(26px, 3.2vw, 42px);
line-height: 1.04;
letter-spacing: -0.035em;
}
.live-console-title-v17 p {
max-width: 800px;
color: #173f7d;
font-size: 15px;
line-height: 1.5;
}
.live-control-panel-v17 {
display: grid;
gap: 11px;
align-content: center;
padding: 16px;
border: 1px solid rgba(8, 173, 210, 0.16);
border-radius: 20px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 10px 26px rgba(10, 47, 111, 0.055);
}
.live-control-row-v17 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.live-badge-v17 {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
color: #047857;
background: #ecfdf5;
border: 1px solid rgba(34, 197, 94, 0.25);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.09em;
}
.live-badge-v17 i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13);
}
.live-refresh-button-v17 {
min-height: 34px;
padding: 8px 13px;
border: 0;
border-radius: 999px;
background: #0a2f6f;
color: #fff;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}
.live-refresh-button-v17:hover {
transform: translateY(-1px);
background: #08add2;
}
.live-refresh-button-v17:disabled {
cursor: wait;
opacity: 0.72;
transform: none;
}
.live-refresh-meta-v17 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.live-refresh-meta-v17 div {
min-width: 0;
padding: 9px 10px;
border-radius: 14px;
background: #f7fdff;
border: 1px solid rgba(8, 173, 210, 0.12);
}
.live-refresh-meta-v17 dt {
color: #173f7d;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.live-refresh-meta-v17 dd {
margin: 3px 0 0;
color: #0a2f6f;
font-size: 12px;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-control-panel-v17 p {
margin: 0;
color: #173f7d;
font-size: 12px;
line-height: 1.35;
}
.live-status-bar-v17 {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
margin: 18px 24px 0;
padding: 10px 14px;
border: 1px solid rgba(8, 173, 210, 0.13);
border-radius: 16px;
background: #fbfeff;
}
.live-status-bar-v17 strong {
color: #0a2f6f;
font-size: 13px;
font-weight: 900;
}
.live-status-bar-v17 em {
color: #173f7d;
font-size: 13px;
font-style: normal;
}
.live-summary-v17 {
display: grid;
grid-template-columns: 210px 1fr;
gap: 14px;
padding: 18px 24px 0;
}
.live-air-card-v17 {
display: grid;
align-content: center;
min-height: 112px;
padding: 16px;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, #0a2f6f, #08add2);
box-shadow: 0 12px 28px rgba(10, 47, 111, 0.13);
}
.live-air-card-v17 span {
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.86;
}
.live-air-card-v17 strong {
margin-top: 3px;
font-size: 38px;
line-height: 1;
letter-spacing: -0.04em;
}
.live-air-card-v17 em {
margin-top: 3px;
font-size: 12px;
font-style: normal;
font-weight: 900;
opacity: 0.92;
}
.live-air-card-v17.ok {
background: linear-gradient(135deg, #0a2f6f, #0f766e);
}
.live-air-card-v17.warning {
background: linear-gradient(135deg, #0a2f6f, #b45309);
}
.live-air-card-v17.alert {
background: linear-gradient(135deg, #0a2f6f, #991b1b);
}
.live-summary-cards-v17 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.live-summary-cards-v17 article {
display: grid;
align-content: center;
min-height: 112px;
padding: 14px 15px;
border: 1px solid rgba(8, 173, 210, 0.15);
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 20px rgba(10, 47, 111, 0.045);
}
.live-summary-cards-v17 span,
.live-panel-title-v17 p {
color: #173f7d;
}
.live-summary-cards-v17 span {
display: block;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.075em;
}
.live-summary-cards-v17 strong {
display: block;
margin-top: 6px;
color: #0a2f6f;
font-size: clamp(19px, 2vw, 25px);
line-height: 1.08;
}
.live-summary-cards-v17 small {
margin-top: 4px;
color: #173f7d;
font-size: 12px;
}
.live-device-overview-panel-v17,
.live-device-board-v17 {
margin: 18px 24px 0;
padding: 18px;
border: 1px solid rgba(8, 173, 210, 0.13);
border-radius: 20px;
background: rgba(255, 255, 255, 0.82);
}
.live-device-board-v17 {
margin-bottom: 24px;
background: #f8fdff;
}
.live-panel-title-v17 {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.live-panel-title-v17 h3 {
margin: 0;
color: #0a2f6f;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.1;
letter-spacing: -0.025em;
}
.live-panel-title-v17 p {
max-width: 540px;
margin: 0;
font-size: 13px;
line-height: 1.4;
text-align: right;
}
.live-device-list-v17 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.live-device-mini-v17 {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 11px 12px;
border: 1px solid rgba(8, 173, 210, 0.14);
border-radius: 16px;
background: #fff;
}
.live-device-mini-v17 strong {
display: block;
color: #0a2f6f;
font-size: 13px;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-device-mini-v17 small {
display: block;
margin-top: 3px;
color: #173f7d;
font-size: 11px;
line-height: 1.25;
}
.live-device-grid-v17 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.live-station-card-v17 {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(8, 173, 210, 0.15);
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 24px rgba(10, 47, 111, 0.055);
}
.live-station-card-v17.online {
border-color: rgba(34, 197, 94, 0.24);
}
.live-station-card-v17.warning {
border-color: rgba(245, 158, 11, 0.28);
}
.live-station-head-v17 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 15px;
border-bottom: 1px solid rgba(8, 173, 210, 0.11);
background: linear-gradient(135deg, rgba(232, 250, 255, 0.74), rgba(255, 255, 255, 0.92));
}
.live-station-id-v17 {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.live-station-id-v17 small {
display: block;
color: #08add2;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.live-station-id-v17 h3 {
margin: 2px 0 0;
color: #0a2f6f;
font-size: clamp(18px, 2vw, 23px);
line-height: 1.05;
letter-spacing: -0.025em;
overflow-wrap: anywhere;
}
.live-status-pill-v17 {
flex: 0 0 auto;
padding: 6px 9px;
border-radius: 999px;
color: #475569;
background: #f1f5f9;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.live-status-pill-v17.online {
color: #047857;
background: #ecfdf5;
}
.live-status-pill-v17.stale,
.live-status-pill-v17.warning {
color: #92400e;
background: #fffbeb;
}
.live-status-pill-v17.offline,
.live-status-pill-v17.unknown {
color: #475569;
background: #f1f5f9;
}
.live-station-main-v17 {
display: grid;
grid-template-columns: minmax(0, 1fr) 1fr;
gap: 14px;
padding: 14px 15px 10px;
}
.live-station-main-v17 span {
display: block;
color: #173f7d;
font-size: 12px;
font-weight: 900;
}
.live-station-main-v17 strong {
display: block;
margin-top: 3px;
color: #0a2f6f;
font-size: clamp(24px, 3vw, 36px);
line-height: 1;
letter-spacing: -0.045em;
}
.live-station-main-v17 p {
align-self: center;
justify-self: end;
max-width: 220px;
margin: 0;
color: #173f7d;
font-size: 13px;
line-height: 1.35;
text-align: right;
}
.live-station-meta-v17 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 15px 12px;
color: #173f7d;
font-size: 11px;
line-height: 1.3;
}
.live-station-meta-v17 strong {
color: #0a2f6f;
}
.live-reading-list-v17 {
display: grid;
gap: 7px;
padding: 12px 15px 15px;
border-top: 1px solid rgba(8, 173, 210, 0.1);
background: #fbfeff;
}
.live-reading-row-v17 {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 82px;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 9px 10px;
border: 1px solid rgba(8, 173, 210, 0.12);
border-radius: 14px;
background: #fff;
}
.reading-name-v17 {
min-width: 0;
}
.reading-name-v17 strong {
display: block;
color: #0a2f6f;
font-size: 13px;
line-height: 1.15;
}
.reading-name-v17 span {
display: block;
margin-top: 2px;
color: #08add2;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.reading-value-v17 {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 4px;
min-width: 96px;
}
.reading-value-v17 strong {
color: #0a2f6f;
font-size: 20px;
line-height: 1;
letter-spacing: -0.025em;
}
.reading-value-v17 small {
color: #173f7d;
font-size: 11px;
font-weight: 800;
}
.live-reading-row-v17 em {
justify-self: end;
min-width: 68px;
padding: 5px 7px;
border-radius: 999px;
background: #eefbff;
color: #0a2f6f;
font-size: 10px;
font-style: normal;
font-weight: 900;
text-align: center;
}
.live-reading-row-v17.ok em {
background: #ecfdf5;
color: #047857;
}
.live-reading-row-v17.warning em {
background: #fffbeb;
color: #92400e;
}
.live-reading-row-v17.alert em {
background: #fef2f2;
color: #991b1b;
}
.live-reading-row-v17.is-empty {
opacity: 0.68;
}
.has-live-update .live-reading-row-v17,
.has-live-update .live-summary-cards-v17 article,
.has-live-update .live-air-card-v17 {
animation: livePulseV17 .72s ease;
}
@keyframes livePulseV17 {
0% { transform: translateY(0); box-shadow: 0 0 0 rgba(8, 173, 210, 0); }
38% { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(8, 173, 210, 0.08); }
100% { transform: translateY(0); box-shadow: 0 0 0 rgba(8, 173, 210, 0); }
}
@media (max-width: 1080px) {
.live-console-head-v17,
.live-summary-v17 {
grid-template-columns: 1fr;
}
.live-control-panel-v17 {
max-width: none;
}
.live-device-list-v17 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.live-device-grid-v17 {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.demo-live-page-v17 {
padding-top: 26px;
}
.live-console-v17 {
border-radius: 18px;
}
.live-console-head-v17,
.live-device-overview-panel-v17,
.live-device-board-v17 {
padding: 14px;
}
.live-console-head-v17 {
gap: 14px;
}
.live-status-bar-v17,
.live-summary-v17,
.live-device-overview-panel-v17,
.live-device-board-v17 {
margin-left: 14px;
margin-right: 14px;
}
.live-summary-v17 {
padding-left: 0;
padding-right: 0;
}
.live-summary-cards-v17,
.live-device-list-v17 {
grid-template-columns: 1fr;
}
.live-panel-title-v17 {
display: grid;
}
.live-panel-title-v17 p {
text-align: left;
}
.live-station-head-v17,
.live-station-main-v17,
.live-station-meta-v17 {
display: grid;
grid-template-columns: 1fr;
justify-items: stretch;
}
.live-station-main-v17 p {
justify-self: start;
max-width: none;
text-align: left;
}
.live-status-pill-v17 {
justify-self: start;
}
.live-reading-row-v17 {
grid-template-columns: 1fr auto;
}
.live-reading-row-v17 em {
grid-column: 1 / -1;
justify-self: start;
}
.reading-value-v17 {
min-width: 0;
}
.live-refresh-meta-v17 {
grid-template-columns: 1fr;
}
}
/* =========================
CONTACT V18 — focused company data + form
========================= */
.contact-v18-section{padding-top:46px;padding-bottom:34px}.contact-v18-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:20px;align-items:stretch}.contact-v18-registry-card{min-height:100%;padding:26px;border-radius:24px}.contact-v18-registry-card h2{font-size:clamp(30px,4.2vw,48px)}.registry-grid-v18{gap:10px;margin-top:20px}.registry-grid-v18 div{padding:13px 14px;border-radius:15px}.contact-v18-side{display:grid;gap:14px;align-content:start}.contact-v18-channel{padding:18px;border-radius:20px}.contact-v18-channel h3,.contact-profile-card-v18 h3{font-size:20px;margin-bottom:12px}.contact-v18-channel p{padding:11px 0}.contact-profile-card-v18{border:1px solid rgba(8,173,210,.2);border-radius:20px;background:linear-gradient(180deg,#fff,#f4fbfd);box-shadow:0 10px 26px rgba(10,47,111,.07);padding:18px}.contact-profile-list-v18{display:grid;gap:8px}.contact-profile-list-v18 p{margin:0;padding:11px 12px;border-radius:14px;background:#fff;border:1px solid rgba(8,173,210,.13)}.contact-profile-list-v18 span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900;color:#08add2;margin-bottom:4px}.contact-profile-list-v18 strong,.contact-profile-list-v18 a{display:block;color:#0a2f6f;font-weight:900;text-decoration:none;line-height:1.25}.contact-profile-list-v18 a{color:#08add2}.contact-form-section-v18{padding-top:42px}.contact-form-wide-v18{max-width:1120px}.contact-form-card-v18{padding:26px;border-radius:24px}.contact-form-head-v18{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:18px}.contact-form-head-v18 h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:8px}.contact-form-head-v18 p:not(.eyebrow):not(.form-required-note){max-width:760px}.contact-form-head-v18 .form-required-note{flex:0 0 auto;margin-top:4px}.contact-form-v18{gap:12px;margin-top:0}.contact-form-v18 textarea{min-height:150px}.contact-form-v18 .btn{justify-self:start;min-width:190px}@media(max-width:1080px){.contact-v18-grid{grid-template-columns:1fr}.contact-v18-side{grid-template-columns:1fr 1fr;align-items:start}.contact-form-head-v18{display:grid}.contact-form-head-v18 .form-required-note{justify-self:start}}@media(max-width:760px){.contact-v18-side{grid-template-columns:1fr}.contact-v18-registry-card,.contact-form-card-v18,.contact-profile-card-v18,.contact-v18-channel{border-radius:18px;padding:18px}.contact-v18-section{padding-top:36px;padding-bottom:24px}.contact-form-section-v18{padding-top:34px}.contact-form-v18 .btn{width:100%}.registry-grid-v18{grid-template-columns:1fr}.registry-grid-v18 .wide{grid-column:auto}}
/* v19/v20 — Demo/Live section link cleanup only */
body[data-page="demo"] .demo-live-page-v17 a,
body[data-page="demo"] .live-console-v17 a,
body[data-page="demo"] .live-device-board-v17 a,
body[data-page="demo"] .live-device-overview-panel-v17 a {
pointer-events: none;
text-decoration: none;
}
/* =========================
V21 — About page refactor
========================= */
.about-refactor-section {
padding-top: 52px;
}
.about-refactor-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
gap: 22px;
align-items: stretch;
}
.about-story-v21 {
position: relative;
overflow: hidden;
border-radius: 26px;
padding: clamp(24px, 3vw, 34px);
background:
radial-gradient(circle at right top, rgba(8, 173, 210, .12), transparent 34%),
linear-gradient(180deg, #ffffff, #f7fcfe);
}
.about-story-v21::after {
content: "";
position: absolute;
right: -70px;
bottom: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(10, 47, 111, .055);
pointer-events: none;
}
.about-story-v21 > * {
position: relative;
z-index: 1;
}
.about-story-v21 h2 {
max-width: 820px;
font-size: clamp(29px, 3.8vw, 48px);
}
.about-story-v21 p:not(.eyebrow) {
max-width: 900px;
font-size: 15.5px;
line-height: 1.62;
}
.about-focus-card {
border: 1px solid rgba(8, 173, 210, .20);
border-radius: 26px;
background: #0a2f6f;
color: #ffffff;
box-shadow: 0 14px 34px rgba(10, 47, 111, .14);
padding: clamp(22px, 2.6vw, 30px);
}
.about-focus-card .eyebrow {
color: #9beeff;
}
.about-focus-card h2 {
margin-bottom: 16px;
color: #ffffff;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.08;
letter-spacing: -.03em;
}
.about-focus-list {
display: grid;
gap: 10px;
}
.about-focus-list article {
padding: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
}
.about-focus-list strong {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-size: 14px;
font-weight: 900;
}
.about-focus-list p {
margin: 0;
color: #dff7ff;
font-size: 13.5px;
line-height: 1.45;
}
.about-timeline-section {
overflow: hidden;
}
.about-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.about-timeline::before {
content: "";
position: absolute;
top: 29px;
left: 7%;
right: 7%;
height: 2px;
background: linear-gradient(90deg, rgba(8, 173, 210, .14), rgba(8, 173, 210, .55), rgba(8, 173, 210, .14));
pointer-events: none;
}
.about-timeline article {
position: relative;
z-index: 1;
display: grid;
gap: 13px;
padding: 18px;
border: 1px solid rgba(8, 173, 210, .18);
border-radius: 20px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 10px 26px rgba(10, 47, 111, .06);
}
.about-timeline article span {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: #08add2;
color: #ffffff;
font-size: 12px;
font-weight: 900;
letter-spacing: .02em;
box-shadow: 0 8px 18px rgba(8, 173, 210, .22);
}
.about-timeline h3 {
margin-bottom: 7px;
color: #0a2f6f;
font-size: 17px;
line-height: 1.18;
}
.about-timeline p {
color: #173f7d;
font-size: 13.5px;
line-height: 1.5;
}
.about-pillars-v21 .info-card,
.about-process-v21 article {
box-shadow: 0 8px 22px rgba(10, 47, 111, .055);
}
.about-process-v21 article {
border-radius: 20px;
padding: 20px;
}
.about-process-v21 span {
width: 38px;
height: 38px;
border-radius: 13px;
margin-bottom: 12px;
}
.about-process-v21 h3 {
font-size: 18px;
}
.about-process-v21 p {
font-size: 13.5px;
line-height: 1.5;
}
@media (max-width: 1120px) {
.about-refactor-grid {
grid-template-columns: 1fr;
}
.about-focus-card {
order: 2;
}
.about-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-timeline::before {
display: none;
}
}
@media (max-width: 700px) {
.about-refactor-section {
padding-top: 36px;
}
.about-refactor-grid {
gap: 14px;
}
.about-story-v21,
.about-focus-card {
border-radius: 20px;
padding: 20px;
}
.about-story-v21 p:not(.eyebrow) {
font-size: 14.5px;
line-height: 1.55;
}
.about-timeline {
grid-template-columns: 1fr;
gap: 11px;
}
.about-timeline article {
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px;
padding: 15px;
border-radius: 17px;
}
.about-timeline article span {
min-height: 30px;
padding: 0 10px;
font-size: 11px;
}
.about-timeline h3 {
font-size: 16px;
}
.about-timeline p {
font-size: 13px;
}
}
/* =========================
CLIENTS PAGE — v22
========================= */
.clients-intro-section {
padding-top: clamp(34px, 5vw, 58px);
}
.clients-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: clamp(18px, 3vw, 32px);
align-items: stretch;
}
.clients-intro-card,
.clients-stats-card,
.client-profile-card,
.clients-model-grid article,
.clients-closing-card {
border: 1px solid rgba(8, 173, 210, .16);
background: rgba(255, 255, 255, .86);
box-shadow: 0 10px 28px rgba(10, 47, 111, .065);
}
.clients-intro-card {
border-radius: 24px;
padding: clamp(22px, 3vw, 34px);
}
.clients-intro-card h2 {
margin-bottom: 12px;
color: #0a2f6f;
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1.08;
letter-spacing: -.025em;
}
.clients-intro-card p:not(.eyebrow) {
max-width: 860px;
color: #173f7d;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.65;
}
.clients-stats-card {
display: grid;
gap: 10px;
border-radius: 24px;
padding: 18px;
background:
linear-gradient(145deg, rgba(8, 173, 210, .10), rgba(255,255,255,.92)),
#fff;
}
.clients-stats-card div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, .75);
border: 1px solid rgba(8, 173, 210, .13);
}
.clients-stats-card strong {
color: #0a2f6f;
font-size: clamp(22px, 3vw, 34px);
line-height: 1;
font-weight: 900;
}
.clients-stats-card span {
color: #173f7d;
font-size: 13px;
line-height: 1.3;
text-align: right;
font-weight: 700;
}
.clients-profile-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px);
}
.client-profile-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
border-radius: 24px;
padding: 0;
}
.client-profile-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, #08add2, #0a2f6f);
}
.client-profile-top {
padding: 22px 22px 12px;
}
.client-profile-top span {
display: inline-flex;
max-width: 100%;
margin-bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(8, 173, 210, .10);
color: #0a2f6f;
font-size: 11px;
font-weight: 900;
line-height: 1.2;
letter-spacing: .035em;
text-transform: uppercase;
}
.client-profile-top h3 {
color: #0a2f6f;
font-size: clamp(23px, 2.2vw, 30px);
line-height: 1.06;
letter-spacing: -.025em;
}
.client-profile-card > p {
padding: 0 22px;
color: #173f7d;
font-size: 14.5px;
line-height: 1.58;
}
.client-scope-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 18px 22px 20px;
}
.client-scope-list span {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(8, 173, 210, .16);
background: rgba(232, 250, 255, .65);
color: #0a2f6f;
font-size: 12px;
line-height: 1.2;
font-weight: 800;
}
.client-profile-card footer {
margin-top: auto;
padding: 17px 22px 20px;
background: rgba(10, 47, 111, .045);
border-top: 1px solid rgba(8, 173, 210, .12);
}
.client-profile-card footer strong {
display: block;
margin-bottom: 6px;
color: #0a2f6f;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
}
.client-profile-card footer p {
color: #173f7d;
font-size: 13.5px;
line-height: 1.5;
}
.clients-model-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px);
}
.clients-model-grid article {
border-radius: 22px;
padding: 22px;
}
.clients-model-grid span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 14px;
border-radius: 14px;
background: #08add2;
color: #fff;
font-weight: 900;
font-size: 13px;
box-shadow: 0 8px 18px rgba(8, 173, 210, .2);
}
.clients-model-grid h3 {
margin-bottom: 8px;
color: #0a2f6f;
font-size: 18px;
line-height: 1.18;
}
.clients-model-grid p {
color: #173f7d;
font-size: 13.5px;
line-height: 1.55;
}
.clients-closing-section {
padding-top: clamp(34px, 5vw, 58px);
padding-bottom: clamp(34px, 5vw, 58px);
}
.clients-closing-card {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(18px, 3vw, 34px);
align-items: center;
border-color: rgba(255,255,255,.14);
border-radius: 24px;
background: rgba(255,255,255,.06);
box-shadow: none;
padding: clamp(22px, 3.6vw, 38px);
}
.clients-closing-card h2 {
color: #fff;
font-size: clamp(26px, 3.2vw, 40px);
line-height: 1.08;
letter-spacing: -.025em;
}
.clients-closing-card p:not(.eyebrow) {
color: rgba(255,255,255,.82);
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.62;
}
@media (max-width: 980px) {
.clients-intro-grid,
.clients-profile-grid,
.clients-model-grid,
.clients-closing-card {
grid-template-columns: 1fr;
}
.clients-stats-card {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.clients-stats-card div {
flex-direction: column;
align-items: flex-start;
}
.clients-stats-card span {
text-align: left;
}
}
@media (max-width: 700px) {
.clients-intro-section {
padding-top: 30px;
}
.clients-intro-grid,
.clients-profile-grid,
.clients-model-grid {
gap: 12px;
}
.clients-intro-card,
.clients-stats-card,
.client-profile-card,
.clients-model-grid article,
.clients-closing-card {
border-radius: 18px;
}
.clients-intro-card,
.clients-model-grid article,
.clients-closing-card {
padding: 18px;
}
.clients-stats-card {
grid-template-columns: 1fr;
padding: 12px;
}
.client-profile-top {
padding: 18px 18px 10px;
}
.client-profile-card > p,
.client-scope-list,
.client-profile-card footer {
padding-left: 18px;
padding-right: 18px;
}
.client-scope-list {
padding-top: 14px;
padding-bottom: 16px;
}
}
/* =========================
V24 production refactor: offer / system / devices / technology / servers
========================= */
.v24-intro-section {
padding-top: 56px;
}
.v24-focus-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.v24-focus-card {
position: relative;
overflow: hidden;
min-height: 198px;
padding: 22px;
border: 1px solid rgba(8, 173, 210, .20);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,251,253,.92));
box-shadow: 0 10px 28px rgba(10,47,111,.06);
}
.v24-focus-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, #08add2, #0a2f6f);
opacity: .78;
}
.v24-focus-card h3 {
position: relative;
color: #0a2f6f;
font-size: 19px;
line-height: 1.15;
margin-bottom: 9px;
}
.v24-focus-card p {
position: relative;
color: #173f7d;
font-size: 14px;
line-height: 1.55;
}
.v24-card-grid {
align-items: stretch;
}
.v24-info-card,
.v24-plan-card,
.v24-metric-card,
.v24-sensor-card,
.v24-side-panel {
border-radius: 20px;
box-shadow: 0 9px 24px rgba(10,47,111,.055);
}
.v24-info-card,
.v24-plan-card,
.v24-metric-card,
.v24-sensor-card {
padding: 20px;
}
.v24-info-card h3,
.v24-plan-card h3,
.v24-sensor-card h3 {
font-size: 19px;
letter-spacing: -.015em;
}
.v24-info-card p,
.v24-plan-card p,
.v24-metric-card p,
.v24-sensor-card p {
font-size: 14px;
}
.v24-plan-card ul,
.v24-info-card .plain-list {
gap: 8px;
}
.v24-plan-card li,
.v24-info-card .plain-list li {
font-size: 14px;
line-height: 1.45;
}
.v24-plan-card .btn {
margin-top: auto;
min-height: 42px;
padding: 10px 16px;
font-size: 14px;
}
.v24-parameter-grid .v24-metric-card strong {
font-size: 16px;
text-transform: uppercase;
letter-spacing: .06em;
}
.v24-parameter-grid .v24-metric-card span,
.v24-sensor-card strong {
font-size: 17px;
line-height: 1.25;
}
.v24-timeline {
grid-template-columns: repeat(4, 1fr);
}
.v24-timeline article {
padding: 18px;
border-radius: 18px;
}
.v24-timeline span {
width: 36px;
height: 36px;
margin-bottom: 10px;
font-size: 13px;
}
.v24-timeline h3 {
font-size: 17px;
}
.v24-timeline p {
font-size: 13px;
line-height: 1.48;
}
.v24-process-timeline {
grid-template-columns: repeat(4, 1fr);
}
.v24-check-grid div {
border-color: rgba(255,255,255,.20);
background: rgba(255,255,255,.11);
backdrop-filter: blur(6px);
}
.v24-device-split {
grid-template-columns: 1fr 320px;
}
.v24-side-panel {
position: sticky;
top: 104px;
background: linear-gradient(180deg, #fff, #f4fbfd);
}
.v24-side-panel h3 {
font-size: 20px;
}
.v24-side-panel .stat-line {
font-size: 14px;
}
.v24-ordered-list {
grid-template-columns: repeat(2, 1fr);
}
.v24-ordered-list li {
min-height: 78px;
display: flex;
align-items: center;
font-size: 15px;
}
.v24-comparison-grid .comparison-card {
padding: 24px;
border-radius: 22px;
}
.v24-comparison-grid .comparison-card h3 {
font-size: 25px;
}
.v24-comparison-grid .comparison-card div {
padding: 12px 0;
}
.v24-gradient-section {
position: relative;
overflow: hidden;
}
.v24-gradient-section::before {
content: "";
position: absolute;
inset: -30% -20%;
background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.18), transparent 30%), radial-gradient(circle at 90% 30%, rgba(8,173,210,.22), transparent 34%);
pointer-events: none;
}
.v24-gradient-section > .container {
position: relative;
}
.v24-stats-grid {
margin-bottom: 22px;
}
.v24-stats-grid div {
padding: 16px;
border-radius: 18px;
}
.v24-stats-grid strong {
font-size: clamp(24px, 3vw, 34px);
}
.v24-table-wrap table {
min-width: 1080px;
}
.v24-table-wrap th,
.v24-table-wrap td {
padding: 13px 14px;
font-size: 13px;
line-height: 1.4;
}
.v24-server-cards .v24-plan-card {
min-height: 100%;
}
.v24-measurements-section {
padding-top: 62px;
}
.v24-measurement-groups .measurement-group-card {
min-height: 118px;
}
.v24-measurement-catalog {
border-radius: 20px;
}
.v24-offer-overview + .v24-measurements-section {
border-top: 1px solid rgba(8,173,210,.12);
}
@media(max-width:1100px){
.v24-focus-grid { grid-template-columns: repeat(2, 1fr); }
.v24-timeline, .v24-process-timeline { grid-template-columns: repeat(2, 1fr); }
.v24-device-split { grid-template-columns: 1fr; }
.v24-side-panel { position: static; }
}
@media(max-width:860px){
.v24-intro-section { padding-top: 38px; }
.v24-focus-grid,
.v24-timeline,
.v24-process-timeline,
.v24-ordered-list { grid-template-columns: 1fr; }
.v24-focus-card { min-height: 0; padding: 18px; border-radius: 18px; }
.v24-info-card,
.v24-plan-card,
.v24-metric-card,
.v24-sensor-card { padding: 17px; }
.v24-measurements-section { padding-top: 42px; }
}
@media(max-width:520px){
.v24-focus-card h3,
.v24-info-card h3,
.v24-plan-card h3,
.v24-sensor-card h3 { font-size: 18px; }
.v24-focus-card p,
.v24-info-card p,
.v24-plan-card p,
.v24-metric-card p,
.v24-sensor-card p,
.v24-plan-card li,
.v24-info-card .plain-list li { font-size: 13px; }
.v24-table-wrap th,
.v24-table-wrap td { font-size: 12px; padding: 10px; }
}
/* =========================
V26 — content link lock for mobile/desktop
Only explicit CTA buttons inside remain clickable.
Header, footer and language selector keep their normal navigation.
========================= */
#main-content a:not(.btn),
#main-content a:not(.btn):hover,
#main-content a:not(.btn):focus,
#main-content a:not(.btn):active,
a[x-apple-data-detectors],
a[x-apple-data-detectors]:hover,
a[x-apple-data-detectors]:focus,
a[x-apple-data-detectors]:active {
color: inherit !important;
text-decoration: none !important;
cursor: default !important;
pointer-events: none !important;
}
#main-content [data-no-content-link],
#main-content .live-station-id-v17 h3,
#main-content .live-device-mini-v17 strong,
#main-content .about-story-v21 h2,
#main-content .about-timeline h3 {
color: inherit;
text-decoration: none;
cursor: default;
-webkit-touch-callout: none;
}
@media (max-width: 860px) {
#main-content a:not(.btn),
#main-content a:not(.btn) * {
pointer-events: none !important;
}
#main-content .live-station-id-v17 h3,
#main-content .live-device-mini-v17 strong {
-webkit-user-select: text;
user-select: text;
}
}
/* =========================
DEMO/LIVE MOBILE HARDENING — no accidental links/taps inside readings
========================= */
[data-page="demo"] [data-live-demo] a:not(.btn),
[data-page="demo"] [data-live-demo] a:not(.btn) *,
[data-page="demo"] [data-live-demo] [role="link"],
[data-page="demo"] [data-live-demo] [onclick] {
pointer-events: none !important;
cursor: default !important;
text-decoration: none !important;
color: inherit !important;
-webkit-touch-callout: none !important;
}
[data-page="demo"] [data-live-devices],
[data-page="demo"] [data-live-metrics],
[data-page="demo"] .live-device-mini-v17,
[data-page="demo"] .live-device-mini-v17 *,
[data-page="demo"] .live-station-card-v17,
[data-page="demo"] .live-station-card-v17 *,
[data-page="demo"] .live-reading-row-v17,
[data-page="demo"] .live-reading-row-v17 *,
[data-page="demo"] .live-summary-v17,
[data-page="demo"] .live-summary-v17 *,
[data-page="demo"] .live-status-bar-v17,
[data-page="demo"] .live-status-bar-v17 * {
cursor: default !important;
text-decoration: none !important;
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
}
[data-page="demo"] [data-live-refresh-button],
[data-page="demo"] [data-live-refresh-button] * {
pointer-events: auto !important;
cursor: pointer !important;
-webkit-touch-callout: none !important;
}
@media (max-width: 860px) {
[data-page="demo"] [data-live-devices],
[data-page="demo"] [data-live-metrics] {
pointer-events: none !important;
}
[data-page="demo"] .live-control-panel-v17,
[data-page="demo"] .live-control-panel-v17 *,
[data-page="demo"] [data-live-refresh-button] {
pointer-events: auto !important;
}
[data-page="demo"] .live-station-id-v17 h3,
[data-page="demo"] .live-device-mini-v17 strong,
[data-page="demo"] .reading-name-v17 strong,
[data-page="demo"] .reading-value-v17 strong {
user-select: none !important;
-webkit-user-select: none !important;
text-decoration: none !important;
cursor: default !important;
}
}
/* =========================
V35 — Demo/Live mobile link hardening
Header and footer navigation remain standard; only main content links are neutralized on mobile.
========================= */
@media (max-width: 860px) {
body[data-page="demo"] #main-content a:not(.btn),
body[data-page="demo"] a[data-demo-neutralized="true"],
body[data-page="demo"] [data-no-autolink] {
color: inherit !important;
text-decoration: none !important;
cursor: default !important;
pointer-events: none !important;
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
}
body[data-page="demo"] #main-content [data-live-demo],
body[data-page="demo"] #main-content [data-live-demo] *,
body[data-page="demo"] .live-device-mini-v17,
body[data-page="demo"] .live-device-mini-v17 *,
body[data-page="demo"] .live-station-card-v17,
body[data-page="demo"] .live-station-card-v17 *,
body[data-page="demo"] .live-reading-row-v17,
body[data-page="demo"] .live-reading-row-v17 * {
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
}
body[data-page="demo"] #main-content [data-no-autolink],
body[data-page="demo"] #main-content .live-device-mini-v17 strong,
body[data-page="demo"] #main-content .live-station-id-v17 h3,
body[data-page="demo"] #main-content .live-station-meta-v17 strong {
user-select: none !important;
-webkit-user-select: none !important;
color: inherit !important;
text-decoration: none !important;
cursor: default !important;
pointer-events: none !important;
}
body[data-page="demo"] [data-live-refresh-button],
body[data-page="demo"] [data-live-refresh-button] * {
pointer-events: auto !important;
cursor: pointer !important;
}
}
body[data-page="demo"] .site-footer .footer-static-link {
color: inherit;
text-decoration: none;
cursor: default;
-webkit-touch-callout: none;
}
/* =========================
V29 — Mobile menu overlay hardening
Prevents hidden navigation/dropdown links from sitting above Demo/Live content on smartphones.
Header remains standard; menu links are active only when the mobile menu is explicitly opened.
========================= */
@media (max-width: 860px) {
body:not(.menu-open) .site-header .site-nav,
body:not(.menu-open) .site-header .site-nav *,
.site-header .site-nav:not(.is-open),
.site-header .site-nav:not(.is-open) * {
pointer-events: none !important;
visibility: hidden !important;
}
body:not(.menu-open) .site-header .site-nav,
.site-header .site-nav:not(.is-open) {
display: none !important;
opacity: 0 !important;
transform: translateY(-12px) !important;
}
body.menu-open .site-header .site-nav.is-open {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
body.menu-open .site-header .site-nav.is-open * {
visibility: visible !important;
}
body.menu-open .site-header .site-nav.is-open a,
body.menu-open .site-header .site-nav.is-open button,
body.menu-open .site-header .site-nav.is-open .dropdown-menu,
body.menu-open .site-header .site-nav.is-open .dropdown-menu * {
pointer-events: auto !important;
}
body[data-page="demo"] #main-content .page-hero .pill-row,
body[data-page="demo"] #main-content .page-hero .pill-row *,
body[data-page="demo"] #main-content [data-live-demo] .live-status-pill-v17,
body[data-page="demo"] #main-content [data-live-demo] .status-dot,
body[data-page="demo"] #main-content [data-live-demo] [data-no-autolink] {
pointer-events: none !important;
cursor: default !important;
text-decoration: none !important;
-webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important;
}
}
/* =========================
V30 — global mobile navigation isolation audit fix
The closed mobile menu and its Oferta dropdown cannot sit above page content.
Applies to every page, not only Demo/Live.
========================= */
@media (max-width: 860px) {
.site-header {
z-index: 10000;
}
.site-header .site-nav[hidden],
.site-header .site-nav:not(.is-open),
body:not(.menu-open) .site-header .site-nav {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
transform: translateY(-12px) !important;
}
.site-header .site-nav[hidden] *,
.site-header .site-nav:not(.is-open) *,
body:not(.menu-open) .site-header .site-nav * {
visibility: hidden !important;
pointer-events: none !important;
}
.site-header .site-nav:not(.is-open) .dropdown-menu,
body:not(.menu-open) .site-header .dropdown-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.menu-open .site-header .site-nav.is-open {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
height: auto !important;
max-height: calc(100dvh - 84px) !important;
overflow-y: auto !important;
transform: translateY(0) !important;
z-index: 10001 !important;
-webkit-overflow-scrolling: touch;
}
body.menu-open .site-header .site-nav.is-open,
body.menu-open .site-header .site-nav.is-open * {
visibility: visible !important;
}
body.menu-open .site-header .site-nav.is-open .nav-dropdown {
display: grid !important;
width: 100% !important;
}
body.menu-open .site-header .site-nav.is-open .dropdown-trigger {
width: 100% !important;
}
body.menu-open .site-header .site-nav.is-open .dropdown-menu {
position: static !important;
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
width: 100% !important;
min-width: 0 !important;
margin: 4px 0 0 0 !important;
box-shadow: none !important;
z-index: auto !important;
}
body.menu-open .site-header .site-nav.is-open a,
body.menu-open .site-header .site-nav.is-open button,
body.menu-open .site-header .site-nav.is-open .dropdown-menu,
body.menu-open .site-header .site-nav.is-open .dropdown-menu * {
pointer-events: auto !important;
}
#main-content {
position: relative;
z-index: 1;
}
}
/* =========================
V35 — Demo/Live mobile footer navigation fix
Footer links must remain real, tappable navigation links on the live/demo page.
========================= */
@media (max-width: 860px) {
body[data-page="demo"] .site-footer a,
body[data-page="demo"] .site-footer a * {
pointer-events: auto !important;
cursor: pointer !important;
-webkit-touch-callout: default !important;
-webkit-tap-highlight-color: rgba(8,173,210,.18) !important;
}
}