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

:root{
  --navy:#071321; --navy2:#0d1d30; --blue:#1683ff; --text:#101a28; --muted:#59687b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:#eef2f6}
a{color:inherit;text-decoration:none}
.topbar{height:92px;background:rgba(5,16,29,.98);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,90px);position:relative;z-index:5}
.brand img{width:235px;height:auto;display:block}
.top-contact{display:flex;gap:38px;color:#fff;font-size:14px;align-items:center}
.top-contact a{color:#fff}.top-contact a:first-letter{color:var(--blue)}
.hero{min-height:540px;position:relative;overflow:hidden;
background:
  linear-gradient(90deg,rgba(2,8,14,.93) 0%,rgba(2,8,14,.72) 35%,rgba(2,8,14,.18) 68%,rgba(2,8,14,.10) 100%),
  url("hero-bg.jpg") 68% center / cover no-repeat;
}
.hero:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(2,8,14,.94) 0%,rgba(2,8,14,.68) 45%,rgba(2,8,14,.1) 100%);pointer-events:none}
.hero-content{position:relative;z-index:2;padding:88px clamp(28px,7vw,95px);max-width:760px;color:#fff}
.eyebrow{font-size:13px;letter-spacing:4px;font-weight:700;color:#80baff;margin-bottom:20px}
h1{font-size:clamp(42px,5vw,72px);line-height:1.04;margin:0;font-weight:800;letter-spacing:-2px}
h1 strong{color:var(--blue)}
.accent{height:5px;width:72px;background:var(--blue);margin:30px 0}
.coming{font-size:21px;line-height:1.55;color:#e9eef5;margin:0}
.hero-tech{display:none}
.laptop,.monitor,.tower{position:absolute;border:2px solid #6e879e;background:linear-gradient(145deg,#243747,#0a1118);box-shadow:0 18px 40px #0008}
.laptop{width:430px;height:250px;border-radius:10px;transform:skewY(-3deg) rotate(-4deg)}
.laptop:after{content:"";position:absolute;left:-35px;right:-35px;bottom:-35px;height:30px;border-radius:4px 4px 16px 16px;background:#1a2b3a;border:2px solid #60788c}
.laptop-a{right:90px;bottom:95px}.laptop-b{right:260px;bottom:25px;transform:scale(.8) rotate(-8deg)}
.monitor{width:270px;height:190px;right:360px;bottom:170px;border-radius:6px}.monitor:after{content:"";position:absolute;width:80px;height:12px;background:#657b8d;bottom:-50px;left:95px}
.tower{width:105px;height:230px;right:10px;bottom:95px;border-radius:5px}
.categories{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;padding:48px clamp(28px,7vw,95px);gap:0}
.categories article{padding:10px 34px;border-right:1px solid #dbe3eb}
.categories article:last-child{border:0}
.icon,.round{color:var(--blue);font-weight:800}
.icon{font-size:42px;margin-bottom:14px}
.categories h2{margin:0 0 8px;font-size:20px}.categories p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
.company{background:linear-gradient(120deg,#071321,#12263b);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:48px clamp(28px,7vw,95px)}
.company h2{margin:0;font-size:27px}.company h3{font-size:19px;margin:22px 0 6px}.company p{line-height:1.6;color:#d8e0e8;margin:0}
.accent.small{height:4px;width:48px;margin:12px 0}
.nip{margin-top:12px!important}
.contact-box{border-left:1px solid #496176;padding-left:60px;display:flex;flex-direction:column;gap:24px;justify-content:center;color:#e9eff5}
.contact-box a,.contact-box div{display:flex;align-items:center;gap:18px}
.round{width:38px;height:38px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff}
footer{background:#040b12;color:#b9c4cf;padding:28px clamp(28px,7vw,95px);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px}
footer img{width:145px}
@media(max-width:800px){
  .topbar{height:72px;padding:0 20px}.brand img{width:150px}.top-contact span{display:none}.top-contact{font-size:13px}
  .hero{min-height:560px;background-position:68% center}.hero-content{padding:55px 24px}.eyebrow{font-size:10px;letter-spacing:2px}
  h1{font-size:42px;letter-spacing:-1.5px}.coming{font-size:18px}.hero-tech{display:none}
  .categories{grid-template-columns:1fr;padding:22px 24px}.categories article{padding:22px 0;border-right:0;border-bottom:1px solid #dbe3eb}
  .icon{font-size:34px;margin-bottom:5px}.categories h2{font-size:18px}
  .company{grid-template-columns:1fr;gap:32px;padding:36px 24px}.contact-box{border-left:0;border-top:1px solid #496176;padding:28px 0 0}
  footer{padding:24px;flex-direction:column;align-items:flex-start}footer img{width:125px}
}