/*
  Professional hero/header pass
  The goal is a cleaner UpCloud-like top-of-site feeling without copying their assets:
  large editorial hero, controlled whitespace, refined navigation, fewer boxed panels.
*/
:root{
  --pro-bg:#060011;
  --pro-bg-2:#0a071a;
  --pro-surface:rgba(12,18,38,.62);
  --pro-line:rgba(255,255,255,.13);
  --pro-line-soft:rgba(255,255,255,.075);
  --pro-text:#ffffff;
  --pro-muted:#c9c4d8;
  --pro-muted-2:#9d94b4;
  --pro-purple:#8b20ff;
  --pro-blue:#198cff;
  --pro-red:#ff244e;
  --pro-cyan:#54d4ff;
  --pro-green:#43e889;
}

/* Topbar: clean public website header, no squeezed/overlapping elements. */
html body .topbar{
  background:rgba(6,0,17,.78)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(22px) saturate(130%)!important;
}
html body .topbar:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)!important;
}
html body .topbar-inner{
  width:min(1500px,calc(100% - 48px))!important;
  min-height:72px!important;
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr) auto!important;
  gap:28px!important;
  align-items:center!important;
  padding:0!important;
}
html body .brand-link{
  min-width:0!important;
  max-width:210px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}
html body .brand-link:after{content:none!important;display:none!important;}
html body .brand-logo{
  height:46px!important;
  max-width:192px!important;
  width:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
}
html body .public-nav{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  overflow:visible!important;
}
html body .top-link{
  min-height:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  color:#f2eefb!important;
  font-size:.91rem!important;
  font-weight:760!important;
  letter-spacing:-.015em!important;
  line-height:1.2!important;
}
html body .top-link .nav-ico{
  width:auto!important;
  height:auto!important;
  margin-right:1px!important;
  background:transparent!important;
  color:#e9e5f5!important;
  opacity:.78!important;
  font-size:.88rem!important;
}
html body .top-link:hover,
html body .top-link.active{
  background:transparent!important;
  color:#fff!important;
  transform:none!important;
  box-shadow:none!important;
}
html body .top-link:hover::after,
html body .top-link.active::after{
  transform:scaleX(1)!important;
  opacity:1!important;
}
html body .top-link::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-10px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--pro-purple),var(--pro-blue))!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  opacity:0!important;
  transition:.18s ease!important;
}
html body .top-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:max-content!important;
}
html body .language-switcher,
html body .flag-language-switcher{
  height:38px!important;
  padding:0 4px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.28)!important;
  outline:0!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:none!important;
}
html body .language-flag{
  height:30px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:6px!important;
  color:#fff!important;
  font-size:.82rem!important;
  font-weight:800!important;
}
html body .language-flag.active{
  background:rgba(255,255,255,.12)!important;
}
html body .language-flag img{width:22px!important;height:16px!important;border-radius:2px!important;}
html body .wallet-chip{
  height:38px!important;
  min-height:38px!important;
  padding:0 15px!important;
  border-radius:7px!important;
  color:#fff!important;
  font-size:.87rem!important;
  font-weight:850!important;
  background:rgba(255,255,255,.96)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html body .wallet-chip:before{
  display:none!important;
}
html body .icon-btn{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.96)!important;
  color:#10051f!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html body .icon-btn.dashboard-shortcut{
  background:rgba(255,255,255,.96)!important;
  color:#10051f!important;
}
html body .icon-btn:hover,
html body .wallet-chip:hover{
  background:#fff!important;
  color:#000!important;
}

