/* Layout concept: light engineering-notebook site. Pale mint-grey paper, deep petrol ink, amber for money, teal for live data. Every page opens with an illustrated banner. Deliberately light-only. */
:root{
  --paper:#F5F8F7; --panel:#FFFFFF; --panel-2:#EDF3F2; --sky-1:#E3F0F2; --sky-2:#F7FBFA;
  --ink:#14323A; --muted:#58707A; --line:#D3DFDD; --grid:rgba(20,50,58,.05);
  --signal:#C46A0A; --signal-2:#F2B566; --signal-soft:#FCEFDD;
  --live:#0F8570; --live-2:#8ED3C3; --live-soft:#E1F3EE;
  --alarm:#C2392C; --alarm-soft:#FBE7E4; --watch:#B48A00;
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:8px; --max:1180px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:800}
h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
h3{font-size:1.08rem;font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.money{color:var(--signal)}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--live);display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px var(--live-soft)}
.lead{color:var(--muted);font-size:1.08rem;max-width:64ch}
section{padding-block:clamp(52px,8vw,96px)}
section.tint{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:38px;max-width:780px}
.prose{display:grid;gap:14px;max-width:68ch;color:var(--muted)}
.prose strong{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .97rem var(--f-body);padding:.78rem 1.2rem;border-radius:var(--r);border:1.5px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.amber{background:var(--signal);border-color:var(--signal);color:#fff}

/* top bar + nav */
.topbar{background:var(--ink);color:#DDE8E6;font-size:.8rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:6px;flex-wrap:wrap}
.topbar span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:32px;height:32px}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{font-size:.9rem;font-weight:500;text-decoration:none;padding:.45rem .65rem;border-radius:6px;color:var(--muted);white-space:nowrap}
.menu a:hover{background:var(--panel-2);color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);background:var(--live-soft);box-shadow:inset 0 -2px 0 var(--live)}
.menu-btn{display:none;margin-left:auto;font:600 .9rem var(--f-body);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:.5rem .8rem;color:var(--ink);cursor:pointer}
.nav .btn{padding:.5rem .9rem;font-size:.86rem}
@media(max-width:1200px){
  .menu-btn{display:block}.nav .btn{display:none}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px 16px}
  .menu.open{display:flex}
  .menu a{padding:.7rem .6rem}
}

