/* ============================================================
   ForexVPS Pro — Component & Page Styles
   ============================================================ */

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s-4); position: relative; }
.nav-dash .nav-inner { max-width: 100%; padding: 0 var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-bold); font-size: var(--fs-lg); white-space: nowrap; flex-shrink: 0; }
.brand-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  display: flex; align-items: center; justify-content: center;
  color: #04140E; font-weight: var(--fw-black);
  box-shadow: 0 4px 16px rgba(0,229,168,.3);
  flex-shrink: 0;
}
.brand-name { letter-spacing: -.02em; white-space: nowrap; }
.brand-name span { color: var(--brand-500); }

.nav-links { display: flex; gap: var(--s-1); align-items: center; flex-wrap: nowrap; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-link:hover { color: var(--text-1); background: var(--bg-subtle); }
.nav-link.active { color: var(--brand-500); background: rgba(0,229,168,.08); }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

.theme-toggle {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); background: var(--bg-subtle);
  border: 1px solid var(--border);
  transition: all var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--brand-500); border-color: var(--brand-500); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle { display: none; }
.nav-mobile-extra { display: none; }
@media (max-width: 960px) {
  .nav-inner { gap: var(--s-2); }
  .brand { font-size: var(--fs-base); gap: var(--s-2); }
  .brand-logo { width: 32px; height: 32px; font-size: var(--fs-sm); }
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: var(--s-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
  }
  .nav-links.open { display: flex; }
  .nav-link {
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
  }
  .nav-toggle { display: flex; }
  .nav-actions { gap: var(--s-2); }
  .nav-actions .btn:not(.theme-toggle):not(.btn-icon) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-8);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 80% -10%, rgba(79,140,255,.18), transparent 60%),
    radial-gradient(700px 500px at 10% 20%, rgba(0,229,168,.14), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--s-7); align-items: center;
  position: relative;
}
.hero h1 {
  font-size: var(--fs-4xl); font-weight: var(--fw-black);
  line-height: 1.05; letter-spacing: -.025em;
  margin: var(--s-5) 0 var(--s-4);
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--brand-500), var(--accent-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: var(--fs-md); color: var(--text-2); max-width: 540px; margin-bottom: var(--s-6); }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--s-7); margin-top: var(--s-7); flex-wrap: wrap; }
.hero-stat .v { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-1); }
.hero-stat .l { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }

/* Hero terminal mockup */
.hero-terminal {
  background: #0B1220;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #d6e1ff;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.hero-terminal-header { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: var(--s-4); }
.hero-terminal-header .dots { display: flex; gap: 6px; }
.hero-terminal-header .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.hero-terminal-header .dots span:nth-child(1) { background: #ff5f57; }
.hero-terminal-header .dots span:nth-child(2) { background: #febc2e; }
.hero-terminal-header .dots span:nth-child(3) { background: #28c840; }
.hero-terminal-header .title { color: #7A8AA8; font-size: var(--fs-xs); margin-left: var(--s-2); }
.hero-terminal pre { margin: 0; line-height: 1.7; overflow-x: auto; }
.hero-terminal .prompt { color: var(--brand-500); }
.hero-terminal .ok { color: #28c840; }
.hero-terminal .warn { color: #febc2e; }

@media (max-width: 960px) {
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-terminal { order: 1; }
}
@media (max-width: 640px) {
  .hero { padding: var(--s-5) 0 var(--s-5); }
  .hero h1 { font-size: 30px; line-height: 1.18; margin: var(--s-3) 0; }
  .hero-lead { font-size: var(--fs-base); margin-bottom: var(--s-4); }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .hero-terminal { padding: var(--s-4); font-size: 12px; }
  .trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    padding: var(--s-4) 0;
  }
}

/* ---------- Trust bar ---------- */
.trust-bar {
  display: flex; justify-content: space-around; align-items: center;
  flex-wrap: wrap; gap: var(--s-5);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trust-item .v { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--brand-500); }
.trust-item .l { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Feature card ---------- */
.feature-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,229,168,.1);
  color: var(--brand-500);
}
.feature-icon.accent { background: rgba(79,140,255,.1); color: var(--accent-500); }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: var(--fs-lg); }
.feature-card p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; line-height: var(--lh-base); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); align-items: stretch; }
.pricing-card {
  display: flex; flex-direction: column;
  padding: var(--s-6);
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--t-base) var(--ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-500); }
.pricing-card.featured {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, rgba(0,229,168,.04) 0%, var(--bg-surface) 50%);
  box-shadow: var(--shadow-glow);
}
.pricing-card .plan-name { font-size: var(--fs-sm); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-semibold); }
.pricing-card .plan-price { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-black); margin: var(--s-2) 0; letter-spacing: -.02em; }
.pricing-card .plan-price .currency { font-size: var(--fs-lg); color: var(--text-3); vertical-align: top; margin-right: 2px; }
.pricing-card .plan-price .period { font-size: var(--fs-sm); color: var(--text-3); font-weight: var(--fw-medium); font-family: var(--font-sans); }
.pricing-card .plan-tagline { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-5); min-height: 40px; }
.pricing-card .plan-features { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; flex: 1; }
.pricing-card .plan-features li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.pricing-card .plan-features li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--brand-500); margin-top: 2px; }
.pricing-card .featured-ribbon {
  position: absolute; top: -1px; right: var(--s-5);
  background: var(--brand-500); color: #04140E;
  padding: 4px var(--s-3); border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
}
.pricing-card .specs-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  padding: var(--s-4); background: var(--bg-subtle); border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.specs-mini .spec { display: flex; flex-direction: column; gap: 2px; }
.specs-mini .spec .k { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.specs-mini .spec .v { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--fs-base); }

