/*
  Featured servers + datacenter map polish
  Makes the mid-homepage section feel intentionally designed and replaces the old small dark map
  with a large light dotted world map like the reference.
*/

/* Keep sections after the full-width hero aligned and spacious. */
html body main.container:has(.uc-hero) > .server-showcase-section,
html body main.container:has(.uc-hero) > .platform-capability-section,
html body main.container:has(.uc-hero) > .datacenter-location-section{
  width:min(1280px,calc(100% - 56px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Featured server intro: no more awkward tall heading/chips stuck beside it. */
html body .server-showcase-section{
  position:relative!important;
  padding-top:clamp(72px,7vw,112px)!important;
  padding-bottom:clamp(58px,6vw,88px)!important;
}
html body .showcase-heading{
  display:grid!important;
  grid-template-columns:160px minmax(280px,460px) minmax(320px,1fr)!important;
  gap:34px!important;
  align-items:end!important;
  margin-bottom:34px!important;
}
html body .showcase-kicker{
  align-self:center!important;
}
html body .showcase-kicker span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  color:#87d8ff!important;
  background:rgba(18,151,255,.12)!important;
  border:1px solid rgba(18,151,255,.22)!important;
  font-size:.78rem!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  line-height:1.2!important;
}
html body .showcase-title h2{
  margin:0!important;
  color:#f7fbff!important;
  font-size:clamp(2.55rem,4.2vw,4.7rem)!important;
  line-height:1.03!important;
  letter-spacing:-.065em!important;
  font-weight:720!important;
  max-width:11ch!important;
}
html body .showcase-copy{
  align-self:end!important;
  max-width:560px!important;
}
html body .showcase-copy p{
  margin:0!important;
  color:#afbed3!important;
  font-size:1.02rem!important;
  line-height:1.72!important;
}
html body .showcase-copy .section-chip-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:22px!important;
}
html body .showcase-copy .section-chip-row span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  color:#d6e6fb!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.095)!important;
  font-size:.86rem!important;
  font-weight:760!important;
  white-space:nowrap!important;
}

/* More deliberate server cards: equal rhythm, subtle top accent, less boxy. */
html body .refined-server-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}
html body .refined-server-card{
  position:relative!important;
  min-height:100%!important;
  padding:26px!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:
    radial-gradient(circle at 100% 10%,rgba(18,151,255,.13),transparent 150px),
    linear-gradient(180deg,rgba(12,28,52,.76),rgba(7,16,31,.78))!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transform:none!important;
}
html body .refined-server-card::before{
  content:""!important;
  position:absolute!important;
  left:28px!important;
  top:0!important;
  width:56px!important;
  height:3px!important;
  border-radius:0 0 999px 999px!important;
  background:linear-gradient(90deg,#198cff,#8b20ff)!important;
}
html body .refined-server-card:hover{
  border-color:rgba(91,178,255,.25)!important;
  transform:translateY(-4px)!important;
}
html body .refined-server-card.featured{
  transform:translateY(-6px)!important;
  border-color:rgba(91,178,255,.30)!important;
}
html body .refined-server-card .plan-tag{
  width:max-content!important;
  margin-bottom:10px!important;
}
html body .refined-server-card h3{
  margin:0!important;
  font-size:1.35rem!important;
  line-height:1.2!important;
  letter-spacing:-.03em!important;
}
html body .refined-server-card p{
  min-height:auto!important;
  margin:10px 0 8px!important;
  color:#aebdd2!important;
}
html body .refined-server-card .price-line{
  margin:8px 0 4px!important;
}
html body .refined-server-card ul{
  margin:14px 0 20px!important;
}

/* Control-panel section between package cards and map. */
html body .platform-capability-section{
  display:grid!important;
  grid-template-columns:minmax(0,430px) minmax(0,1fr)!important;
  gap:42px!important;
  align-items:start!important;
  padding-top:clamp(54px,5vw,78px)!important;
  padding-bottom:clamp(54px,5vw,78px)!important;
}
html body .platform-capability-copy h2{
  margin:0!important;
  color:#f7fbff!important;
  font-size:clamp(2.25rem,3.6vw,4.1rem)!important;
  line-height:1.02!important;
  letter-spacing:-.06em!important;
}
html body .platform-capability-copy p{
  margin:18px 0 0!important;
  color:#aebdd2!important;
  line-height:1.72!important;
}
html body .platform-feature-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
html body .platform-feature-row article{
  position:relative!important;
  min-height:190px!important;
  padding:22px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025))!important;
  overflow:hidden!important;
}
html body .platform-feature-row article::after{
  content:""!important;
  position:absolute!important;
  right:-40px!important;
  bottom:-40px!important;
  width:120px!important;
  height:120px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(18,151,255,.13),transparent 70%)!important;
}
html body .platform-feature-row b{
  display:block!important;
  color:#f7fbff!important;
  font-size:1.03rem!important;
  line-height:1.25!important;
  letter-spacing:-.015em!important;
}
html body .platform-feature-row span{
  display:block!important;
  margin-top:12px!important;
  color:#aebdd2!important;
  line-height:1.62!important;
}

