:root{
 /* Layout: control-room rhythm. Night sections echo the HMI; daylight sections carry reading. One 1120px column. */
 --nuit:#0B0C10; --panneau:#12141A; --barre:#0F1422; --filet-n:#23262F;
 --jour:#F6F5F2; --carte:#FFFFFF; --filet:#E4E3EC;
 --indigo:#4A57FF; --indigo-2:#7F88FF; --indigo-pale:#ECEDFF; --indigo-txt:#3442E8;
 --ambre:#F5A524; --ambre-pale:#FFF2DC; --ambre-txt:#A86500;
 --rouge:#E5484D;
 --encre:#14161F; --texte:#3A3D4D; --texte-2:#6B6F86; --clair:#E8E9F0; --clair-2:#A4A7B8; --blanc:#FFFFFF;
 --f-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
 color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--jour);color:var(--texte);font-family:var(--f-sans);font-size:16px;line-height:1.6;font-feature-settings:"cv11","ss01"}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--barre)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
section{padding-block:96px;position:relative}
h1,h2,h3{color:var(--encre);text-wrap:balance;margin:0;letter-spacing:-.025em}
h2{font-size:clamp(32px,4.4vw,54px);line-height:1.05;font-weight:700}
h2 .a,h1 .a{color:var(--indigo)}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow .mono{color:var(--indigo-txt);font-weight:600}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--indigo);box-shadow:0 0 0 4px var(--indigo-pale)}
.lead{font-size:clamp(18px,2vw,22px);line-height:1.5;font-weight:500;color:var(--encre);max-width:62ch;letter-spacing:-.01em}
.hl{color:var(--indigo-txt);font-weight:600}.hl-a{color:var(--ambre-txt);font-weight:600}
strong{color:var(--encre);font-weight:600}
.night{background:var(--nuit);color:var(--clair)}
.night h1,.night h2,.night h3,.night strong{color:var(--blanc)}
.night .mono{color:var(--clair-2)}
.night .eyebrow .mono{color:var(--indigo-2)}.night .eyebrow i{box-shadow:0 0 0 4px rgba(74,87,255,.25)}
.night .hl{color:#A9ADFF}.night .lead{color:var(--clair)}
.card{background:var(--carte);border:1px solid var(--filet);border-radius:20px}
.ncard{background:var(--panneau);border:1px solid var(--filet-n);border-radius:20px}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:6px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:var(--blanc);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:24px;height:24px}
.scroll-x{overflow-x:auto}
.deco{position:absolute;right:max(20px,4vw);top:56px;width:min(260px,30vw);opacity:.9;pointer-events:none}
@media (max-width:760px){.deco{display:none}}

/* nav: HMI tab bar */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--barre);border-bottom:1px solid var(--filet-n)}
nav.top .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:16px;min-height:58px}
nav.top .logo{padding-right:18px;border-right:1px solid var(--filet-n)}
nav.top ul{display:flex;list-style:none;margin:0;padding:0;flex:1}
nav.top ul a{display:flex;align-items:center;height:100%;padding:0 16px;font-size:14px;color:var(--clair-2);text-decoration:none;border-bottom:2px solid transparent}
nav.top ul a:hover{color:var(--blanc);background:rgba(74,87,255,.12);border-bottom-color:var(--indigo)}
nav.top .saved{align-self:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--clair);border:1px solid #2E3240;border-radius:10px;padding:6px 10px;white-space:nowrap}
nav.top .saved b{color:var(--indigo-2);font-weight:600}
@media (max-width:900px){nav.top ul{display:none}}