/* banner */
.banner{background:linear-gradient(180deg,var(--sky-1),var(--sky-2));border-bottom:1px solid var(--line);overflow:hidden}
.banner .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;padding-block:44px 0}
.banner-text{padding-bottom:44px;min-width:0}
.crumbs{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumbs a{text-decoration:none;color:var(--live)}
.banner h1{margin-block:12px 18px}
.banner h1 em{font-style:normal;color:var(--signal)}
.banner-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.banner-art{position:relative;align-self:end;min-width:0}
.banner-art svg{display:block;width:100%;height:auto}
@media(max-width:920px){.banner .wrap{grid-template-columns:1fr;gap:10px}.banner-text{padding-bottom:0}}
.stats{background:var(--panel);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stats .wrap>div{padding:18px 20px 18px 0;border-right:1px solid var(--line);margin-right:20px}
.stats .wrap>div:last-child{border-right:0}
.stats b{display:block;font-family:var(--f-display);font-size:1.45rem;font-weight:800;line-height:1;color:var(--signal)}
.stats span{font-size:.84rem;color:var(--muted)}
@media(max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr}.stats .wrap>div:nth-child(2){border-right:0}.stats .wrap>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* illustration classes */
.il-ink{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
.il-wall{fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.il-soft{fill:var(--panel-2);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.il-roof{fill:#C9DCDF;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.il-teal{fill:var(--live-2);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.il-amber{fill:var(--signal-2);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.il-red{fill:#F19A8E;stroke:var(--ink);stroke-width:1.6}
.il-glass{fill:#D7ECF0;stroke:var(--ink);stroke-width:1.2}
.il-ground{fill:#E4ECE6}
.il-tree{fill:#A9D5B9;stroke:var(--ink);stroke-width:1.4}
.il-t{font-family:var(--f-mono);font-size:10px;fill:var(--muted)}
.il-tb{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--ink)}
.il-tl{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--live)}
.il-ts{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--signal)}
.il-card{fill:#fff;stroke:var(--line);stroke-width:1}
.flow{stroke:var(--live);stroke-width:2;fill:none;stroke-dasharray:4 7;animation:flow 1.1s linear infinite}
.flow.amber{stroke:var(--signal)}
@keyframes flow{to{stroke-dashoffset:-22}}
.float{animation:float 5s ease-in-out infinite}
.float.d2{animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-7px)}}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.blink{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.wave{fill:none;stroke:var(--alarm);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:wave 2.4s ease-out infinite}
.wave.w2{animation-delay:1.2s}
@keyframes wave{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}
.slide{animation:slide 7s ease-in-out infinite alternate}
@keyframes slide{to{transform:translateX(70px)}}
.lift{animation:lift 4s ease-in-out infinite alternate}
@keyframes lift{to{transform:translateY(-26px)}}
.smoke{fill:#fff;stroke:var(--line);animation:smoke 6s ease-out infinite;opacity:0}
.smoke.s2{animation-delay:-3s}
@keyframes smoke{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(18px,-40px) scale(1.4)}}
.smoke{transform-box:fill-box;transform-origin:center}

/* generic blocks */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:8px;align-content:start}
.card .ic{width:44px;height:44px;border-radius:10px;background:var(--live-soft);display:grid;place-items:center;color:var(--live)}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.05rem}
.card p{font-size:.93rem;color:var(--muted)}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.feat li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.95rem}
.feat li::before{content:"";width:10px;height:10px;margin-top:7px;border:2px solid var(--live);border-radius:2px}
.chip{display:inline-block;font-family:var(--f-mono);font-size:.76rem;border:1px solid var(--line);background:var(--panel);padding:.32rem .65rem;border-radius:999px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.note{font-size:.78rem;color:var(--muted)}
.callout{background:var(--signal-soft);border:1px solid var(--signal-2);border-radius:10px;padding:16px 18px;font-size:.95rem}
.callout b{color:var(--signal)}

/* screens (live demo frames) */
.screen{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 24px 50px -36px rgba(20,50,58,.45);min-width:0}
.screen-bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);padding-bottom:10px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--live)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:blink 1.4s infinite}
.screen svg{display:block;width:100%;height:auto}
.ax{stroke:var(--line);stroke-width:1}
.tx{font-family:var(--f-mono);font-size:10px;fill:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.kpis div{background:var(--panel-2);border-radius:6px;padding:8px 10px}
.kpis b{display:block;font-family:var(--f-mono);font-size:1.08rem}
.kpis span{font-size:.7rem;color:var(--muted)}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr}}
.rows{display:grid;gap:6px}
.rows div{display:flex;justify-content:space-between;gap:10px;background:var(--panel-2);border-radius:6px;padding:8px 10px;font-size:.84rem}
.rows b{font-family:var(--f-mono);white-space:nowrap}
.pill{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:999px;background:var(--live-soft);color:var(--live)}
.pill.warn{background:var(--signal-soft);color:var(--signal)}
.pill.crit{background:var(--alarm-soft);color:var(--alarm)}
.pill.mute{background:var(--panel-2);color:var(--muted)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--panel-2);font-weight:500}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);text-align:right;white-space:nowrap}
tfoot td{font-weight:700;background:var(--signal-soft)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:14px;position:relative}
.steps::before{content:"";position:absolute;left:5%;right:5%;top:30px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.step{position:relative;display:grid;gap:8px;align-content:start}
.step .n{width:60px;height:60px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);display:grid;place-items:center;font-family:var(--f-display);font-size:1.15rem;font-weight:700;position:relative;z-index:1}
.step:first-child .n{background:var(--signal);border-color:var(--signal);color:#fff}
.step h3{font-size:1.02rem}
.step p{font-size:.9rem;color:var(--muted)}
.steps.vert::before{display:none}.steps.vert .step{grid-template-columns:60px 1fr;column-gap:16px}.steps.vert .step .n{grid-row:span 2}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps::before{display:none}.step{grid-template-columns:60px 1fr;column-gap:16px}.step .n{grid-row:span 2}}

