@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f7f9fc;
  --white:#fff;
  --ink:#0b1730;
  --muted:#66748a;
  --line:#e3e9f1;
  --blue:#1769ff;
  --blue2:#4d8cff;
  --soft:#eef4ff;
  --dark:#06101d;
  --darkline:#1c344a;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  font-size:15px;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
a{
  touch-action:manipulation;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

.container{
  width:min(1280px,calc(100% - 48px));
  margin:auto;
}

/* ================================
   HEADER
================================ */

.header{
  height:78px;
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffffed;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}

.nav{
  height:100%;
  display:flex;
  align-items:center;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand strong{
  font-size:20px;
  letter-spacing:-1px;
}

.brand strong span{
  color:var(--blue);
}

.brand small{
  font:8px "DM Mono",monospace;
  letter-spacing:1.5px;
  color:#7b8a9e;
  margin-top:5px;
}

.navlinks{
  display:flex;
  gap:25px;
  margin-left:auto;
  margin-right:30px;
}

.navlinks a{
  font-size:11px;
  font-weight:700;
  color:#5e6d80;
}

.navlinks a:hover{
  color:var(--blue);
}

.navright{
  display:flex;
  align-items:center;
  gap:10px;
}

.langs{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.langs button{
  border:0;
  background:transparent;
  border-radius:6px;
  width:30px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.langs button:hover{
  background:var(--soft);
  transform:translateY(-1px);
}

.langs button.active{
  background:var(--soft);
  box-shadow:inset 0 0 0 1px #d8e5f7;
}

.navcta{
  font:10px "DM Mono",monospace;
  border:1px solid #cbd7e6;
  border-radius:7px;
  padding:9px 13px;
  color:#31506e;
}

.menubtn{
  display:none;
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:8px 10px;
}

.mobilemenu{
  display:none;
  position:fixed;
  top:77px;
  left:15px;
  right:15px;
  z-index:90;
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  box-shadow:0 20px 50px #10213d18;
}

.mobilemenu.open{
  display:block;
}

.mobilemenu a{
  display:block;
  padding:13px 8px;
  border-bottom:1px solid var(--line);
  font-size:11px;
}

/* ================================
   HERO
================================ */

.hero{
  padding:75px 0 55px;
  background:linear-gradient(180deg,#fff,#f7f9fc);
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:58px;
  align-items:center;
}

.eyebrow,
.label{
  font:9px "DM Mono",monospace;
  letter-spacing:1.8px;
  color:#52718f;
}

.eyebrow{
  display:flex;
  gap:9px;
  align-items:center;
}

.eyebrow i{
  width:23px;
  height:1px;
  background:var(--blue);
}

h1{
  font-size:clamp(52px,6vw,86px);
  line-height:.97;
  letter-spacing:-5px;
  margin:23px 0 27px;
}

h1 em,
h2 em{
  font-style:normal;
  color:var(--blue);
}

.hero-copy>p,
.section-top>p,
.about-copy p,
.services .section-top>p,
.contact p{
  color:#4f5f73;
  font-size:16px;
  font-weight:600;
  line-height:1.78;
  max-width:600px;
}

.actions{
  display:flex;
  gap:10px;
  margin-top:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:22px;
  border-radius:7px;
  padding:14px 17px;
  font-size:10px;
  font-weight:800;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(22,76,180,.12);
}

.btn:active{
  transform:translateY(0);
}

.primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 14px 30px #1769ff26;
}

.secondary{
  border:1px solid #d6e0eb;
  background:#fff;
}

.trust-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:50px;
}

.trust-row div{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.trust-row b{
  display:block;
  font:10px "DM Mono",monospace;
  color:#1e5ed8;
  font-weight:700;
  letter-spacing:.8px;
}

.trust-row span{
  display:block;
  color:#5f6f84;
  font-size:10px;
  font-weight:600;
  line-height:1.45;
  margin-top:5px;
}

/* ================================
   HERO IMAGE
================================ */

.hero-image{
  height:525px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 80px #0c1d3320;
  transition:box-shadow .35s ease,transform .35s ease;
}

.hero-image:hover{
  box-shadow:0 20px 50px rgba(9,24,45,.10);
}

.rack-scene{
  height:100%;
  position:relative;
  background:
    radial-gradient(circle at 65% 35%,#195fbd44,transparent 27%),
    linear-gradient(135deg,#151c26,#050a11);
}

.room-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(#ffffff08 1px,transparent 1px),
    linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:45px 45px;
  transform:perspective(700px) rotateX(55deg) scale(1.4);
  transform-origin:bottom;
  opacity:.5;
}

.rack{
  position:absolute;
  left:14%;
  top:12%;
  width:38%;
  height:72%;
  border:3px solid #273746;
  border-radius:5px;
  background:linear-gradient(90deg,#05080d,#101820,#05080d);
  box-shadow:25px 35px 70px #000b;
}

.rack:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid #34495a;
}

.rack-top{
  height:30px;
  border-bottom:1px solid #304251;
}

.rack-row{
  height:15%;
  margin:3px 10px;
  border:1px solid #243746;
  background:linear-gradient(90deg,#0a1016,#17242e,#0a1016);
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:6px;
}

.rack-row i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#2183ff;
  box-shadow:0 0 9px #2183ff;
}

.rack-row span{
  margin-left:auto;
  font:6px "DM Mono",monospace;
  color:#506879;
}

.rack-bottom{
  height:25px;
  border-top:1px solid #304251;
}

.desk{
  position:absolute;
  right:7%;
  bottom:12%;
  width:48%;
  height:32%;
}

.monitor{
  position:absolute;
  right:3%;
  top:0;
  width:52%;
  height:56%;
  border:8px solid #121b25;
  border-radius:4px;
  background:#07111d;
  box-shadow:0 18px 35px #000a;
}

.screenline{
  height:2px;
  background:#1f78ff;
  width:65%;
  margin:22px 0 0 18px;
  opacity:.7;
}

.screenline.short{
  width:35%;
  margin-top:8px;
}

.laptop{
  position:absolute;
  left:5%;
  bottom:0;
  width:52%;
  height:35%;
  background:#101c28;
  border:2px solid #273a4b;
  transform:skew(-18deg);
  border-radius:4px;
}

.laptop div{
  position:absolute;
  inset:8px;
  background:#07111d;
}

.scene-label{
  position:absolute;
  left:24px;
  top:22px;
  color:#91a6ba;
  font:8px "DM Mono",monospace;
  letter-spacing:1px;
}

.status-card{
  position:absolute;
  right:20px;
  bottom:22px;
  background:#fffffff2;
  border-radius:9px;
  padding:14px 17px;
  width:225px;
  box-shadow:0 15px 40px #0005;
}

.status-card small{
  font:7px "DM Mono",monospace;
  color:#718096;
  font-weight:600;
}

.status-card strong{
  display:block;
  font-size:10px;
  margin:7px 0;
  font-weight:700;
}

.status-card strong i{
  display:inline-block;
  width:6px;
  height:6px;
  background:#24b86b;
  border-radius:50%;
  margin-right:5px;
}

.status-card span{
  font-size:8px;
  color:#617185;
  font-weight:500;
}

/* ================================
   INTRO STRIP
================================ */

.intro-strip{
  background:white;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.mini-grid div{
  padding:20px 22px;
  border-right:1px solid var(--line);
}

.mini-grid div:first-child{
  border-left:1px solid var(--line);
}

.mini-grid span{
  font:8px "DM Mono",monospace;
  color:var(--blue);
  display:block;
  margin-bottom:7px;
  font-weight:600;
}

.mini-grid strong{
  color:#182942;
  font-size:12px;
  font-weight:700;
}

/* ================================
   SECTIONS
================================ */

.section,
.services{
  padding:105px 0;
}

.section-top{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:end;
  margin-bottom:45px;
}

.section-top h2,
.about-copy h2,
.services h2,
.contact h2{
  font-size:clamp(40px,5vw,67px);
  line-height:.98;
  letter-spacing:-3.5px;
  margin:15px 0 0;
}

/* ================================
   CARDS
================================ */

.cards{
  display:grid;
  gap:13px;
}

.cards.four{
  grid-template-columns:repeat(4,1fr);
}

.cards.three{
  grid-template-columns:repeat(3,1fr);
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px 17px 24px;
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(16,34,58,.08);
  border-color:#cbd8e8;
}

.cardvisual,
.photo{
  height:175px;
  border-radius:9px;
  position:relative;
  overflow:hidden;
  margin-bottom:19px;
  background:#07111e;
}

.server{
  background:
    radial-gradient(circle at 65% 40%,#1769ff33,transparent 35%),
    linear-gradient(135deg,#121c28,#050a11);
}

.tiny-rack{
  position:absolute;
  left:35%;
  top:13%;
  width:28%;
  height:75%;
  border:2px solid #34495a;
  background:#080e15;
  box-shadow:15px 20px 30px #0008;
}

.tiny-rack:after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:15px;
  height:8px;
  box-shadow:
    0 20px #172b3a,
    0 40px #172b3a,
    0 60px #172b3a,
    0 80px #172b3a;
  background:#1d7cff;
}

/* ================================
   NETWORK CARD VISUAL
================================ */

.networkvisual{
  background:
    radial-gradient(circle,#1769ff2b,transparent 55%),
    #07111e;
}

.networkvisual:before,
.networkvisual:after{
  content:"";
  position:absolute;
  height:1px;
  background:#3484ff88;
  width:80%;
  left:10%;
  top:50%;
  transform:rotate(25deg);
}

.networkvisual:after{
  transform:rotate(-25deg);
}

.networkvisual b,
.networkvisual i{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4d8cff;
  box-shadow:0 0 18px #4d8cff;
}

.networkvisual b{
  left:48%;
  top:47%;
}

.networkvisual i:nth-of-type(1){
  left:15%;
  top:30%;
}

.networkvisual i:nth-of-type(2){
  right:15%;
  top:30%;
}

.networkvisual i:nth-of-type(3){
  left:15%;
  bottom:28%;
}

.networkvisual i:nth-of-type(4){
  right:15%;
  bottom:28%;
}

/* ================================
   STORAGE
================================ */

.storage{
  background:#0a1420;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.storage div{
  width:24%;
  height:46%;
  border:1px solid #345269;
  background:linear-gradient(#12283a,#07111c);
  box-shadow:0 15px 25px #0008;
}

.storage div:after{
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#3187ff;
  margin:12px;
}

.codevisual{
  background:linear-gradient(135deg,#10233b,#06101c);
  display:grid;
  place-items:center;
}

.codevisual span{
  font:30px "DM Mono",monospace;
  color:#5a99ff;
}

.card .num{
  font:8px "DM Mono",monospace;
  color:var(--blue);
  font-weight:600;
}

.card h3{
  color:#12213a;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.4px;
  margin:10px 0 7px;
}

.card p{
  color:#53647a;
  font-size:12.5px;
  font-weight:600;
  line-height:1.78;
  margin:0 0 15px;
}

.card a{
  font:10px "DM Mono",monospace;
  color:var(--blue);
}

/* ================================
   DARK COMPUTE
================================ */

.dark-section{
  background:var(--dark);
  color:white;
  padding:110px 0;
  border-top:1px solid #16283a;
  border-bottom:1px solid #16283a;
}

.compute-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.label.blue{
  color:#5d9aff;
}

.dark-section h2{
  font-size:clamp(45px,5.5vw,76px);
  line-height:.93;
  letter-spacing:-4px;
  margin:18px 0;
}

.dark-section h2 em{
  color:#5d9aff;
}

.dark-section p{
  color:#8a9bad;
  line-height:1.8;
  font-size:14px;
  max-width:570px;
}

.compute-list{
  margin-top:30px;
  border-top:1px solid var(--darkline);
}

.compute-list div{
  display:grid;
  grid-template-columns:32px 1fr;
  padding:14px 0;
  border-bottom:1px solid var(--darkline);
}

.compute-list b{
  font:8px "DM Mono",monospace;
  color:#5d9aff;
}

.compute-list strong{
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.compute-list span{
  grid-column:2;
  color:#9aabbd;
  font-size:10px;
  font-weight:500;
  line-height:1.55;
  margin-top:4px;
}

/* ================================
   NETWORK MAP — 02
================================ */

.network-map{
  height:450px;
  border:1px solid #1d3950;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at center,#1769ff18,transparent 50%),
    #040b14;
  transition:box-shadow .35s ease,transform .35s ease;
}

.network-map:hover{
  box-shadow:0 20px 50px rgba(9,24,45,.10);
}

.map-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(#3a78aa14 1px,transparent 1px),
    linear-gradient(90deg,#3a78aa14 1px,transparent 1px);
  background-size:35px 35px;
}

/* Network lines */

.line{
  position:absolute;
  height:1px;
  background:#3b8cff77;
  transform-origin:left center;
  box-shadow:0 0 8px #2879ff33;
  transition:opacity .3s ease;
}

.line.network-active{
  opacity:1;
  filter:drop-shadow(0 0 4px rgba(37,125,255,.55));
}

.l1{
  width:190px;
  left:25%;
  top:39%;
  transform:rotate(12deg);
}

.l2{
  width:170px;
  left:51%;
  top:42%;
  transform:rotate(-30deg);
}

.l3{
  width:180px;
  left:26%;
  top:60%;
  transform:rotate(-23deg);
}

.l4{
  width:160px;
  left:51%;
  top:58%;
  transform:rotate(28deg);
}

.l5{
  width:130px;
  left:48%;
  top:42%;
  transform:rotate(70deg);
}

/* Network nodes */

.node{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#3f91ff;
  box-shadow:0 0 25px #3f91ff;
}

.n1{
  left:23%;
  top:36%;
}

.n2{
  left:49%;
  top:40%;
}

.n3{
  right:20%;
  top:25%;
}

.n4{
  left:22%;
  bottom:34%;
}

.n5{
  right:20%;
  bottom:30%;
}

/* 8107 CORE */

.core-node{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border:1px solid #4a9cff;
  background:#0b1b2d;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#68a8ff;
  font:15px "DM Mono",monospace;
  box-shadow:0 0 60px #1769ff33;
}

/* ================================
   MOVING NETWORK BALL
================================ */

.network-map .network-pulse{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2b7cff;
  box-shadow:
    0 0 8px rgba(43,124,255,.95),
    0 0 20px rgba(43,124,255,.55),
    0 0 35px rgba(43,124,255,.25);
  pointer-events:none;
  z-index:20;
  opacity:0;
  margin:0;
  will-change:left,top,transform,opacity;
}

/*
  JS controls the actual movement.
  No CSS movement here.
*/

.network-map .network-pulse.run{
  animation:none;
}

/* Kept for compatibility */

@keyframes networkPacket{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);
  }

  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }

  82%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);
  }
}

/* ================================
   SECURITY
================================ */

.photo{
  height:190px;
}

.smartcamera{
  background:linear-gradient(135deg,#0a1725,#06101b);
}

.camera{
  position:absolute;
  width:80px;
  height:55px;
  border-radius:12px;
  background:#152a3d;
  border:2px solid #355a77;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
}

.camera:after{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  border:3px solid #4e9bff;
  border-radius:50%;
  left:26px;
  top:13px;
  box-shadow:0 0 25px #3187ff;
}

.scan{
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:1px;
  background:#3187ff66;
  box-shadow:0 0 25px #3187ff;
}

.smarthome{
  background:linear-gradient(135deg,#13283a,#07111d);
}

.house{
  position:absolute;
  left:50%;
  top:53%;
  width:125px;
  height:82px;
  transform:translate(-50%,-50%);
  border:2px solid #3e6b8e;
  border-top:0;
}

.house:before{
  content:"";
  position:absolute;
  left:-12px;
  top:-57px;
  width:96px;
  height:96px;
  border-left:2px solid #3e6b8e;
  border-top:2px solid #3e6b8e;
  transform:rotate(45deg);
  background:#0d2131;
}

.house span{
  position:relative;
  display:inline-block;
  width:18px;
  height:25px;
  border:1px solid #3487ff;
  margin:43px 8px 0;
  z-index:2;
}

.access{
  background:linear-gradient(135deg,#0b1928,#07111c);
}

.lock{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  font-size:60px;
  color:#4b99ff;
  text-shadow:0 0 30px #2879ff55;
}

.access-lines{
  position:absolute;
  inset:25px;
  background-image:
    linear-gradient(#4b99ff12 1px,transparent 1px),
    linear-gradient(90deg,#4b99ff12 1px,transparent 1px);
  background-size:20px 20px;
}

/* ================================
   ABOUT
================================ */

.about{
  background:white;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:105px 0;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
}

.about-visual{
  height:500px;
  border-radius:15px;
  background:linear-gradient(145deg,#112237,#050c15);
  position:relative;
  overflow:hidden;
  transition:box-shadow .35s ease,transform .35s ease;
}

.about-visual:hover{
  box-shadow:0 20px 50px rgba(9,24,45,.10);
}

.about-grid-lines{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(#ffffff09 1px,transparent 1px),
    linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  background-size:35px 35px;
}

.about-8107{
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  font:80px "DM Mono",monospace;
  color:#3b8cff66;
}

.about-device{
  position:absolute;
  left:50%;
  bottom:26%;
  transform:translateX(-50%);
  width:170px;
  height:90px;
  border:2px solid #36536d;
  background:#07111c;
  box-shadow:0 25px 50px #0009;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.about-device span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2e88ff;
  box-shadow:0 0 12px #2e88ff;
}

.about-caption{
  position:absolute;
  left:25px;
  right:25px;
  bottom:22px;
  color:white;
  background:#ffffff0e;
  border:1px solid #ffffff18;
  border-radius:8px;
  padding:15px;
  backdrop-filter:blur(10px);
}

.about-caption small{
  display:block;
  font:7px "DM Mono",monospace;
  color:#8299ad;
}

.about-caption strong{
  display:block;
  font-size:14px;
  margin-top:5px;
}

.about-copy h2{
  font-size:clamp(40px,5vw,65px);
  line-height:.96;
  letter-spacing:-3.5px;
  margin:15px 0 25px;
}

.principles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
}

.principles div{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.principles b{
  font:8px "DM Mono",monospace;
  color:var(--blue);
  margin-right:8px;
}

.principles strong{
  color:#17263e;
  font-size:12px;
  font-weight:700;
}

.principles span{
  display:block;
  color:#64758a;
  font-size:10px;
  font-weight:500;
  line-height:1.45;
  margin-top:5px;
}

/* ================================
   SERVICES
================================ */

.services{
  background:#f0f4f9;
}

.service-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #d9e1ea;
  margin-top:45px;
}

.service-row>div{
  padding:22px;
  border-bottom:1px solid #d9e1ea;
  border-right:1px solid #d9e1ea;
}

.service-row>div:first-child{
  border-left:1px solid #d9e1ea;
}

.service-row b{
  display:block;
  font:8px "DM Mono",monospace;
  color:var(--blue);
  margin-bottom:30px;
}

.service-row strong{
  display:block;
  color:#17263e;
  font-size:15px;
  font-weight:800;
}

.service-row span{
  display:block;
  color:#64758a;
  font:10px "DM Mono",monospace;
  font-weight:500;
  margin-top:7px;
  line-height:1.5;
}

/* ================================
   CONTACT
================================ */

.contact{
  padding:95px 0;
  background:#eef4fa;
}

.contact-box{
  background:white;
  border:1px solid #dce5ef;
  border-radius:15px;
  padding:60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  transition:box-shadow .35s ease,border-color .35s ease;
}

.contact-box:hover{
  box-shadow:0 18px 45px rgba(16,34,58,.07);
  border-color:#cbd8e8;
}

.contact h2{
  font-size:clamp(42px,5vw,67px);
  line-height:.95;
  letter-spacing:-3.5px;
  margin:15px 0;
}

.contact-direct{
  margin-top:24px;
  padding-top:17px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.contact-direct span{
  font:9px "DM Mono",monospace;
  color:#7a899a;
  text-transform:uppercase;
  letter-spacing:1px;
}

.contact-direct a{
  font:11px "DM Mono",monospace;
  color:var(--blue);
}

.email{
  border:1px solid #dce5ef;
  border-radius:9px;
  padding:21px;
  display:flex;
  justify-content:space-between;
  color:var(--blue);
  font:11px "DM Mono",monospace;
  background:#fbfdff;
}

.email:hover{
  border-color:#aac5e8;
}

.email b{
  font-size:17px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.contact-form label>span{
  font:9px "DM Mono",monospace;
  color:#65758a;
  text-transform:uppercase;
  letter-spacing:1px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #dce5ef;
  background:#fbfdff;
  border-radius:8px;
  padding:13px 14px;
  font:13px Manrope,Arial,sans-serif;
  color:var(--ink);
  outline:none;
  transition:.2s;
}

.contact-form textarea{
  resize:vertical;
  min-height:120px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#8fb2e5;
  box-shadow:0 0 0 3px #1769ff10;
  background:#fff;
}

.form-submit{
  border:0;
  cursor:pointer;
  justify-content:center;
  width:100%;
  font-size:11px;
}

.form-note{
  color:#8997a7;
  font-size:9px;
  line-height:1.5;
}

.honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* ================================
   FOOTER
================================ */

footer{
  background:#06101d;
  color:white;
  padding:55px 0 22px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:35px;
}

.footer-grid .brand strong{
  color:white;
}

.footer-grid p{
  color:#8b99a9;
  font-size:10.5px;
  font-weight:500;
  line-height:1.7;
  max-width:270px;
  margin-top:17px;
}

.footer-grid h4{
  font:8px "DM Mono",monospace;
  letter-spacing:1px;
  color:#71859a;
}

.footer-grid>div>a:not(.brand){
  display:block;
  color:#a9b5c2;
  font-size:10px;
  font-weight:500;
  margin-top:11px;
}

.footer-note{
  border:1px solid #1b3045;
  border-radius:9px;
  padding:17px;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.footer-note strong{
  font-size:10px;
}

.footer-note span{
  color:#6f8194;
  font-size:9px;
  line-height:1.6;
}

.bottom{
  border-top:1px solid #172b3d;
  margin-top:45px;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  color:#53677b;
  font:7px "DM Mono",monospace;
  letter-spacing:.7px;
}

/* ================================
   LIVE SERVER LED
================================ */

.rack-row i,
.rack-row b,
.rack-row em,
.rack-row .led,
.rack-row .dot,
.server-led,
.led{
  animation:serverLedPulse 2.2s ease-in-out infinite;
  transform-origin:center;
}

.rack-row:nth-child(2) i,
.rack-row:nth-child(2) b,
.rack-row:nth-child(2) em,
.rack-row:nth-child(2) .led,
.rack-row:nth-child(2) .dot{
  animation-delay:.35s;
}

.rack-row:nth-child(3) i,
.rack-row:nth-child(3) b,
.rack-row:nth-child(3) em,
.rack-row:nth-child(3) .led,
.rack-row:nth-child(3) .dot{
  animation-delay:.8s;
}

.rack-row:nth-child(4) i,
.rack-row:nth-child(4) b,
.rack-row:nth-child(4) em,
.rack-row:nth-child(4) .led,
.rack-row:nth-child(4) .dot{
  animation-delay:1.25s;
}

@keyframes serverLedPulse{

  0%,100%{
    opacity:.45;
    filter:brightness(.85);
    box-shadow:0 0 3px rgba(37,125,255,.25);
  }

  45%{
    opacity:1;
    filter:brightness(1.35);
    box-shadow:0 0 10px rgba(37,125,255,.8);
  }

  60%{
    opacity:.72;
    filter:brightness(1.05);
    box-shadow:0 0 5px rgba(37,125,255,.45);
  }
}

/* ================================
   LARGE SCREEN
================================ */

@media(min-width:1500px){

  .container{
    width:min(1380px,calc(100% - 80px));
  }

  .hero-copy>p,
  .section-top>p,
  .about-copy p,
  .services .section-top>p,
  .contact p{
    font-size:16px;
  }

  .card p{
    font-size:13px;
  }

  .section-top h2,
  .about-copy h2,
  .services h2,
  .contact h2{
    font-size:72px;
  }
}

/* ================================
   TABLET
================================ */

@media(max-width:1050px){

  .navlinks{
    gap:14px;
  }

  .navcta{
    display:none;
  }

  .cards.four{
    grid-template-columns:1fr 1fr;
  }

  .hero-grid{
    gap:30px;
  }

  .section-top{
    gap:35px;
  }
}

@media(max-width:900px){

  .container{
    width:min(100% - 36px,720px);
  }

  .nav{
    gap:12px;
  }

  .navlinks{
    display:none;
  }

  .navright{
    margin-left:auto;
  }

  .menubtn{
    display:block;
  }

  .navcta{
    display:none;
  }

  .hero{
    padding:48px 0 42px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .hero-copy{
    min-width:0;
  }

  h1{
    font-size:clamp(46px,8.5vw,68px);
    letter-spacing:-3.8px;
  }

  .hero-copy>p{
    max-width:680px;
    font-size:15px;
    line-height:1.75;
  }

  .actions{
    flex-wrap:wrap;
  }

  .trust-row{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .hero-image{
    height:410px;
    border-radius:14px;
  }

  .rack{
    left:17%;
    width:34%;
    height:70%;
  }

  .desk{
    right:5%;
    width:45%;
    bottom:10%;
  }

  .status-card{
    right:16px;
    bottom:16px;
    width:210px;
  }

  .scene-label{
    left:18px;
    top:18px;
  }

  .section,
  .services,
  .about,
  .dark-section,
  .contact{
    padding:88px 0;
  }

  .section-top{
    grid-template-columns:1fr;
    gap:12px;
  }

  .section-top>p{
    max-width:680px;
  }

  .cards.four{
    grid-template-columns:repeat(2,1fr);
  }

  .cards.three{
    grid-template-columns:repeat(2,1fr);
  }

  .cardvisual,
  .photo{
    height:165px;
  }

  .compute-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .network-map{
    height:380px;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .about-visual{
    height:410px;
  }

  .about-copy{
    max-width:700px;
  }

  .service-row{
    grid-template-columns:repeat(2,1fr);
  }

  .service-row>div:nth-child(3){
    border-left:1px solid #d9e1ea;
  }

  .contact-box{
    grid-template-columns:1fr;
    gap:35px;
    padding:42px;
  }

  .footer-grid{
    grid-template-columns:1.5fr 1fr 1fr;
  }

  .footer-note{
    grid-column:1/-1;
  }
}

/* ================================
   MOBILE
================================ */

@media(max-width:760px){

  .container{
    width:calc(100% - 30px);
  }

  body{
    font-size:14px;
  }

  .hero-copy>p,
  .section-top>p,
  .about-copy p,
  .services .section-top>p,
  .contact p{
    font-size:14px;
  }

  .card p{
    font-size:12px;
  }

  .contact-direct{
    align-items:flex-start;
    flex-direction:column;
  }

  .contact-form input,
  .contact-form textarea{
    font-size:14px;
    padding:14px;
  }

  .contact-box{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){

  .container{
    width:calc(100% - 28px);
  }

  .header{
    height:70px;
  }

  .mobilemenu{
    top:69px;
  }

  .brand strong{
    font-size:18px;
  }

  .brand small{
    font-size:7px;
    letter-spacing:1.1px;
  }

  .langs{
    padding:2px;
  }

  .langs button{
    width:27px;
    height:27px;
    font-size:15px;
  }

  .menubtn{
    padding:8px 9px;
  }

  .hero{
    padding:40px 0 35px;
  }

  .eyebrow{
    font-size:8px;
    letter-spacing:1.25px;
  }

  h1{
    font-size:clamp(40px,12vw,52px);
    line-height:.98;
    letter-spacing:-3px;
    margin:19px 0 21px;
  }

  .hero-copy>p{
    font-size:14px;
    line-height:1.72;
  }

  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .btn{
    width:100%;
    justify-content:center;
    padding:14px 16px;
  }

  .trust-row{
    grid-template-columns:1fr 1fr;
    margin-top:35px;
  }

  .trust-row span{
    font-size:9px;
    line-height:1.35;
  }

  .trust-row b{
    font-size:9px;
  }

  .hero-image{
    height:330px;
    border-radius:12px;
  }

  .rack{
    left:13%;
    top:15%;
    width:36%;
    height:64%;
  }

  .rack-row{
    margin:3px 6px;
    padding:0 5px;
  }

  .rack-row span{
    display:none;
  }

  .rack-top{
    height:22px;
  }

  .rack-bottom{
    height:18px;
  }

  .desk{
    right:2%;
    bottom:12%;
    width:48%;
    height:28%;
  }

  .monitor{
    border-width:5px;
  }

  .screenline{
    margin:12px 0 0 10px;
  }

  .screenline.short{
    margin-top:5px;
  }

  .laptop{
    display:none;
  }

  .status-card{
    left:14px;
    right:14px;
    bottom:13px;
    width:auto;
    padding:11px 13px;
  }

  .status-card strong{
    font-size:10px;
    margin:5px 0;
  }

  .status-card span{
    font-size:8px;
  }

  .scene-label{
    font-size:7px;
    left:14px;
    top:14px;
  }

  .intro-strip .container{
    width:100%;
  }

  .mini-grid{
    grid-template-columns:1fr 1fr;
  }

  .mini-grid div{
    padding:17px 14px;
  }

  .mini-grid strong{
    font-size:11px;
    line-height:1.35;
    display:block;
  }

  .section,
  .services,
  .about,
  .dark-section,
  .contact{
    padding:72px 0;
  }

  .section-top{
    gap:8px;
    margin-bottom:34px;
  }

  .section-top h2,
  .about-copy h2,
  .services h2,
  .contact h2,
  .dark-section h2{
    font-size:clamp(38px,10.8vw,48px);
    letter-spacing:-2.7px;
    line-height:.98;
  }

  .section-top>p,
  .about-copy p,
  .services .section-top>p,
  .contact p{
    font-size:16px;
    line-height:1.78;
  }

  .cards.four,
  .cards.three{
    grid-template-columns:1fr;
  }

  .card{
    padding:12px 13px 22px;
    border-radius:12px;
  }

  .cardvisual,
  .photo{
    height:190px;
    margin-bottom:17px;
  }

  .card h3{
    font-size:18px;
  }

  .card p{
    font-size:12.5px;
    line-height:1.75;
  }

  .card a{
    font-size:9px;
  }

  .compute-list{
    margin-top:25px;
  }

  .compute-list div{
    grid-template-columns:28px 1fr;
    padding:15px 0;
  }

  .compute-list strong{
    font-size:12px;
  }

  .compute-list span{
    font-size:9.5px;
    line-height:1.5;
  }

  .network-map{
    height:300px;
    border-radius:12px;
  }

  .core-node{
    width:62px;
    height:62px;
    font-size:13px;
  }

  .map-caption{
    font-size:6px;
    left:12px;
    bottom:11px;
  }

  .line{
    opacity:.8;
  }

  /* Ball remains visible and proportional on mobile */

  .network-map .network-pulse{
    width:7px;
    height:7px;
  }

  .about-visual{
    height:330px;
    border-radius:12px;
  }

  .about-8107{
    font-size:58px;
  }

  .about-device{
    width:140px;
    height:72px;
  }

  .about-caption{
    left:13px;
    right:13px;
    bottom:13px;
    padding:12px;
  }

  .about-caption strong{
    font-size:13px;
  }

  .principles{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .principles strong{
    font-size:10px;
  }

  .principles span,
  .service-row span{
    font-size:9.5px;
  }

  .service-row{
    grid-template-columns:1fr;
  }

  .service-row>div{
    padding:18px 16px;
    border-left:1px solid #d9e1ea;
  }

  .service-row b{
    margin-bottom:20px;
  }

  .service-row strong{
    font-size:14px;
  }

  .contact-box{
    padding:27px 20px;
    border-radius:12px;
    gap:30px;
  }

  .contact-direct{
    gap:8px;
  }

  .contact-direct a{
    font-size:10px;
    overflow-wrap:anywhere;
  }

  .contact-form{
    gap:12px;
  }

  .contact-form input,
  .contact-form textarea{
    font-size:14px;
    padding:13px;
  }

  .contact-form textarea{
    min-height:130px;
  }

  .form-submit{
    min-height:48px;
  }

  .form-note{
    font-size:8px;
  }

  footer{
    padding:45px 0 20px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px 18px;
  }

  .footer-note{
    grid-column:1/-1;
  }

  .footer-grid>div>a:not(.brand){
    font-size:9px;
  }

  .bottom{
    font-size:6.5px;
    line-height:1.5;
  }

  .mobilemenu a{
    padding:15px 8px;
    font-size:12px;
  }

  .btn:hover,
  .card:hover,
  .hero-image:hover,
  .about-visual:hover,
  .network-map:hover{
    transform:none;
    box-shadow:none;
  }
}

/* ================================
   SMALL MOBILE
================================ */

@media(max-width:430px){

  .hero h1{
    font-size:43px;
  }

  .hero-image{
    height:350px;
  }

  .rack{
    left:9%;
    width:43%;
  }

  .desk{
    right:2%;
    width:53%;
  }

  .status-card{
    width:190px;
    padding:11px;
  }

  .trust-row{
    grid-template-columns:1fr;
  }

  .service-row{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:380px){

  .container{
    width:calc(100% - 24px);
  }

  .nav{
    gap:7px;
  }

  .brand strong{
    font-size:17px;
  }

  .brand small{
    font-size:6px;
  }

  .langs button{
    padding:6px 7px;
  }

  .menubtn{
    padding:7px 8px;
  }

  h1{
    font-size:39px;
    letter-spacing:-2.6px;
  }

  .hero-image{
    height:300px;
  }

  .trust-row{
    gap:10px;
  }

  .trust-row b{
    font-size:8px;
  }

  .trust-row span{
    font-size:7px;
  }

  .mini-grid div{
    padding:15px 11px;
  }

  .mini-grid strong{
    font-size:9px;
  }

  .section-top h2,
  .about-copy h2,
  .services h2,
  .contact h2,
  .dark-section h2{
    font-size:36px;
    letter-spacing:-2.2px;
  }

  .cardvisual,
  .photo{
    height:170px;
  }

  .about-visual{
    height:300px;
  }

  .network-map{
    height:275px;
  }

  .contact-box{
    padding:23px 16px;
  }
}

/* ================================
   REDUCED MOTION
================================ */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }

  .network-map .network-pulse{
    display:none!important;
  }

  .network-map .line.network-active{
    filter:none;
  }

  .rack-row i,
  .rack-row b,
  .rack-row em,
  .rack-row .led,
  .rack-row .dot,
  .server-led,
  .led{
    animation:none!important;
  }

  .btn,
  .card,
  .langs button,
  .hero-image,
  .about-visual,
  .network-map,
  .contact-box{
    transition:none!important;
  }

  .btn:hover,
  .card:hover,
  .langs button:hover,
  .hero-image:hover,
  .about-visual:hover,
  .network-map:hover{
    transform:none;
  }
}

/* ================================
   NETWORK BALL — FINAL
================================ */

.network-map .network-pulse{
  left:0;
  top:0;
  transform:translate(-50%,-50%) scale(1);
}

.network-map .network-pulse::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(77,140,255,.35);
  animation:networkPulseRing 1.2s ease-out infinite;
}

@keyframes networkPulseRing{

  0%{
    transform:scale(.55);
    opacity:.9;
  }

  70%{
    transform:scale(1.8);
    opacity:.15;
  }

  100%{
    transform:scale(2.2);
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){

  .network-map .network-pulse::after{
    animation:none!important;
  }
}