/* Global shared styles */
:root {
  --brand-blue: #0d6efd;
  --brand-orange: #ff7d00;
  --brand-orange-hover: #2f2f2f;
  --brand-yellow: #ffd43b;
  --brand-aqua: #2dd4bf;
  --brand-dark: #0f172a;
  --brand-muted: #6b7280;
  --bs-primary: var(--brand-blue);
  --bs-warning: var(--brand-yellow);
  --bs-info: var(--brand-aqua);
  --bs-body-color: #1f2937;
  --bs-body-bg: #ffffff;
  --radius-2xl: 1.25rem;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.08);
}
:root{
    --uhost-text-gradient: linear-gradient(135deg,
    #52B9ED 0%,
    #486EC6 45%,
    #7A429C 100%
    );

    --uhost-hex-gradient: linear-gradient(135deg, #52d2ed6e 0%, #396ada8c 25%, #7a429c8a 50%, #f9a629e6 75%, #cf0000b0 100%);
}
.cursor-float-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-float-canvas {
    display: none;
  }
}
.bg-uhost-text{
    background: var(--uhost-text-gradient);
}

.bg-uhost-hex{
    background: linear-gradient(90deg, rgba(13, 110, 253, .10), rgba(32, 201, 151, .08));
}
body { 
  font-feature-settings: "liga" 1, "kern" 1; 
}

/* Sticky footer layout */
html, body {
  height: 100%;
}
body {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
body > footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* Utility classes */
.shadow-soft { 
  box-shadow: var(--shadow-soft); 
}

.rounded-2xl { 
  border-radius: var(--radius-2xl); 
}

.btn-cta { 
  background-color: var(--brand-orange); 
  color: #1a1a1a;
    font-weight: 600;
  border: none; 
}

.btn-cta:hover { 
  background-color: var(--brand-orange-hover); 
  color: #fff; 
}

/* Hero sections */
.hero {
  padding-top: 2rem; 
  position: relative; 
  --hero-bg: radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,.25), transparent 40%),
             radial-gradient(1000px 500px at -10% 0%, rgba(13,110,253,.2), transparent 40%),
             linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  background: var(--hero-bg);
  overflow: hidden;
}

.hero > .container,
.hero > .container-fluid {
  position: relative;
  z-index: 1;
}

.hero-decoration {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--hero-image-opacity, 0.12);
  filter: saturate(120%);
}

.hero-decoration::before,
.hero-decoration::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.hero-decoration::before {
  background:
    radial-gradient(600px 300px at 20% 25%, rgba(82,185,237,.35), transparent 60%),
    radial-gradient(520px 320px at 80% 20%, rgba(249,166,41,.25), transparent 60%),
    radial-gradient(520px 360px at 60% 80%, rgba(122,66,156,.22), transparent 60%);
  filter: blur(8px);
  opacity: .9;
}

.hero-decoration::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.0) 0, rgba(255,255,255,.0) 10px, rgba(255,255,255,.10) 10px, rgba(255,255,255,.10) 11px);
  opacity: .35;
  mix-blend-mode: overlay;
}

/* Theme presets (per page) */
.hero--storage {
  --hero-bg:
    radial-gradient(1200px 650px at 85% -10%, rgba(249,166,41,.35), transparent 45%),
    radial-gradient(1100px 620px at -10% 0%, rgba(122,66,156,.28), transparent 45%),
    radial-gradient(900px 520px at 40% 10%, rgba(82,185,237,.22), transparent 55%),
    linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
}

