/*
  Final header/hero polish.
  Fixes:
  - hero background full viewport width
  - removes the unwanted horizontal gradient line under the top menu
  - corrects top-menu button colors
  - improves hero text alignment and spacing
*/

/* Remove the bright horizontal stripe under the top menu. */
html body .topbar{
  border-bottom:0!important;
  box-shadow:none!important;
}
html body .topbar:after,
html body .topbar::after{
  display:none!important;
  content:none!important;
}

/* Header layout: keep it clean, balanced and not button-heavy. */
html body .topbar{
  background:rgba(7,0,18,.82)!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
}
html body .topbar-inner{
  width:min(1500px,calc(100% - 56px))!important;
  min-height:72px!important;
  grid-template-columns:220px minmax(0,1fr) auto!important;
  gap:34px!important;
}
html body .brand-logo{
  height:46px!important;
  max-width:194px!important;
}

/* UpCloud-like public nav: text first, no decorative bullet/icon clutter. */
html body .public-nav{
  justify-content:center!important;
  gap:30px!important;
  overflow:visible!important;
}
html body .top-link{
  position:relative!important;
  padding:0!important;
  min-height:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f6f1ff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  font-weight:760!important;
}
html body .top-link .nav-ico{
  display:none!important;
}
html body .top-link:hover,
html body .top-link.active{
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body .top-link:after{
  bottom:-12px!important;
  height:2px!important;
  background:linear-gradient(90deg,#8b20ff,#198cff)!important;
}

/* Logged-in right menu colors: no white blocks on a dark premium header. */
html body .top-actions{
  gap:10px!important;
}
html body .flag-language-switcher,
html body .language-switcher{
  height:38px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.16)!important;
}
html body .language-flag{
  height:30px!important;
  color:#e9e4f7!important;
  background:transparent!important;
}
html body .language-flag.active{
  background:rgba(139,32,255,.18)!important;
  color:#fff!important;
}
html body .wallet-chip{
  height:38px!important;
  min-height:38px!important;
  border-radius:10px!important;
  padding:0 15px!important;
  color:#d9efff!important;
  background:linear-gradient(135deg,rgba(25,140,255,.22),rgba(139,32,255,.16))!important;
  border:1px solid rgba(91,178,255,.28)!important;
  outline:0!important;
  box-shadow:none!important;
}
html body .wallet-chip:before{
  display:inline-block!important;
  content:""!important;
  width:14px!important;
  height:14px!important;
  margin-right:8px!important;
  border-radius:4px!important;
  background:linear-gradient(135deg,#54d4ff,#198cff)!important;
  opacity:.95!important;
  mask:none!important;
}
html body .icon-btn,
html body .icon-btn.dashboard-shortcut{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  border-radius:10px!important;
  color:#dfeaff!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  outline:0!important;
  box-shadow:none!important;
}
html body .icon-btn:hover,
html body .icon-btn.dashboard-shortcut:hover{
  color:#fff!important;
  background:rgba(139,32,255,.16)!important;
  border-color:rgba(139,32,255,.34)!important;
}

/* Make homepage hero escape any centered container and fill the entire viewport width. */
html body main.container:has(.uc-hero){
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
html body .uc-hero{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  margin-top:0!important;
  min-height:735px!important;
  padding:
    clamp(118px,10vw,152px)
    max(28px,calc((100vw - 1280px)/2))
    0!important;
  background:
    radial-gradient(circle at 72% 20%,rgba(92,129,255,.28),transparent 25rem),
    radial-gradient(circle at 84% 65%,rgba(255,36,78,.22),transparent 33rem),
    radial-gradient(circle at 0% 0%,rgba(139,32,255,.13),transparent 25rem),
    linear-gradient(180deg,#080013 0%,#090017 58%,#070013 100%)!important;
}

/* Keep the background art full width and remove the dark side gutter. */
html body .uc-hero-bg,
html body .uc-hero::before{
  inset:0!important;
  width:100%!important;
}
html body .uc-ribbon{
  width:120vw!important;
  right:-28vw!important;
}

/* Hero content alignment: closer to the reference, less cramped, stronger hierarchy. */
html body .uc-hero-inner{
  width:min(1280px,100%)!important;
  margin-inline:auto!important;
  grid-template-columns:minmax(0,570px) minmax(420px,1fr)!important;
  gap:52px!important;
  align-items:center!important;
}
html body .uc-hero-copy{
  padding:0 0 76px!important;
}
html body .uc-overline{
  margin-bottom:30px!important;
  font-size:.82rem!important;
  letter-spacing:.12em!important;
}
html body .uc-hero h1{
  max-width:9.2ch!important;
  font-size:clamp(4.15rem,6.4vw,7.35rem)!important;
  line-height:.93!important;
  letter-spacing:-.078em!important;
  font-weight:520!important;
}
html body .uc-lead{
  margin-top:30px!important;
  max-width:590px!important;
  font-size:clamp(1.06rem,1.22vw,1.22rem)!important;
  line-height:1.7!important;
}
html body .uc-signup-panel{
  margin-top:42px!important;
  width:min(100%,600px)!important;
  border-color:rgba(139,32,255,.56)!important;
  background:linear-gradient(90deg,rgba(15,0,36,.62),rgba(60,0,94,.18))!important;
}

/* Visual placement: move right art a bit inward and avoid awkward center blob dominance. */
html body .uc-hero-visual{
  min-height:520px!important;
}
html body .uc-glass-persona{
  height:520px!important;
}
html body .uc-glass-persona::before{
  right:7%!important;
  top:8%!important;
  width:330px!important;
  height:330px!important;
  opacity:.9!important;
}
html body .uc-server-stack{
  left:28%!important;
  top:29%!important;
}
html body .uc-terminal-float{
  left:20%!important;
  bottom:17%!important;
}

/* Proof strip should align with hero content and not create side gutters. */
html body .uc-proof-strip{
  width:min(1110px,calc(100% - 56px))!important;
}

/* Push following content down cleanly after the overlapping strip. */
html body main.container:has(.uc-hero) .uc-hero + *{
  margin-top:96px!important;
}

/* Public sections after full-width hero return to a centered professional content width. */
html body main.container:has(.uc-hero) > .public-section,
html body main.container:has(.uc-hero) > .cta-band{
  width:min(1280px,calc(100% - 56px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Responsive: full-width hero remains full-width, header wraps neatly. */
@media(max-width:1180px){
  html body .topbar-inner{
    grid-template-columns:auto auto!important;
    gap:18px!important;
    padding:12px 0!important;
  }
  html body .public-nav{
    order:3!important;
    grid-column:1/-1!important;
    justify-content:flex-start!important;
    gap:22px!important;
    overflow-x:auto!important;
    padding:4px 0 2px!important;
  }
  html body .uc-hero{
    padding:110px 28px 48px!important;
  }
  html body .uc-hero-inner{
    grid-template-columns:1fr!important;
  }
  html body .uc-hero-copy{
    padding-bottom:18px!important;
  }
  html body .uc-hero-visual{
    min-height:340px!important;
  }
  html body .uc-glass-persona{
    height:340px!important;
  }
}
@media(max-width:760px){
  html body .topbar-inner{
    width:min(100% - 24px,1500px)!important;
  }
  html body .brand-logo{
    height:40px!important;
    max-width:160px!important;
  }
  html body .uc-hero{
    min-height:auto!important;
    padding:96px 24px 38px!important;
  }
  html body .uc-hero h1{
    font-size:clamp(3rem,15vw,4.4rem)!important;
  }
  html body .uc-proof-strip{
    width:100%!important;
  }
  html body main.container:has(.uc-hero) > .public-section,
  html body main.container:has(.uc-hero) > .cta-band{
    width:min(100% - 24px,1280px)!important;
  }
}