/* hero */
.hero{padding-block:88px 96px;overflow:hidden;position:relative}
.hero .glow{position:absolute;inset:auto -20% -40% 30%;height:80%;background:radial-gradient(closest-side,rgba(74,87,255,.28),transparent),radial-gradient(closest-side at 70% 60%,rgba(245,165,36,.18),transparent);pointer-events:none}
.hero .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;position:relative}
.live{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.live .tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:#A9ADFF;background:rgba(74,87,255,.18);border-radius:8px;padding:5px 10px}
.live .crit{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ambre);border:1px solid rgba(245,165,36,.6);border-radius:8px;padding:4px 10px}
.hero h1{font-size:clamp(46px,6.6vw,88px);line-height:1;font-weight:700;letter-spacing:-.035em}
.hero h1 .f{display:block;background:linear-gradient(90deg,#8A93FF,var(--ambre));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{margin-top:26px;max-width:44ch;font-size:clamp(17px,1.5vw,19px);color:var(--clair-2)}
.hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero .meta span{font-size:13px;padding:8px 14px;border-radius:10px;background:var(--panneau);border:1px solid var(--filet-n);color:var(--clair)}
.hmi-frame{padding:22px 22px 14px}
.hmi-frame .bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.hmi-frame .bar span:last-child{font-size:14px;color:var(--clair-2);text-transform:none;letter-spacing:0;font-family:var(--f-sans)}
.matrix{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--clair-2);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
@media (prefers-reduced-motion:no-preference){
 .matrix circle{animation:pop .5s ease-out both}
 @keyframes pop{from{transform:scale(.2);opacity:0}to{transform:none}}
 .matrix circle{transform-box:fill-box;transform-origin:center}
}
@media (max-width:900px){.hero .grid{grid-template-columns:minmax(0,1fr)}}

/* why */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.side{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px}
.side>.mono{padding-top:6px;color:var(--indigo-txt);font-weight:600}
.ctx{padding:clamp(22px,3vw,36px);background:var(--indigo-pale);border:none}
.ctx p+p{margin-top:14px}
.timeline{padding:28px;margin-top:56px}
.tl-head,.tl-body{display:grid;grid-template-columns:9fr 4fr 5fr 6fr;gap:14px}
.tl-head .mono{font-size:11px}
.tl-track{display:flex;align-items:center;gap:6px;margin-block:12px 18px}
.tl-track i{flex:none;display:block}
.tl-track .q{width:22px;height:18px;border-radius:5px;background:#D9D9E3}
.tl-track .d{width:18px;height:18px;border-radius:50%;background:var(--indigo)}
.tl-track .live{background:var(--ambre);box-shadow:0 0 0 4px var(--ambre-pale)}
.tl-track .post{background:var(--encre)}
.tl-body{font-size:14px;line-height:1.5}
.tl-body p+p{margin-top:8px}
.tl-body .rt{color:var(--ambre-txt);font-weight:600}
@media (max-width:760px){
 .two,.side{grid-template-columns:minmax(0,1fr)}.side{gap:6px}
 .tl-head{display:none}.tl-body{grid-template-columns:minmax(0,1fr)}
 .tl-body>div:empty{display:none}
 .tl-body>div::before{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--texte-2);margin-bottom:4px}
 .tl-body>div:nth-child(1)::before{content:"WEEKS TO 2 YEARS BEFORE"}
 .tl-body>div:nth-child(3)::before{content:"REAL TIME";color:var(--ambre-txt)}
 .tl-body>div:nth-child(4)::before{content:"AFTER OUTAGE"}
 .tl-track{flex-wrap:wrap}
}

/* use cases + loop */
.ucs{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.uc{background:var(--panneau);border:1px solid var(--filet-n);border-left:3px solid var(--indigo);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.uc .t{font-size:18px;font-weight:500;color:var(--blanc);letter-spacing:-.01em}
.loop{margin-top:64px}
.loop h3{font-size:clamp(22px,2.6vw,32px);line-height:1.25;font-weight:600;max-width:32ch}
.loop .intro{margin-top:14px;color:var(--clair-2);max-width:68ch}
.diagram{margin-top:28px}
.diagram svg{min-width:660px;max-width:920px}
.scada{margin-top:14px;max-width:470px;height:36px;border-radius:10px;background:var(--indigo);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--blanc)}
.nets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.net{border-radius:14px;padding:14px 18px;background:var(--panneau);border:1px solid var(--filet-n);color:var(--clair)}
.net .ic{display:flex;gap:16px;margin-top:10px;color:#A9ADFF}
.net.host{background:rgba(74,87,255,.16);border-color:rgba(74,87,255,.4);display:flex;justify-content:space-around;align-items:center}
.net.host span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}

/* performance */
.optim{margin-top:36px;padding:clamp(20px,3vw,32px)}
.optim .head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tag-dark{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--blanc);background:var(--barre);border-radius:8px;padding:7px 12px}
.cycle{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--indigo-txt)}
.optim .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:22px}
.optim h3{font-size:18px;font-weight:600}
.optim .d{font-size:13px;color:var(--texte-2);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:500;color:var(--encre);border:1px solid var(--filet);background:var(--carte)}
.c-lev{border-left:3px solid var(--indigo)}.c-obj{border-left:3px solid var(--ambre)}.c-con{border-left:3px solid var(--rouge)}
.loadflow{margin-top:22px;border-radius:10px;background:var(--indigo);color:var(--blanc);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-align:center;padding:10px}
.metrics{padding-block:72px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:28px}
.metric{background:var(--panneau);border:1px solid var(--filet-n);border-radius:16px;padding:22px}
.mv{font-size:44px;font-weight:600;color:var(--blanc);line-height:1;letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums}
.mv span{font-family:var(--f-mono);font-size:16px;letter-spacing:.04em;color:var(--indigo-2);margin-left:8px;font-weight:500}
.metric:nth-child(4) .mv span{color:var(--ambre)}
.metric h3{font-size:17px;font-weight:600;margin-top:18px;padding-top:16px;border-top:1px solid var(--filet-n)}
.metric p{font-size:14px;line-height:1.55;color:var(--clair-2);margin-top:8px}

