/* ============================================================
   ASTRONAUT — Cosmic Web Hosting Platform
   Main Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  --bg-deep:       #03010a;
  --bg-space:      #060318;
  --bg-nebula:     #0a0520;
  --bg-card:       rgba(10, 5, 32, 0.8);
  --bg-glass:      rgba(255, 255, 255, 0.04);

  --accent-blue:   #4fa3ff;
  --accent-violet: #a855f7;
  --accent-cyan:   #22d3ee;
  --accent-pink:   #f472b6;
  --accent-green:  #34d399;

  --glow-blue:     0 0 20px rgba(79, 163, 255, 0.5), 0 0 60px rgba(79, 163, 255, 0.2);
  --glow-violet:   0 0 20px rgba(168, 85, 247, 0.5), 0 0 60px rgba(168, 85, 247, 0.2);
  --glow-cyan:     0 0 20px rgba(34, 211, 238, 0.5), 0 0 60px rgba(34, 211, 238, 0.2);

  --text-primary:  #f0f4ff;
  --text-secondary:#a0aec0;
  --text-muted:    #4a5568;

  --border-glass:  1px solid rgba(255, 255, 255, 0.08);
  --border-accent: 1px solid rgba(79, 163, 255, 0.3);

  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     32px;

  --font-display:  'Noto Sans Georgian', 'Orbitron', sans-serif;
  --font-body:     'Noto Sans Georgian', 'Space Grotesk', sans-serif;
  --font-ui:       'Noto Sans Georgian', 'Inter', sans-serif;

  --transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Light Theme ───────────────────────────────────────── */
body.theme-light {
  --bg-deep:       #eef2ff;
  --bg-space:      #e8eeff;
  --bg-nebula:     #dde5ff;
  --bg-card:       rgba(255, 255, 255, 0.85);
  --bg-glass:      rgba(255, 255, 255, 0.7);

  --accent-blue:   #2563eb;
  --accent-violet: #7c3aed;
  --accent-cyan:   #0891b2;
  --accent-pink:   #db2777;
  --accent-green:  #059669;

  --glow-blue:     0 0 16px rgba(37, 99, 235, 0.25), 0 0 40px rgba(37, 99, 235, 0.1);
  --glow-violet:   0 0 16px rgba(124, 58, 237, 0.25), 0 0 40px rgba(124, 58, 237, 0.1);
  --glow-cyan:     0 0 16px rgba(8, 145, 178, 0.25), 0 0 40px rgba(8, 145, 178, 0.1);

  --text-primary:  #0f172a;
  --text-secondary:#334155;
  --text-muted:    #64748b;

  --border-glass:  1px solid rgba(0, 0, 0, 0.08);
  --border-accent: 1px solid rgba(37, 99, 235, 0.3);
}

/* Light theme overrides */
body.theme-light { background: var(--bg-deep); color: var(--text-primary); }

body.theme-light #navbar {
  background: rgba(238, 242, 255, 0.92);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.theme-light .nav-logo,
body.theme-light .nav-link { color: #0f172a; }

body.theme-light .dropdown-menu {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.1);
}

body.theme-light .service-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  color: var(--text-primary);
}

body.theme-light .service-card p,
body.theme-light .slide-subtitle,
body.theme-light .section-subtitle,
body.theme-light p { color: var(--text-secondary); }

body.theme-light .spec-tag {
  background: rgba(37,99,235,0.08);
  color: #1e40af;
  border-color: rgba(37,99,235,0.2);
}

body.theme-light .filter-tab {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
  color: var(--text-secondary);
}

body.theme-light .filter-tab.active {
  background: linear-gradient(135deg,rgba(37,99,235,0.15),rgba(124,58,237,0.15));
  border-color: rgba(37,99,235,0.4);
  color: #1e40af;
}

body.theme-light .stats-bar {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.07);
}

