:root {
  --varnox-ink: #07090e;
  --varnox-panel: rgba(8, 15, 29, 0.72);
  --varnox-panel-strong: rgba(2, 6, 16, 0.88);
  --varnox-cyan: #67e8f9;
  --varnox-cyan-soft: #a5f3fc;
  --varnox-blue: #38bdf8;
  --varnox-muted: #94a3b8;
  --varnox-text: #e2e8f0;
  --varnox-border: rgba(186, 230, 253, 0.2);
  --varnox-border-strong: rgba(103, 232, 249, 0.52);
  --varnox-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --varnox-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
  min-height: 100%;
  background: var(--varnox-ink) url('/assets/varnox-tech-background.png') center 18% / cover fixed no-repeat;
}

body,
body.auth-pending {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--varnox-text);
  background:
    linear-gradient(115deg, rgba(1, 7, 16, 0.2), rgba(2, 6, 23, 0.24) 44%, rgba(1, 2, 8, 0.72)),
    linear-gradient(rgba(103, 232, 249, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.025) 1px, transparent 1px),
    url('/assets/varnox-tech-background.png') center 18% / cover fixed no-repeat !important;
  background-size: auto, 52px 52px, 52px 52px, cover !important;
  font-family: 'Rajdhani', 'Plus Jakarta Sans', sans-serif;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 72% 18%, rgba(103, 232, 249, 0.08), transparent 34%), linear-gradient(180deg, rgba(2, 6, 16, 0.08), rgba(2, 6, 16, 0.36));
}

body,
button,
input,
select,
textarea {
  font-family: 'Rajdhani', 'Plus Jakarta Sans', sans-serif;
}

h1,
h2,
h3,
h4,
.section-title,
.topbar-title,
.brand-title,
.sidebar-brand,
.bot-name,
.pricing-card h3,
.portal-hero > div:nth-of-type(2) {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
}

