:root{
  --bg:#F1F7F5; --surface:#FFFFFF; --ink:#02333B; --muted:#4A6A70; --line:#CADDD8;
  --brand:#008F64; --accent:#007A56; --accent-ink:#FFFFFF;
  --rack:#02333B; --rack-unit:#08434D; --rack-line:#16606B; --rack-text:#DDF1EA; --rack-dim:#84B3AC;
  --led-off:#14505A; --led-on:#2FD39A; --led-act:#D5FFEE;
  --err:#B3261E;
  --header-h:82px;
  --font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Unbounded","Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#031A20; --surface:#072A32; --ink:#E4F3EF; --muted:#8FB0AB; --line:#164049;
    --brand:#22B584; --accent:#2FD39A; --accent-ink:#031A20;
    --rack:#010E12; --rack-unit:#062A32; --rack-line:#123F49;
    --err:#FF8A80;
  }
}
:root[data-theme="dark"]{
  --bg:#031A20; --surface:#072A32; --ink:#E4F3EF; --muted:#8FB0AB; --line:#164049;
  --brand:#22B584; --accent:#2FD39A; --accent-ink:#031A20;
  --rack:#010E12; --rack-unit:#062A32; --rack-line:#123F49;
  --err:#FF8A80;
}

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.modal-open{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:var(--accent-ink);font:600 .9375rem/1 var(--font-body);cursor:pointer;text-decoration:none;transition:filter .15s ease,background .15s ease}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.6;cursor:progress}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);filter:none}
.btn--sm{height:40px;padding:0 16px}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{height:var(--header-h);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.brand{--logo-h:48px;grid-column:1;display:flex;align-items:flex-end;gap:10px;text-decoration:none}
.brand-wordblock{display:flex;flex-direction:column;justify-content:center;gap:4px}
.brand-mark{flex:none;display:block;width:48px;height:auto}
.site-header .brand-mark{width:auto;height:var(--logo-h)}
.wordmark{flex:none;align-self:flex-start;display:block;width:auto;height:calc(var(--logo-h) * .6)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wordmark{filter:brightness(0) invert(.92)}}
.brand-desc{font-size:.6875rem;line-height:1.15;color:var(--muted);white-space:nowrap}
:root[data-theme="dark"] .wordmark{filter:brightness(0) invert(.92)}
.nav{grid-column:2;display:flex;justify-content:center;gap:24px}
.nav > a{text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s}
.nav > a:hover,.nav > a[aria-current="true"]{color:var(--ink)}
.nav > a[aria-current="true"]{border-bottom-color:var(--accent)}
.nav-extra{display:none}
.actions{grid-column:3;display:flex;align-items:center;gap:16px;justify-self:end}
.phone{font-weight:600;text-decoration:none;white-space:nowrap;font-size:.9375rem}
.phone:hover{color:var(--accent)}
.lang{display:flex;align-items:center;gap:4px}
.lang button{background:none;border:0;padding:6px 4px;font:600 .875rem/1 var(--font-body);color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.lang span{color:var(--line)}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(36px,6vw,80px));padding-bottom:clamp(56px,8vw,104px)}
.hero{position:relative;overflow:hidden}
/* Large decorative watermark of the brand mark, behind the hero content. Same file as the header logo. */
.hero-watermark{position:absolute;z-index:0;pointer-events:none;top:50%;right:clamp(-220px,-6vw,-40px);width:clamp(480px,42vw,760px);aspect-ratio:1766.47/1826.94;transform:translateY(-50%);background:url("logo-mark.svg") center/contain no-repeat;opacity:.07}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-watermark{opacity:.12;filter:brightness(1.6)}}
:root[data-theme="dark"] .hero-watermark{opacity:.12;filter:brightness(1.6)}
.hero-grid{position:relative;z-index:1}
@media (max-width:900px){.hero-watermark{right:50%;transform:translate(50%,-50%);width:clamp(320px,90vw,520px)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center}
.hero-text{container-type:inline-size}
.hero h1{font-size:clamp(1.85rem,4.2vw,3.25rem);font-size:clamp(1.6rem,8.4cqw,3.25rem);line-height:1.12}
.nb{white-space:nowrap}
.hero-sub{margin-top:22px;max-width:54ch;font-size:1.125rem;color:var(--muted)}
.hero-form{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
.hero-form .input{flex:1 1 240px}
.hero-form .err{flex:1 1 100%}

.input,.textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:400 1rem/1.4 var(--font-body)}
.textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus-visible,.textarea:focus-visible{outline-offset:0;border-color:var(--accent)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--err)}
.err{min-height:1.25rem;font-size:.875rem;color:var(--err);margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rack (hero visual) ---------- */
.rack{position:relative;max-width:460px;width:100%;margin-inline:auto;padding:16px 28px;background:var(--rack);border:1px solid var(--rack-line);border-radius:10px;box-shadow:0 28px 50px -30px rgba(2,51,59,.7)}
.rack::before,.rack::after{content:"";position:absolute;top:14px;bottom:14px;width:8px;background:radial-gradient(circle,var(--rack-line) 2px,transparent 2.5px) center top/8px 28px repeat-y}
.rack::before{left:10px}
.rack::after{right:10px}
.unit{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;margin-bottom:6px;padding:0 14px;background:var(--rack-unit);border:1px solid var(--rack-line);border-radius:3px;color:var(--rack-text);font-family:var(--font-mono);animation:unit-in .5s ease-out both;animation-delay:calc(var(--i) * 130ms)}
.unit:last-child{margin-bottom:0}
.unit-name{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.03em}
.unit-spec{display:block;margin-top:2px;font-size:.6875rem;color:var(--rack-dim)}
.unit--blank{background:repeating-linear-gradient(90deg,transparent 0 6px,var(--rack-line) 6px 7px),var(--rack-unit);height:38px}
.leds{display:flex;gap:6px;flex:none}
.led{width:7px;height:7px;border-radius:50%;background:var(--led-off)}
.led.on{background:var(--led-on);box-shadow:0 0 6px var(--led-on);animation:led-in .4s ease-out both;animation-delay:calc(var(--i) * 130ms + 250ms)}
.led.act.flash{background:var(--led-act);box-shadow:0 0 6px var(--led-act)}
@keyframes unit-in{from{opacity:.25;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes led-in{from{background:var(--led-off);box-shadow:none}}

/* ---------- Sections ---------- */
.section{padding-block:clamp(64px,9vw,112px)}
.section-title{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.15}

/* Services */
.svc-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.svc{display:flex;flex-direction:column;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:8px;border-top:4px solid var(--brand);transition:border-color .2s}
.svc:hover,.svc:focus-within{border-color:var(--accent)}
.svc h3{font-size:1.1875rem;line-height:1.3}
.svc ul{margin-top:20px;display:grid;gap:12px;flex:1;align-content:start}
.svc li{position:relative;padding-left:20px;color:var(--muted)}
.svc li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border:2px solid var(--brand);border-radius:50%}
.svc .btn{margin-top:28px;align-self:flex-start}

/* Tech stack */
.tech{background:var(--rack);color:var(--rack-text);border-block:1px solid var(--rack-line);padding-block:clamp(40px,6vw,64px)}
.tech-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.tech h2{font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.25}
.tech-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
/* Logo tile: light plate (brand logos are designed for light backgrounds), logo on top, caption below */
.tech-list li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:104px;padding:20px 14px;border-radius:8px;background:#E2EBE7;color:#02333B;text-align:center}
.tech-logo{display:flex;align-items:center;justify-content:center;width:100%;height:64px}
.tech-logo img{display:block;height:60px;width:auto;max-width:100%;object-fit:contain}
/* brand names stay in the DOM for screen readers, but are not shown */
.tech-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* no file in /logos: show the name only, in the logo's place */
.tech-list li.no-logo .tech-logo{display:none}
.tech-list li.no-logo .tech-name{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:1.0625rem;font-weight:700;color:#02333B}

/* Why us */
.why-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,80px);align-items:start}
.why-title{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px)}
.why-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.why-item{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;background:var(--accent);color:var(--accent-ink)}
.why-item h3{margin-top:18px;font-size:1.0625rem}
.why-item p{margin-top:8px;color:var(--muted)}