/* feature row (alternating module sections) */
.module{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;padding-block:44px;border-top:1px solid var(--line)}
.module:first-of-type{border-top:0}
.module.flip>:first-child{order:2}
.module h3{font-size:1.4rem;margin-block:10px 12px}
.module .prose{margin-bottom:16px}
@media(max-width:900px){.module{grid-template-columns:1fr}.module.flip>:first-child{order:0}}
.module>*{min-width:0}

/* bars */
.hbars{display:grid;gap:10px}
.hbar{display:grid;grid-template-columns:150px 1fr 70px;gap:10px;align-items:center;font-size:.85rem}
.hbar .t{height:14px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--live);border-radius:3px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.hbar .t i.amber{background:var(--signal)}
.hbar b{font-family:var(--f-mono);text-align:right;font-size:.8rem}
@media(max-width:480px){.hbar{grid-template-columns:110px 1fr 56px}}

/* tiers */
.tier{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;display:grid;gap:12px;align-content:start}
.tier.pop{border:2px solid var(--signal);position:relative}
.tier.pop::after{content:"Most popular";position:absolute;top:-12px;left:20px;background:var(--signal);color:#fff;font-family:var(--f-mono);font-size:.68rem;padding:.2rem .6rem;border-radius:999px;letter-spacing:.06em}
.tier small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--live)}
.tier h3{font-size:1.2rem}