.hero--vps {
  --hero-bg:
    radial-gradient(1100px 620px at 85% -10%, rgba(45,212,191,.26), transparent 45%),
    radial-gradient(1000px 520px at -10% 0%, rgba(13,110,253,.18), transparent 45%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.hero--ds {
  --hero-bg:
    radial-gradient(1200px 650px at 90% -10%, rgba(255,212,59,.28), transparent 48%),
    radial-gradient(1000px 600px at -10% 0%, rgba(255,138,0,.16), transparent 46%),
    radial-gradient(900px 520px at 30% 10%, rgba(13,110,253,.14), transparent 55%),
    linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
}

.hero--domains {
  --hero-bg:
    radial-gradient(1100px 620px at 85% -10%, rgba(45,212,191,.22), transparent 48%),
    radial-gradient(1000px 580px at -10% 0%, rgba(34,197,94,.14), transparent 46%),
    linear-gradient(180deg, #f6fffb 0%, #ffffff 100%);
}

.hero--hosting {
  --hero-bg:
    radial-gradient(1100px 620px at 85% -10%, rgba(13,110,253,.18), transparent 48%),
    radial-gradient(900px 520px at -10% 0%, rgba(82,185,237,.18), transparent 48%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.hero--contacts {
  --hero-bg:
    radial-gradient(1100px 620px at 85% -10%, rgba(249,166,41,.20), transparent 48%),
    radial-gradient(1000px 580px at -10% 0%, rgba(13,110,253,.14), transparent 46%),
    linear-gradient(180deg, #fffaf7 0%, #ffffff 100%);
}

.hero-badge { 
  background: rgba(13,110,253,.08); 
  color: #0d6efd; 
}

.glass { 
  background: rgba(255,255,255, .7); 
  backdrop-filter: saturate(140%) blur(10px); 
  border: 1px solid rgba(13,110,253,.08); 
}

/* Interactive elements */
.chip { 
  padding: .35rem .6rem; 
  border-radius: 999px; 
  border: 1px solid rgba(0,0,0,.08); 
  cursor: pointer; 
  transition: all 0.2s; 
}

.chip:hover { 
  background: var(--brand-blue); 
  color: white; 
  border-color: var(--brand-blue); 
}

.chip.selected { 
  background: var(--brand-blue); 
  color: white; 
  border-color: var(--brand-blue); 
}

/* Form elements */
.toggle .form-check-input { 
  cursor: pointer; 
}

.form-6col { 
  max-width: 720px; 
}

/* Layout helpers */
section { 
  scroll-margin-top: 80px; 
}

.icon-circle { 
  width: 46px; 
  height: 46px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 50%; 
  background: rgba(13,110,253,.08); 
  color: var(--brand-blue); 
}

/* Footer */
.footer { 
  background: #0b1220; 
  color: #cbd5e1; 
}

/* Home: services showcase */
.home-services-showcase__title{
  letter-spacing: -0.03em;
  color: #111827;
  text-align: center;
  margin: 0 0 2.25rem;
}

.hs-card{
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 280px;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hs-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14);
}
.hs-card:focus-visible{
  outline: 3px solid rgba(13,110,253,.5);
  outline-offset: 3px;
}

.hs-card__media{
  position: absolute;
  inset: 0;
  background-image: var(--hs-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .55;
  filter: saturate(115%);
}

.hs-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hs-card--blue::before{
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(13,110,253,.92) 0%, rgba(20,72,255,.94) 60%, rgba(8,66,210,.96) 100%);
}
.hs-card--light::before{
  background:
    radial-gradient(900px 520px at 30% 35%, rgba(13,110,253,.12), transparent 65%),
    linear-gradient(180deg, rgba(248,250,252,.92) 0%, rgba(231,238,248,.96) 100%);
}
.hs-card--dark::before{
  background:
    radial-gradient(900px 520px at 82% 15%, rgba(32,201,151,.30), transparent 55%),
    linear-gradient(180deg, rgba(17,24,39,.92) 0%, rgba(15,23,42,.96) 100%);
}

.hs-card__body{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: 2.1rem 2.1rem 2.25rem;
  width: 100%;
}

.hs-card__title{
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(1.85rem, 2.4vw, 2.6rem);
  margin-bottom: .6rem;
}
.hs-card__subtitle{
  font-size: 1.1rem;
  line-height: 1.35;
  opacity: .92;
  max-width: 28ch;
}

.hs-card__cta{
  display: flex;
  align-items: center;
}
.hs-card__btn{
  border-radius: 999px;
  padding: .72rem 1.35rem;
  font-weight: 700;
  border: 0;
}

.hs-card--blue .hs-card__title,
.hs-card--blue .hs-card__subtitle{ color: #fff; }
.hs-card--blue .hs-card__btn{
  background: rgba(255,255,255,.96);
  color: #0d6efd;
}

.hs-card--light{
  border: 1px solid rgba(15,23,42,.06);
}
.hs-card--light .hs-card__title{ color: #111827; }
.hs-card--light .hs-card__subtitle{ color: rgba(17,24,39,.72); }
.hs-card--light .hs-card__btn{
  background: #0d6efd;
  color: #fff;
}

.hs-card--dark .hs-card__title,
.hs-card--dark .hs-card__subtitle{ color: #fff; }
.hs-card--dark .hs-card__btn{
  background: rgba(13,110,253,.92);
  color: #fff;
}

@media (max-width: 991px){
  .hs-card{ min-height: 200px; }
  .hs-card__body{ padding: 1.6rem 1.6rem 1.75rem; }
}

.footer a { 
  color: #e2e8f0; 
  text-decoration: none; 
}

.footer a:hover { 
  color: #fff;
}

/* Loading animations */
.loading-spinner { 
  display: inline-block; 
  width: 1rem; 
  height: 1rem; 
  border: 2px solid #f3f3f3; 
  border-top: 2px solid var(--brand-blue); 
  border-radius: 50%; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

/* Tickets */
.ticket-code {
  display: block;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgba(13, 110, 253, .08);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}