.pricing-toggle {
  display: inline-flex; padding: 4px; background: var(--bg-subtle); border-radius: var(--r-pill); border: 1px solid var(--border);
}
.pricing-toggle button { padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); transition: all var(--t-fast); }
.pricing-toggle button.active { background: var(--brand-500); color: #04140E; }

@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ---------- Latency showcase ---------- */
.latency-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  position: relative;
  overflow: hidden;
}
.latency-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0,229,168,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,168,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.latency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); position: relative; }
.latency-bar-list { display: flex; flex-direction: column; gap: var(--s-4); }
.latency-bar-row { display: flex; align-items: center; gap: var(--s-4); }
.latency-bar-row .broker { width: 130px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.latency-bar-row .bar { flex: 1; height: 28px; background: var(--bg-subtle); border-radius: var(--r-xs); position: relative; overflow: hidden; }
.latency-bar-row .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success-500), var(--brand-500));
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--s-3);
  color: #04140E; font-weight: var(--fw-bold); font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.latency-bar-row .bar-fill.medium { background: linear-gradient(90deg, var(--warn-500), #ff7a45); }
.latency-bar-row .bar-fill.slow { background: linear-gradient(90deg, var(--danger-500), #ff8a3c); }

@media (max-width: 960px) { .latency-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .latency-section { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .latency-bar-row { gap: var(--s-2); }
  .latency-bar-row .broker { width: 92px; font-size: var(--fs-xs); }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-8);
}
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--s-6); margin-bottom: var(--s-7); }
.footer-col h5 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: var(--s-4); font-weight: var(--fw-semibold); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-col a { font-size: var(--fs-sm); color: var(--text-2); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--brand-500); }
.footer-brand p { color: var(--text-3); font-size: var(--fs-sm); margin: var(--s-4) 0; max-width: 320px; }
.footer-social { display: flex; gap: var(--s-3); }
.footer-social a { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: all var(--t-fast); }
.footer-social a:hover { background: var(--brand-500); color: #04140E; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-3); flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Dashboard layout ---------- */
.dash-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - var(--nav-h)); }
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: var(--s-5) var(--s-4);
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.sidebar-section { margin-bottom: var(--s-5); }
.sidebar-section h6 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: var(--fw-semibold); margin: var(--s-3) var(--s-3) var(--s-2); }
.sidebar-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--bg-subtle); color: var(--text-1); }
.sidebar-link.active { background: rgba(0,229,168,.1); color: var(--brand-500); }
.sidebar-link .badge { margin-left: auto; padding: 2px 8px; font-size: 10px; }

.dash-main { padding: var(--s-6) var(--s-7); min-width: 0; max-width: 1560px; width: 100%; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); }
.dash-title { flex: 1; min-width: 280px; }
.dash-title h1 { font-size: var(--fs-2xl); line-height: 1.25; }
.dash-title p { color: var(--text-3); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.5; }