/* M&V */
.mv-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line)}
.mv-row label{font-size:.86rem;color:var(--muted)}
.bars{display:grid;gap:5px}
.bar{height:22px;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-family:var(--f-mono);font-size:.74rem;font-weight:600;width:30%;transition:width 1.2s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.bar.b{background:var(--panel-2);border:1px solid var(--line)}
.bar.a{background:var(--live);color:#fff}
.mv-total{margin-top:14px;background:var(--signal-soft);border:1px solid var(--signal-2);border-radius:8px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.mv-total b{font-family:var(--f-display);font-size:1.4rem;font-weight:800;color:var(--signal)}

/* brief */
.brief{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brief-head{background:var(--ink);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.78rem;gap:10px;flex-wrap:wrap}
.brief-body{padding:16px;display:grid;gap:12px}
.issue{border-left:3px solid var(--signal);padding:4px 0 4px 12px}
.issue b{display:block}
.issue span{font-size:.85rem;color:var(--muted)}

/* self check */
.check{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start}
@media(max-width:860px){.check{grid-template-columns:1fr}}
.qs{display:grid;gap:10px}
.q{display:flex;gap:14px;align-items:center;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;font:inherit;color:inherit;cursor:pointer}
.q:hover{border-color:var(--muted)}
.q .box{flex:none;width:22px;height:22px;border:1.5px solid var(--muted);border-radius:4px;display:grid;place-items:center;font-size:.8rem;color:transparent}
.q[aria-pressed="true"]{border-color:var(--alarm);background:var(--alarm-soft)}
.q[aria-pressed="true"] .box{background:var(--alarm);border-color:var(--alarm);color:#fff}
.q .txt{flex:1;min-width:0}
.q small{display:block;color:var(--muted);font-size:.8rem}
.meter{position:sticky;top:90px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.meter svg{width:100%;max-width:260px;display:block;margin:8px auto}
.meter .verdict{font-family:var(--f-display);font-size:1.2rem;font-weight:700;text-align:center;margin-bottom:8px}
.meter p{font-size:.94rem;color:var(--muted)}

/* solution cards on home */
.sol-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;transition:transform .2s,box-shadow .2s}
.sol-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(20,50,58,.5)}
.sol-card .art{background:linear-gradient(180deg,var(--sky-1),var(--sky-2));border-bottom:1px solid var(--line)}
.sol-card .art svg{display:block;width:100%;height:auto}
.sol-card .body{padding:20px;display:grid;gap:8px;align-content:start}
.sol-card small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--live)}
.sol-card h3{font-size:1.12rem}
.sol-card p{font-size:.92rem;color:var(--muted)}
.sol-card .go{font-weight:600;color:var(--signal);margin-top:4px}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.sol-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sol-grid{grid-template-columns:1fr}}

/* industries */
.ind-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ind-chips button{font:500 .9rem var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;cursor:pointer}
.ind-chips button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}
.ind-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.ind-head h3{font-size:1.4rem}
.ind-head p{color:var(--muted);max-width:60ch}
.saving{font-family:var(--f-display);font-size:1.9rem;font-weight:800;color:var(--signal);line-height:1;text-align:right}
.saving small{display:block;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.ba{grid-template-columns:1fr}}
.ba-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;animation:rise .45s both}
.ba-card:nth-child(2){animation-delay:.07s}.ba-card:nth-child(3){animation-delay:.14s}
@keyframes rise{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
.ba-card .pain{padding:18px}
.ba-card .pain b{display:block;font-size:1.05rem;margin-bottom:6px}
.ba-card .pain p{font-size:.9rem;color:var(--muted)}
.ba-card .old,.ba-card .new{padding:12px 18px;font-size:.88rem;border-top:1px dashed var(--line)}
.ba-card .old{color:var(--muted)}
.ba-card .old::before,.ba-card .new::before{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.ba-card .old::before{content:"Today";color:var(--alarm)}
.ba-card .new{background:var(--live-soft)}
.ba-card .new::before{content:"With automation";color:var(--live)}

/* estimator */
.est{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:820px){.est{grid-template-columns:1fr}}
.est-in{padding:28px;display:grid;gap:22px;align-content:start}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;gap:10px}
.field output{font-family:var(--f-mono);color:var(--signal)}
input[type=range]{width:100%;accent-color:var(--signal)}
select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.7rem .8rem;width:100%}
.est-out{background:var(--live-soft);padding:28px;display:grid;gap:16px;align-content:start;border-left:1px solid var(--line)}
.est-out .big{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;line-height:1;color:var(--signal)}
.lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.est-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.est-grid b{display:block;font-family:var(--f-mono);font-size:1.1rem}