/* Process */
.steps{position:relative;margin-top:52px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps::before{content:"";position:absolute;top:17px;left:17px;right:calc(20% - 17px);height:2px;background:var(--line)}
.step{position:relative}
.node{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);font-weight:700;font-size:.9375rem}
.step h3{margin-top:16px;font-size:1.0625rem}
.step p{margin-top:6px;color:var(--muted);font-size:.9375rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.contact-lead{margin-top:18px;font-size:1.125rem;color:var(--muted);max-width:44ch}
.contact-data{margin-top:36px;display:grid;gap:22px}
.contact-data dt{font-size:.875rem;color:var(--muted)}
.contact-data dd{margin:2px 0 0;font-size:1.125rem;font-weight:600}
.contact-data a{text-decoration:none}
.contact-data a:hover{color:var(--accent)}
.msgrs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.msgr{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:.9375rem;font-weight:600;text-decoration:none}
.msgr-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none}
.msgr-icon img{display:block;width:100%;height:100%;object-fit:contain}
/* no file in /logos: hide the icon slot, keep just the name */
.msgr.no-logo .msgr-icon{display:none}
.msgr:hover{border-color:var(--accent)}
.form-card{padding:clamp(22px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:8px}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px;font-size:.9375rem;font-weight:500}

/* Footer */
.site-footer{padding-block:32px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-brand .brand-mark{width:44px}
.footer-right{text-align:left}
.tagline{font-weight:600;color:var(--ink);letter-spacing:.02em}

/* Modal */
.modal{width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);overflow:auto}
.modal::backdrop{background:rgba(1,14,18,.66)}
.modal-body{padding:26px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.modal-head h2{font-size:1.25rem;line-height:1.3}
.modal-close{flex:none;width:38px;height:38px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:100;width:min(440px,calc(100% - 32px));padding:14px 18px;background:var(--ink);color:var(--bg);border-radius:8px;font-weight:500;transform:translate(-50%,24px);opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility .25s}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast.error{background:var(--err);color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .burger{display:inline-flex}
  .actions .phone{display:none}
  .actions{gap:12px}
  .nav{position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;justify-content:flex-start;gap:0;max-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top,0px));overflow:auto;padding:8px 24px 24px;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav > a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--ink)}
  .nav > a[aria-current="true"]{border-bottom-color:var(--line);color:var(--accent)}
  .nav-extra{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:20px}
  .nav-extra .phone{font-size:1.0625rem}
}
@media (max-width:900px){
  .hero-grid,.why-grid,.contact-grid,.tech-inner{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .why-title{position:static}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:36px}
  .steps::before{top:18px;bottom:18px;left:17px;right:auto;width:2px;height:auto}
  .step{padding:0 0 28px 56px}
  .step:last-child{padding-bottom:0}
  .step .node{position:absolute;left:0;top:0}
  .step h3{margin-top:6px}
}
@media (max-width:720px){
  .tech-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .container{padding-inline:18px}
  .why-list{grid-template-columns:minmax(0,1fr)}
  .hero-form .btn{width:100%}
}
@media (max-width:600px){
  .brand{--logo-h:38px}
}
@media (max-width:430px){
  .header-inner{gap:12px}
  .brand{--logo-h:29px;gap:8px}
  .brand-desc{display:none}
  .actions{gap:8px}
}
@media (max-width:375px){
  .brand{--logo-h:26px}
}
@media (max-width:340px){
  .brand{--logo-h:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}