body.theme-light .stat-value { color: #1e40af; }
body.theme-light .stat-label { color: var(--text-muted); }

body.theme-light .section-label { color: #7c3aed; }

body.theme-light .plesk-browser {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

body.theme-light .plesk-topbar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
body.theme-light .plesk-sidebar { background: #1e293b; }
body.theme-light .plesk-content { background: #f8fafc; }
body.theme-light .plesk-stat { background: #fff; border: 1px solid #e2e8f0; }
body.theme-light .plesk-stat-val { color: #1e40af; }
body.theme-light .plesk-stat-label { color: #64748b; }
body.theme-light .plesk-domain { background: #fff; border: 1px solid #e2e8f0; }
body.theme-light .plesk-domain:hover { background: #f0f6ff; }

body.theme-light .features-grid .feature-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.07);
}

body.theme-light .testimonial-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.07);
}

body.theme-light .cta-banner {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}

body.theme-light footer {
  background: #0f172a;
  color: #94a3b8;
}

body.theme-light #page-home canvas { filter: brightness(0.7) saturate(0.5); }

/* ─── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-violet));
  border-radius: 3px;
}

/* ─── Intro / Warp Animation ────────────────────────────── */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#intro-overlay.fade-out {
  animation: introFadeOut 1s ease forwards;
}

@keyframes introFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

.warp-canvas { position: absolute; inset: 0; }

.intro-center {
  position: relative;
  z-index: 10;
  text-align: center;
  opacity: 0;
  animation: introCenterAppear 0.8s ease 1.5s forwards;
}

@keyframes introCenterAppear {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.intro-logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 40%, var(--accent-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  margin-bottom: 0.5rem;
}

.intro-tagline {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.intro-progress {
  margin-top: 2rem;
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.intro-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  border-radius: 1px;
  animation: progressFill 2s ease 1.8s forwards;
  width: 0%;
}

@keyframes progressFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

/* ─── Stars Background ──────────────────────────────────── */
#stars-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Page Wrapper ──────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#app.visible { opacity: 1; }

/* ─── Navigation ────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  border-bottom: 1px solid transparent;
}

#navbar.scrolled {
  background: rgba(3, 1, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 50%, var(--accent-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: var(--glow-blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-glass);
}

.nav-link .chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown Menu */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: rgba(6, 3, 24, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(-8px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.05);
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Small dropdown (Resources) */
.nav-dropdown-sm {
  min-width: 220px;
  padding: 1rem;
}
.dropdown-list { display: flex; flex-direction: column; gap: .15rem; }
.dropdown-list-item {
  padding: .55rem .85rem;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dropdown-list-item:hover {
  background: rgba(79,163,255,0.1);
  color: var(--text-primary);
}

.dropdown-header {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--border-glass);
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}

.dropdown-item:hover {
  background: var(--bg-glass);
  border-color: rgba(255,255,255,0.08);
}

.dropdown-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dropdown-item-text h4 {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.dropdown-item-text p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ─── Theme Toggle ───────────────────────────────────────── */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 3px;
  transition: all 0.35s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: rgba(79,163,255,0.5);
  background: rgba(79,163,255,0.08);
}

.theme-toggle-track {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #4fa3ff);
  box-shadow: 0 0 8px rgba(79,163,255,0.6);
  transition: left 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), background 0.3s;
}

.theme-icon-sun,
.theme-icon-moon {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  transition: opacity 0.25s;
  pointer-events: none;
}
.theme-icon-sun  { right: 6px; opacity: 0; }
.theme-icon-moon { left: 6px;  opacity: 1; }

/* Light state */
body.theme-light .theme-toggle {
  border-color: rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.08);
}
body.theme-light .theme-toggle-track {
  left: calc(100% - 23px);
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 10px rgba(251,191,36,0.7);
}
body.theme-light .theme-icon-sun  { opacity: 1; }
body.theme-light .theme-icon-moon { opacity: 0; }

/* Nav CTA */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1rem;
}

.btn-ghost {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: var(--border-glass);
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.15);
  background: var(--bg-glass);
}

.btn-primary {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(79, 163, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 30px rgba(79, 163, 255, 0.5);
}

/* Mobile Nav Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: var(--transition);
}

/* ─── Page System ────────────────────────────────────────── */
.page {
  display: none;
  min-height: 100vh;
  padding-top: 72px;
}

.page.active {
  display: block;
  animation: pageIn 0.4s ease;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Section ───────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Hero Slider */
.hero-slider {
  width: 100%;
  position: relative;
  height: calc(100vh - 72px);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  padding: 0 6vw;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.slide-content {
  max-width: 700px;
  z-index: 2;
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.875rem;
  background: rgba(79, 163, 255, 0.1);
  border: 1px solid rgba(79, 163, 255, 0.3);
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.slide-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

.slide-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.slide-title .highlight {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slide-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 560px;
}

.slide-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-hero {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
  transition: var(--transition);
  box-shadow: 0 8px 32px rgba(79, 163, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(79, 163, 255, 0.5);
}

.btn-hero-outline {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-md);
  border: var(--border-glass);
  cursor: pointer;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-hero-outline:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
}

/* Slider Indicators */
.slider-indicators {
  position: absolute;
  bottom: 2rem;
  left: 6vw;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: var(--transition);
}

.slider-dot.active {
  width: 32px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-violet));
}

/* Slider Right Visual */
.slide-visual {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: min(45vw, 600px);
  pointer-events: none;
}

/* Stats Bar */
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 1.25rem 6vw;
  background: rgba(3, 1, 10, 0.6);
  backdrop-filter: blur(20px);
  border-top: var(--border-glass);
  display: flex;
  align-items: center;
  gap: 3rem;
  overflow-x: auto;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  white-space: nowrap;
}

.stat-icon {
  font-size: 1.5rem;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.stat-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ─── Section Commons ────────────────────────────────────── */
.section {
  padding: 6rem 6vw;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-bottom: 1rem;
}

.section-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent-violet);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.7;
}

/* ─── Domain Search ─────────────────────────────────────── */
.domain-search-section { padding-bottom: 3rem; }

.domain-search-box {
  max-width: 780px;
  margin: 2.5rem auto 0;
}

.domain-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(79,163,255,0.3);
  border-radius: var(--radius-xl);
  padding: 6px 6px 6px 20px;
  gap: 0.75rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.domain-input-wrap:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(79,163,255,0.12), 0 0 40px rgba(79,163,255,0.1);
}

.domain-search-icon { font-size: 1.1rem; flex-shrink: 0; opacity: 0.6; }

.domain-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-primary);
  min-width: 0;
}
.domain-input::placeholder { color: var(--text-muted); }

.domain-search-btn {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  color: #fff;
  border: none;
  border-radius: calc(var(--radius-xl) - 4px);
  padding: 0.7rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.domain-search-btn:hover { opacity: 0.88; transform: scale(0.98); }
.domain-search-btn:active { transform: scale(0.95); }

/* TLD pills */
.domain-tld-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.tld-pill {
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.tld-pill:hover { border-color: rgba(79,163,255,0.4); color: var(--accent-blue); }
.tld-pill.active {
  background: rgba(79,163,255,0.15);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Results */
.domain-results {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.domain-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  animation: domainRowIn 0.35s cubic-bezier(0.34,1.2,0.64,1) both;
  gap: 1rem;
}
@keyframes domainRowIn {
  from { opacity:0; transform:translateY(10px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.domain-result-row.available {
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.05);
}
.domain-result-row.taken {
  border-color: rgba(244,114,182,0.2);
  background: rgba(244,114,182,0.03);
  opacity: 0.65;
}
.domain-result-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  flex: 1;
}
.domain-result-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.domain-result-status.ok  { color: #34d399; }
.domain-result-status.no  { color: #f472b6; }
.domain-result-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-blue);
  font-size: 0.95rem;
  white-space: nowrap;
}
.domain-result-btn {
  padding: 0.4rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(79,163,255,0.5);
  background: rgba(79,163,255,0.1);
  color: var(--accent-blue);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.domain-result-btn:hover { background: rgba(79,163,255,0.2); }
.domain-searching-anim {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.domain-searching-anim::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(79,163,255,0.3);
  border-top-color: var(--accent-blue);
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* TLD pricing table */
.domain-tld-table {
  max-width: 860px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tld-row {
  display: grid;
  grid-template-columns: 70px 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s;
  position: relative;
}
.tld-row:last-child { border-bottom: none; }
.tld-row:hover { background: rgba(79,163,255,0.04); }
.tld-row.tld-popular { background: rgba(79,163,255,0.05); }
.tld-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-blue);
}
.tld-desc { color: var(--text-secondary); font-size: 0.88rem; }
.tld-badge {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  white-space: nowrap;
}
.tld-price {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
  white-space: nowrap;
  text-align: right;
}
.tld-price span { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
.tld-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(79,163,255,0.4);
  background: transparent;
  color: var(--accent-blue);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tld-btn:hover {
  background: var(--accent-blue);
  color: #fff;
}

/* Light theme adjustments */
body.theme-light .domain-input-wrap {
  background: #fff;
  border-color: rgba(37,99,235,0.3);
}
body.theme-light .domain-input { color: #0f172a; }
body.theme-light .tld-pill { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
body.theme-light .tld-pill.active { background: rgba(37,99,235,0.1); border-color: #2563eb; color: #2563eb; }
body.theme-light .domain-tld-table { border-color: #e2e8f0; }
body.theme-light .tld-row { background: #fff; border-bottom-color: #f1f5f9; }
body.theme-light .tld-row:hover { background: #f8faff; }
body.theme-light .domain-result-row { background: #fff; border-color: #e2e8f0; }
body.theme-light .domain-result-name { color: #0f172a; }

/* ══════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════ */
.db-page { flex-direction:row; min-height:100vh; padding:0 !important; background:var(--bg-deep); margin-top:72px; }
.db-page.active { display:flex !important; }

/* Sidebar */
.db-sidebar {
  width: 260px; flex-shrink:0;
  background: rgba(6,3,24,0.98);
  border-right: 1px solid rgba(255,255,255,0.07);
  display:flex; flex-direction:column;
  height:calc(100vh - 72px); position:sticky; top:72px; overflow-y:auto;
  scrollbar-width:none;
}
.db-sidebar::-webkit-scrollbar { display:none; }
.db-sidebar-top { padding:1.25rem 1rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.db-logo { font-family:var(--font-display); font-weight:900; font-size:1rem; color:var(--text-primary); display:flex; align-items:center; gap:6px; cursor:pointer; margin-bottom:1rem; }
.db-logo-icon { color:var(--accent-blue); font-size:1.2rem; }
.db-user-card { display:flex; align-items:center; gap:0.65rem; padding:0.7rem 0.75rem; background:rgba(255,255,255,0.04); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.07); position:relative; }
.db-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; color:#fff; flex-shrink:0; }
.db-user-name { font-weight:700; font-size:0.85rem; color:var(--text-primary); }
.db-user-plan { font-size:0.72rem; color:var(--text-muted); }
.db-user-status { width:8px; height:8px; border-radius:50%; background:#34d399; position:absolute; right:10px; top:10px; animation:pulse-green 2s infinite; }

.db-nav { padding:1rem 0.75rem; flex:1; }
.db-nav-group-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); padding:0 0.4rem; margin-bottom:0.4rem; }
.db-nav-item {
  display:flex; align-items:center; gap:0.6rem; width:100%;
  padding:0.6rem 0.75rem; border-radius:var(--radius-md);
  border:none; background:none; color:var(--text-secondary);
  font-family:var(--font-body); font-size:0.875rem; font-weight:500;
  cursor:pointer; text-align:left; transition:all 0.18s; position:relative;
  margin-bottom:2px;
}
.db-nav-item:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.db-nav-item.active { background:rgba(79,163,255,0.12); color:#fff; border-left:3px solid var(--accent-blue); }
.db-nav-icon { font-size:1rem; flex-shrink:0; }
.db-nav-badge { margin-left:auto; background:var(--accent-blue); color:#fff; font-size:0.68rem; font-weight:800; border-radius:100px; padding:1px 7px; }
.db-nav-badge.warn { background:#fbbf24; color:#0f172a; }

.db-sidebar-footer { padding:1rem; border-top:1px solid rgba(255,255,255,0.06); }
.db-balance-card { background:rgba(79,163,255,0.07); border:1px solid rgba(79,163,255,0.18); border-radius:var(--radius-md); padding:0.85rem; margin-bottom:0.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }
.db-balance-label { font-size:0.72rem; color:var(--text-muted); width:100%; }
.db-balance-val { font-size:1.2rem; font-weight:900; color:var(--accent-blue); }
.db-topup-btn { font-size:0.75rem; padding:0.3rem 0.7rem; border-radius:100px; border:1px solid rgba(79,163,255,0.4); background:rgba(79,163,255,0.1); color:var(--accent-blue); cursor:pointer; font-weight:700; white-space:nowrap; }
.db-logout-btn { width:100%; padding:0.55rem; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.08); background:none; color:var(--text-muted); font-family:var(--font-body); font-size:0.82rem; cursor:pointer; transition:all 0.2s; }
.db-logout-btn:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }

/* Main */
.db-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.db-header { display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; height:60px; border-bottom:1px solid rgba(255,255,255,0.06); background:rgba(6,3,24,0.9); backdrop-filter:blur(12px); position:sticky; top:0; z-index:100; flex-shrink:0; }
.db-header-left { display:flex; align-items:center; gap:0.75rem; }
.db-mob-menu { display:none; background:none; border:none; color:var(--text-primary); font-size:1.2rem; cursor:pointer; }
.db-breadcrumb { font-weight:700; font-size:0.9rem; color:var(--text-primary); }
.db-header-right { display:flex; align-items:center; gap:1rem; }
.db-header-status { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:#34d399; }
.db-status-dot { width:7px; height:7px; border-radius:50%; background:#34d399; animation:pulse-green 2s infinite; }
.db-notif-btn { background:none; border:none; font-size:1rem; cursor:pointer; position:relative; }
.db-notif-badge { position:absolute; top:-4px; right:-6px; background:#f472b6; color:#fff; font-size:0.62rem; font-weight:800; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.db-header-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; color:#fff; }

/* Panels */
.db-panel { display:none; padding:1.5rem; overflow-y:auto; flex:1; }
.db-panel.active { display:block; }

/* Overview */
.db-welcome { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.db-welcome-title { font-size:1.4rem; font-weight:800; color:var(--text-primary); }
.db-welcome-sub { font-size:0.85rem; color:var(--text-muted); margin-top:0.2rem; }
.db-quick-actions { display:flex; gap:0.6rem; }
.db-qa-btn { padding:0.55rem 1.1rem; border-radius:100px; background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet)); color:#fff; border:none; font-family:var(--font-ui); font-size:0.82rem; font-weight:700; cursor:pointer; transition:opacity 0.2s; }
.db-qa-btn:hover { opacity:0.85; }
.db-qa-btn.outline { background:none; border:1px solid rgba(79,163,255,0.4); color:var(--accent-blue); }

.db-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
@media(max-width:900px){ .db-stats-row { grid-template-columns:repeat(2,1fr); } }
.db-stat-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:1rem; display:flex; align-items:center; gap:0.85rem; }
.db-stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.db-stat-val { font-weight:900; font-size:1.1rem; color:var(--text-primary); }
.db-stat-lbl { font-size:0.75rem; color:var(--text-muted); margin-top:1px; }

.db-two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:900px){ .db-two-col { grid-template-columns:1fr; } }
.db-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:1.25rem; }
.db-card-title { font-weight:700; font-size:0.9rem; color:var(--text-primary); margin-bottom:1rem; }

/* Server mini list */
.db-server-mini { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.05); flex-wrap:wrap; }
.db-server-mini:last-child { border-bottom:none; }
.db-sm-dot { width:8px; height:8px; border-radius:50%; background:#34d399; animation:pulse-green 2s infinite; flex-shrink:0; }
.db-sm-info { flex:1; min-width:120px; }
.db-sm-name { font-size:0.85rem; font-weight:700; color:var(--text-primary); }
.db-sm-spec { font-size:0.72rem; color:var(--text-muted); }
.db-sm-stat { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; color:var(--text-muted); }
.db-mini-bar { width:80px; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.db-mini-fill { height:100%; border-radius:3px; background:var(--accent-blue); }
.db-sm-btn { padding:0.3rem 0.7rem; border-radius:100px; border:1px solid rgba(79,163,255,0.3); background:none; color:var(--accent-blue); font-size:0.75rem; font-weight:600; cursor:pointer; }

/* Invoice mini list */
.db-inv-mini { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.db-inv-mini:last-child { border-bottom:none; }
.db-inv-name { flex:1; font-size:0.85rem; color:var(--text-primary); }
.db-inv-date { font-size:0.75rem; color:var(--text-muted); }
.db-inv-date.warn { color:#fbbf24; }
.db-inv-amount { font-weight:700; font-size:0.85rem; color:var(--accent-blue); min-width:35px; text-align:right; }

/* Activity */
.db-act-item { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.db-act-item:last-child { border-bottom:none; }
.db-act-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0; }
.db-act-icon.ok   { background:rgba(52,211,153,0.15); color:#34d399; }
.db-act-icon.warn { background:rgba(251,191,36,0.15); color:#fbbf24; }
.db-act-body { flex:1; }
.db-act-body b { display:block; font-size:0.85rem; color:var(--text-primary); font-weight:600; }
.db-act-body span { font-size:0.75rem; color:var(--text-muted); }
.db-act-tag { font-size:0.72rem; font-weight:700; padding:0.18rem 0.6rem; border-radius:100px; white-space:nowrap; }
.db-act-tag.ok   { background:rgba(52,211,153,0.12); color:#34d399; }
.db-act-tag.warn { background:rgba(251,191,36,0.12); color:#fbbf24; }

/* Panel header */
.db-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.db-panel-header h2 { font-size:1.2rem; font-weight:800; color:var(--text-primary); }
.db-btn-primary { padding:0.6rem 1.2rem; border-radius:100px; background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet)); color:#fff; border:none; font-family:var(--font-ui); font-size:0.85rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:opacity 0.2s; }
.db-btn-primary:hover { opacity:0.85; }
.db-btn-sm { padding:0.32rem 0.75rem; border-radius:100px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:var(--text-secondary); font-size:0.78rem; font-weight:600; cursor:pointer; font-family:var(--font-ui); transition:all 0.18s; white-space:nowrap; }
.db-btn-sm:hover { background:rgba(255,255,255,0.1); color:var(--text-primary); border-color:rgba(255,255,255,0.2); }
.db-btn-sm.danger { border-color:rgba(244,114,182,0.3); color:#f472b6; }
.db-btn-sm.danger:hover { background:rgba(244,114,182,0.1); }
.db-btn-sm.outline { border-color:rgba(79,163,255,0.3); color:var(--accent-blue); }

/* VPS Cards */
.db-vps-list { display:flex; flex-direction:column; gap:1.25rem; }
.db-vps-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-xl); padding:1.25rem; }
.db-vps-top { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.db-vps-status { display:flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700; }
.db-vps-status.running { color:#34d399; }
.db-vps-status.running span { width:8px; height:8px; border-radius:50%; background:#34d399; display:inline-block; animation:pulse-green 2s infinite; }
.db-vps-status.stopped { color:var(--text-muted); }
.db-vps-id { font-family:var(--font-display); font-size:0.8rem; color:var(--text-muted); flex:1; }
.db-vps-actions { display:flex; gap:0.4rem; margin-left:auto; }
.db-vps-act-btn { width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--text-secondary); cursor:pointer; font-size:0.9rem; transition:all 0.18s; }
.db-vps-act-btn:hover { background:rgba(255,255,255,0.1); color:var(--text-primary); }
.db-vps-act-btn.warn:hover { border-color:rgba(251,191,36,0.4); color:#fbbf24; background:rgba(251,191,36,0.08); }
.db-vps-act-btn.danger:hover { border-color:rgba(244,114,182,0.4); color:#f472b6; background:rgba(244,114,182,0.08); }
.db-vps-name { font-weight:700; font-size:1rem; color:var(--text-primary); margin-bottom:0.6rem; }
.db-vps-spec-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.db-vps-spec-row span { font-size:0.78rem; color:var(--text-muted); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:6px; padding:0.2rem 0.6rem; }
.db-vps-meters { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1rem; }
@media(max-width:900px){ .db-vps-meters { grid-template-columns:repeat(2,1fr); } }
.db-meter-label { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; }
.db-meter-bar { height:6px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.db-meter-bar.large { height:10px; border-radius:5px; }
.db-meter-fill { height:100%; border-radius:3px; transition:width 0.4s; }

/* VPS tabs */
.db-vps-footer { border-top:1px solid rgba(255,255,255,0.06); margin-top:1rem; padding-top:1rem; }
.db-vps-tabs { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.db-vtab { padding:0.4rem 0.9rem; border-radius:100px; border:1px solid rgba(255,255,255,0.08); background:none; color:var(--text-muted); font-size:0.78rem; font-weight:600; cursor:pointer; font-family:var(--font-ui); transition:all 0.18s; }
.db-vtab:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.db-vtab.active { background:rgba(79,163,255,0.12); border-color:rgba(79,163,255,0.4); color:var(--accent-blue); }
.db-vtab-panel { display:none; }
.db-vtab-panel.active { display:block; }

/* Terminal */
.db-terminal { background:#0a0a0f; border-radius:var(--radius-md); overflow:hidden; border:1px solid rgba(255,255,255,0.08); font-family:'Courier New', monospace; }
.db-term-bar { display:flex; align-items:center; gap:6px; padding:0.5rem 0.8rem; background:#111118; border-bottom:1px solid rgba(255,255,255,0.07); }
.db-term-dot { width:10px; height:10px; border-radius:50%; }
.db-term-dot.red { background:#ff5f57; }
.db-term-dot.yellow { background:#ffd200; }
.db-term-dot.green { background:#27c840; }
.db-term-title { margin-left:0.5rem; font-size:0.75rem; color:rgba(255,255,255,0.4); font-family:var(--font-ui); }
.db-term-output { padding:0.75rem 1rem; min-height:100px; max-height:180px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
.db-term-line { font-size:0.82rem; color:#d4d4d4; line-height:1.6; white-space:pre-wrap; word-break:break-all; }
.db-term-line.dim { color:rgba(255,255,255,0.3); }
.db-term-line.cmd { color:#4fa3ff; }
.db-term-line.err { color:#f472b6; }
.db-term-line.ok  { color:#34d399; }
.db-term-input-row { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; border-top:1px solid rgba(255,255,255,0.05); }
.db-term-prompt { font-size:0.82rem; color:#34d399; white-space:nowrap; }
.db-term-input { flex:1; background:none; border:none; outline:none; font-family:'Courier New',monospace; font-size:0.82rem; color:#f0f0f0; caret-color:#4fa3ff; }

/* Firewall table */
.db-fw-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; font-weight:700; font-size:0.88rem; color:var(--text-primary); }
.db-fw-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
.db-fw-table th { text-align:left; padding:0.6rem 0.75rem; color:var(--text-muted); font-size:0.75rem; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.07); }
.db-fw-table td { padding:0.65rem 0.75rem; color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,0.04); }
.db-fw-table tr:last-child td { border-bottom:none; }
.db-fw-table tr:hover td { background:rgba(255,255,255,0.02); }
.db-fw-tag { font-size:0.72rem; font-weight:700; padding:0.18rem 0.6rem; border-radius:100px; }
.db-fw-tag.allow { background:rgba(52,211,153,0.12); color:#34d399; }
.db-fw-tag.deny  { background:rgba(244,114,182,0.12); color:#f472b6; }
.db-fw-tag.warn  { background:rgba(251,191,36,0.12);  color:#fbbf24; }
.db-fw-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.85rem; padding:0.2rem 0.4rem; border-radius:4px; }
.db-fw-del:hover { background:rgba(255,255,255,0.07); color:var(--text-primary); }

/* Backup list */
.db-backup-list { display:flex; flex-direction:column; gap:0.5rem; }
.db-backup-row { display:flex; align-items:center; justify-content:space-between; padding:0.75rem; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-md); gap:1rem; }
.db-backup-row b { display:block; font-size:0.85rem; color:var(--text-primary); font-family:monospace; }
.db-backup-row span { font-size:0.75rem; color:var(--text-muted); }
.db-backup-actions { display:flex; gap:0.4rem; flex-shrink:0; }

/* Upgrade grid */
.db-upgrade-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.75rem; }
.db-upgrade-plan { padding:1rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:0.35rem; }
.db-upgrade-plan.current { border-color:rgba(79,163,255,0.35); background:rgba(79,163,255,0.07); }
.db-upgrade-plan.down { border-color:rgba(244,114,182,0.2); }
.db-up-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.db-up-name { font-weight:800; color:var(--text-primary); }
.db-up-spec { font-size:0.75rem; color:var(--text-muted); }
.db-up-price { font-weight:800; color:var(--accent-blue); margin-top:0.25rem; }
.db-upgrade-plan.current .db-up-price::after { content:' ✓'; color:#34d399; }

/* Shared tabs */
.db-shared-tabs { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.db-stab { padding:0.45rem 0.9rem; border-radius:100px; border:1px solid rgba(255,255,255,0.08); background:none; color:var(--text-muted); font-size:0.82rem; font-weight:600; cursor:pointer; font-family:var(--font-ui); transition:all 0.18s; }
.db-stab:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.db-stab.active { background:rgba(79,163,255,0.12); border-color:rgba(79,163,255,0.4); color:var(--accent-blue); }
.db-stab-panel { display:none; }
.db-stab-panel.active { display:block; }

/* File Manager */
.db-fm { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); overflow:hidden; }
.db-fm-toolbar { display:flex; align-items:center; gap:0.4rem; padding:0.75rem 1rem; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; }
.db-fm-path { margin-left:auto; font-family:monospace; font-size:0.8rem; color:var(--text-muted); background:rgba(255,255,255,0.04); padding:0.25rem 0.75rem; border-radius:100px; border:1px solid rgba(255,255,255,0.08); }
.db-fm-body { display:grid; grid-template-columns:180px 1fr; }
.db-fm-tree { border-right:1px solid rgba(255,255,255,0.06); padding:0.75rem 0; }
.db-fm-tree-item { padding:0.45rem 1rem; font-size:0.82rem; color:var(--text-muted); cursor:pointer; transition:background 0.15s; }
.db-fm-tree-item:hover { background:rgba(255,255,255,0.04); }
.db-fm-tree-item.active { background:rgba(79,163,255,0.1); color:var(--accent-blue); }
.db-fm-tree-item.sub { padding-left:2rem; font-size:0.78rem; }
.db-fm-files { padding:0; overflow-x:auto; }
.db-fm-header-row { display:grid; grid-template-columns:2fr 80px 90px 80px 70px; gap:0; padding:0.5rem 1rem; font-size:0.72rem; color:var(--text-muted); font-weight:600; border-bottom:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); }
.db-fm-row { display:grid; grid-template-columns:2fr 80px 90px 80px 70px; align-items:center; padding:0.55rem 1rem; font-size:0.82rem; color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,0.04); transition:background 0.15s; cursor:pointer; }
.db-fm-row:hover { background:rgba(255,255,255,0.03); }
.db-fm-row:last-child { border-bottom:none; }
.db-fm-row.folder { color:var(--text-primary); }
.db-fm-act { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:0.1rem 0.3rem; border-radius:4px; font-size:0.8rem; }
.db-fm-act:hover { background:rgba(255,255,255,0.08); color:var(--text-primary); }

/* WordPress card */
.db-wp-card { background:rgba(33,117,204,0.07); border:1px solid rgba(33,117,204,0.2); border-radius:var(--radius-xl); padding:1.5rem; }
.db-wp-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.db-wp-logo { font-size:2.5rem; }
.db-wp-site { font-weight:800; font-size:1.05rem; color:var(--text-primary); }
.db-wp-ver { font-size:0.78rem; color:var(--text-muted); }
.db-wp-status { margin-left:auto; font-size:0.78rem; font-weight:700; }
.db-wp-status.ok { color:#34d399; }
.db-wp-actions { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.db-wp-btn { padding:0.5rem 0.9rem; border-radius:100px; border:1px solid rgba(33,117,204,0.3); background:rgba(33,117,204,0.1); color:#4a9edd; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:var(--font-ui); transition:all 0.18s; }
.db-wp-btn:hover { background:rgba(33,117,204,0.2); }
.db-wp-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; }
.db-wp-meta-item { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-md); padding:0.75rem; }
.db-wp-meta-label { font-size:0.72rem; color:var(--text-muted); margin-bottom:0.3rem; }
.db-wp-meta-val { font-weight:700; font-size:0.9rem; color:var(--text-primary); }
.ok-text { color:#34d399 !important; }
.warn-text { color:#fbbf24; font-size:0.75rem; }

/* SSL */
.db-ssl-list { display:flex; flex-direction:column; gap:0.6rem; }
.db-ssl-row { display:flex; align-items:center; gap:1rem; padding:0.85rem 1rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-md); flex-wrap:wrap; }
.db-ssl-domain { font-weight:700; font-size:0.9rem; color:var(--text-primary); }
.db-ssl-issuer { font-size:0.75rem; color:var(--text-muted); }
.db-ssl-info { flex:1; }

/* Stats charts */
.db-stats-charts { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:900px){ .db-stats-charts { grid-template-columns:1fr; } }
.db-resource-stats { }

/* Domain list */
.db-domain-list { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.5rem; }
.db-domain-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); flex-wrap:wrap; transition:border-color 0.2s; }
.db-domain-row:hover { border-color:rgba(79,163,255,0.2); }
.db-dom-name { font-weight:800; font-size:0.95rem; color:var(--text-primary); min-width:160px; }
.db-dom-primary { font-size:0.7rem; font-weight:700; background:rgba(79,163,255,0.12); color:var(--accent-blue); border-radius:100px; padding:1px 7px; margin-left:6px; }
.db-dom-exp { font-size:0.8rem; color:var(--text-muted); }
.db-dom-exp.warn { color:#fbbf24; }
.db-dom-ns { font-size:0.78rem; color:var(--text-muted); font-family:monospace; flex:1; }
.db-dom-actions { display:flex; gap:0.4rem; margin-left:auto; }

/* DNS / NS editors */
.db-dns-editor { background:rgba(255,255,255,0.03); border:1px solid rgba(79,163,255,0.2); border-radius:var(--radius-xl); padding:1.25rem; margin-top:1rem; animation:domainRowIn 0.3s ease both; }
.db-dns-editor-header { display:flex; align-items:center; justify-content:space-between; }
.db-dns-editor-header h3 { font-size:0.95rem; font-weight:800; color:var(--text-primary); }
.db-ns-form { display:flex; flex-direction:column; gap:0.75rem; max-width:480px; }
.db-ns-row { display:grid; grid-template-columns:80px 1fr; align-items:center; gap:0.75rem; }
.db-ns-row label { font-size:0.82rem; color:var(--text-secondary); font-weight:600; }
.db-ns-input { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-md); padding:0.55rem 0.9rem; font-family:var(--font-body); font-size:0.85rem; color:var(--text-primary); outline:none; transition:border-color 0.2s; width:100%; }
.db-ns-input:focus { border-color:rgba(79,163,255,0.5); }

/* Invoices */
.db-invoice-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1rem; }
@media(max-width:900px){ .db-invoice-summary { grid-template-columns:repeat(2,1fr); } }
.db-inv-sum-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:1rem; }
.db-inv-sum-label { font-size:0.75rem; color:var(--text-muted); margin-bottom:0.4rem; }
.db-inv-sum-val { font-size:1.1rem; font-weight:800; color:var(--text-primary); }
.db-inv-sum-val.green { color:#34d399; }

/* Billing */
.db-topup-amounts { display:flex; gap:0.5rem; flex-wrap:wrap; }
.db-topup-chip { padding:0.5rem 1.1rem; border-radius:100px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--text-secondary); font-weight:700; cursor:pointer; font-size:0.9rem; transition:all 0.18s; }
.db-topup-chip:hover,.db-topup-chip.active { background:rgba(79,163,255,0.15); border-color:var(--accent-blue); color:var(--accent-blue); }
.db-saved-card { display:flex; align-items:center; gap:0.75rem; padding:0.85rem; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-md); margin-bottom:0.75rem; }
.db-card-icon { font-size:1.5rem; }
.db-card-exp { font-size:0.75rem; color:var(--text-muted); }
.db-add-card-btn { width:100%; padding:0.65rem; border-radius:var(--radius-md); border:1px dashed rgba(255,255,255,0.15); background:none; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); transition:all 0.2s; }
.db-add-card-btn:hover { border-color:rgba(79,163,255,0.4); color:var(--accent-blue); }

/* Settings */
.db-settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; }
.db-form-group { margin-bottom:0.9rem; }
.db-form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-muted); margin-bottom:0.35rem; }
.db-divider { height:1px; background:rgba(255,255,255,0.07); margin:1rem 0; }
.db-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:0.65rem 0; border-bottom:1px solid rgba(255,255,255,0.05); gap:1rem; }
.db-toggle-row:last-child { border-bottom:none; }
.db-toggle-label { font-size:0.85rem; color:var(--text-primary); font-weight:600; }
.db-toggle-sub { font-size:0.74rem; color:var(--text-muted); }
.db-toggle-switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.db-toggle-switch input { opacity:0; width:0; height:0; }
.db-ts-track { position:absolute; inset:0; border-radius:100px; background:rgba(255,255,255,0.12); transition:background 0.25s; cursor:pointer; }
.db-ts-track::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform 0.25s; }
.db-toggle-switch input:checked + .db-ts-track { background:var(--accent-blue); }
.db-toggle-switch input:checked + .db-ts-track::before { transform:translateX(18px); }

/* Support */
.db-support-channels { display:flex; flex-direction:column; gap:0.75rem; }
.db-supp-ch { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-md); }
.db-supp-ch span { font-size:1.4rem; }
.db-supp-ch b { display:block; font-size:0.85rem; color:var(--text-primary); }
.db-supp-ch p { font-size:0.75rem; color:var(--text-muted); margin:0; }
.db-supp-ch > :last-child { margin-left:auto; }
.db-ticket-list { display:flex; flex-direction:column; gap:0.6rem; }
.db-ticket-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-md); flex-wrap:wrap; }
.db-ticket-info b { display:block; font-size:0.85rem; color:var(--text-primary); }
.db-ticket-info span { font-size:0.75rem; color:var(--text-muted); }
.db-kb-list { display:flex; flex-direction:column; }
.db-kb-item { padding:0.65rem 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.85rem; color:var(--text-secondary); cursor:pointer; transition:color 0.18s; }
.db-kb-item:hover { color:var(--accent-blue); }
.db-kb-item:last-child { border-bottom:none; color:var(--accent-blue); }

/* Toast */
.db-toast { position:fixed; bottom:5rem; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(10,10,24,0.95); border:1px solid rgba(79,163,255,0.3); border-radius:100px; padding:0.65rem 1.4rem; font-size:0.88rem; color:var(--text-primary); opacity:0; pointer-events:none; transition:all 0.3s; z-index:99999; white-space:nowrap; box-shadow:0 4px 24px rgba(0,0,0,0.5); }
.db-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Light theme dashboard */
body.theme-light .db-sidebar { background:rgba(248,250,252,0.98); border-right-color:#e2e8f0; }
body.theme-light .db-nav-item { color:#475569; }
body.theme-light .db-nav-item:hover { background:#f1f5f9; color:#0f172a; }
body.theme-light .db-nav-item.active { background:#eff6ff; color:#2563eb; border-left-color:#2563eb; }
body.theme-light .db-header { background:rgba(255,255,255,0.95); border-bottom-color:#e2e8f0; }
body.theme-light .db-card,.body.theme-light .db-stat-card,.body.theme-light .db-vps-card { background:#fff; border-color:#e2e8f0; }
body.theme-light .db-stat-card,.body.theme-light .db-vps-card,.body.theme-light .db-domain-row,.body.theme-light .db-inv-sum-card { background:#fff; border-color:#e2e8f0; }
body.theme-light .db-fw-table th,.body.theme-light .db-fw-table td { border-color:#f1f5f9; }
body.theme-light .db-ns-input { background:#fff; border-color:#e2e8f0; color:#0f172a; }
body.theme-light .db-term-input { color:#d4d4d4; }
body.theme-light .db-page { background:#f8fafc; }
body.theme-light .db-sidebar-footer { border-top-color:#e2e8f0; }
body.theme-light .db-sidebar-top { border-bottom-color:#e2e8f0; }
body.theme-light .db-user-name,.body.theme-light .db-welcome-title { color:#0f172a; }

/* ─── Status Badge (Navbar) ─────────────────────────────── */
.status-badge-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #34d399;
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 100px;
  padding: 2px 8px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s;
  vertical-align: middle;
  white-space: nowrap;
}
.status-badge-nav:hover { background: rgba(52,211,153,0.2); }
.status-dot-nav {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: pulse-green 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}

/* ─── Status Page ────────────────────────────────────────── */
.status-page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.status-hero { text-align: center; padding: 4rem 0 3rem; position: relative; }
.status-hero-orb {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 500px; height: 300px;
  background: radial-gradient(ellipse, rgba(52,211,153,0.12), transparent);
  pointer-events: none;
}
.status-overall {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.35);
  border-radius: 100px; padding: 0.65rem 1.4rem;
  font-weight: 700; font-size: 1rem; color: #34d399;
  margin: 1.2rem auto;
}
.status-overall-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #34d399;
  animation: pulse-green 2s infinite;
}
.status-updated { color: var(--text-muted); font-size: 0.82rem; }

.status-grid { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 3rem; }
.status-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.status-group-title {
  padding: 0.9rem 1.2rem;
  font-weight: 700; font-size: 0.85rem; color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.status-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 1rem;
}
.status-item:last-child { border-bottom: none; }
.status-item-left { display: flex; align-items: center; gap: 10px; }
.status-item-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  flex-shrink: 0; animation: pulse-green 3s infinite;
}
.status-item-dot.degraded { background: #fbbf24; animation: pulse-yellow 3s infinite; }
.status-item-dot.down     { background: #f472b6; animation: none; }
@keyframes pulse-yellow {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(251,191,36,0); }
}
.status-item-name { font-size: 0.9rem; color: var(--text-primary); }
.status-item-right { display: flex; align-items: center; gap: 1rem; }
.status-item-label {
  font-size: 0.75rem; font-weight: 700; border-radius: 100px;
  padding: 0.2rem 0.7rem;
}
.status-item-label.operational { background: rgba(52,211,153,0.12); color: #34d399; }
.status-item-label.degraded    { background: rgba(251,191,36,0.12); color: #fbbf24; }
.status-item-label.down        { background: rgba(244,114,182,0.12); color: #f472b6; }
.status-uptime { font-size: 0.8rem; color: var(--text-muted); min-width: 45px; text-align: right; }

/* Uptime bars */
.status-history-section { margin-bottom: 3rem; }
.status-history-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.2rem; }
.status-history-grid { display: flex; flex-direction: column; gap: 1rem; }
.uptime-row { display: grid; grid-template-columns: 160px 1fr 48px; align-items: center; gap: 1rem; }
.uptime-name { font-size: 0.85rem; color: var(--text-secondary); }
.uptime-bars { display: flex; gap: 2px; height: 24px; }
.uptime-bar {
  flex: 1; border-radius: 2px; background: rgba(52,211,153,0.7);
  transition: opacity 0.2s;
}
.uptime-bar:hover { opacity: 0.8; }
.uptime-bar.partial { background: rgba(251,191,36,0.7); }
.uptime-bar.down    { background: rgba(244,114,182,0.6); }
.uptime-pct { font-size: 0.82rem; font-weight: 700; color: #34d399; text-align: right; }

/* Incidents */
.status-incidents { margin-bottom: 3rem; }
.incident-item {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 1rem; padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  align-items: start;
}
.incident-date { font-size: 0.78rem; color: var(--text-muted); padding-top: 3px; }
.incident-body strong { font-size: 0.9rem; color: var(--text-primary); display: block; margin-bottom: 0.3rem; }
.incident-body p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.incident-tag { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 100px; white-space: nowrap; }
.incident-tag.resolved { background: rgba(52,211,153,0.12); color: #34d399; }
.no-incidents { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 1rem; }

/* ─── Pricing Calculator ─────────────────────────────────── */
.calc-section { padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.calc-card {
  display: grid; grid-template-columns: 1fr 320px; gap: 2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(79,163,255,0.15);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-top: 2rem;
}
@media (max-width: 768px) { .calc-card { grid-template-columns: 1fr; } }
.calc-row { margin-bottom: 1.6rem; }
.calc-label-wrap { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.calc-label { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.calc-val { font-weight: 800; font-size: 0.9rem; color: var(--accent-blue); }
.calc-slider {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: rgba(255,255,255,0.1); border-radius: 2px; outline: none;
  transition: background 0.3s;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-blue);
  box-shadow: 0 0 10px rgba(79,163,255,0.6);
  cursor: pointer; transition: transform 0.15s;
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.calc-marks {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;
}
.calc-result {
  background: rgba(79,163,255,0.06);
  border: 1px solid rgba(79,163,255,0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.calc-specs-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.calc-spec-chip {
  background: rgba(79,163,255,0.12); color: var(--accent-blue);
  border: 1px solid rgba(79,163,255,0.25);
  border-radius: 100px; padding: 0.3rem 0.8rem;
  font-size: 0.8rem; font-weight: 700;
}
.calc-price-display { text-align: center; }
.calc-price-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.calc-price-val { font-size: 3.5rem; font-weight: 900; color: var(--text-primary); line-height: 1; }
.calc-currency { font-size: 1.8rem; vertical-align: super; color: var(--accent-blue); }
.calc-price-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }
.calc-order-btn {
  width: 100%; padding: 0.85rem;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  color: #fff; border: none; border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s, transform 0.2s;
}
.calc-order-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* ─── Speed Test ─────────────────────────────────────────── */
.speed-test-section { }
.speed-test-card {
  max-width: 860px; margin: 2.5rem auto 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: grid; grid-template-columns: 1fr 240px 1fr;
  gap: 2rem; align-items: center;
}
@media (max-width: 768px) { .speed-test-card { grid-template-columns: 1fr; } }
.speed-locations { display: flex; flex-direction: column; gap: 0.7rem; }
.speed-loc {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.9rem; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); cursor: pointer;
  transition: all 0.2s;
}
.speed-loc:hover { border-color: rgba(79,163,255,0.3); background: rgba(79,163,255,0.05); }
.speed-loc.active { border-color: rgba(79,163,255,0.4); background: rgba(79,163,255,0.08); }
.speed-loc-flag { font-size: 1.2rem; }
.speed-loc-name { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.speed-loc-ping { font-size: 0.85rem; font-weight: 800; color: var(--accent-blue); min-width: 45px; text-align: right; }
.speed-gauge-wrap { position: relative; text-align: center; }
.speed-gauge-val {
  position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);
  font-size: 2rem; font-weight: 900; color: var(--text-primary);
}
.speed-gauge-unit { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.speed-gauge-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; margin-top: 0.2rem; }
.speed-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.speed-test-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(135deg, rgba(79,163,255,0.2), rgba(168,85,247,0.2));
  border: 1px solid rgba(79,163,255,0.4);
  color: var(--text-primary); border-radius: 100px;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: all 0.25s;
}
.speed-test-btn:hover { background: linear-gradient(135deg, rgba(79,163,255,0.35), rgba(168,85,247,0.35)); transform: scale(1.03); }
.speed-test-btn.running { animation: pulse-btn 1s infinite; }
@keyframes pulse-btn { 0%,100%{opacity:1} 50%{opacity:0.6} }
.speed-btn-icon { font-size: 1rem; }
.speed-quality { font-size: 0.85rem; font-weight: 700; padding: 0.35rem 1rem; border-radius: 100px; min-height: 28px; }
.speed-quality.excellent { background: rgba(52,211,153,0.15); color: #34d399; }
.speed-quality.good      { background: rgba(79,163,255,0.15); color: var(--accent-blue); }
.speed-quality.fair      { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* ─── AstroBot ───────────────────────────────────────────── */
#astrobot-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.astrobot-fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border: none; cursor: pointer;
  box-shadow: 0 4px 24px rgba(79,163,255,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; position: relative;
  transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1);
}
.astrobot-fab:hover { transform: scale(1.1); }
.astrobot-fab-badge {
  position: absolute; top: -2px; right: -2px;
  background: #f472b6; color: #fff;
  font-size: 0.68rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-deep);
  transition: opacity 0.2s;
}
.astrobot-fab-badge.hidden { opacity: 0; pointer-events: none; }
#astrobot-window {
  width: 340px;
  background: rgba(6,3,24,0.97);
  border: 1px solid rgba(79,163,255,0.25);
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(79,163,255,0.08);
  display: flex; flex-direction: column; overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1);
  transform-origin: bottom right;
}
#astrobot-window.astrobot-closed { transform: scale(0.6) translateY(20px); opacity: 0; pointer-events: none; }
.astrobot-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, rgba(79,163,255,0.12), rgba(168,85,247,0.08));
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.astrobot-header-left { display: flex; align-items: center; gap: 0.6rem; }
.astrobot-avatar { font-size: 1.6rem; }
.astrobot-name { font-weight: 800; font-size: 0.9rem; color: var(--text-primary); }
.astrobot-status { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: #34d399; }
.astrobot-online-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: pulse-green 2s infinite; }
.astrobot-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 6px; transition: all 0.2s;
}
.astrobot-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.astrobot-messages {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column;
  gap: 0.65rem; max-height: 280px; min-height: 120px;
  scrollbar-width: thin; scrollbar-color: rgba(79,163,255,0.3) transparent;
}
.astrobot-msg {
  display: flex; max-width: 88%;
}
.astrobot-msg.bot { align-self: flex-start; }
.astrobot-msg.user { align-self: flex-end; }
.astrobot-msg span {
  padding: 0.6rem 0.85rem; border-radius: 14px;
  font-size: 0.84rem; line-height: 1.45; color: var(--text-primary);
}
.astrobot-msg.bot span { background: rgba(255,255,255,0.07); border-radius: 4px 14px 14px 14px; }
.astrobot-msg.user span { background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet)); border-radius: 14px 4px 14px 14px; color: #fff; }
.astrobot-typing span { display: flex; align-items: center; gap: 4px; padding: 0.65rem 1rem; }
.astrobot-typing span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite 0s; }
.astrobot-typing span::after  { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite 0.3s; display: inline-block; }
@keyframes typing { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.astrobot-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.8rem 0.6rem; }
.astrobot-chip {
  font-size: 0.75rem; padding: 0.3rem 0.75rem; border-radius: 100px;
  border: 1px solid rgba(79,163,255,0.3); background: rgba(79,163,255,0.07);
  color: var(--accent-blue); cursor: pointer; font-family: var(--font-ui); font-weight: 600;
  transition: all 0.2s;
}
.astrobot-chip:hover { background: rgba(79,163,255,0.2); }
.astrobot-input-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.8rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.astrobot-input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px; padding: 0.5rem 0.9rem;
  font-family: var(--font-body); font-size: 0.83rem; color: var(--text-primary); outline: none;
  transition: border-color 0.2s;
}
.astrobot-input:focus { border-color: rgba(79,163,255,0.4); }
.astrobot-input::placeholder { color: var(--text-muted); }
.astrobot-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border: none; color: #fff; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.astrobot-send:hover { transform: scale(1.1); }

/* Light theme */
body.theme-light #astrobot-window { background: rgba(255,255,255,0.98); border-color: rgba(37,99,235,0.2); }
body.theme-light .astrobot-msg.bot span { background: #f1f5f9; color: #0f172a; }
body.theme-light .astrobot-input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
body.theme-light .status-group { background: #fff; border-color: #e2e8f0; }
body.theme-light .status-item { border-bottom-color: #f1f5f9; }
body.theme-light .calc-card { background: #fff; border-color: #e2e8f0; }
body.theme-light .calc-result { background: #f0f6ff; border-color: rgba(37,99,235,0.2); }
body.theme-light .calc-slider { background: #e2e8f0; }
body.theme-light .speed-test-card { background: #fff; border-color: #e2e8f0; }
body.theme-light .speed-loc { background: #f8fafc; border-color: #e2e8f0; }
body.theme-light .speed-loc.active { background: #eff6ff; border-color: #2563eb; }

/* ─── Service Filter Tabs ────────────────────────────────── */
.service-filter {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-bottom: 0;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.filter-tab:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: var(--text-primary);
}

.filter-tab.active {
  background: linear-gradient(135deg, rgba(79,163,255,0.18), rgba(168,85,247,0.18));
  border-color: rgba(79,163,255,0.45);
  color: #fff;
  box-shadow: 0 0 20px rgba(79,163,255,0.18), 0 4px 16px rgba(0,0,0,0.3);
}

.filter-tab .ftab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ─── Services Grid ──────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* Card wrapper — holds card + astronaut */
.card-wrapper {
  position: relative;
}

@keyframes cardEnter {
  from { opacity: 0; transform: scale(0.86) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.card-wrapper.filter-entering .service-card {
  animation: cardEnter 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.card-wrapper.filter-hidden {
  display: none;
}

.service-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 2rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  height: 100%;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--card-glow-start, rgba(79,163,255,0.05)), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.card-wrapper:hover .service-card {
  border-color: var(--card-border, rgba(79,163,255,0.3));
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.55);
}

.card-wrapper:hover .service-card::before { opacity: 1; }

/* ─── Astronaut Hover Element ────────────────────────────── */
.card-astronaut {
  position: absolute;
  width: 82px;
  height: 82px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  filter: drop-shadow(0 4px 16px rgba(79,163,255,0.4));
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-wrapper:hover .card-astronaut {
  opacity: 1;
}

/* Entry from RIGHT */
.astro-right {
  top: 16px;
  right: -82px;
  transform: translateX(0) rotate(-10deg);
}
.card-wrapper:hover .astro-right {
  transform: translateX(-70px) rotate(-6deg);
}

/* Entry from TOP */
.astro-top {
  top: -82px;
  left: 50%;
  transform: translateX(-50%) translateY(0) rotate(180deg);
}
.card-wrapper:hover .astro-top {
  transform: translateX(-50%) translateY(56px) rotate(180deg);
}

/* Entry from BOTTOM */
.astro-bottom {
  bottom: -82px;
  left: 28%;
  transform: translateX(-50%) translateY(0) rotate(0deg);
}
.card-wrapper:hover .astro-bottom {
  transform: translateX(-50%) translateY(-60px) rotate(-8deg);
}

/* Entry from TOP-LEFT corner */
.astro-topleft {
  top: -70px;
  left: -70px;
  transform: translate(0, 0) rotate(30deg);
}
.card-wrapper:hover .astro-topleft {
  transform: translate(40px, 40px) rotate(18deg);
}

/* Entry from BOTTOM-RIGHT corner */
.astro-bottomright {
  bottom: -70px;
  right: -70px;
  transform: translate(0, 0) rotate(-20deg);
}
.card-wrapper:hover .astro-bottomright {
  transform: translate(-44px, -44px) rotate(-10deg);
}

.service-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  letter-spacing: 0.02em;
}

.service-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.spec-tag {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  padding: 0.3rem 0.625rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: var(--border-glass);
  color: var(--text-secondary);
}

.service-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1.25rem;
}

.price-from {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.price-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.price-period {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-blue);
  transition: var(--transition);
}

.service-link:hover { gap: 0.75rem; }

/* Individual Service Colors */
.card-vps  { --card-glow-start: rgba(79,163,255,0.08); --card-border: rgba(79,163,255,0.3); }
.card-vds  { --card-glow-start: rgba(168,85,247,0.08); --card-border: rgba(168,85,247,0.3); }
.card-shared { --card-glow-start: rgba(34,211,238,0.08); --card-border: rgba(34,211,238,0.3); }
.card-wp   { --card-glow-start: rgba(33,117,204,0.08); --card-border: rgba(33,117,204,0.3); }
.card-django { --card-glow-start: rgba(9,150,85,0.08); --card-border: rgba(9,150,85,0.3); }

/* ─── Features Section ───────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.feature-item {
  padding: 1.75rem;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.feature-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.feature-item h4 {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-item p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ─── Testimonials ───────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.testimonial-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}

.testimonial-quote {
  font-size: 3rem;
  line-height: 1;
  color: var(--accent-violet);
  opacity: 0.4;
  font-family: serif;
  position: absolute;
  top: 1.25rem;
  left: 1.75rem;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.author-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
}

.author-role {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.5rem;
  color: #fbbf24;
  font-size: 0.8rem;
}

/* ─── CTA Banner ─────────────────────────────────────────── */
.cta-banner {
  margin: 0 6vw 6rem;
  padding: 4rem 3rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(79,163,255,0.12) 0%, rgba(168,85,247,0.12) 50%, rgba(34,211,238,0.08) 100%);
  border: var(--border-glass);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(79,163,255,0.15) 0%, transparent 70%);
}

.cta-banner-content { position: relative; z-index: 1; }

.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-banner p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── Footer ─────────────────────────────────────────────── */
footer {
  background: rgba(0,0,0,0.4);
  border-top: var(--border-glass);
  padding: 4rem 6vw 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 260px;
}

.footer-col h5 {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.footer-col ul li {
  margin-bottom: 0.625rem;
}

.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color 0.2s;
  cursor: pointer;
}

.footer-col ul li a:hover { color: var(--text-primary); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: var(--border-glass);
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-glass);
  border: var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.social-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

/* ─── About Page ─────────────────────────────────────────── */
.about-hero {
  padding: 5rem 6vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(168,85,247,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.about-hero-content { position: relative; z-index: 1; }

.about-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.about-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.team-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168,85,247,0.3);
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
}

.team-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.team-role {
  font-size: 0.8rem;
  color: var(--accent-violet);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.value-card {
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.value-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}

.value-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ─── Contact Page ───────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  padding: 5rem 6vw;
  align-items: start;
}

.contact-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-info p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.contact-method:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.contact-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(79,163,255,0.2), rgba(168,85,247,0.2));
  border: 1px solid rgba(79,163,255,0.3);
}

.contact-method-info h5 {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.contact-method-info span {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Contact Form */
.contact-form-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: var(--transition);
  outline: none;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-blue);
  background: rgba(79,163,255,0.05);
  box-shadow: 0 0 0 3px rgba(79,163,255,0.1);
}

.form-group select option {
  background: var(--bg-nebula);
}

.form-group textarea { min-height: 130px; }

.btn-submit {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 8px 30px rgba(79,163,255,0.3);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(79,163,255,0.45);
}

/* ─── Knowledge Base ─────────────────────────────────────── */
.kb-hero {
  padding: 4rem 6vw 2rem;
  text-align: center;
}

.kb-search {
  max-width: 560px;
  margin: 2rem auto;
  position: relative;
}

.kb-search input {
  width: 100%;
  background: var(--bg-glass);
  border: var(--border-accent);
  border-radius: 100px;
  padding: 0.875rem 1.5rem 0.875rem 3rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}

.kb-search input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
}

.kb-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
}

.kb-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  padding: 0 6vw;
  margin-bottom: 4rem;
}

.kb-category {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.kb-category:hover {
  border-color: rgba(79,163,255,0.3);
  transform: translateY(-3px);
  background: rgba(79,163,255,0.05);
}

.kb-category-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.875rem;
}

.kb-category h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.kb-category p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.kb-count {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(79,163,255,0.1);
  border: 1px solid rgba(79,163,255,0.2);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
}

.kb-articles {
  padding: 0 6vw 6rem;
}

.kb-articles h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.article-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.article-item-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.article-icon {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.article-title {
  font-weight: 500;
  font-size: 0.9rem;
}

.article-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.article-arrow {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.article-item:hover .article-arrow { transform: translateX(4px); }

/* ─── Documentation ──────────────────────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - 72px);
}

.docs-sidebar {
  background: rgba(0,0,0,0.3);
  border-right: var(--border-glass);
  padding: 2rem 1.25rem;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
}

.docs-sidebar h5 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  padding-left: 0.75rem;
}

.docs-sidebar h5:first-child { margin-top: 0; }

.docs-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.docs-nav-link:hover { background: var(--bg-glass); color: var(--text-primary); }
.docs-nav-link.active { background: rgba(79,163,255,0.12); color: var(--accent-blue); }

.docs-nav-link .icon { font-size: 0.9rem; }

.docs-content {
  padding: 3rem 4rem;
  max-width: 860px;
}

.docs-content h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.docs-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--border-glass);
}

.docs-content h3 {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.docs-content p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.docs-content ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.docs-content ul li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.docs-content ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 0.7rem;
  top: 0.15em;
}

.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.docs-breadcrumb span { color: var(--text-muted); }
.docs-breadcrumb .current { color: var(--text-secondary); }

.code-block {
  background: rgba(0,0,0,0.5);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  position: relative;
}

.code-block pre {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #a8b2c5;
  line-height: 1.7;
}

.code-block .code-lang {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
}

.code-block code .k { color: var(--accent-violet); }
.code-block code .s { color: #34d399; }
.code-block code .c { color: #4a5568; font-style: italic; }
.code-block code .n { color: var(--accent-blue); }

.docs-alert {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.docs-alert.info {
  background: rgba(79,163,255,0.08);
  border-left: 3px solid var(--accent-blue);
  color: #a0c4ff;
}

.docs-alert.warning {
  background: rgba(251,191,36,0.08);
  border-left: 3px solid #fbbf24;
  color: #fde68a;
}

/* ─── Service Pages ──────────────────────────────────────── */
.service-page-hero {
  position: relative;
  padding: 6rem 6vw 4rem;
  overflow: hidden;
}

.service-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--service-hero-bg, radial-gradient(ellipse at 20% 50%, rgba(79,163,255,0.2) 0%, transparent 60%));
  pointer-events: none;
}

.service-page-content { position: relative; z-index: 1; }

.service-page-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

.service-page-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* Pricing Cards */
.pricing-section {
  padding: 5rem 6vw;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}

.pricing-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  position: relative;
  transition: var(--transition);
}

.pricing-card.featured {
  border-color: var(--accent-blue);
  background: rgba(79,163,255,0.05);
}

.pricing-card.featured::before {
  content: 'POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 100px;
}

.pricing-card:hover { transform: translateY(-4px); }

.pricing-tier {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.pricing-currency {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
  align-self: flex-start;
  margin-top: 0.5rem;
}

.pricing-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
}

.pricing-period {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pricing-features {
  list-style: none;
  margin-bottom: 2rem;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pricing-features li:last-child { border-bottom: none; }

.check-icon { color: var(--accent-green); font-size: 0.8rem; }
.x-icon { color: var(--text-muted); font-size: 0.8rem; }

.btn-plan {
  width: 100%;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: var(--border-accent);
  background: transparent;
  color: var(--text-primary);
}

.btn-plan:hover {
  background: rgba(79,163,255,0.1);
}

.btn-plan.featured-btn {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(79,163,255,0.3);
}

.btn-plan.featured-btn:hover {
  box-shadow: 0 12px 36px rgba(79,163,255,0.45);
  transform: translateY(-1px);
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.specs-table th {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
  padding: 0.875rem 1rem;
  border-bottom: var(--border-glass);
}

.specs-table td {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.specs-table tr:hover td {
  background: var(--bg-glass);
}

/* WordPress specific */
.wp-colors {
  --service-hero-bg: radial-gradient(ellipse at 20% 50%, rgba(33,117,204,0.25) 0%, transparent 60%);
  --wp-blue: #2175CC;
  --wp-dark: #0073aa;
}

/* Django specific */
.django-colors {
  --service-hero-bg: radial-gradient(ellipse at 20% 50%, rgba(9,150,85,0.25) 0%, transparent 60%);
  --dj-green: #0C4B33;
  --dj-light: #44B78B;
}

/* ─── Nebula Glow Orbs ───────────────────────────────────── */
.nebula-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

/* ─── Plesk Section ──────────────────────────────────────── */
.plesk-section {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
  margin-top: 3rem;
}

.plesk-info .section-tag { margin-bottom: 0.75rem; }

.plesk-info h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.plesk-info p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 460px;
}

.plesk-features {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.plesk-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.plesk-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,90,180,0.25), rgba(0,90,180,0.08));
  border: 1px solid rgba(0,140,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.plesk-feature-text h5 {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.plesk-feature-text p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.5;
}

/* Plesk Screenshot Mockup */
.plesk-mockup {
  position: relative;
}

.plesk-browser {
  background: rgba(6,3,24,0.95);
  border: 1px solid rgba(0,140,255,0.2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05),
              0 0 40px rgba(0,90,180,0.15);
}

.plesk-browser-bar {
  background: rgba(0,60,120,0.4);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0,140,255,0.15);
}

.browser-dots { display: flex; gap: 6px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }

.plesk-url-bar {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 0.3rem 0.875rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
}

.plesk-ui {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 340px;
}

.plesk-sidebar {
  background: rgba(0,40,100,0.3);
  border-right: 1px solid rgba(0,140,255,0.1);
  padding: 1rem 0;
}

.plesk-logo-area {
  padding: 0.75rem 1rem 1rem;
  border-bottom: 1px solid rgba(0,140,255,0.1);
  margin-bottom: 0.75rem;
}

.plesk-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #005ab4, #0078d4);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}

.plesk-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: var(--transition);
  border-left: 2px solid transparent;
}

.plesk-nav-item.active {
  color: #4aa3ff;
  background: rgba(0,140,255,0.08);
  border-left-color: #4aa3ff;
}

.plesk-nav-item span { font-size: 0.8rem; }

.plesk-main-content { padding: 1.25rem; }

.plesk-section-title {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.875rem;
}

.plesk-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.plesk-stat-box {
  background: rgba(0,60,140,0.2);
  border: 1px solid rgba(0,140,255,0.12);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.plesk-stat-val {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #4aa3ff;
  display: block;
}

.plesk-stat-lbl {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plesk-domain-list { display: flex; flex-direction: column; gap: 0.4rem; }

.plesk-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  font-size: 0.72rem;
}

.plesk-domain-name { color: rgba(255,255,255,0.7); font-family: var(--font-ui); }

.plesk-badge-on {
  background: rgba(52,211,153,0.15);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 100px;
  padding: 0.15rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
}

.plesk-glow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,90,180,0.2), transparent);
  border-radius: 50%;
  top: -50px; right: -80px;
  pointer-events: none;
  filter: blur(40px);
}

/* ─── Globe Section ──────────────────────────────────────── */
.globe-section {
  padding: 5rem 6vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.globe-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(79,163,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.globe-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}

#globe-canvas {
  cursor: grab;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}

#globe-canvas:active { cursor: grabbing; }

.globe-hint {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1rem;
  letter-spacing: 0.05em;
}

.globe-datacenter-pills {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.dc-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 1.25rem;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: 100px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: var(--transition);
}

.dc-pill:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(79,163,255,0.3);
  color: var(--text-primary);
}

.dc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  animation: pulseDot 2s infinite;
  flex-shrink: 0;
}

.dc-dot.blue { background: var(--accent-blue); box-shadow: 0 0 8px var(--accent-blue); }
.dc-dot.violet { background: var(--accent-violet); box-shadow: 0 0 8px var(--accent-violet); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #navbar { padding: 0 1rem; gap: .75rem; }
  .nav-logo { min-width: 0; font-size: 1.05rem; letter-spacing: .08em; gap: .45rem; }
  .nav-logo-icon { width: 32px; height: 32px; border-radius: 9px; }
  .status-badge-nav { display: none; }
  .nav-links, .nav-cta { display: none; }
  .theme-toggle { margin-left: auto; width: 48px; height: 26px; }
  .nav-toggle { flex-shrink: 0; }
  .nav-toggle { display: flex; }
  .hero-stats { gap: 1.5rem; }
  .stat-divider { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .docs-content { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  #navbar { padding: 0 .875rem; }
  .nav-logo { font-size: .98rem; }
  .nav-logo-icon { width: 30px; height: 30px; }
  .theme-toggle { width: 44px; }
  .section { padding: 4rem 5vw; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { margin: 0 5vw 4rem; padding: 3rem 1.5rem; }
}

/* ─── Utility ────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.glow-text-blue { text-shadow: 0 0 30px rgba(79,163,255,0.6); }
.glow-text-violet { text-shadow: 0 0 30px rgba(168,85,247,0.6); }
/* ═══ BLOG ═══ */
.blog-hero{padding:7rem 0 3rem;text-align:center;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(79,163,255,.12),transparent)}
.blog-hero-label{font-size:.75rem;letter-spacing:.15em;color:var(--accent-blue);text-transform:uppercase;margin-bottom:.75rem}
.blog-hero-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.15;margin-bottom:1rem}
.blog-hero-sub{color:var(--text-muted);max-width:560px;margin:0 auto 2rem}
.blog-search-wrap{display:flex;max-width:500px;margin:0 auto 1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50px;overflow:hidden}
.blog-search-input{flex:1;background:none;border:none;outline:none;padding:.75rem 1.25rem;color:var(--text-primary);font-size:.95rem}
.blog-search-btn{padding:.75rem 1.25rem;background:none;border:none;cursor:pointer;font-size:1rem}
.blog-cats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.blog-cat{padding:.4rem 1rem;border-radius:50px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text-muted);font-size:.82rem;cursor:pointer;transition:all .2s;font-family:var(--font-display)}
.blog-cat:hover,.blog-cat.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
.blog-layout{display:grid;grid-template-columns:1fr 280px;grid-template-rows:auto 1fr;gap:2rem;padding:3rem 0 5rem}
.blog-featured{grid-column:1;display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .3s;background:rgba(255,255,255,.03)}
.blog-featured:hover{transform:translateY(-4px)}
.blog-feat-img{position:relative;min-height:260px}
.blog-feat-gradient{position:absolute;inset:0;background:linear-gradient(135deg,var(--c1,#1a56ff),var(--c2,#7c3aed))}
.blog-feat-tag{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:.3rem .85rem;font-size:.75rem;color:#fff;backdrop-filter:blur(6px);z-index:1}
.blog-feat-body{padding:2rem;display:flex;flex-direction:column;justify-content:space-between}
.blog-feat-meta{display:flex;gap:.5rem;font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem}
.blog-feat-title{font-size:1.35rem;font-weight:800;line-height:1.3;margin-bottom:.75rem}
.blog-feat-desc{font-size:.9rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.5rem;flex:1}
.blog-feat-author{display:flex;align-items:center;gap:.75rem}
.blog-author-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0}
.blog-feat-author>div:nth-child(2){display:flex;flex-direction:column;font-size:.82rem;color:var(--text-muted);flex:1}
.blog-feat-author>div:nth-child(2) strong{color:var(--text-primary)}
.blog-read-btn{padding:.5rem 1.1rem;background:var(--accent-blue);border:none;border-radius:50px;color:#fff;font-size:.82rem;cursor:pointer;font-family:var(--font-display);white-space:nowrap}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-content:start}
.blog-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s,border-color .25s}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(79,163,255,.35)}
.blog-card.hidden{display:none}
.blog-card-img{height:140px;position:relative}
.blog-card-body{padding:1.1rem}
.blog-card-cat{font-size:.72rem;color:var(--accent-blue);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.4rem}
.blog-card-body h3{font-size:.95rem;font-weight:700;line-height:1.4;margin-bottom:.5rem}
.blog-card-body p{font-size:.82rem;color:var(--text-muted);line-height:1.6;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-footer{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted)}
.blog-sidebar{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;gap:1.5rem}
.blog-widget{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.25rem}
.blog-widget-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1rem}
.blog-popular{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.blog-popular li{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.85rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s}
.blog-popular li:hover{color:var(--accent-blue)}
.bpop-num{font-size:.7rem;color:var(--accent-blue);font-weight:700;flex-shrink:0;padding-top:.15rem}
.blog-cat-list{display:flex;flex-direction:column;gap:.35rem}
.blog-cat-list span{display:flex;justify-content:space-between;font-size:.85rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:color .2s}
.blog-cat-list span:hover{color:var(--accent-blue)}
.blog-cat-list em{font-style:normal;color:var(--text-muted);font-size:.78rem}
.blog-newsletter{text-align:center}
.newsletter-icon{font-size:2rem;margin-bottom:.5rem}
.blog-newsletter h4{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.blog-newsletter p{font-size:.82rem;color:var(--text-muted);margin-bottom:1rem}
.newsletter-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.6rem .9rem;color:var(--text-primary);font-size:.85rem;outline:none;margin-bottom:.75rem;box-sizing:border-box}
.newsletter-btn{width:100%;padding:.65rem;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer;font-family:var(--font-display)}
/* Blog Post */
.bp-hero{padding:7rem 0 4rem;position:relative;overflow:hidden}
.bp-hero-gradient{position:absolute;inset:0;opacity:.2}
.bp-hero-inner{position:relative;max-width:800px}
.bp-breadcrumb{display:flex;gap:.5rem;font-size:.8rem;color:var(--text-muted);margin-bottom:1rem}
.bp-breadcrumb span:first-child{cursor:pointer}
.bp-breadcrumb span:first-child:hover{color:var(--accent-blue)}
.bp-title{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;line-height:1.2;margin-bottom:1.5rem}
.bp-meta{display:flex;align-items:center;gap:.85rem}
.bp-author-info{display:flex;flex-direction:column;font-size:.82rem;color:var(--text-muted)}
.bp-author-info strong{color:var(--text-primary);font-size:.9rem}
.bp-layout{display:grid;grid-template-columns:1fr 260px;gap:3rem;padding:3rem 0 2rem}
.bp-content{font-size:.97rem;line-height:1.85;color:var(--text-muted)}
.bp-content h2{font-size:1.35rem;font-weight:800;margin:2rem 0 .75rem;color:var(--text-primary)}
.bp-content h3{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--text-primary)}
.bp-content p{margin-bottom:1.1rem}
.bp-content ul,.bp-content ol{padding-left:1.5rem;margin-bottom:1.1rem}
.bp-content li{margin-bottom:.4rem}
.bp-content pre{background:#0d1117;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1.25rem 1.5rem;font-family:monospace;font-size:.85rem;overflow-x:auto;margin:1.25rem 0;line-height:1.65}
.bp-content code:not(pre code){background:rgba(79,163,255,.12);padding:.15rem .45rem;border-radius:4px;font-family:monospace;font-size:.85em;color:var(--accent-blue)}
.bp-content pre code{color:#e2e8f0}
.bp-content .note{background:rgba(79,163,255,.1);border-left:3px solid var(--accent-blue);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1.25rem 0;font-size:.9rem}
.bp-content .warn{background:rgba(245,158,11,.1);border-left:3px solid #f59e0b;padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1.25rem 0;font-size:.9rem}
.bp-toc{position:sticky;top:90px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.25rem}
.bp-toc ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.bp-toc li a{font-size:.82rem;color:var(--text-muted);text-decoration:none;display:block;padding:.25rem .6rem;border-left:2px solid transparent;transition:all .2s}
.bp-toc li a:hover{color:var(--accent-blue);border-left-color:var(--accent-blue)}
.bp-share{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.bp-share button{padding:.55rem .9rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text-primary);cursor:pointer;font-size:.82rem;text-align:left;transition:background .2s}
.bp-share button:hover{background:rgba(255,255,255,.1)}
.bp-related{padding:2rem 0 4rem;border-top:1px solid rgba(255,255,255,.07)}
.bp-related h3{font-size:1.2rem;font-weight:800;margin-bottom:1.25rem}
.bp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
/* ═══ DOCS ═══ */
#page-docs.active{display:block !important}
#page-docs .docs-layout{display:grid;grid-template-columns:260px 1fr 210px;min-height:calc(100vh - 72px)}
.docs-sidebar{border-right:1px solid rgba(255,255,255,.07);padding:1.5rem 0;overflow-y:auto;position:sticky;top:72px;max-height:calc(100vh - 72px);background:var(--bg-deep)}
.docs-search-wrap{padding:0 1rem 1rem}
.docs-search-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.55rem .85rem;color:var(--text-primary);font-size:.85rem;outline:none;box-sizing:border-box}
.docs-nav-group{margin-bottom:.25rem}
.docs-nav-heading{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);padding:.9rem 1.25rem .35rem}
.docs-nav-item{display:block;padding:.45rem 1.25rem;font-size:.88rem;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:all .18s;border-left:2px solid transparent}
.docs-nav-item:hover{color:var(--text-primary);background:rgba(255,255,255,.04)}
.docs-nav-item.active{color:var(--accent-blue);background:rgba(79,163,255,.08);border-left-color:var(--accent-blue)}
.docs-main{display:flex;flex-direction:column;min-width:0}
.docs-topbar{display:flex;align-items:center;gap:1rem;padding:.85rem 2rem;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:72px;background:var(--bg-deep);z-index:10}
.docs-breadcrumb{font-size:.85rem;color:var(--text-muted);flex:1}
.docs-edit-btn{background:none;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:.35rem .85rem;color:var(--text-muted);font-size:.78rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.docs-edit-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.docs-mob-toggle{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.4rem .8rem;color:var(--text-primary);cursor:pointer;font-size:.85rem}
.docs-content{padding:2.5rem;flex:1}
.docs-content h1{font-size:1.9rem;font-weight:900;margin-bottom:.5rem}
.docs-intro{font-size:1rem;color:var(--text-muted);margin-bottom:2rem;line-height:1.75}
.docs-content h2{font-size:1.2rem;font-weight:800;margin:2.5rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.docs-content h3{font-size:.97rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent-blue)}
.docs-content p{margin-bottom:1rem;line-height:1.8;color:var(--text-muted);font-size:.95rem}
.docs-content ul,.docs-content ol{padding-left:1.5rem;margin-bottom:1rem}
.docs-content li{margin-bottom:.4rem;font-size:.95rem;color:var(--text-muted)}
.docs-content pre{background:#0d1117;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1.25rem 1.5rem;font-family:monospace;font-size:.85rem;overflow-x:auto;margin:1.25rem 0;line-height:1.7;position:relative}
.docs-content code:not(pre code){background:rgba(79,163,255,.12);padding:.15rem .45rem;border-radius:4px;font-family:monospace;font-size:.85em;color:var(--accent-blue)}
.docs-content pre code{color:#e2e8f0}
.docs-note{background:rgba(79,163,255,.08);border:1px solid rgba(79,163,255,.2);border-radius:10px;padding:1rem 1.25rem;margin:1.25rem 0;font-size:.9rem;color:var(--text-muted)}
.docs-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:10px;padding:1rem 1.25rem;margin:1.25rem 0;font-size:.9rem;color:var(--text-muted)}
.docs-tip{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:1rem 1.25rem;margin:1.25rem 0;font-size:.9rem;color:var(--text-muted)}
.docs-content table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.88rem}
.docs-content th{background:rgba(255,255,255,.05);padding:.7rem 1rem;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.docs-content td{padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text-muted)}
.docs-steps{list-style:none;padding:0;counter-reset:steps}
.docs-steps li{counter-increment:steps;display:flex;gap:1rem;margin-bottom:1.25rem;align-items:flex-start;font-size:.95rem;color:var(--text-muted)}
.docs-steps li::before{content:counter(steps);min-width:28px;height:28px;border-radius:50%;background:var(--accent-blue);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0}
.docs-nav-footer{display:flex;justify-content:space-between;padding:1.5rem 2.5rem;border-top:1px solid rgba(255,255,255,.07);gap:1rem}
.docs-prev-btn,.docs-next-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.6rem 1.25rem;color:var(--text-primary);cursor:pointer;font-size:.88rem;transition:all .2s;font-family:var(--font-display)}
.docs-prev-btn:hover,.docs-next-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.docs-toc{padding:1.5rem 1rem;border-left:1px solid rgba(255,255,255,.07);position:sticky;top:72px;max-height:calc(100vh - 72px);overflow-y:auto}
.docs-toc-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:.75rem}
#docs-toc-list{list-style:none;display:flex;flex-direction:column;gap:.2rem}
#docs-toc-list a{font-size:.8rem;color:var(--text-muted);text-decoration:none;display:block;padding:.2rem .5rem;border-radius:4px;transition:all .18s}
#docs-toc-list a:hover{color:var(--accent-blue);background:rgba(79,163,255,.08)}
/* ═══ KB ═══ */
.kb-hero{padding:7rem 0 4rem;text-align:center;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(124,58,237,.12),transparent)}
.kb-search-wrap{display:flex;max-width:620px;margin:0 auto 1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:50px;overflow:hidden;padding:.3rem .3rem .3rem 1.25rem;gap:.5rem;align-items:center}
.kb-search-icon{font-size:1.1rem}
.kb-search-input{flex:1;background:none;border:none;outline:none;padding:.5rem 0;color:var(--text-primary);font-size:1rem}
.kb-search-btn{padding:.6rem 1.5rem;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));border:none;border-radius:50px;color:#fff;font-weight:700;cursor:pointer;font-family:var(--font-display);font-size:.9rem;white-space:nowrap}
.kb-popular-q{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;font-size:.85rem;color:var(--text-muted)}
.kb-popular-q button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:.3rem .9rem;color:var(--text-primary);cursor:pointer;font-size:.82rem;transition:all .2s;font-family:var(--font-display)}
.kb-popular-q button:hover{border-color:var(--accent-violet);color:var(--accent-violet)}
.kb-cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;padding:3rem 0 2.5rem}
.kb-cat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.75rem 1.5rem;cursor:pointer;transition:all .25s}
.kb-cat-card:hover{border-color:rgba(124,58,237,.4);transform:translateY(-3px);background:rgba(124,58,237,.06)}
.kb-cat-icon{font-size:2rem;margin-bottom:.75rem}
.kb-cat-card h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.kb-cat-card p{font-size:.82rem;color:var(--text-muted);line-height:1.55;margin-bottom:.75rem}
.kb-cat-count{font-size:.75rem;color:var(--accent-blue);font-weight:700}
.kb-articles{padding-bottom:4rem}
.kb-section-title{font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.kb-article-list{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden}
.kb-article-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;transition:background .2s}
.kb-article-row:last-child{border-bottom:none}
.kb-article-row:hover{background:rgba(255,255,255,.04)}
.kb-article-info{display:flex;align-items:center;gap:.9rem}
.kb-art-icon{font-size:1.3rem;flex-shrink:0}
.kb-article-info strong{display:block;font-size:.9rem;margin-bottom:.15rem}
.kb-article-info span{font-size:.78rem;color:var(--text-muted)}
.kb-art-arrow{color:var(--accent-blue)}
.kb-article-view{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem;margin-bottom:3rem}
.kb-article-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.kb-back-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.45rem 1rem;color:var(--text-primary);cursor:pointer;font-size:.85rem;transition:all .2s}
.kb-back-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.kb-article-meta{font-size:.8rem;color:var(--text-muted)}
.kb-article-content{font-size:.95rem;line-height:1.8;color:var(--text-muted)}
.kb-article-content h3{font-size:1.05rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--text-primary)}
.kb-article-content p{margin-bottom:.9rem}
.kb-article-content ul{padding-left:1.4rem;margin-bottom:.9rem}
.kb-article-content li{margin-bottom:.35rem}
.kb-article-content pre{background:#0d1117;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1rem 1.25rem;font-family:monospace;font-size:.85rem;overflow-x:auto;margin:1rem 0}
.kb-article-content code:not(pre code){background:rgba(79,163,255,.12);padding:.1rem .4rem;border-radius:4px;font-family:monospace;font-size:.85em;color:var(--accent-blue)}
.kb-article-content pre code{color:#e2e8f0}
.kb-article-feedback{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.kb-article-feedback p{font-size:.9rem;color:var(--text-muted);margin:0}
.kb-article-feedback button{padding:.45rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text-primary);cursor:pointer;font-size:.85rem;transition:all .2s}
.kb-article-feedback button:hover{border-color:var(--accent-blue)}
/* ═══ AUTH ═══ */
.auth-page{background:var(--bg-deep)}
.auth-container{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 72px)}
.auth-container-sm{grid-template-columns:1fr;max-width:520px;margin:0 auto;padding:4rem 1.5rem;min-height:auto}
.auth-card{display:flex;flex-direction:column;justify-content:center;padding:3rem 3.5rem;max-width:480px;margin:0 auto;width:100%}
.auth-card-full{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:2.5rem;max-width:100%}
.auth-logo{font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:.1em;margin-bottom:2.5rem;cursor:pointer;opacity:.7;transition:opacity .2s}
.auth-logo:hover{opacity:1}
.auth-icon-hero{font-size:3rem;margin-bottom:1rem;text-align:center}
.auth-title{font-size:1.9rem;font-weight:900;margin-bottom:.4rem}
.auth-sub{color:var(--text-muted);font-size:.92rem;margin-bottom:2rem;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:1.1rem}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.auth-field{display:flex;flex-direction:column;gap:.4rem}
.auth-field label{font-size:.82rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.auth-forgot{color:var(--accent-blue);cursor:pointer;font-weight:400;font-size:.8rem}
.auth-forgot:hover{text-decoration:underline}
.auth-input-wrap{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;transition:border-color .2s}
.auth-input-wrap:focus-within{border-color:var(--accent-blue);background:rgba(79,163,255,.05)}
.auth-input-icon{padding:0 0 0 .9rem;font-size:.95rem;pointer-events:none;opacity:.5}
.auth-input-wrap input{flex:1;background:none;border:none;outline:none;padding:.75rem .75rem .75rem .5rem;color:var(--text-primary);font-size:.92rem;font-family:var(--font-display)}
.auth-input-wrap input::placeholder{color:var(--text-muted)}
.auth-eye{background:none;border:none;cursor:pointer;padding:0 .85rem;font-size:.95rem;opacity:.5;transition:opacity .2s}
.auth-eye:hover{opacity:1}
.auth-check-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted);cursor:pointer}
.auth-check-label input[type=checkbox]{accent-color:var(--accent-blue);width:15px;height:15px}
.auth-btn{padding:.85rem;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;font-family:var(--font-display);transition:opacity .2s,transform .15s;margin-top:.25rem}
.auth-btn:hover{opacity:.9;transform:translateY(-1px)}
.auth-btn-outline{padding:.75rem 1.5rem;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:var(--text-primary);font-size:.92rem;cursor:pointer;font-family:var(--font-display);transition:all .2s;width:100%;margin-top:.5rem}
.auth-btn-outline:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.auth-divider{display:flex;align-items:center;gap:1rem;margin:.5rem 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-divider span{font-size:.8rem;color:var(--text-muted)}
.auth-socials{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.auth-social-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--text-primary);font-size:.88rem;cursor:pointer;transition:all .2s;font-family:var(--font-display)}
.auth-social-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.auth-switch{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:1.25rem}
.auth-switch span{color:var(--accent-blue);cursor:pointer;font-weight:600}
.auth-switch span:hover{text-decoration:underline}
.pass-strength{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:.35rem}
.pass-strength-bar{height:100%;border-radius:2px;width:0;transition:width .3s,background .3s}
.pass-strength-label{font-size:.75rem;margin-top:.3rem;min-height:1rem}
.auth-visual{position:relative;background:linear-gradient(135deg,#0b0f1a,#0d1230);display:flex;align-items:center;justify-content:center;overflow:hidden}
.auth-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.auth-visual-text{position:relative;z-index:1;padding:3rem}
.auth-vis-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(79,163,255,.15);border:1px solid rgba(79,163,255,.3);border-radius:50px;padding:.4rem 1rem;font-size:.82rem;color:var(--accent-blue);font-family:Orbitron,sans-serif;margin-bottom:1.5rem}
.auth-visual-text h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.25;margin-bottom:1.75rem;color:#fff}
.auth-stats{display:flex;gap:2rem}
.auth-stat{display:flex;flex-direction:column;gap:.3rem}
.auth-stat span{font-size:1.6rem;font-weight:900;color:#fff;font-family:Orbitron,sans-serif}
.auth-stat small{font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em}
.auth-vis-list{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.auth-vis-list li{font-size:.92rem;color:rgba(255,255,255,.8)}
.otp-inputs{display:flex;gap:.75rem;justify-content:center;margin:1rem 0}
.otp-digit{width:52px;height:60px;text-align:center;font-size:1.5rem;font-weight:800;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text-primary);outline:none;font-family:Orbitron,sans-serif;transition:border-color .2s}
.otp-digit:focus{border-color:var(--accent-blue);background:rgba(79,163,255,.08)}
.otp-digit.filled{border-color:var(--accent-violet)}
.otp-timer{text-align:center;font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}
.otp-timer strong{color:var(--accent-blue)}
.otp-resend{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:1rem}
.otp-resend span{color:var(--accent-blue);cursor:pointer;font-weight:600}
.otp-resend span:hover{text-decoration:underline}
.astro-page-shell{padding:7rem 0 5rem;position:relative;overflow:hidden}
.astro-page-shell::before{content:"";position:absolute;top:-14rem;right:-12rem;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle,rgba(79,163,255,.14),transparent 68%);pointer-events:none}
.astro-page-inner{width:min(1180px,calc(100% - 2rem));margin:0 auto;position:relative;z-index:1}
.astro-hero{max-width:780px;margin:0 auto 2.5rem;text-align:center}
.astro-hero.align-left{margin-left:0;text-align:left}
.astro-eyebrow{display:inline-flex;align-items:center;gap:.45rem;color:var(--accent-blue);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.75rem;font-family:var(--font-display)}
.astro-title{font-size:clamp(2rem,5vw,3.35rem);font-weight:900;line-height:1.12;margin-bottom:1rem}
.astro-subtitle{color:var(--text-muted);font-size:clamp(.95rem,2vw,1.08rem);line-height:1.75;max-width:680px;margin:0 auto}
.astro-hero.align-left .astro-subtitle{margin-left:0}
.astro-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;align-items:start}
.astro-layout-wide{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:start}
.astro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.astro-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.astro-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:1.3rem;box-shadow:0 20px 45px rgba(0,0,0,.18);backdrop-filter:blur(18px)}
.astro-card.hover{transition:transform .25s,border-color .25s,background .25s}
.astro-card.hover:hover{transform:translateY(-4px);border-color:rgba(79,163,255,.34);background:rgba(255,255,255,.055)}
.astro-panel-title{font-size:1.05rem;font-weight:800;margin-bottom:.85rem}
.astro-muted{color:var(--text-muted)}
.astro-link{color:inherit;text-decoration:none}
.astro-link:hover{color:var(--accent-blue)}
.btn-hero,.btn-hero-outline,.btn-plan,.calc-order-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.astro-media{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));min-height:180px}
.astro-media img{width:100%;height:100%;object-fit:cover;display:block}
.astro-meta{display:flex;flex-wrap:wrap;gap:.6rem;color:var(--text-muted);font-size:.8rem;margin-bottom:.75rem}
.astro-meta a,.astro-meta span{color:var(--text-muted);text-decoration:none}
.astro-meta a:hover{color:var(--accent-blue)}
.astro-pill-row{display:flex;flex-wrap:wrap;gap:.5rem}
.astro-pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.38rem .78rem;color:var(--text-muted);background:rgba(255,255,255,.035);font-size:.8rem;text-decoration:none}
.astro-pill:hover,.astro-pill.active{color:#fff;border-color:var(--accent-blue);background:rgba(79,163,255,.16)}
.astro-search-form{display:flex;gap:.5rem;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.4rem}
.astro-search-form input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-primary);padding:.7rem 1rem;font-family:var(--font-display)}
.astro-search-form button{border:none;border-radius:999px;padding:.7rem 1rem;background:var(--accent-blue);color:#fff;font-weight:800;cursor:pointer;font-family:var(--font-display)}
.astro-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin:0;padding:0}
.astro-list li{display:flex;justify-content:space-between;gap:.75rem;padding-bottom:.65rem;border-bottom:1px solid rgba(255,255,255,.07);color:var(--text-muted)}
.astro-list li:last-child{border-bottom:0;padding-bottom:0}
.astro-list a{color:var(--text-primary);text-decoration:none}
.astro-list a:hover{color:var(--accent-blue)}
.astro-form{display:grid;gap:1rem}
.astro-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.astro-field{display:grid;gap:.42rem}
.astro-field label{font-size:.82rem;font-weight:700;color:var(--text-muted)}
.astro-field input,.astro-field select,.astro-field textarea{width:100%;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text-primary);padding:.82rem 1rem;outline:none;font-family:var(--font-display)}
.astro-field textarea{min-height:120px;resize:vertical}
.astro-field input:focus,.astro-field select:focus,.astro-field textarea:focus{border-color:var(--accent-blue);background:rgba(79,163,255,.06)}
.astro-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:999px;padding:.78rem 1.15rem;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));color:#fff;font-weight:800;text-decoration:none;cursor:pointer;font-family:var(--font-display)}
.astro-btn.secondary{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:var(--text-primary)}
.astro-btn.danger{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#fca5a5}
.astro-alert{border-radius:14px;padding:.9rem 1rem;margin-bottom:1rem;border:1px solid rgba(79,163,255,.25);background:rgba(79,163,255,.1);color:var(--text-primary)}
.astro-alert.error,.astro-alert.danger{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.12);color:#fecaca}
.astro-alert.success{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.12);color:#bbf7d0}
.astro-table-wrap{overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08)}
.astro-table{width:100%;border-collapse:collapse;min-width:680px}
.astro-table th,.astro-table td{padding:1rem;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
.astro-table th{color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.035)}
.astro-table td:last-child,.astro-table th:last-child{text-align:right}
.astro-table tr:last-child td{border-bottom:0}
.astro-pagination{display:flex;justify-content:center;gap:.45rem;margin-top:2rem}
.astro-pagination a,.astro-pagination span{min-width:2.35rem;height:2.35rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-primary);text-decoration:none}
.astro-pagination .active,.astro-pagination span.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
.blog-card a,.blog-featured a{text-decoration:none;color:inherit}
.blog-feat-img img,.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-img .blog-feat-gradient{position:absolute;inset:0}
.bp-breadcrumb a{color:inherit;text-decoration:none}
.bp-breadcrumb a:hover{color:var(--accent-blue)}
.portfolio-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-bottom:2rem}
.portfolio-filter{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text-muted);border-radius:999px;padding:.55rem 1rem;cursor:pointer;font-family:var(--font-display);font-size:.85rem;transition:all .2s}
.portfolio-filter:hover,.portfolio-filter.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
.portfolio-card{position:relative;overflow:hidden;min-height:320px;padding:0;display:flex;flex-direction:column}
.portfolio-card.hidden{display:none}
.portfolio-card .astro-media{border-radius:18px 18px 0 0;min-height:210px}
.portfolio-body{padding:1.25rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.portfolio-body h3{font-size:1.08rem;font-weight:800;line-height:1.35}
.portfolio-body p{color:var(--text-muted);font-size:.88rem;line-height:1.65}
.portfolio-modal{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(2,6,23,.82);backdrop-filter:blur(16px)}
.portfolio-modal.open{display:flex}
.portfolio-dialog{width:min(980px,100%);max-height:90vh;overflow:auto;background:var(--bg-deep);border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.55)}
.portfolio-dialog-media{aspect-ratio:16/8;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));overflow:hidden;border-radius:22px 22px 0 0}
.portfolio-dialog-media img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-dialog-body{padding:1.5rem}
.portfolio-close{position:absolute;top:1rem;right:1rem;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:1.2rem}
body.theme-light .portfolio-filter{background:#fff;border-color:#e2e8f0;color:#475569}
body.theme-light .portfolio-filter:hover,body.theme-light .portfolio-filter.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
body.theme-light .portfolio-dialog{background:#fff;border-color:#e2e8f0}
body.theme-light .astro-card{background:#fff;border-color:#e2e8f0;box-shadow:0 18px 38px rgba(15,23,42,.08)}
body.theme-light .astro-card.hover:hover{background:#f8fafc;border-color:#bfdbfe}
body.theme-light .astro-search-form,body.theme-light .astro-field input,body.theme-light .astro-field select,body.theme-light .astro-field textarea{background:#fff;border-color:#e2e8f0;color:#0f172a}
body.theme-light .astro-pill,body.theme-light .astro-table-wrap,body.theme-light .astro-pagination a,body.theme-light .astro-pagination span{background:#fff;border-color:#e2e8f0;color:#475569}
body.theme-light .astro-list li,body.theme-light .astro-table th,body.theme-light .astro-table td{border-color:#e2e8f0}
body.theme-light .astro-table th{background:#f8fafc}
/* Light theme */
body.theme-light .blog-search-wrap,body.theme-light .kb-search-wrap{background:#fff;border-color:#e2e8f0}
body.theme-light .blog-cat{border-color:#e2e8f0;color:#64748b}
body.theme-light .blog-cat:hover,body.theme-light .blog-cat.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}
body.theme-light .blog-card,body.theme-light .blog-featured,body.theme-light .blog-widget,body.theme-light .kb-cat-card,body.theme-light .kb-article-list,body.theme-light .kb-article-view{background:#fff;border-color:#e2e8f0}
body.theme-light .docs-sidebar,body.theme-light .docs-toc,body.theme-light .docs-topbar{background:#fff;border-color:#e2e8f0}
body.theme-light .docs-nav-item:hover{background:#f8fafc}
body.theme-light .docs-nav-item.active{background:#eff6ff}
body.theme-light .auth-input-wrap{background:#f8fafc;border-color:#e2e8f0}
body.theme-light .auth-input-wrap:focus-within{border-color:var(--accent-blue);background:#eff6ff}
body.theme-light .auth-social-btn{background:#f8fafc;border-color:#e2e8f0}
body.theme-light .auth-card-full{background:#fff;border-color:#e2e8f0}
body.theme-light .otp-digit{background:#f8fafc;border-color:#e2e8f0}
body.theme-light .auth-visual{background:linear-gradient(135deg,#0f172a,#1e1b4b)}
/* Responsive */
@media(max-width:1100px){.astro-layout,.astro-layout-wide{grid-template-columns:1fr}.astro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-grid{grid-template-columns:repeat(2,1fr)}.bp-related-grid{grid-template-columns:repeat(2,1fr)}.kb-cats-grid{grid-template-columns:repeat(2,1fr)}.docs-toc{display:none}#page-docs .docs-layout{grid-template-columns:240px 1fr}}
@media(max-width:900px){.auth-container{grid-template-columns:1fr}.auth-visual{display:none}.auth-card{padding:2.5rem 1.5rem}}
@media(max-width:768px){.astro-page-shell{padding:5.5rem 0 3rem}.astro-grid,.astro-grid.two,.astro-form-grid{grid-template-columns:1fr}.astro-search-form{border-radius:16px;flex-direction:column}.astro-search-form button{width:100%}.blog-layout{grid-template-columns:1fr}.blog-featured{grid-template-columns:1fr}.blog-sidebar{grid-row:auto}.blog-grid{grid-template-columns:1fr}.bp-layout{grid-template-columns:1fr}.bp-related-grid{grid-template-columns:1fr}.kb-cats-grid{grid-template-columns:repeat(2,1fr)}.docs-sidebar{display:none}.docs-sidebar.docs-sidebar-open{display:block;position:fixed;inset:72px 0 0;z-index:200;background:var(--bg-deep);overflow-y:auto}.docs-mob-toggle{display:block}#page-docs .docs-layout{grid-template-columns:1fr}.otp-inputs{gap:.5rem}.otp-digit{width:44px;height:52px;font-size:1.25rem}}