/* Datacenter map section: big light dotted world map. */
html body .datacenter-location-section{
  padding-top:clamp(64px,6vw,96px)!important;
  padding-bottom:clamp(64px,7vw,110px)!important;
}
html body .datacenter-location-head{
  display:grid!important;
  grid-template-columns:180px minmax(0,520px) minmax(280px,1fr)!important;
  gap:32px!important;
  align-items:end!important;
  margin-bottom:26px!important;
}
html body .datacenter-location-head .eyebrow{
  align-self:center!important;
  width:max-content!important;
}
html body .datacenter-location-head h2{
  margin:0!important;
  color:#f7fbff!important;
  font-size:clamp(2.35rem,4vw,4.45rem)!important;
  line-height:1.02!important;
  letter-spacing:-.065em!important;
}
html body .datacenter-location-head p{
  margin:0!important;
  color:#aebdd2!important;
  font-size:1.02rem!important;
  line-height:1.72!important;
  max-width:560px!important;
}
html body .world-map-panel{
  position:relative!important;
  min-height:430px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.30)!important;
}
html body .world-dot-svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:430px!important;
}
html body .world-map-panel::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 52% 42%,rgba(115,23,255,.04),transparent 260px),
    linear-gradient(180deg,rgba(255,255,255,.0),rgba(247,248,252,.40))!important;
  pointer-events:none!important;
  z-index:1!important;
}
html body .map-location-pulse{
  animation:cspMapPulse 2.5s ease-in-out infinite!important;
  transform-origin:418px 138px!important;
}
@keyframes cspMapPulse{
  0%,100%{opacity:.90; transform:scale(1);}
  50%{opacity:1; transform:scale(1.12);}
}
html body .map-location-card{
  position:absolute!important;
  left:calc(55% + 12px)!important;
  top:32%!important;
  z-index:2!important;
  padding:12px 14px!important;
  min-width:220px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.88)!important;
  color:#111827!important;
  box-shadow:0 18px 45px rgba(61,35,130,.16)!important;
  border:1px solid rgba(111,78,200,.12)!important;
  backdrop-filter:blur(10px)!important;
}
html body .map-location-card::before{
  content:""!important;
  position:absolute!important;
  left:-33px!important;
  top:22px!important;
  width:32px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(123,25,255,.0),rgba(123,25,255,.75))!important;
}
html body .map-location-card strong{
  display:block!important;
  color:#111827!important;
  font-size:1rem!important;
  letter-spacing:-.015em!important;
}
html body .map-location-card span{
  display:block!important;
  margin-top:4px!important;
  color:#667085!important;
  font-size:.88rem!important;
}
html body .map-stat-row{
  position:absolute!important;
  left:28px!important;
  right:28px!important;
  bottom:24px!important;
  z-index:2!important;
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
html body .map-stat-row span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(111,78,200,.10)!important;
  color:#344054!important;
  font-size:.86rem!important;
  font-weight:780!important;
  box-shadow:0 10px 26px rgba(61,35,130,.08)!important;
}

/* Hide old map styles if cached/legacy classes appear anywhere else. */
html body .platform-map-section .datacenter-map-card:not(.world-map-panel){
  background:transparent!important;
}

/* Responsive cleanup. */
@media(max-width:1100px){
  html body .showcase-heading,
  html body .datacenter-location-head{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  html body .showcase-title h2,
  html body .datacenter-location-head h2{
    max-width:820px!important;
  }
  html body .platform-capability-section{
    grid-template-columns:1fr!important;
  }
  html body .platform-feature-row{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:760px){
  html body main.container:has(.uc-hero) > .server-showcase-section,
  html body main.container:has(.uc-hero) > .platform-capability-section,
  html body main.container:has(.uc-hero) > .datacenter-location-section{
    width:min(100% - 24px,1280px)!important;
  }
  html body .server-showcase-section{
    padding-top:56px!important;
  }
  html body .showcase-title h2,
  html body .datacenter-location-head h2,
  html body .platform-capability-copy h2{
    font-size:clamp(2.15rem,10vw,3rem)!important;
  }
  html body .world-map-panel{
    min-height:320px!important;
    border-radius:22px!important;
  }
  html body .world-dot-svg{
    min-height:320px!important;
    width:145%!important;
    margin-left:-22%!important;
  }
  html body .map-location-card{
    left:24px!important;
    right:24px!important;
    top:24px!important;
    min-width:0!important;
  }
  html body .map-location-card::before{
    display:none!important;
  }
}