.navbar,
.topbar {
  background: rgba(2, 6, 16, 0.82) !important;
  border-bottom: 1px solid var(--varnox-border) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.nav-brand img,
.portal-hero img {
  border-color: rgba(103, 232, 249, 0.42) !important;
  box-shadow: 0 0 28px rgba(103, 232, 249, 0.14);
}

.brand-sub,
.topbar-subtitle,
.welcome-badge,
.section-label,
.bot-type,
.bot-arrow,
.quick-sub,
.balance-title,
.metric-box .num,
.price,
.trend-badge {
  color: var(--varnox-cyan-soft) !important;
}

.btn-outline,
.btn-gold,
.btn-hero-primary,
.btn-hero-secondary,
.menu-btn,
.crown-btn,
.b-btn,
.quick-icon-badge,
.card-icon,
.bot-abbr,
.social-icons a {
  border-color: rgba(103, 232, 249, 0.38) !important;
  color: var(--varnox-cyan-soft) !important;
  background: rgba(8, 15, 29, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 160ms var(--varnox-ease), border-color 160ms var(--varnox-ease), background 160ms var(--varnox-ease), box-shadow 160ms var(--varnox-ease);
}

.btn-gold,
.btn-hero-primary,
.b-btn.topup {
  background: linear-gradient(135deg, #a5f3fc, #38bdf8) !important;
  border-color: rgba(165, 243, 252, 0.82) !important;
  color: #02111a !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.25);
}

.btn-outline:hover,
.btn-gold:hover,
.btn-hero-primary:hover,
.btn-hero-secondary:hover,
.menu-btn:hover,
.crown-btn:hover,
.b-btn:hover,
.quick-card:hover,
.card:hover,
.pricing-card:hover,
.bot-card:hover {
  border-color: var(--varnox-border-strong) !important;
  background: rgba(12, 29, 48, 0.82) !important;
  box-shadow: 0 0 28px rgba(103, 232, 249, 0.12), var(--varnox-shadow);
}

.btn-outline:active,
.btn-gold:active,
.btn-hero-primary:active,
.btn-hero-secondary:active,
.menu-btn:active,
.crown-btn:active,
.b-btn:active,
.quick-card:active,
.bot-card:active {
  transform: scale(0.97);
}

.phone-container {
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 100vh;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left !important;
  padding: clamp(3rem, 9vw, 7rem) clamp(1rem, 6vw, 5rem) !important;
  background: linear-gradient(90deg, rgba(2, 6, 16, 0.86), rgba(2, 6, 16, 0.3) 60%, transparent) !important;
  border-bottom: 1px solid var(--varnox-border) !important;
}

.hero h1 {
  max-width: 720px;
  color: #f8fafc !important;
  font-size: clamp(2.45rem, 7vw, 5.4rem) !important;
  letter-spacing: 0.035em;
}

.hero h1 span {
  color: var(--varnox-cyan) !important;
  text-shadow: 0 0 28px rgba(103, 232, 249, 0.28);
}

.hero p {
  max-width: 560px;
  color: var(--varnox-muted) !important;
  font-size: clamp(0.9rem, 1.7vw, 1.15rem) !important;
}

.hero-buttons {
  justify-content: flex-start !important;
}

.metrics-banner {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.7rem;
  background: rgba(2, 6, 16, 0.48) !important;
  border-bottom: 1px solid var(--varnox-border);
  backdrop-filter: blur(16px);
}

.metric-box,
.balance-card,
.quick-card,
.card,
.pricing-card,
.portal-hero,
.bot-card,
.sidebar {
  background: linear-gradient(145deg, rgba(8, 15, 29, 0.78), rgba(2, 6, 16, 0.56)) !important;
  border-color: var(--varnox-border) !important;
  box-shadow: var(--varnox-shadow) !important;
  backdrop-filter: blur(14px);
}

.section {
  background: transparent !important;
  border-bottom-color: var(--varnox-border) !important;
}

.section-title {
  color: #f8fafc !important;
  letter-spacing: 0.045em;
}

.section-sub,
.card p,
.quick-desc,
.bot-desc,
.balance-ksh,
.metric-box .label,
.pricing-features,
.powered-footer {
  color: var(--varnox-muted) !important;
}

.card-icon,
.quick-icon-badge,
.bot-abbr {
  background: rgba(103, 232, 249, 0.1) !important;
}

.card-list i,
.pricing-features i,
.bot-card i,
.quick-card i,
.wave-chart path {
  color: var(--varnox-cyan) !important;
  stroke: var(--varnox-cyan) !important;
}

.wave-chart {
  background: radial-gradient(circle at center, rgba(103, 232, 249, 0.15) 0%, transparent 70%) !important;
}

.wave-chart path {
  fill: rgba(103, 232, 249, 0.14) !important;
}

.sidebar-overlay {
  background: rgba(1, 2, 8, 0.78) !important;
  backdrop-filter: blur(10px);
}

.sidebar {
  background: rgba(2, 6, 16, 0.94) !important;
  border-right-color: var(--varnox-border) !important;
}

.nav-item a:hover,
.nav-item a.active {
  background: rgba(103, 232, 249, 0.1) !important;
  color: var(--varnox-cyan-soft) !important;
}

footer {
  background: rgba(2, 6, 16, 0.76) !important;
  border-top: 1px solid var(--varnox-border);
}

.pricing-card.featured {
  border-color: var(--varnox-border-strong) !important;
  box-shadow: 0 0 36px rgba(103, 232, 249, 0.14), var(--varnox-shadow) !important;
}

.popular-tag {
  background: linear-gradient(135deg, #a5f3fc, #38bdf8) !important;
  color: #02111a !important;
}

input,
select,
textarea {
  color: #f8fafc !important;
  background: rgba(2, 6, 16, 0.76) !important;
  border-color: rgba(186, 230, 253, 0.22) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(103, 232, 249, 0.36) !important;
  border-color: var(--varnox-cyan) !important;
}

@media (max-width: 720px) {
  .hero {
    min-height: 390px;
    padding: 3.25rem 1rem 3rem !important;
  }

  .metrics-banner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.auth-card,
.auth-container,
.login-card,
.signup-card,
.form-card {
  background: linear-gradient(145deg, rgba(8, 15, 29, 0.82), rgba(2, 6, 16, 0.62)) !important;
  border: 1px solid var(--varnox-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--varnox-shadow) !important;
  backdrop-filter: blur(16px);
}

.auth-card .brand,
.auth-container .brand,
.login-card .brand,
.signup-card .brand {
  color: #f8fafc !important;
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.18);
}

.auth-card .sub,
.auth-container .sub,
.login-card .sub,
.signup-card .sub,
.auth-card .footer-text a,
.auth-container .footer-text a,
.login-card .footer-text a,
.signup-card .footer-text a {
  color: var(--varnox-cyan-soft) !important;
}

button.btn,
#submitBtn,
button[type='submit'] {
  background: linear-gradient(135deg, #a5f3fc, #38bdf8) !important;
  color: #02111a !important;
  border: 1px solid rgba(165, 243, 252, 0.82) !important;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.25) !important;
}

button.btn:hover,
#submitBtn:hover,
button[type='submit']:hover {
  background: linear-gradient(135deg, #cffafe, #7dd3fc) !important;
}