:root{
  --bg:#03070d;
  --panel:#07111d;
  --panel2:#0b1725;
  --blue:#00aaff;
  --blue2:#006dff;
  --text:#ffffff;
  --muted:#bdc8d8;
  --line:rgba(93,185,255,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
}
a{text-decoration:none;color:inherit}
.top-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(2,5,10,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,170,255,.18);
}
.brand-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:18px 30px 10px;
}
.brand-title h1{
  margin:0;
  font-size:clamp(27px,4vw,52px);
  letter-spacing:13px;
  font-weight:900;
  text-shadow:0 0 20px rgba(0,170,255,.22);
  white-space:nowrap;
}
.brand-title h1 b{
  color:#fff;
}
.brand-title h1 strong{
  color:var(--blue);
  font-weight:900;
}
.brand-title .line{
  height:2px;
  flex:1;
  max-width:470px;
  background:linear-gradient(90deg, transparent, var(--blue));
  box-shadow:0 0 14px var(--blue);
  position:relative;
}
.brand-title .line:last-child{background:linear-gradient(90deg, var(--blue), transparent)}
.navbar{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:0 4%;
}
.navbar a{
  font-size:14px;
  font-weight:800;
  color:#f4f7fb;
  padding:28px 0;
  border-bottom:3px solid transparent;
}
.navbar a.active,
.navbar a:hover{
  color:var(--blue);
  border-color:var(--blue);
}
.navbar .whats-btn{
  margin-left:auto;
  padding:13px 20px;
  border:1px solid var(--blue);
  border-radius:12px;
  color:#fff;
  box-shadow:inset 0 0 14px rgba(0,170,255,.12);
}
.hero{
  position:relative;
  min-height:660px;
  background-image:url('../assets/hero-datacenter-porto.png');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.1), rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.78));
}
.hero-content{
  position:relative;
  width:min(1200px,92%);
  text-align:center;
  padding:50px 0 30px;
}
.eyebrow{
  letter-spacing:8px;
  font-weight:800;
  color:#fff;
  font-size:20px;
}
.hero h2{
  margin:16px 0 8px;
  font-size:clamp(45px,6vw,78px);
  line-height:1.04;
  font-weight:900;
  text-shadow:0 8px 20px rgba(0,0,0,.7);
}
.hero h2 span{
  color:var(--blue);
  text-shadow:0 0 24px rgba(0,170,255,.45);
}
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:18px auto;
}
.divider i{
  width:210px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--blue));
}
.divider i:last-child{background:linear-gradient(90deg, var(--blue), transparent)}
.divider b{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 18px var(--blue);
}
.subtitle{
  color:#f5f7fa;
  font-size:23px;
  line-height:1.48;
  margin:18px auto 32px;
  text-shadow:0 4px 12px rgba(0,0,0,.7);
}
.actions{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:62px;
  padding:0 34px;
  border-radius:10px;
  font-weight:900;
  letter-spacing:.4px;
}
.btn.primary{
  background:linear-gradient(135deg,#04b9ff,#006cff);
  color:#fff;
  box-shadow:0 18px 35px rgba(0,105,255,.35);
}
.btn.outline{
  border:1px solid var(--blue);
  background:rgba(0,0,0,.45);
}
.stats{
  margin:42px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(4,10,18,.72);
  backdrop-filter:blur(10px);
  box-shadow:0 25px 55px rgba(0,0,0,.38);
}
.stat{
  min-height:126px;
  display:grid;
  grid-template-columns:72px 1fr;
  align-content:center;
  text-align:left;
  padding:24px;
  border-right:1px solid rgba(255,255,255,.15);
}
.stat:last-child{border-right:0}
.stat .icon{
  grid-row:span 2;
  font-size:54px;
  color:var(--blue);
  filter:drop-shadow(0 0 14px rgba(0,170,255,.4));
}
.stat strong{
  font-size:33px;
}
.stat span{
  color:#fff;
  font-size:15px;
}
.services{
  padding:64px 4% 78px;
  background:radial-gradient(circle at 50% 0, rgba(0,170,255,.13), transparent 28%), #06101b;
}
.section-heading{text-align:center;margin-bottom:34px}
.section-heading h2,
.target h2,
.portfolio h2,
.about h2,
.final-cta h2{
  font-size:clamp(31px,4vw,46px);
  letter-spacing:8px;
  margin:0 0 12px;
}
.section-heading h2:after{
  content:"";
  display:block;
  width:76px;
  height:3px;
  margin:14px auto 0;
  background:var(--blue);
  box-shadow:0 0 14px var(--blue);
}
.section-heading p,
.noc-text p,
.split p,
.portfolio p,
.about p,
.final-cta p{
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.service-card{
  min-height:230px;
  padding:30px 26px;
  border:1px solid rgba(104,193,255,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:inset 0 0 30px rgba(0,170,255,.05), 0 18px 45px rgba(0,0,0,.24);
}
.service-icon{
  color:var(--blue);
  font-size:56px;
  margin-bottom:16px;
  text-shadow:0 0 18px rgba(0,170,255,.55);
}
.service-card h3{
  font-size:20px;
  line-height:1.3;
  margin:0 0 14px;
}
.service-card ul{
  padding-left:20px;
  margin:0;
  color:var(--muted);
  line-height:1.85;
}
.service-card li::marker{color:var(--blue)}
.noc-section,
.split{
  padding:82px 6%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  align-items:center;
  background:#050b13;
  border-top:1px solid rgba(255,255,255,.08);
}
.noc-text h2,
.split h2{
  font-size:clamp(32px,4vw,54px);
  line-height:1.06;
}
.dashboard{
  padding:28px;
  border:1px solid rgba(0,170,255,.3);
  border-radius:18px;
  background:linear-gradient(180deg,#081828,#040910);
  box-shadow:0 0 80px rgba(0,136,255,.16);
}
.dash-top,
.dash-row{
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.dash-top span,
.ok{color:#00ff9d;font-weight:900}
.bars{
  display:flex;
  align-items:end;
  gap:10px;
  height:115px;
  padding-top:24px;
}
.bars i{
  flex:1;
  height:55%;
  border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,#00c7ff,#006eff);
  animation:bar 1.2s infinite alternate ease-in-out;
}
.bars i:nth-child(2){height:80%;animation-delay:.1s}
.bars i:nth-child(3){height:40%;animation-delay:.2s}
.bars i:nth-child(4){height:90%;animation-delay:.3s}
.bars i:nth-child(5){height:60%;animation-delay:.4s}
.bars i:nth-child(6){height:72%;animation-delay:.5s}
.bars i:nth-child(7){height:46%;animation-delay:.6s}
.bars i:nth-child(8){height:82%;animation-delay:.7s}
@keyframes bar{to{filter:brightness(1.7);transform:scaleY(1.08)}}
.solution-list,
.target-grid,
.portfolio-grid{
  display:grid;
  gap:16px;
}
.solution-list span,
.target-grid div,
.portfolio-grid div{
  padding:24px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,170,255,.22);
  font-weight:800;
}
.target,
.portfolio,
.about,
.final-cta{
  text-align:center;
  padding:80px 6%;
  background:#06101b;
  border-top:1px solid rgba(255,255,255,.08);
}
.target-grid{
  margin-top:30px;
  grid-template-columns:repeat(4,1fr);
}
.portfolio-grid{
  margin-top:28px;
  grid-template-columns:repeat(3,1fr);
}
.portfolio-grid div{
  height:150px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(0,170,255,.12),rgba(255,255,255,.03));
}
.final-cta{
  background:radial-gradient(circle at center, rgba(0,170,255,.16), transparent 35%), #03070d;
}
footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:28px 6%;
  color:#aeb8c8;
  border-top:1px solid rgba(255,255,255,.1);
  background:#02050a;
}
footer strong{color:#fff}
.whatsapp-float{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:100;
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#24d366;
  box-shadow:0 0 0 8px rgba(36,211,102,.15), 0 20px 40px rgba(0,0,0,.4);
  color:white;
  font-size:34px;
  font-weight:900;
}
@media(max-width:1100px){
  .navbar{gap:18px;overflow-x:auto;justify-content:flex-start}
  .navbar .whats-btn{margin-left:0;white-space:nowrap}
  .stats,.service-grid,.target-grid{grid-template-columns:repeat(2,1fr)}
  .noc-section,.split{grid-template-columns:1fr}
}
@media(max-width:720px){
  .brand-title{gap:10px}
  .brand-title h1{letter-spacing:4px;font-size:25px}
  .navbar{min-height:64px}
  .hero{min-height:720px}
  .eyebrow{font-size:14px;letter-spacing:4px}
  .hero h2{font-size:40px}
  .subtitle{font-size:18px}
  .stats,.service-grid,.target-grid,.portfolio-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  footer{flex-direction:column;text-align:center}
}