/* Public homepage hero: professional editorial top area instead of boxed dashboard mockup. */
html body main.container:has(.uc-hero){
  width:100%!important;
  padding-top:0!important;
}
html body .uc-hero{
  position:relative!important;
  min-height:760px!important;
  margin:-1px 0 0!important;
  padding:
    clamp(96px,10vw,150px)
    max(48px,calc((100vw - 1500px)/2 + 24px))
    0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 20%,rgba(139,32,255,.28),transparent 30rem),
    radial-gradient(circle at 90% 72%,rgba(255,36,78,.22),transparent 36rem),
    radial-gradient(circle at 0% 0%,rgba(25,140,255,.10),transparent 22rem),
    linear-gradient(180deg,#090017 0%,#090018 55%,#070013 100%)!important;
  color:#fff!important;
}
html body .uc-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(115deg,rgba(0,0,0,.22),transparent 44%),
    radial-gradient(ellipse at 65% 58%,rgba(255,35,78,.30),transparent 22%),
    radial-gradient(ellipse at 82% 62%,rgba(139,32,255,.22),transparent 30%)!important;
  pointer-events:none!important;
}
html body .uc-hero-bg{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body .uc-ribbon{
  position:absolute!important;
  display:block!important;
  width:88vw!important;
  height:92px!important;
  right:-16vw!important;
  top:44%!important;
  border-radius:999px!important;
  transform:rotate(-17deg)!important;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,36,78,.0) 12%,rgba(255,36,78,.76) 35%,rgba(139,32,255,.50) 58%,rgba(255,36,78,.0) 100%)!important;
  filter:blur(.2px)!important;
  opacity:.86!important;
  mix-blend-mode:screen!important;
}
html body .uc-ribbon-two{
  top:52%!important;
  right:-10vw!important;
  height:54px!important;
  opacity:.58!important;
  transform:rotate(-14deg)!important;
  background:linear-gradient(90deg,transparent,rgba(139,32,255,.24),rgba(255,36,78,.58),rgba(255,104,52,.22),transparent)!important;
}
html body .uc-ribbon-three{
  top:69%!important;
  right:-18vw!important;
  height:120px!important;
  opacity:.32!important;
  transform:rotate(-9deg)!important;
  background:linear-gradient(90deg,transparent,rgba(25,140,255,.16),rgba(255,36,78,.52),transparent)!important;
  filter:blur(3px)!important;
}
html body .uc-orb{
  position:absolute!important;
  border-radius:999px!important;
  display:block!important;
  pointer-events:none!important;
}
html body .uc-orb-one{
  width:420px!important;
  height:420px!important;
  right:13%!important;
  top:10%!important;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.88),rgba(25,140,255,.44) 34%,rgba(139,32,255,.22) 54%,transparent 72%)!important;
  opacity:.92!important;
}
html body .uc-orb-two{
  width:520px!important;
  height:520px!important;
  right:-80px!important;
  bottom:-160px!important;
  background:radial-gradient(circle,rgba(255,36,78,.18),transparent 68%)!important;
}
html body .uc-hero-inner{
  position:relative!important;
  z-index:2!important;
  width:min(1500px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,640px) minmax(420px,1fr)!important;
  gap:48px!important;
  align-items:center!important;
}
html body .uc-hero-copy{
  padding:10px 0 64px!important;
}
html body .uc-overline{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 28px!important;
  color:#fff!important;
  font-size:.85rem!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  opacity:.88!important;
}
html body .uc-overline::before{
  content:""!important;
  display:inline-block!important;
  width:38px!important;
  height:1px!important;
  margin-right:13px!important;
  background:linear-gradient(90deg,var(--pro-purple),var(--pro-red))!important;
}
html body .uc-hero h1{
  margin:0!important;
  max-width:10ch!important;
  color:#fff!important;
  font-family:Inter, system-ui, sans-serif!important;
  font-size:clamp(4.4rem,7.3vw,8.4rem)!important;
  line-height:.92!important;
  letter-spacing:-.075em!important;
  font-weight:500!important;
}
html body .uc-lead{
  margin:34px 0 0!important;
  max-width:620px!important;
  color:#eee8f9!important;
  font-size:clamp(1.08rem,1.3vw,1.28rem)!important;
  line-height:1.65!important;
  letter-spacing:-.015em!important;
}
html body .uc-signup-panel{
  width:min(100%,640px)!important;
  margin-top:44px!important;
  padding:22px 22px 24px!important;
  border:1px solid rgba(139,32,255,.78)!important;
  border-radius:8px!important;
  background:linear-gradient(90deg,rgba(9,0,24,.66),rgba(37,0,64,.22))!important;
  box-shadow:none!important;
  display:grid!important;
  gap:13px!important;
}
html body .uc-signup-panel strong{
  color:#fff!important;
  font-size:1.04rem!important;
  letter-spacing:-.015em!important;
}
html body .uc-signup-panel span{
  color:#eee8f9!important;
  line-height:1.55!important;
}
html body .uc-hero-actions{
  display:flex!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin-top:8px!important;
}
html body .uc-hero-actions .btn{
  min-height:48px!important;
  border-radius:6px!important;
  padding:0 22px!important;
  font-size:.9rem!important;
  text-transform:uppercase!important;
  letter-spacing:.02em!important;
}
html body .uc-hero-actions .btn.primary{
  background:linear-gradient(135deg,#8b20ff,#6f00ff)!important;
  color:#fff!important;
  outline:0!important;
  border:0!important;
  box-shadow:none!important;
}
html body .uc-hero-actions .btn.ghost{
  background:rgba(255,255,255,.05)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.25)!important;
  outline:0!important;
}
html body .uc-hero-visual{
  position:relative!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body .uc-glass-persona{
  position:relative!important;
  width:min(620px,100%)!important;
  height:560px!important;
  border-radius:36px!important;
}
html body .uc-glass-persona::before{
  content:""!important;
  position:absolute!important;
  inset:7% 8% auto auto!important;
  width:360px!important;
  height:360px!important;
  border-radius:48% 52% 42% 58%/52% 42% 58% 48%!important;
  background:
    radial-gradient(circle at 45% 34%,rgba(255,255,255,.86),rgba(91,185,255,.52) 25%,rgba(139,32,255,.18) 58%,rgba(255,36,78,.12) 70%,transparent 72%)!important;
  filter:drop-shadow(0 34px 80px rgba(0,0,0,.46))!important;
}
html body .uc-server-stack{
  position:absolute!important;
  left:26%!important;
  top:25%!important;
  width:250px!important;
  height:190px!important;
  transform:perspective(900px) rotateX(58deg) rotateZ(-35deg)!important;
  transform-style:preserve-3d!important;
}
html body .uc-server-stack span{
  position:absolute!important;
  left:0!important;
  right:0!important;
  height:64px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(22,55,104,.92),rgba(6,17,35,.98))!important;
  border:1px solid rgba(101,184,255,.28)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14)!important;
}
html body .uc-server-stack span:nth-child(1){top:0!important;}
html body .uc-server-stack span:nth-child(2){top:58px!important;transform:translateZ(-22px)!important;}
html body .uc-server-stack span:nth-child(3){top:116px!important;transform:translateZ(-44px)!important;}
html body .uc-cloud-mark{
  position:absolute!important;
  right:12%!important;
  top:28%!important;
  width:160px!important;
  height:82px!important;
  border:4px solid rgba(57,212,255,.76)!important;
  border-bottom-color:rgba(57,212,255,.22)!important;
  border-radius:44px!important;
  filter:drop-shadow(0 0 22px rgba(57,212,255,.24))!important;
}
html body .uc-cloud-mark::before,
html body .uc-cloud-mark::after{
  content:""!important;
  position:absolute!important;
  border-radius:999px!important;
  border:4px solid rgba(57,212,255,.76)!important;
  border-bottom:0!important;
}
html body .uc-cloud-mark::before{
  width:62px!important;
  height:54px!important;
  left:28px!important;
  top:-30px!important;
}
html body .uc-cloud-mark::after{
  width:76px!important;
  height:64px!important;
  right:22px!important;
  top:-38px!important;
}
html body .uc-terminal-float{
  position:absolute!important;
  left:13%!important;
  bottom:16%!important;
  min-width:230px!important;
  padding:15px 18px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(14,10,28,.62)!important;
  backdrop-filter:blur(16px)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.34)!important;
}
html body .uc-terminal-float b{
  display:block!important;
  color:#fff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:.86rem!important;
}
html body .uc-terminal-float small{
  display:block!important;
  margin-top:5px!important;
  color:#cfc7dd!important;
}
html body .uc-node{
  position:absolute!important;
  z-index:1!important;
  width:9px!important;
  height:9px!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 0 18px rgba(255,255,255,.5)!important;
}
html body .uc-node-a{left:22%;top:27%;background:#8b20ff!important;}
html body .uc-node-b{left:68%;top:20%;background:#ff244e!important;}
html body .uc-node-c{left:78%;bottom:30%;background:#198cff!important;}
html body .uc-node-d{left:36%;bottom:18%;background:#54d4ff!important;}
html body .uc-proof-strip{
  position:relative!important;
  z-index:3!important;
  width:min(1100px,calc(100% - 96px))!important;
  margin:20px auto 0!important;
  transform:translateY(50%)!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:8px!important;
  background:rgba(8,0,24,.58)!important;
  backdrop-filter:blur(14px)!important;
}
html body .uc-proof-strip div{
  min-height:118px!important;
  padding:22px 26px!important;
  border-right:1px solid rgba(255,255,255,.18)!important;
  display:grid!important;
  align-content:start!important;
  gap:12px!important;
}
html body .uc-proof-strip div:last-child{border-right:0!important;}
html body .uc-proof-strip strong{
  color:#fff!important;
  font-size:1.03rem!important;
  line-height:1.15!important;
}
html body .uc-proof-strip span{
  color:#bdb4cf!important;
  line-height:1.5!important;
  font-size:.94rem!important;
}

/* Push following homepage sections below the overlapping proof strip. */
html body main.container:has(.uc-hero) .uc-hero + *{
  margin-top:92px!important;
}

/* Rest of public pages and dashboard: reduce boxed look but keep usability. */
html body :where(.card,.panel,.clean-panel,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.featured-card,.kpi,.metric,.stat,.dashboard-card,.faq details,.datacenter-map-card,.cta-band){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,rgba(15,20,38,.58),rgba(8,13,28,.58))!important;
}
html body :where(.card,.panel,.clean-panel,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.kpi,.metric,.stat,.dashboard-card,.faq details)::before{
  border-color:transparent!important;
}
html body .featured-card,
html body .feature-list-clean div,
html body .datacenter-map-card,
html body .cta-band{
  border:1px solid rgba(255,255,255,.10)!important;
  outline:0!important;
}
html body .featured-card:hover{
  border-color:rgba(139,32,255,.32)!important;
}
html body .app-shell{
  background:transparent!important;
}
html body .dashboard-sidebar,
html body .admin-side{
  border:1px solid rgba(255,255,255,.09)!important;
  outline:0!important;
  background:linear-gradient(180deg,rgba(13,20,39,.70),rgba(7,13,27,.70))!important;
}
html body .table td,
html body table.csp-enhanced-table td{
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
html body .table th,
html body table.csp-enhanced-table th{
  background:transparent!important;
  box-shadow:none!important;
}

/* Responsive */
@media(max-width:1180px){
  html body .topbar-inner{
    grid-template-columns:auto auto!important;
    gap:18px!important;
    padding:14px 0!important;
  }
  html body .public-nav{
    order:3!important;
    grid-column:1/-1!important;
    justify-content:flex-start!important;
    gap:18px!important;
    overflow-x:auto!important;
    padding:4px 0 2px!important;
  }
  html body .top-actions{justify-self:end!important;}
  html body .uc-hero-inner{
    grid-template-columns:1fr!important;
  }
  html body .uc-hero-visual{
    min-height:360px!important;
  }
  html body .uc-glass-persona{
    height:360px!important;
  }
  html body .uc-proof-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    transform:none!important;
    margin:30px auto 0!important;
  }
  html body main.container:has(.uc-hero) .uc-hero + *{
    margin-top:58px!important;
  }
}
@media(max-width:760px){
  html body .topbar-inner{
    width:min(100% - 24px,1500px)!important;
    display:flex!important;
    flex-wrap:wrap!important;
  }
  html body .brand-logo{height:40px!important;max-width:160px!important;}
  html body .top-actions{margin-left:auto!important;}
  html body .public-nav{width:100%!important;}
  html body .uc-hero{
    min-height:auto!important;
    padding:96px 24px 42px!important;
  }
  html body .uc-hero h1{
    font-size:clamp(3.1rem,16vw,4.7rem)!important;
  }
  html body .uc-signup-panel{
    margin-top:30px!important;
    padding:18px!important;
  }
  html body .uc-hero-visual{display:none!important;}
  html body .uc-proof-strip{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
  html body .uc-proof-strip div{
    min-height:auto!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
  }
  html body .uc-proof-strip div:last-child{border-bottom:0!important;}
}