.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .dash-grid { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .dash-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .dash-main { padding: var(--s-4); padding-bottom: 92px; }
  .dash-header { align-items: stretch; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
  .dash-title h1 { font-size: var(--fs-xl); }
}
@media (max-width: 560px) {
  .dash-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .stat { padding: var(--s-3) var(--s-4); }
  .stat-value { font-size: var(--fs-lg); }
}
@media (max-width: 400px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- Balance card (wallet) ---------- */
.balance-card {
  position: relative;
  background: linear-gradient(135deg, #0B1220 0%, #131C30 60%, #1A2540 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  overflow: hidden;
}
.balance-card::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,229,168,.25), transparent 60%);
  pointer-events: none;
}
.balance-card .label { color: rgba(255,255,255,.6); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-semibold); }
.balance-card .amount { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-black); margin: var(--s-2) 0; letter-spacing: -.02em; }
.balance-card .amount .currency { font-size: var(--fs-lg); color: rgba(255,255,255,.6); vertical-align: top; margin-right: 4px; }
.balance-card .actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); position: relative; z-index: 1; }
.balance-card .actions .btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.balance-card .actions .btn:hover { background: var(--brand-500); color: #04140E; border-color: var(--brand-500); }
.balance-card .meta { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: rgba(255,255,255,.5); margin-top: var(--s-5); }

/* ---------- VPS instance card ---------- */
.vps-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.vps-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.vps-card-head .name { font-weight: var(--fw-bold); font-size: var(--fs-md); display: flex; align-items: center; gap: var(--s-2); }
.vps-card-head .ip { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
.vps-card .specs-row { display: flex; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vps-card .specs-row .spec { flex: 1; min-width: 70px; display: flex; flex-direction: column; gap: 2px; }
.vps-card .specs-row .spec .k { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.vps-card .specs-row .spec .v { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vps-card .meta-row { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap; gap: var(--s-2); }
.vps-card .actions-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.vps-card .actions-row .btn { flex: 1; min-width: 0; }

/* ---------- Status indicator ---------- */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.running { background: var(--success-500); box-shadow: 0 0 0 3px rgba(0,208,132,.2); }
.status-dot.stopped { background: var(--text-3); }
.status-dot.starting { background: var(--warn-500); animation: blink 1.2s infinite; }
.status-dot.error { background: var(--danger-500); box-shadow: 0 0 0 3px rgba(255,77,109,.25); }
@keyframes blink { 50% { opacity: .3 } }

/* ---------- Top-up methods ---------- */
.pay-method {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.pay-method:hover { border-color: var(--brand-500); }
.pay-method.active, .pay-method:has(input:checked) { border-color: var(--brand-500); background: rgba(0,229,168,.04); }
.pay-method .icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.pay-method .info { flex: 1; min-width: 0; }
.pay-method .info .name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.pay-method .info .desc { font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Amount picker ---------- */
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.amount-chip {
  padding: var(--s-3) var(--s-2);
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.amount-chip:hover { border-color: var(--brand-500); }
.amount-chip.active { border-color: var(--brand-500); background: rgba(0,229,168,.06); color: var(--brand-500); }

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: calc(100vh - var(--nav-h));
  display: grid; grid-template-columns: 1fr 1fr;
}
.auth-aside {
  background: linear-gradient(135deg, #0B1220 0%, #131C30 50%, #1A2540 100%);
  color: #fff; padding: var(--s-8); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(0,229,168,.18), transparent 60%),
    radial-gradient(500px 300px at 20% 80%, rgba(79,140,255,.15), transparent 60%);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h2 { font-size: var(--fs-2xl); line-height: 1.15; }
.auth-aside .quote { font-size: var(--fs-md); line-height: var(--lh-base); margin-top: var(--s-4); color: rgba(255,255,255,.85); }
.auth-aside .quote-author { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.auth-bullets { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.auth-bullets li { display: flex; align-items: center; gap: var(--s-3); color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.auth-bullets svg { color: var(--brand-500); width: 20px; height: 20px; flex-shrink: 0; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s-7); }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.auth-form .sub { color: var(--text-3); margin-bottom: var(--s-6); font-size: var(--fs-sm); }
.auth-form .alt { text-align: center; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-3); }
.auth-form .alt a { color: var(--brand-500); font-weight: var(--fw-semibold); }

@media (max-width: 960px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

/* ---------- CTA section ---------- */
.cta-band {
  background: linear-gradient(135deg, #0B1220 0%, #131C30 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-8);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(500px 300px at 50% 0%, rgba(0,229,168,.2), transparent 60%),
    radial-gradient(400px 300px at 80% 100%, rgba(79,140,255,.15), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,.7); font-size: var(--fs-md); max-width: 540px; margin: 0 auto var(--s-6); }

/* ---------- Network map (features page) ---------- */
.network-map {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  position: relative;
  min-height: 380px;
  background-image:
    linear-gradient(rgba(0,229,168,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,168,.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.network-node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: var(--fs-xs);
}
.network-node .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(0,229,168,.2), 0 0 0 8px rgba(0,229,168,.1);
  position: relative;
}
.network-node .dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--brand-500);
  animation: ping 2s var(--ease) infinite;
}
.network-node .city { font-weight: var(--fw-semibold); color: var(--text-1); }
.network-node .ms { font-family: var(--font-mono); color: var(--text-3); }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

/* ---------- Comparison table ---------- */
.compare-table th:first-child, .compare-table td:first-child { font-weight: var(--fw-medium); color: var(--text-1); }
.compare-table .check { color: var(--brand-500); width: 20px; height: 20px; display: inline-block; }
.compare-table .x { color: var(--text-3); width: 20px; height: 20px; display: inline-block; }
.compare-table td { text-align: center; }
.compare-table td:first-child { text-align: left; }

/* ---------- Steps / How it works ---------- */
.step { display: flex; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-family: var(--font-mono);
  color: var(--brand-500);
}
.step-content h4 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.step-content p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

/* ---------- Faq ---------- */
.faq-item { border-bottom: 1px solid var(--border); padding: var(--s-4) 0; cursor: pointer; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); font-size: var(--fs-md); gap: var(--s-3); }
.faq-q .chev { transition: transform var(--t-base); color: var(--text-3); flex-shrink: 0; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { color: var(--text-2); font-size: var(--fs-sm); max-height: 0; overflow: hidden; transition: max-height var(--t-base) var(--ease); padding-top: 0; }
.faq-item.open .faq-a { max-height: 260px; padding-top: var(--s-3); }

/* ---------- Console mockup (VPS detail) ---------- */
.console-window {
  background: #0a0e1a; color: #d6e1ff;
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: var(--s-4); min-height: 220px; line-height: 1.7;
  border: 1px solid rgba(255,255,255,.06);
  overflow: auto;
  white-space: pre;
}
.console-window .prompt { color: var(--brand-500); }
.console-window .out { color: #d6e1ff; }
.console-window .ok { color: #28c840; }
.console-window .err { color: var(--danger-500); }

/* ---------- Deploy summary sticky card ---------- */
.deploy-summary-card { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
@media (max-width: 960px) {
  .deploy-summary-card { position: static; }
}

/* ---------- Mobile Responsive Enhancements ---------- */
@media (max-width: 768px) {
  .balance-card { padding: var(--s-5); }
  .balance-card .amount { font-size: var(--fs-2xl); }
  .balance-card .actions { flex-wrap: wrap; }
  .balance-card .actions .btn { flex: 1; min-width: 140px; }
  .balance-card .meta { flex-direction: column; gap: 4px; }

  .vps-card { padding: var(--s-4); }
  .vps-card-head { flex-wrap: wrap; }
  .vps-card .specs-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .vps-card .actions-row .btn { min-width: calc(50% - var(--s-2)); }

  .amount-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }

  .auth-main { padding: var(--s-5) var(--s-4) 100px; align-items: flex-start; }
  .auth-form h1 { font-size: var(--fs-xl); }

  .cta-band { padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); }
  .cta-band h2 { font-size: var(--fs-xl); }
  .cta-band p { font-size: var(--fs-sm); }

  .network-map {
    min-height: auto;
    padding: var(--s-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
  }
  .network-node {
    position: static !important;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-3);
    text-align: center;
  }
  .network-map .alert {
    position: static !important;
    grid-column: 1 / -1;
    margin-top: var(--s-2);
  }

  .footer { padding: var(--s-7) 0 calc(var(--s-7) + 70px); }
}

/* ---------- Mobile Bottom App Navigation Bar ---------- */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 960px) {
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
    padding: 6px var(--s-2) calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(11, 18, 32, 0.08);
  }
  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 11px;
    font-weight: var(--fw-medium);
    text-decoration: none;
    position: relative;
    transition: color var(--t-fast), background var(--t-fast);
  }
  .mobile-bottom-nav a svg,
  .mobile-bottom-nav a i {
    width: 19px;
    height: 19px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-bottom-nav a.active {
    color: var(--brand-500);
    font-weight: var(--fw-semibold);
  }
  .mobile-bottom-nav a .mob-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    background: var(--warn-500);
    color: #fff;
    font-size: 9px;
    font-weight: var(--fw-bold);
    padding: 1px 5px;
    border-radius: var(--r-full);
    line-height: 1.2;
  }
}