/* transparency */
.hmis{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}
.hmis figure{margin:0}
.screen{background:var(--nuit);border-radius:20px;padding:6px;box-shadow:0 24px 48px -28px rgba(20,22,31,.7)}
.screen img{display:block;width:100%;border-radius:15px;clip-path:inset(2px round 15px)}
figcaption{margin-top:10px}
.comp-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.comp-grid p{font-size:15px}
.stds{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.status{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:#A9ADFF;border:1px solid rgba(127,136,255,.6);border-radius:8px;padding:6px 10px}
.status:nth-child(n+5){color:var(--ambre);border-color:rgba(245,165,36,.6)}
@media (max-width:860px){.comp-grid{grid-template-columns:minmax(0,1fr)}}

/* architecture */
.stack{margin-top:40px;padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;gap:12px}
.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.sources div{border:1.5px dashed #C9CAD8;border-radius:12px;padding:12px;text-align:center;font-size:14px;color:var(--texte-2)}
.api{border-radius:10px;background:var(--indigo);text-align:center;padding:11px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--blanc)}
.layer{border-radius:16px;padding:18px}
.layer .lt{margin-bottom:12px;font-weight:600}
.layer .lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.layer .lg div{border-radius:10px;padding:14px 10px;text-align:center;font-size:14px;font-weight:500}
.l1{background:var(--indigo-pale)}.l1 .lt{color:var(--indigo-txt)}.l1 .lg div{background:var(--carte);color:var(--encre)}
.l2{background:var(--ambre-pale)}.l2 .lt{color:var(--ambre-txt)}.l2 .lg div{background:var(--carte);color:var(--encre)}
.l3{background:var(--nuit)}.l3 .lt{color:var(--indigo-2)}.l3 .lg div{background:var(--panneau);color:var(--blanc);border:1px solid var(--filet-n)}
.motto{margin-top:20px;text-align:center}

/* rollout */
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:26px;position:relative}
.steps::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--indigo),var(--ambre))}
.step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:18px;position:relative}
.sd{width:24px;height:24px;border-radius:50%;margin-top:4px;background:var(--jour);border:6px solid var(--indigo)}
.s1{border-color:#7F68D8}.s2{border-color:#C9843F}.s3{border-color:var(--ambre)}
.step .mono{color:var(--indigo-txt);font-weight:600}
.step p{font-size:17px;font-weight:500;color:var(--encre);margin-top:4px}
.edf{padding:28px;align-self:center}
.edf p+p{margin-top:12px}
.quote{margin-top:56px;border-radius:24px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.quote p{font-size:clamp(22px,2.8vw,32px);line-height:1.3;color:var(--blanc);font-weight:600;max-width:28ch;letter-spacing:-.02em}
.quote .a{color:var(--ambre)}
.quote svg{width:160px}
@media (max-width:640px){.quote{grid-template-columns:minmax(0,1fr)}.quote svg{display:none}}
.partner{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;margin-top:44px}
.partner .card{height:120px;display:flex;align-items:center;justify-content:center}
.partner img{height:52px;width:auto}
@media (max-width:640px){.partner{grid-template-columns:minmax(0,1fr)}}

/* contact */
.contact{padding-block:110px 64px;overflow:hidden;position:relative}
.contact h2{font-size:clamp(44px,7vw,92px);letter-spacing:-.035em}
.contact h2 .f{display:block;background:linear-gradient(90deg,#8A93FF,var(--ambre));-webkit-background-clip:text;background-clip:text;color:transparent}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:48px;max-width:820px}
.person{padding:22px 24px}
.person h3{font-size:22px;font-weight:600}
.person .r{font-size:14px;color:var(--clair-2);margin-top:4px}
.person .m{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--f-mono);font-size:13px;color:#A9ADFF;word-break:break-all}
.person button{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;border-radius:8px;border:1px solid rgba(245,165,36,.6);background:transparent;color:var(--ambre);padding:4px 10px;cursor:pointer}
.person button:hover{background:rgba(245,165,36,.12)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:20px;border-top:1px solid var(--filet-n)}
.contact .deco-wide{margin-top:56px;width:100%;opacity:.55}


/* Flow layer */
.flowhero{min-height:min(820px,100svh);display:flex;align-items:flex-end;padding-block:120px 88px;position:relative;overflow:hidden}
.flowhero .glow{display:none}
.fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,16,.92) 0%,rgba(11,12,16,.55) 45%,rgba(11,12,16,0) 75%),linear-gradient(0deg,rgba(11,12,16,.9) 0%,rgba(11,12,16,0) 45%);pointer-events:none}
.flowhero .wrap,.contact .wrap{position:relative;width:100%}
.lockup{display:flex;align-items:center;gap:18px;font-size:clamp(44px,6vw,76px);font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1}
.lockup svg{width:1.05em;height:1.05em}
.flowhero h1.typed{font-family:var(--f-mono);font-weight:400;font-size:clamp(26px,4.2vw,54px);letter-spacing:-.01em;line-height:1.3;margin-top:28px;color:#fff;min-height:1.3em}
.typed .tb,.tag2 .tb{color:#7F88FF}
.caret{display:inline-block;width:.55em;height:1.05em;background:var(--indigo);vertical-align:-.15em;margin-left:.15em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.flowhero .sub{margin-top:22px}
.flowhero .meta .cto{color:var(--ambre);border-color:rgba(245,165,36,.5)}
.has-ribbon{position:relative}
.ribbon{position:relative;height:150px;margin-bottom:8px}
section.has-ribbon{padding-top:0}
#use-cases .ribbon{margin-bottom:28px}
.metrics.has-ribbon{padding-top:0}
.light-r .ribbon{margin-bottom:24px}
.quote{position:relative;overflow:hidden}
.quote .qfx{position:absolute;inset:0;left:auto;width:42%;height:100%;opacity:.9}
.quote p{position:relative;z-index:1}
.contact{position:relative;min-height:640px;display:flex;align-items:center}
.contact .veil{background:linear-gradient(90deg,rgba(11,12,16,.92) 0%,rgba(11,12,16,.6) 55%,rgba(11,12,16,.2) 100%)}
.tag2{font-family:var(--f-mono)!important;font-weight:400!important;font-size:clamp(30px,4.4vw,56px)!important;letter-spacing:-.02em!important;line-height:1.2!important}
.person{background:rgba(18,20,26,.85)!important;backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
@media (max-width:640px){.quote .qfx{display:none}.ribbon{height:110px}}