:root{--bg:#000;--panel:#0d0d0d;--fg:#fff;--muted:#c7c6c6;--line:#2c2c2c;--accent:#c7c6c6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);z-index:10}
.brand{display:flex;align-items:center}
.brand img{display:block;width:auto}
.top-r{display:flex;align-items:center;gap:20px}
.lang{display:flex;gap:2px;font-size:13px;letter-spacing:.1em}
.lang a{color:var(--muted);text-decoration:none;padding:6px 8px;border:1px solid transparent}
.lang a[aria-current]{color:#fff;border-color:var(--line)}
.lang a:hover{color:#fff}
.btn{display:inline-block;background:var(--accent);color:#000;border:0;padding:14px 36px;font:600 16px inherit;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:#fff}
.btn-sm{padding:8px 20px;font-size:13px}

/* sections: full-bleed, content centred at 1000px */
section{position:relative;isolation:isolate;overflow:hidden;padding:110px max(24px,calc(50% - 500px))}
section::before,section::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-position:center}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1.15;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sub{max-width:620px;color:var(--muted);font-size:18px;margin-top:16px}

/* hero */
.hero{text-align:center;min-height:calc(100vh - 73px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:80px;padding-bottom:140px}
.wordmark{display:block;width:min(560px,86%);height:auto;margin:0 auto 40px}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.3em;font-size:13px}
h1{font-size:clamp(34px,6vw,68px);line-height:1.08;margin:.35em 0 .4em;font-weight:700}
.lead{max-width:620px;margin:0 auto 36px;color:var(--muted);font-size:18px}

/* kpi */

/* flow: timeline on a track */

/* cloud */
.cloud{background:#050505;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cloud ul{list-style:none;padding:0;margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);text-align:left}
.cloud li{padding:8px 32px;border-left:1px solid var(--accent)}
.cloud h3{font-size:20px;font-weight:600;margin-bottom:8px}
.cloud li p{color:var(--muted);font-size:16px}

/* mobile */
.mobile{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:48px}
.mobile::before{width:min(900px,120vw);height:300px;left:-100px;bottom:40px;background-image:url(../img/telemetry.svg);background-size:100% 100%;opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.mobile ul{list-style:none;padding:0;margin-top:32px;display:grid;gap:14px}
.mobile li{padding-left:28px;position:relative;color:var(--fg)}
.mobile li::before{content:"";position:absolute;left:0;top:.65em;width:16px;height:2px;background:var(--accent)}
.phone{display:block;width:min(260px,70%);height:auto;justify-self:center;opacity:.9;filter:drop-shadow(0 0 40px rgba(199,198,198,.12))}
@media(max-width:760px){.mobile{grid-template-columns:1fr}.phone{width:200px}}

/* statement */

@media(max-width:760px){
  section{padding:72px 20px}
  .hero{padding-bottom:110px}
  .cloud ul{grid-template-columns:1fr;gap:28px}
  .dock-bar{padding:10px 14px}
  
  .fmark{font-size:12px}
  .dock-inner{grid-template-columns:1fr}
  .dock-panel form{grid-template-columns:1fr}
  
}

/* bottom dock: footer + expandable contact */
body{padding-bottom:64px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20}
.dock-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:rgba(0,0,0,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);color:var(--muted);font-size:14px;position:relative;z-index:2}
.fmark{display:inline-flex;align-items:center;gap:12px}
.fmark img{opacity:1;height:26px;width:auto}
.dock-toggle{display:inline-flex;align-items:center;gap:10px}
.dock-toggle i{width:8px;height:8px;border-left:2px solid #000;border-top:2px solid #000;transform:rotate(45deg) translate(2px,2px);transition:transform .3s}
.dock.open .dock-toggle i{transform:rotate(225deg) translate(2px,2px)}
.dock-panel{max-height:0;overflow:hidden;background:rgba(5,5,5,.98);backdrop-filter:blur(8px);border-top:1px solid transparent;transition:max-height .45s cubic-bezier(.2,.8,.2,1),border-color .3s;position:relative;visibility:hidden}
.dock.open .dock-panel{max-height:min(78vh,560px);overflow-y:auto;overflow-x:hidden;border-top-color:var(--accent);visibility:visible}
.dock-panel::before{content:"";position:absolute;right:-120px;top:-40px;width:520px;aspect-ratio:600/420;background:url(../img/circuit.svg) center/contain no-repeat;opacity:.22;pointer-events:none}
.dock-inner{position:relative;max-width:1000px;margin:0 auto;padding:36px 24px 32px;display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.dock-head h2{font-size:26px}
.dock-head p{color:var(--muted);margin-top:10px}
.dock-panel form{margin:0;grid-template-columns:1fr 1fr;gap:14px}
.dock-panel .wide{grid-column:1/-1}
.dock-panel .row{display:flex;align-items:center;gap:16px}
.dock-panel .check a{color:#fff}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#000}


/* form base */
form{display:grid;gap:16px}
label{display:grid;gap:6px;color:var(--muted);font-size:14px}
input,textarea{background:rgba(13,13,13,.9);border:1px solid var(--line);color:var(--fg);padding:12px;font:inherit;border-radius:0;width:100%}
input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{display:flex;gap:10px;align-items:center}
.check input{width:auto}
.hp{position:absolute;left:-9999px}
.status{min-height:1.5em;font-size:14px;color:var(--muted)}

/* legal pages */


/* first screen: hero + KPI in one viewport */
.first
.first
.first
@media(max-width:760px){.first.first}

/* cloud + mobile side by side */
.duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.duo>section{padding:88px 48px;border:0}
.duo .cloud{text-align:left;background:#050505;border-right:1px solid var(--line)}
.duo 
.duo .cloud ul{grid-template-columns:1fr;gap:26px;margin-top:40px}
.duo .cloud li{padding:4px 0 4px 24px}
.duo .mobile{display:block}
.duo .mobile::before{left:-60px;right:0;width:auto;bottom:20px}
.duo .phone{position:absolute;z-index:-1;right:28px;top:50%;transform:translateY(-50%);width:180px;opacity:.28;filter:none}
.duo .mobile-txt{position:relative}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo .cloud{border-right:0;border-bottom:1px solid var(--line)}.duo>section{padding:64px 20px}.duo .phone{width:140px;right:12px}}

/* KPI in header */
@media(max-width:1240px){.top{flex-wrap:wrap}}
/* hero: telemetry watermark restored (KPI no longer share it) */
.hero::before{left:0;right:0;bottom:0;height:62%;background-image:url(../img/telemetry.svg);background-size:100% 100%;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.hero{min-height:calc(100vh - 73px)}
/* mobile image back as a prominent element */
.duo{grid-template-columns:.95fr 1.05fr}
.duo .mobile{display:grid;grid-template-columns:1fr 190px;gap:24px;align-items:center}
.duo .mobile h2,.duo .cloud h2{font-size:clamp(22px,2.4vw,30px)}
.duo .phone{position:static;z-index:auto;transform:none;width:190px;opacity:1;filter:drop-shadow(0 0 36px rgba(199,198,198,.18))}
@media(max-width:900px){.duo .mobile{grid-template-columns:1fr 140px}.duo .phone{width:140px;right:auto}}
.brand,.top-r{flex-shrink:0}
.hero{padding-top:clamp(28px,5vh,70px);padding-bottom:clamp(110px,16vh,150px)}
.hero .wordmark{width:min(420px,78%);margin-bottom:clamp(16px,3vh,32px)}
.hero h1{font-size:clamp(32px,5.2vw,60px)}
@media(max-width:1240px){.hero{min-height:calc(100vh - 118px)}}

/* world presence */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.world{padding-top:64px;padding-bottom:72px;background:linear-gradient(180deg,#000,#070707 50%,#000);text-align:center}
.world .map{display:block;width:min(1000px,100%);height:auto;margin:0 auto}
.world .net{max-width:620px;margin:6px auto 0;color:var(--muted);font-size:15px;letter-spacing:.02em}
.wk{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;text-align:center}
.wk>div{padding:4px 28px}
.wk>div+div{border-left:1px solid var(--line)}
.wk strong{display:block;font-size:clamp(48px,6vw,76px);line-height:1;font-weight:200;color:#fff}
.wk b{display:block;margin-top:12px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.wk p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.55}
@media(max-width:760px){.wk{grid-template-columns:1fr;gap:28px}.wk>div+div{border-left:0;border-top:1px solid var(--line);padding-top:28px}}

/* telemetry trace moved from hero to header KPI */
@media(max-width:1240px){}

/* header KPI: no watermark; tighter hero -> world spacing */
.hero,
@media(max-width:1240px){.hero{min-height:0}}
.hero{padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(36px,6vh,64px)}
.world{padding-top:8px;padding-bottom:64px}

/* hero more compact */
.hero{padding-top:clamp(20px,3.5vh,40px);padding-bottom:clamp(20px,3.5vh,40px)}
.hero .wordmark{width:min(300px,70%);margin-bottom:clamp(10px,2vh,20px)}
.hero h1{font-size:clamp(28px,4.4vw,48px);margin:.2em 0 .25em}
.hero .lead{font-size:16px;margin-bottom:clamp(14px,2.4vh,22px)}
.hero .btn{padding:12px 30px}
.world{padding-top:0;padding-bottom:56px}

/* world block smaller */
.world .map{width:min(760px,100%)}
.world .net{font-size:14px;margin-top:0}
.wk{margin-top:30px}
.wk>div{padding:4px 22px}
.wk strong{font-size:clamp(36px,4.4vw,54px)}
.wk b{font-size:12px;margin-top:8px}
.wk p{font-size:13.5px;margin-top:6px;line-height:1.5}
.world{padding-bottom:44px}

/* six KPI: 3 x 2 */
.wk{row-gap:30px}
.wk>div:nth-child(n+4){border-top:1px solid var(--line);padding-top:26px}
.wk>div:nth-child(4){border-left:0}
@media(max-width:760px){.wk>div:nth-child(n+4){padding-top:28px}}

/* five KPI: 3 + 2 */
.wk{grid-template-columns:repeat(6,1fr)}
.wk>div{grid-column:span 2}
.wk>div:nth-child(n+4){grid-column:span 3}
.wk>div:nth-child(5){border-left:1px solid var(--line)}
.wk strong.txt{font-size:clamp(26px,3.2vw,38px);font-weight:200;line-height:1.35;letter-spacing:.04em;padding:6px 0 4px}
@media(max-width:760px){.wk{grid-template-columns:1fr}.wk>div,.wk>div:nth-child(n+4){grid-column:auto}.wk>div:nth-child(5){border-left:0}}

/* hero: telemetry trace watermark */
.hero::before{left:0;right:0;bottom:0;height:62%;background-image:url(../img/telemetry.svg?v=3);background-size:100% 100%;opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
/* quieter typography: capitals only on the eyebrow */
h2{text-transform:none;letter-spacing:.01em;font-weight:600}
.btn{text-transform:none;letter-spacing:.03em}
.wk b{text-transform:none;letter-spacing:.02em;font-size:16px}

.hero .wordmark{width:min(clamp(300px,50vh,500px),82%);margin-bottom:clamp(14px,3.2vh,30px)}
.hero .eyebrow{font-size:clamp(12px,1.7vh,14px)}
.hero h1{font-size:clamp(32px,7vh,66px);margin:.3em 0 .3em}
.hero .lead{font-size:clamp(15px,2.3vh,18px);margin-bottom:clamp(16px,3.4vh,32px)}
.hero .btn{padding:clamp(11px,1.8vh,15px) 34px}
@media(max-width:1240px){.hero{min-height:calc(100svh - 73px)}}

/* contact panel: e-mail */
.dock-contact{position:relative;display:grid;gap:22px;align-content:center}
.dock-contact .mail{font-size:clamp(22px,3.2vw,34px);font-weight:300;color:#fff;text-decoration:none;border-bottom:1px solid var(--accent);justify-self:start;padding-bottom:4px;word-break:break-all}
.dock-contact .mail:hover{border-bottom-color:#fff}
.dock-contact .row{display:flex;flex-wrap:wrap;gap:12px}
.dock-contact .btn{text-align:center}

.dock-contact .alt{font-size:14px;color:var(--muted)}
.dock-contact .alt a{color:#fff}

.dock-head h2{text-transform:none;letter-spacing:.02em}


/* approach: continuous cycle, dotted watermark like the map */
.fit{text-align:center;padding-top:104px;padding-bottom:120px;border-top:1px solid var(--line);background:#050505}
.fit::before{inset:0;background-image:radial-gradient(rgba(199,198,198,.5) 1px,transparent 1.4px);background-size:22px 22px;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%)}
.fit h2{max-width:860px;margin:0 auto;font-size:clamp(26px,3.8vw,44px);line-height:1.2;font-weight:600}
.fit .sub{margin:22px auto 0;max-width:640px;font-size:18px}
.cycle{list-style:none;padding:0;margin:64px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.cycle>li:not(.loop){position:relative;padding:34px 18px 0}
.cycle>li:not(.loop)::before{content:"";position:absolute;top:7px;left:calc(-50% + 9px);width:calc(100% - 18px);height:0;border-top:1px dashed var(--accent);animation:flowx 5s linear infinite;opacity:.8}
.cycle>li:first-child::before{display:none}

.cycle i{position:absolute;top:0;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 0 24px rgba(199,198,198,.5)}
.cycle h3{font-size:22px;font-weight:600;color:#fff;letter-spacing:.02em}
.cycle p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
.cycle .loop{position:absolute;left:16.66%;right:16.66%;bottom:-50px;height:36px;border:1px dashed var(--accent);border-top:0;border-radius:0 0 60px 60px;opacity:.8}
.cycle .loop span{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:#050505;padding:0 14px;color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:760px){
  .fit{padding-top:72px;padding-bottom:96px}
  .cycle{grid-template-columns:1fr;gap:0;margin-top:44px;text-align:left}
  .cycle>li:not(.loop){padding:0 0 34px 44px}
  .cycle>li:not(.loop)::before{top:-27px;left:7px;width:0;height:calc(100% + 0px);border-top:0;border-left:1px dashed var(--accent)}
  .cycle>li:first-child::before{display:none}
  .cycle i{left:0;margin-left:0}
  .cycle .loop{display:none}
}

/* brand typeface (display only; body text keeps the system font) */
@font-face{font-family:"Bank Gothic";src:url(../fonts/BankGothicLtBT.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--display:"Bank Gothic","Segoe UI",system-ui,sans-serif}
h1,h2,h3,.eyebrow,.btn,.wk strong,.wk b,.lang a{font-family:var(--display);font-weight:400}
h1{font-size:clamp(24px,5.4vh,46px);letter-spacing:.03em;line-height:1.18}
h2,.fit h2{font-size:clamp(20px,2.7vw,32px);letter-spacing:.04em;line-height:1.25}
.cloud h3,.cycle h3{font-size:19px;letter-spacing:.06em;font-weight:400}
.eyebrow{letter-spacing:.28em}
.btn{font-size:14px;letter-spacing:.1em}
.btn-sm{font-size:12px}
.wk strong{font-size:clamp(34px,4.2vw,50px);font-weight:400;letter-spacing:.02em}
.wk strong.txt{font-size:clamp(20px,2.4vw,28px);letter-spacing:.05em}
.wk b{font-size:13px;letter-spacing:.14em}
.hero .wordmark{width:min(clamp(260px,44vh,440px),80%)}

/* service cycle: gentle animation */
.cycle>li:not(.loop)::before{border-top:0;height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);animation:dashx 1.2s linear infinite}
@keyframes dashx{to{background-position-x:12px}}
.cycle i::after{content:"";position:absolute;inset:-6px;border:1px solid #fff;border-radius:50%;opacity:0;animation:ring 6s ease-out infinite}
.cycle>li:nth-child(2) i::after{animation-delay:2s}
.cycle>li:nth-child(3) i::after{animation-delay:4s}
@keyframes ring{0%{transform:scale(.7);opacity:.9}22%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
.cycle h3{animation:lit 6s ease-in-out infinite}
.cycle>li:nth-child(2) h3{animation-delay:2s}
.cycle>li:nth-child(3) h3{animation-delay:4s}
@keyframes lit{0%,40%,100%{text-shadow:none}8%,24%{text-shadow:0 0 18px rgba(255,255,255,.6)}}
.cycle .loop{animation:loopglow 6s ease-in-out infinite}
@keyframes loopglow{0%,100%{opacity:.45}85%{opacity:1}}
.js .cycle:not(.in)>li:not(.loop){opacity:0;transform:translateY(16px)}
.cycle>li:not(.loop){transition:opacity .8s ease,transform .8s ease}
.cycle>li:nth-child(2){transition-delay:.25s}
.cycle>li:nth-child(3){transition-delay:.5s}
@media(max-width:760px){
  .cycle>li:not(.loop)::before{background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px);width:1px;height:calc(100% + 0px);animation:dashy 1.2s linear infinite}
  @keyframes dashy{to{background-position-y:12px}}
}
@media(prefers-reduced-motion:reduce){.cycle *,.cycle,.cycle::before{animation:none!important}.js .cycle:not(.in)>li:not(.loop){opacity:1;transform:none}}

/* active step highlighted in intense yellow */
.cycle i::after{border-color:#ffd400}
.cycle i{animation:nodeY 6s ease-in-out infinite}
.cycle>li:nth-child(2) i{animation-delay:2s}
.cycle>li:nth-child(3) i{animation-delay:4s}
@keyframes nodeY{
  0%,40%,100%{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 0 24px rgba(199,198,198,.5)}
  6%,24%{background:#ffd400;box-shadow:0 0 0 7px rgba(255,212,0,.28),0 0 32px rgba(255,212,0,.95)}
}
.cycle h3{animation:litY 6s ease-in-out infinite}
.cycle>li:nth-child(2) h3{animation-delay:2s}
.cycle>li:nth-child(3) h3{animation-delay:4s}
@keyframes litY{
  0%,40%,100%{color:#fff;text-shadow:none}
  6%,24%{color:#ffd400;text-shadow:0 0 20px rgba(255,212,0,.75)}
}

/* cloud + mobile: robust two-column / one-column layout with the display font */
.duo .cloud ul{grid-template-columns:1fr;gap:24px;margin-top:36px}
.duo h2{font-size:clamp(18px,2vw,26px);letter-spacing:.03em}
.duo .cloud h3{font-size:17px;letter-spacing:.04em;overflow-wrap:anywhere}
@media(max-width:1000px){
  .duo{grid-template-columns:1fr}
  .duo .cloud{border-right:0;border-bottom:1px solid var(--line)}
  .duo>section{padding:64px 24px}
  .duo .mobile{grid-template-columns:1fr 180px}
  .duo .phone{width:180px}
}
@media(max-width:560px){.duo .mobile{grid-template-columns:1fr}.duo .phone{justify-self:start;width:150px}}
h1{font-size:clamp(22px,min(5.2vh,4.1vw),44px);letter-spacing:.025em}
.hero h1{font-size:clamp(22px,min(5.2vh,4.1vw),44px);letter-spacing:.025em}
.hero h1{font-size:clamp(24px,min(5.6vh,5vw),50px)}