/* zones (fire) */
.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.zone{background:#fff;border:1px solid var(--line);border-left:5px solid var(--live);border-radius:6px;padding:9px;font-family:var(--f-mono);font-size:.72rem;transition:all .3s}
.zone b{display:block;font-family:var(--f-body);font-size:.92rem}
.zone.watch{border-left-color:var(--watch)}
.zone.warn{border-left-color:var(--signal);background:var(--signal-soft)}
.zone.crit{border-left-color:var(--alarm);background:var(--alarm-soft)}
@media(max-width:520px){.zones{grid-template-columns:1fr 1fr}}
.dvnr{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.dvnr span{flex:1;min-width:70px;text-align:center;font-family:var(--f-mono);font-size:.72rem;padding:7px 4px;border:1px solid var(--line);border-radius:5px;background:#fff;transition:all .3s}
.dvnr span.on{background:var(--alarm);color:#fff;border-color:var(--alarm)}

/* fleet */
.fleet{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.mc{aspect-ratio:1;border-radius:3px;background:var(--live);transition:background .4s}
.mc.idle{background:var(--line)}.mc.ot{background:var(--signal)}.mc.br{background:var(--alarm)}.mc.off{background:transparent;border:1px dashed var(--muted)}
@media(max-width:520px){.fleet{grid-template-columns:repeat(9,1fr)}}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;font-family:var(--f-mono);color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* faq */
details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 18px}
details+details{margin-top:8px}
summary{cursor:pointer;font-weight:600;padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:var(--f-mono);color:var(--signal)}
details[open] summary::after{content:"–"}
details p{padding-bottom:16px;color:var(--muted);font-size:.95rem;max-width:72ch}

/* cta band */
.cta{background:var(--ink);color:#fff;border-radius:16px;padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.cta h2{color:#fff}
.cta p{color:#C6D6D4;margin-top:12px;max-width:56ch}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cta .btn.ghost{color:#fff;border-color:#fff}
@media(max-width:820px){.cta{grid-template-columns:1fr}.cta .acts{justify-content:flex-start}}

/* form */
form.lead-form{display:grid;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.lead-form label{display:grid;gap:5px;font-size:.85rem;font-weight:600}
.interest{display:flex;flex-wrap:wrap;gap:6px}
.interest label{display:flex;align-items:center;gap:6px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;cursor:pointer}
.form-ok{background:var(--live-soft);border:1px solid var(--live);border-radius:var(--r);padding:12px;font-size:.9rem}
.form-err{color:var(--alarm);font-size:.88rem}

footer{background:var(--panel);border-top:1px solid var(--line);margin-top:60px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;padding-block:44px 24px}
footer h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9rem}
footer a{text-decoration:none}
footer a:hover{color:var(--signal)}
footer p{font-size:.88rem;color:var(--muted);max-width:40ch}
.legal{border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.legal .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px}
@media(max-width:820px){footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .wrap{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ports */
.cranes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.crane{background:#fff;border:1px solid var(--line);border-radius:6px;padding:7px 8px;font-family:var(--f-mono);font-size:.68rem;display:grid;gap:4px}
.crane .hd{display:flex;justify-content:space-between;align-items:center;gap:4px}
.crane .dot{width:8px;height:8px;border-radius:50%;background:var(--live)}
.crane .dot.idle{background:var(--watch)}.crane .dot.off{background:var(--line)}
.crane .fuel{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.crane .fuel i{display:block;height:100%;background:var(--live);transition:width .6s}
.crane.low{border-color:var(--signal);background:var(--signal-soft)}.crane.low .fuel i{background:var(--signal)}
.crane.crit{border-color:var(--alarm);background:var(--alarm-soft)}.crane.crit .fuel i{background:var(--alarm)}
@media(max-width:620px){.cranes{grid-template-columns:repeat(3,1fr)}}
.bowser{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.btank{position:relative;height:150px;border:1.6px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.btank i{position:absolute;left:0;right:0;bottom:0;background:var(--signal-2);transition:height .8s}
.btank span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:.85rem}
.prose+.feat,.prose+.callout,.prose+.chips{margin-top:16px}
.nav .btn{white-space:nowrap}.menu a{padding:.45rem .5rem;font-size:.87rem}.nav .wrap{gap:14px}

.sol-card .art{display:block}
.sol-card h3 a{text-decoration:none}
.sol-card h3 a:hover{color:var(--signal)}
.sol-card .links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:4px}
.sol-card .go{text-decoration:none}
.sol-card .portal{font-size:.86rem;font-weight:600;color:var(--live);text-decoration:none;border:1px solid var(--live);border-radius:999px;padding:.25rem .7rem}
.sol-card .portal:hover{background:var(--live-soft)}
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.portal-tile{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;transition:border-color .2s,transform .2s;min-width:0}
.portal-tile:hover{border-color:var(--live);transform:translateY(-2px)}
.portal-tile .ic{flex:none;width:38px;height:38px;border-radius:9px;background:var(--live-soft);color:var(--live);display:grid;place-items:center}
.portal-tile .ic svg{width:20px;height:20px}
.portal-tile b{display:block;font-size:.92rem;line-height:1.3}
.portal-tile .mono{font-size:.74rem;color:var(--live);overflow-wrap:anywhere}
.portal-tile>span:last-child{min-width:0}
.portal-tile{flex-direction:column;align-items:flex-start;gap:8px}
.portal-tile .mono{font-family:var(--f-body);font-weight:600;font-size:.82rem;overflow-wrap:normal;white-space:nowrap}
.portals{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* platform venn */
#venn{display:block;width:100%;height:auto}
.vc{fill:var(--live-2);fill-opacity:.28;stroke:var(--live);stroke-width:1.6;transition:fill-opacity .3s,fill .3s}
.vc[data-k="ai"]{fill:var(--signal-2);stroke:var(--signal)}
.vc[data-k="cloud"]{fill:#B9D4E6;stroke:#3F7FA6}
.vc.on{fill-opacity:.7}
.vc.dim{fill-opacity:.08}
.vt{font:800 20px var(--f-display);fill:var(--ink)}
.vs{font:500 12px var(--f-body);fill:var(--muted)}
.venn-btns{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 4px}
.venn-btns button{font:600 .82rem var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.venn-btns button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.venn-panel{display:grid;gap:12px;align-content:start}
.venn-panel h3{font-size:1.35rem}
.venn-panel .gets{background:var(--live-soft);border-radius:10px;padding:14px 16px}
.venn-panel .miss{background:var(--alarm-soft);border-radius:10px;padding:14px 16px}
.venn-panel .gets b,.venn-panel .miss b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.venn-panel .gets b{color:var(--live)}.venn-panel .miss b{color:var(--alarm)}
.venn-panel .full{background:var(--signal-soft);border:1px solid var(--signal-2);border-radius:10px;padding:14px 16px}
.venn-panel .full b{color:var(--signal)}
/* story */
.story{display:grid;gap:0;position:relative}
.beat{display:grid;grid-template-columns:90px 92px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.beat:first-child{border-top:0}
.beat .when{font-size:.82rem;color:var(--muted);padding-top:3px}
.beat b{display:block;font-family:var(--f-display);font-size:1.05rem;margin-bottom:4px}
.beat p{color:var(--muted);max-width:68ch}
.tag{justify-self:start;font:700 .74rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
.tag.iot{background:var(--live-soft);color:var(--live)}.tag.ai{background:var(--signal-soft);color:var(--signal)}.tag.cloud{background:#E1EDF5;color:#2F6A8F}.tag.all{background:var(--ink);color:#fff}
.beat.lit{background:linear-gradient(90deg,var(--panel),transparent)}
@media(max-width:640px){.beat{grid-template-columns:1fr;gap:6px}}
/* impact */
.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.impact div{background:var(--panel);padding:22px;display:grid;gap:4px}
.impact b{font-family:var(--f-display);font-size:1.7rem;font-weight:800;color:var(--signal);line-height:1.1}
.impact span{font-size:.95rem}
.impact small{font-size:.8rem;color:var(--live);font-weight:600}
@media(max-width:820px){.impact{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.impact{grid-template-columns:1fr}}
.tag{white-space:nowrap}.beat{padding-inline:12px;border-radius:8px}
.brand img{display:block;height:38px;width:auto;max-width:100%}
footer .brand img{height:42px}
@media(max-width:560px){.brand img{height:30px}}
.brand img{height:44px}@media(max-width:560px){.brand img{height:32px}}

/* ===== Mega menu ===== */
.nav .wrap{min-height:68px;gap:20px}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu .top{font:600 .93rem var(--f-body);color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none;padding:.55rem .75rem;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:none}
.menu .top:hover{background:var(--panel-2)}
.menu .top[aria-current="page"],.dd.is-active>.top{color:var(--live);background:var(--live-soft);box-shadow:none}
.dd-btn svg{width:12px;height:12px;transition:transform .2s}
.dd.open>.dd-btn svg{transform:rotate(180deg)}
.menu .mm-cta{margin-left:10px;padding:.55rem 1rem;font-size:.9rem;color:#fff;display:inline-flex}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(20,50,58,.35);z-index:60}
.dd.open>.mega{display:block}

.mm-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:28px;padding-block:26px}
.mm-col{display:grid;gap:4px;align-content:start;min-width:0}
.mm-h{font:700 .72rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 10px 8px}
.menu .mm-link{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;text-decoration:none;color:var(--ink);white-space:normal;font-size:inherit;box-shadow:none;background:none}
.menu .mm-link:hover,.menu .mm-link[aria-current="page"]{background:var(--live-soft)}
.mm-ic{flex:none;width:34px;height:34px;border-radius:8px;background:var(--live-soft);color:var(--live);display:grid;place-items:center}
.mm-ic svg{width:18px;height:18px}
.mm-link b{display:block;font:700 .92rem var(--f-display);line-height:1.3}
.mm-link small{display:block;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
.menu .mm-feature{display:grid;gap:8px;align-content:start;background:linear-gradient(160deg,var(--sky-1),var(--signal-soft));border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);white-space:normal;font-size:inherit;box-shadow:none}
.mm-feature b{font:700 1.05rem var(--f-display)}
.mm-feature span{font-size:.88rem;color:var(--muted)}
.mm-feature em{font-style:normal;font-weight:700;color:var(--signal);font-size:.9rem}
.menu-btn{display:none;align-items:center;gap:8px}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.menu-btn[aria-expanded="true"] .burger{background:transparent}
.menu-btn[aria-expanded="true"] .burger::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1100px){
  .menu-btn{display:inline-flex;margin-left:auto}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(20,50,58,.35);padding:8px 16px 18px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
  .menu.open{display:flex}
  .menu .top{width:100%;justify-content:space-between;padding:.9rem .4rem;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem}
  .menu .top:hover{background:none}
  .dd{border:0}
  .mega{position:static;box-shadow:none;border:0;background:var(--paper);border-radius:10px;margin:6px 0 10px}
  .mm-grid{grid-auto-flow:row;grid-template-columns:1fr;gap:14px;padding:12px 4px}
  .mm-h{padding:6px 10px 4px}
  .menu .mm-feature{padding:16px}
  .menu .mm-cta{margin:16px 0 0;justify-content:center;padding:.85rem 1rem;font-size:1rem}
}
@media(min-width:620px) and (max-width:1100px){.mm-grid{grid-template-columns:1fr 1fr}.mm-feature{grid-column:1/-1}}
@media(min-width:1101px){.menu{display:flex!important;position:static;flex-direction:row;padding:0;box-shadow:none;border:0;max-height:none;overflow:visible;background:none}.menu-btn{display:none!important}}
.nav .menu .mm-cta{display:inline-flex}
.nav .mega .mm-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:start;min-height:0;gap:28px;padding-block:26px}
.menu .mm-link[aria-current="page"]{box-shadow:none}
@media(max-width:1100px){.nav .mega .mm-grid{grid-auto-flow:row;grid-template-columns:1fr;gap:14px;padding:12px 4px}}
@media(min-width:620px) and (max-width:1100px){.nav .mega .mm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.topbar .wrap>span:first-child{display:none}.topbar .wrap{justify-content:center}}

/* hover bridge: each dropdown fills the full nav height so the pointer never leaves it on the way to the panel */
@media(min-width:1101px){
  .nav .wrap{align-items:stretch}
  .brand,.menu-btn{align-self:center}
  .menu{align-self:stretch;align-items:stretch}
  .menu>.top,.menu>.mm-cta{align-self:center}
  .dd{display:flex;align-items:center}
  .mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
}