/* ============================================================
   MidiVPN — Design System
   Token-driven, WCAG AA, 8px grid, fluid type via clamp()
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  /* Palette */
  --c-navy-950: #050d1a;
  --c-navy-900: #0a1628;
  --c-navy-800: #0d2040;
  --c-navy-700: #0d2b4e;
  --c-navy-600: #0d3b7a;
  --c-slate-500: #3d5a80;
  --c-slate-400: #6b8cae;
  --c-slate-200: #c8d8ea;
  --c-slate-100: #e8f0f8;

  --c-cyan-500:  #00d4ff;
  --c-cyan-400:  #33ddff;
  --c-cyan-300:  #80eaff;
  --c-orange-500:#ff6b35;
  --c-orange-400:#ff8c5a;

  --c-green-500: #00cc66;
  --c-green-600: #009944;
  --c-green-100: #e6fff2;

  --c-red-500:   #ef4444;
  --c-red-100:   #fee2e2;
  --c-amber-500: #f59e0b;
  --c-amber-100: #fef3c7;

  --c-surface:   #f8fafc;
  --c-white:     #ffffff;
  --c-text:      #1e293b;
  --c-text-muted:#64748b;
  --c-border:    #e2e8f0;

  /* Semantic aliases */
  --primary:     var(--c-navy-900);
  --accent:      var(--c-cyan-500);
  --accent-alt:  var(--c-orange-500);
  --success:     var(--c-green-500);
  --danger:      var(--c-red-500);
  --warning:     var(--c-amber-500);
  --dark:        var(--c-navy-950);
  --light:       var(--c-surface);
  --text:        var(--c-text);
  --border:      var(--c-border);

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill:9999px;
  --radius: var(--r-md);

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow:    0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.07);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.16), 0 6px 18px rgba(0,0,0,.09);

  /* Spacing (8px grid) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;

  /* Typography */
  --font-sans: 'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 350ms ease;

  /* Nav height */
  --nav-h: 56px;
  --banner-h: 32px;
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-navy-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
:focus-visible {
  outline: 2px solid var(--c-cyan-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── 3. Typography ─────────────────────────────────────────── */
h1 { font-size: clamp(1.875rem, 4vw + .5rem, 3rem);   line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.375rem, 2.5vw + .25rem, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin-bottom: var(--sp-2); }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem);        line-height: 1.3; font-weight: 600; }
h4 { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
p  { line-height: 1.7; }
.section-sub { color: var(--c-text-muted); font-size: clamp(.95rem, 1.5vw, 1.1rem); margin-bottom: var(--sp-4); max-width: 60ch; text-align: center;  margin-inline: auto;}
.section-sub-old { color: var(--c-text-muted); font-size: clamp(.95rem, 1.5vw, 1.1rem); margin-bottom: var(--sp-4); max-width: 60ch; }
.eyebrow {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--c-cyan-500);
  display: block; margin-bottom: var(--sp-1);
}

/* ── 4. Layout ─────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: 820px; }
.container--wide   { max-width: 1400px; }
section { padding: clamp(3rem, 6vw, 5rem) 0; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.text-center { text-align: center; }

/* ── 5. Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: .625rem 1.375rem;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-weight: 600; font-size: .9375rem;
  cursor: pointer; border: 2px solid transparent;
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  text-decoration: none; white-space: nowrap; line-height: 1.4;
  min-height: 44px; /* WCAG touch target */
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--c-cyan-500); color: var(--c-navy-950);
  border-color: var(--c-cyan-500);
}
.btn-primary:hover { background: var(--c-cyan-400); border-color: var(--c-cyan-400); box-shadow: 0 4px 16px rgba(0,212,255,.35); }

.btn-secondary {
  background: var(--c-orange-500); color: #fff;
  border-color: var(--c-orange-500);
}
.btn-secondary:hover { background: var(--c-orange-400); border-color: var(--c-orange-400); }

.btn-outline {
  background: transparent; color: var(--c-navy-700);
  border-color: var(--c-border);
}
.btn-outline:hover { border-color: var(--c-navy-700); background: var(--c-slate-100); }

.btn-outline-light {
  background: transparent; color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }

.btn-ghost {
  background: transparent; border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }

.btn-danger { background: var(--c-red-500); color: #fff; border-color: var(--c-red-500); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

.btn-business { background: var(--c-green-500); color: #fff; border-color: var(--c-green-500); }
.btn-business:hover { background: var(--c-green-600); border-color: var(--c-green-600); }

.btn-lg  { padding: .8125rem 1.875rem; font-size: 1rem; min-height: 52px; }
.btn-sm  { padding: .375rem .875rem; font-size: .8125rem; min-height: 36px; border-radius: var(--r-sm); }
.btn-xs  { padding: .25rem .625rem; font-size: .75rem; min-height: 28px; border-radius: var(--r-sm); }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: .5rem; min-width: 44px; border-radius: var(--r-sm); }

/* ── 6. IP Status Banner ───────────────────────────────────── */
.ip-banner {
  background: var(--c-navy-950);
  color: rgba(255,255,255,.75);
  font-size: .75rem;
  height: var(--banner-h);
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0; z-index: 200;
}
.ip-banner-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
}
.ip-banner-info { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: nowrap; }
.ip-label  { color: rgba(255,255,255,.4); }
.ip-sep    { color: rgba(255,255,255,.2); margin: 0 2px; }
.ip-banner-mobile { display: none; }
.ip-banner-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .72rem;
  padding: .2rem .75rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.ip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.ip-protected   { color: #00e676; background: rgba(0,230,118,.1); }
.ip-protected   .ip-dot { background: #00e676; box-shadow: 0 0 6px #00e676; animation: pulse-green 2s infinite; }
.ip-unprotected { color: #ff6b6b; background: rgba(255,107,107,.1); }
.ip-unprotected .ip-dot { background: #ff6b6b; box-shadow: 0 0 6px #ff6b6b; animation: pulse-red 2s infinite; }

@keyframes pulse-green { 0%,100%{box-shadow:0 0 4px #00e676} 50%{box-shadow:0 0 10px #00e676,0 0 20px rgba(0,230,118,.4)} }
@keyframes pulse-red   { 0%,100%{box-shadow:0 0 4px #ff6b6b} 50%{box-shadow:0 0 10px #ff6b6b,0 0 20px rgba(255,107,107,.4)} }

@media (max-width: 600px) {
  .ip-banner { height: auto; padding: .35rem 0; }
  .ip-banner-inner { flex-wrap: nowrap; gap: var(--sp-1); }
  .ip-banner-full   { display: none; }
  .ip-banner-mobile { display: inline; }
}

/* ── 7. Public Navbar (Glassmorphism) ──────────────────────── */
.navbar {
  position: sticky;
  top: var(--banner-h);
  z-index: 100;
  height: var(--nav-h);
  background: rgba(5,13,26,.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background var(--t-slow);
}
.nav-inner {
  height: 100%;
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-2);
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img-old { height: 36px; width: auto; }
.logo-img { height: 56px; width: auto; }

.nav-menu {
  display: flex; list-style: none;
  align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}
.nav-menu a {
  color: rgba(255,255,255,.72);
  font-size: .875rem; font-weight: 500;
  padding: .5rem .875rem;
  border-radius: var(--r-sm);
  display: block; transition: color var(--t-fast), background var(--t-fast);
  min-height: 44px; display: flex; align-items: center;
}
.nav-menu a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav-menu a.nav-active { color: var(--c-cyan-500); }

.nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,.15); margin: 0 var(--sp-1); }
.nav-divider-item { display: flex; align-items: center; }

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

/* Language switcher */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8); border-radius: var(--r-sm);
  padding: .375rem .75rem; font-size: .8125rem; cursor: pointer;
  transition: all var(--t-fast); white-space: nowrap; min-height: 36px;
  font-family: var(--font-sans);
}
.lang-btn:hover { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.1); }
.lang-btn .lang-short { display: none; }
.lang-btn .lang-full { display: inline; }
.lang-chevron { transition: transform var(--t-base); flex-shrink: 0; }
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #111827; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md); list-style: none; min-width: 140px;
  box-shadow: var(--shadow-lg); z-index: 300; overflow: hidden;
  padding: 4px;
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-dropdown li a {
  display: block; padding: .5rem .875rem; color: rgba(255,255,255,.75);
  font-size: .875rem; border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast); text-decoration: none;
}
.lang-dropdown li a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-dropdown li a.lang-active { color: var(--c-cyan-500); font-weight: 600; }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: .5rem; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  width: 22px; height: 2px; background: #fff;
  border-radius: 2px; transition: all var(--t-base); display: block;
}

/* ── 8. Public Footer ──────────────────────────────────────── */
.site-footer {
  background: var(--c-navy-950);
  color: rgba(255,255,255,.6);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-col h4 {
  color: rgba(255,255,255,.4);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: var(--sp-2);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul a {
  color: rgba(255,255,255,.55); font-size: .875rem;
  transition: color var(--t-fast);
}
.footer-col ul a:hover { color: #fff; text-decoration: none; }
.footer-logo { height: 50px; margin-bottom: var(--sp-2); }
.footer-logo.old { height: 32px; margin-bottom: var(--sp-2); }
.footer-brand p { font-size: .875rem; line-height: 1.65; max-width: 280px; color: rgba(255,255,255,.5); }
.footer-company { margin-top: var(--sp-2) !important; font-size: .75rem !important; color: rgba(255,255,255,.3) !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: var(--sp-2) 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-1);
  font-size: .75rem; color: rgba(255,255,255,.3);
}
.footer-bottom-links { display: flex; gap: var(--sp-2); }
.footer-bottom-links a { color: rgba(255,255,255,.3); font-size: .75rem; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); text-decoration: none; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── 9. Cookie Bar ─────────────────────────────────────────── */
.cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(5,13,26,.96);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.85);
  padding: var(--sp-2) clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); z-index: 9999; font-size: .8125rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 480px) { .cookie-bar { flex-direction: column; text-align: center; } }

/* ── 10. Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-2); }
.form-group label {
  display: block; font-weight: 500; font-size: .875rem;
  margin-bottom: 6px; color: var(--c-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: .625rem .875rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); font-size: .9375rem;
  font-family: var(--font-sans);
  background: var(--c-white); color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 44px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-cyan-500);
  box-shadow: 0 0 0 3px rgba(0,212,255,.15);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.field-hint { font-size: .75rem; color: var(--c-text-muted); margin-top: 5px; }
.captcha-group label { font-weight: 600; color: var(--c-cyan-500); }
.captcha-group input { max-width: 150px; font-size: 1.1rem; padding: .5rem .75rem; }
.captcha-img { border-radius: var(--r-sm); height: 46px; width: auto; flex-shrink: 0; }
.captcha-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: .5rem; }
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 2.5rem; }
.pwd-eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: .25rem; line-height: 1; opacity: .5; transition: opacity .15s; }
.pwd-eye:hover { opacity: .85; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ── 11. Alerts ────────────────────────────────────────────── */
.alert {
  padding: .875rem 1.125rem; border-radius: var(--r-md);
  margin-bottom: var(--sp-2); font-size: .9375rem;
  display: flex; align-items: flex-start; gap: .625rem;
}
.alert-error   { background: var(--c-red-100);   border: 1.5px solid #fca5a5; color: #991b1b; }
.alert-warning { background: var(--c-amber-100);  border: 1.5px solid #fcd34d; color: #92400e; }
.alert-success { background: var(--c-green-100);  border: 1.5px solid #6ee7b7; color: #065f46; }
.alert-info    { background: var(--c-slate-100);  border: 1.5px solid var(--c-slate-200); color: var(--c-navy-700); }

/* ── 12. Auth Pages ────────────────────────────────────────── */
.auth-section {
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem) 1rem;
  background: var(--c-surface);
}
.auth-card {
  background: var(--c-white); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-md);
}
.auth-card-wide { max-width: 640px; }
.auth-card h1 { margin-bottom: var(--sp-3); font-size: clamp(1.375rem, 3vw, 1.75rem); }
.auth-footer { text-align: center; margin-top: var(--sp-2); font-size: .875rem; color: var(--c-text-muted); }
.resend-block { margin-top: var(--sp-2); border-top: 1px solid var(--c-border); padding-top: var(--sp-2); }
.resend-block summary { cursor: pointer; color: var(--c-navy-700); font-size: .875rem; }
.resend-block p { font-size: .875rem; color: var(--c-text-muted); margin-bottom: .75rem; }
.resend-block form { margin-top: .75rem; }
.verify-hint { font-size: .875rem; color: var(--c-text-muted); margin: var(--sp-2) 0; }

/* ── 13. Hero Split (Home) ─────────────────────────────────── */
.hero-split {
  background: linear-gradient(135deg, var(--c-navy-950) 0%, var(--c-navy-700) 100%);
  color: #fff;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(1.5rem, 3vw, 3rem);
  position: relative; overflow: hidden;
}
.hero-split::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,212,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: clamp(3rem, 4vw, 4rem); align-items: center; }
.hero-left h1 { color: #fff; margin-bottom: var(--sp-2); }
.hero-eyebrow { color: var(--c-cyan-500); }
.hero-sub { color: rgba(255,255,255,.75); font-size: clamp(.95rem, 1.5vw, 1.1rem); margin-bottom: var(--sp-3); max-width: 52ch; }
.hero-bullets { list-style: none; margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: .5rem; }
.hero-bullets li { color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.login-card {
  background: var(--c-white); color: var(--c-text);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}
.login-card h2 { margin-bottom: var(--sp-2); font-size: 1.25rem; }
.login-card-footer { text-align: center; margin-top: var(--sp-2); font-size: .875rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .login-card { max-width: 480px; margin: 0 auto; }
}

/* ── 14. Trust Bar / Proof Strip ───────────────────────────── */
.trust-bar {
  background: var(--c-navy-900);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: var(--sp-2) 0;
}
.trust-bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
}
.trust-item-old {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.65); font-size: .8125rem; font-weight: 500;
  white-space: nowrap;
}
.trust-item {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.65); font-size: 1rem; font-weight: 500;
  white-space: nowrap;
}
.trust-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan-500); flex-shrink: 0; }

/* ── 15. Section Patterns ──────────────────────────────────── */
.section-dark {
  background: var(--c-navy-900); color: #fff;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .section-sub { color: rgba(255,255,255,.6); }
.section-surface { background: var(--c-surface); }
.section-white   { background: var(--c-white); }

/* ── 16. Why Cards ─────────────────────────────────────────── */
.why-section { background: var(--c-white); }
.why-section h2 { text-align: center; }
.why-grid-old { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.why-card {
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-icon { font-size: 2rem; display: block; margin-bottom: var(--sp-2); }
.why-card h3 { margin-bottom: .5rem; }
.why-card p  { color: var(--c-text-muted); font-size: .9375rem; }

/* ── 17. Comparison Table ──────────────────────────────────── */
.compare-table-wrap { overflow-x: auto; margin-top: var(--sp-4); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.compare-table-old { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare-table-old th { background: var(--c-navy-900); color: #fff; padding: .875rem 1.25rem; text-align: left; font-weight: 600; }
.compare-table th { background: var(--c-navy-900); color: #fff; padding: 1rem 1.5rem; text-align: left; font-weight: 600; }
.compare-table th:first-child { border-radius: var(--r-lg) 0 0 0; }
.compare-table th:last-child  { border-radius: 0 var(--r-lg) 0 0; }
.compare-table-old td { padding: .75rem 1.25rem; border-bottom: 1px solid var(--c-border); background: var(--c-white); }
.compare-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--c-border); background: var(--c-white); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--c-surface); }
.compare-yes  { color: var(--c-green-600); font-weight: 700; font-size: 1.1rem; }
.compare-no   { color: var(--c-red-500);   font-weight: 700; font-size: 1.1rem; }
.compare-part { color: var(--c-amber-500); font-weight: 700; font-size: 1.1rem; }
.compare-midi-col { background: rgba(0,212,255,.04) !important; }

/* ─/* -- 18. Pricing -------------------------------------------- */

/* ----- VPN Basic                  */
.pc-cta-basic {
  padding: 1.25rem;
}

.pricing-card-basic-horizontal {
  display: flex;
  align-items: center;
  border: 1px solid #e0e4ea;
  border-radius: 12px;
  background: #fff;
  max-width: 1100px;
  padding: 20px;
  gap: 32px;
  box-sizing: border-box;
}

.pricing-card-basic-horizontal .card-header {
  background: #eef0f4;
  padding: 28px 32px;
  min-width: 220px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  border-radius: 8px;
  flex-shrink: 0;
}

.pricing-card-basic-horizontal .card-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1a6abf;
}

.pricing-card-basic-horizontal .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pricing-card-basic-horizontal .amount {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
}

.pricing-card-basic-horizontal .period {
  font-size: 14px;
  color: #666;
}

.pricing-card-basic-horizontal .card-body {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 32px;
}

.pricing-card-basic-horizontal .target {
  margin: 0;
  font-size: 14px;
  color: #888;
  font-style: italic;
  white-space: nowrap;
}

.pricing-card-basic-horizontal .features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pricing-card-basic-horizontal .features-list li {
  font-size: 14px;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #e8eaed;
}

.pricing-card-basic-horizontal .features-list li:first-child {
  border-top: 1px solid #e8eaed;
}

/* THE FIX — center the button vertically */
.pricing-card-basic-horizontal .pc-cta {
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;        /* fill full card-body height */
}

.pricing-card-basic-horizontal .btn-outline {
  display: inline-block;
  padding: 14px 28px;
  border: 1.5px solid #1a6abf;
  border-radius: 8px;
  color: #1a6abf;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pricing-card-basic-horizontal .btn-outline:hover {
  background: #1a6abf;
  color: #fff;
}

@media (max-width: 768px) {
  .pricing-card-basic-horizontal {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .pricing-card-basic-horizontal .card-header {
    border-radius: 0;
    min-width: auto;
    min-height: auto;
    text-align: center;
    align-items: center;
  }
  .pricing-card-basic-horizontal .card-body {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
  .pricing-card-basic-horizontal .pc-cta-basic {
    width: 100%;
  }
  .pricing-card-basic-horizontal .pc-cta-basic .btn {
    width: 100%;
  }
}



/* ----- Current/Old section                  */
.pricing-section {
  background: var(--c-surface);
  padding: var(--sp-8) 0 var(--sp-10);
}
.pricing-section-head { text-align: center; margin-bottom: var(--sp-6); }
.pricing-section-head h2 { margin-bottom: .75rem; }
.pricing-section-head p  { color: var(--c-text-muted); font-size: 1rem; max-width: 560px; margin: 0 auto; }

/* Block */
.pricing-block {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--sp-4);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--c-border);
}
.pricing-block--business {
  background: linear-gradient(145deg, #0a1628 0%, #0d2040 100%);
  border-color: rgba(0,212,255,.2);
}
.pricing-block-header {
  display: flex; align-items: flex-start;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.pricing-block-icon { font-size: 2.25rem; line-height: 1; flex-shrink: 0; }
.pricing-block-header h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.pricing-block-header p  { font-size: .9rem; margin: 0; color: var(--c-text-muted); }
.pricing-block--business .pricing-block-header h3 { color: #fff; }
.pricing-block--business .pricing-block-header p  { color: rgba(255,255,255,.55); }

.pricing-subgroup { margin-bottom: var(--sp-4); }
.pricing-subgroup:last-child { margin-bottom: 0; }
.pricing-subgroup-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-text-muted);
  margin-bottom: var(--sp-2); padding-bottom: .5rem;
  border-bottom: 1px solid var(--c-border);
}

.pricing-no-price-note {
  background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--r-md);
  padding: .875rem 1.125rem;
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  margin-bottom: var(--sp-3);
}

/* Grid */
.pricing-grid { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.pricing-grid--2 { grid-template-columns: 1fr 1fr; }

/* Card — equal height columns, CTA always at bottom */
.pricing-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--c-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pricing-card.featured {
  border-color: var(--c-cyan-500);
  box-shadow: 0 0 0 1px var(--c-cyan-500), var(--shadow-sm);
}
.pricing-card.business {
  background: rgba(255,255,255,.04);
  border-color: rgba(0,212,255,.25);
}

/* Card header */
.pc-header {
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--c-surface);
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}
.pricing-card.featured .pc-header {
  background: linear-gradient(145deg, #0a1628, #0d3b7a);
  border-bottom-color: rgba(0,212,255,.15);
}
.pricing-card.featured .pc-header h3 { color: #fff; }
.pricing-card.featured .pc-tagline   { color: rgba(255,255,255,.6); }
.pricing-card.business .pc-header {
  background: linear-gradient(145deg, rgba(0,212,255,.1), rgba(0,212,255,.03));
  border-bottom-color: rgba(0,212,255,.15);
}
.pricing-card.business .pc-header h3 { color: #fff; }
.pricing-card.business .pc-tagline   { color: rgba(255,255,255,.55); }

/* Image */
.pc-img-wrap {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.pc-img {
  max-height: 120px; max-width: 140px;
  width: auto; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
  transition: transform var(--t-slow);
}
.pricing-card:hover .pc-img { transform: scale(1.07) translateY(-3px); }

/* Text inside header */
.pricing-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .3rem; color: var(--c-text); }
.pc-price { margin: .5rem 0 .25rem; }
.pc-amount { font-size: 2rem; font-weight: 800; color: var(--c-navy-900); }
.pc-period { font-size: .8125rem; opacity: .65; }
.pc-tagline { font-size: .8125rem; color: var(--c-text-muted); margin: .25rem 0 0; }
.pc-included-note { font-size: .75rem; color: rgba(255,255,255,.65); margin: .3rem 0 0; font-style: italic; }

.pc-badge {
  display: inline-block; padding: .25rem .7rem;
  border-radius: var(--r-pill); font-size: .7rem;
  font-weight: 700; margin-top: .5rem; letter-spacing: .03em;
}
.badge-available { background: rgba(0,153,68,.12); color: var(--c-green-600); }
.badge-soon      { background: rgba(245,158,11,.12); color: #92400e; }

/* Features */
.pc-features {
  list-style: none;
  padding: 1.25rem 1.5rem;
  flex: 1;
  display: flex; flex-direction: column; gap: .55rem;
  font-size: .875rem;
}
.pc-features li { color: var(--c-text-muted); }
.pricing-card.business .pc-features li { color: rgba(255,255,255,.65); }

/* CTA — always pinned to bottom, never overlapping */
.pc-cta {
  padding: 1.25rem;
  margin-top: auto;
  border-top: 1px solid var(--c-border);
}
.pricing-card.featured .pc-cta { border-top-color: rgba(0,212,255,.15); }
.pricing-card.business .pc-cta { border-top-color: rgba(0,212,255,.12); }
.pc-cta .btn { width: 100%; justify-content: center; }

/* Bundled note (Premium VPN) */
.pc-included-cta {
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: .8125rem; font-weight: 600;
  color: var(--c-cyan-500);
  background: rgba(0,212,255,.06);
  border-top: 1px solid rgba(0,212,255,.12);
  margin-top: auto;
}

/* Business CTA — cyan on dark */
.btn-business {
  background: var(--c-cyan-500);
  color: var(--c-navy-900);
  border-color: var(--c-cyan-500);
  font-weight: 700;
}
.btn-business:hover {
  background: var(--c-cyan-400);
  border-color: var(--c-cyan-400);
  box-shadow: 0 4px 20px rgba(0,212,255,.35);
  text-decoration: none;
}

@media (max-width: 700px) { .pricing-grid--2 { grid-template-columns: 1fr; } }
─ 19. Products ──────────────────────────────────────────── */
.products-section { background: var(--c-surface); }
.products-section--dark { background: var(--c-navy-900); }
.products-category-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-cyan-500); margin-bottom: .5rem;
}
.products-category-sub { color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.products-category-sub--light { color: rgba(255,255,255,.6); }

.product-full-card {
  display: grid; grid-template-columns: 1fr 360px;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  background: var(--c-white); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--c-border);
}
.product-full-card:last-child { margin-bottom: 0; }
.product-card--dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.product-card--dark .pfc-left h2,
.product-card--dark .pfc-left p { color: rgba(255,255,255,.9); }
.product-card--dark .pfc-what { color: rgba(255,255,255,.7); }
.product-card--dark .pfc-perfect {
  background: rgba(0,212,255,.08);
  border-color: var(--c-cyan-500);
  color: rgba(255,255,255,.85);
}
.product-card--dark .pfc-perfect strong { color: var(--c-cyan-500); }
.product-card--dark .pfc-features li { color: rgba(255,255,255,.75); }
.product-card--dark .pfc-includes { border-color: rgba(255,255,255,.1); }
.product-card--dark .pfc-includes strong { color: rgba(255,255,255,.9); }
.product-card--dark .pfc-includes li { color: rgba(255,255,255,.65); }
.product-card--dark .btn-outline {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
}
.product-card--dark .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

.pfc-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c-cyan-500); margin-bottom: .5rem; }
.pfc-left h2 { margin-bottom: .5rem; }
.pfc-tagline { color: var(--c-text-muted); font-size: 1rem; margin-bottom: var(--sp-2); }
.pfc-what { color: var(--c-text-muted); line-height: 1.75; margin-bottom: var(--sp-2); }
.pfc-perfect {
  background: var(--c-surface); border-left: 3px solid var(--c-cyan-500);
  padding: .75rem 1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--sp-2); font-size: .9rem;
}
.pfc-features { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp-2); }
.pfc-features li { font-size: .9rem; color: var(--c-text-muted); display: flex; align-items: flex-start; gap: .4rem; }
.pfc-includes { border-top: 1px solid var(--c-border); padding-top: var(--sp-2); margin-bottom: var(--sp-3); }
.pfc-includes strong { display: block; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin-bottom: .75rem; }
.pfc-includes ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.pfc-includes li { font-size: .875rem; color: var(--c-text-muted); }
.pfc-actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.pfc-right { display: flex; align-items: center; justify-content: center; }
.pfc-product-img { max-height: 260px; width: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.15)); transition: transform var(--t-slow); }
.product-full-card:hover .pfc-product-img { transform: scale(1.03) translateY(-4px); }

@media (max-width: 900px) {
  .product-full-card { grid-template-columns: 1fr; }
  .pfc-right { display: none; }
}

/* ── 20. Download ──────────────────────────────────────────── */
.download-section { background: var(--c-white); text-align: center; }
.download-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.download-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.5rem 2rem; border-radius: var(--r-lg);
  border: 1.5px solid var(--c-border); min-width: 120px;
  transition: all var(--t-base); color: var(--c-text);
  background: var(--c-white);
}
.download-card:hover { border-color: var(--c-cyan-500); background: var(--c-surface); text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dl-icon  { font-size: 2.25rem; }
.dl-label { font-weight: 600; font-size: .875rem; }

/* ── 21. FAQ ───────────────────────────────────────────────── */
.faq-hero { background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-700)); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.faq-hero h1 { color: #fff; margin-bottom: .5rem; }
.faq-hero p  { color: rgba(255,255,255,.65); font-size: 1.05rem; }
.faq-section { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); background: var(--c-surface); }
.faq-container { max-width: 820px; margin: 0 auto; }
.faq-group { margin-bottom: var(--sp-4); }
.faq-group-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-text-muted);
  margin-bottom: var(--sp-2); padding-bottom: .5rem;
  border-bottom: 1px solid var(--c-border);
}
.faq-item {
  background: var(--c-white); border-radius: var(--r-md);
  margin-bottom: .5rem; overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base);
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; cursor: pointer; font-weight: 500;
  font-size: .9375rem; list-style: none; gap: var(--sp-2);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: var(--c-surface); }
.faq-chevron { flex-shrink: 0; color: var(--c-navy-700); transition: transform var(--t-base); }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: .75rem 1.25rem 1.25rem; color: var(--c-text-muted); font-size: .9375rem; line-height: 1.75; border-top: 1px solid var(--c-border); }
.faq-answer strong { color: var(--c-text); }
.faq-cta { text-align: center; margin-top: var(--sp-4); padding: var(--sp-3); background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.faq-cta p { margin-bottom: var(--sp-2); font-size: 1.05rem; }

/* ── 22. Blog ──────────────────────────────────────────────── */
.blog-hero { background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-700)); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.blog-hero h1 { color: #fff; margin-bottom: .5rem; }
.blog-hero p  { color: rgba(255,255,255,.65); font-size: 1.05rem; }
.blog-section { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); background: var(--c-surface); }
.blog-container { max-width: 1100px; margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-2); }
.blog-card {
  background: var(--c-white); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.blog-date { font-size: .75rem; color: var(--c-text-muted); }
.blog-cat  { font-size: .6875rem; font-weight: 700; background: rgba(0,212,255,.1); color: var(--c-navy-700); padding: .2rem .625rem; border-radius: var(--r-pill); }
.blog-card h2 { font-size: 1.0625rem; margin-bottom: .6rem; line-height: 1.4; }
.blog-card h2 a { color: var(--c-text); }
.blog-card h2 a:hover { color: var(--c-navy-700); text-decoration: none; }
.blog-excerpt { color: var(--c-text-muted); font-size: .875rem; line-height: 1.65; flex: 1; margin-bottom: var(--sp-2); }
.blog-read-more { font-size: .875rem; font-weight: 600; color: var(--c-navy-700); margin-top: auto; }
.blog-read-more:hover { text-decoration: none; color: var(--c-navy-600); }

/* ── 23. Legal Pages ───────────────────────────────────────── */
.legal-hero { background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-700)); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.legal-hero h1 { color: #fff; margin-bottom: .5rem; }
.legal-updated { color: rgba(255,255,255,.5); font-size: .875rem; margin: 0; }
.legal-body { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); background: var(--c-surface); }
.legal-container {
  max-width: 780px; margin: 0 auto;
  background: var(--c-white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.legal-container h2 { font-size: 1.0625rem; font-weight: 700; color: var(--c-text); margin: var(--sp-3) 0 .75rem; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.legal-container h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-container p { color: var(--c-text-muted); line-height: 1.8; margin-bottom: var(--sp-2); }
.legal-container ul { color: var(--c-text-muted); line-height: 1.8; margin: 0 0 var(--sp-2) 1.25rem; }
.legal-container ul li { margin-bottom: .4rem; }
.legal-container a { color: var(--c-navy-700); text-decoration: underline; }
.legal-container a:hover { color: var(--c-navy-600); }
.legal-cta { margin-top: var(--sp-3); padding: var(--sp-2); background: var(--c-surface); border-radius: var(--r-md); text-align: center; }
.legal-cta p { margin: 0; }

/* ── 24. Product Detail Pages ──────────────────────────────── */
.pdp-hero { color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; position: relative; overflow: hidden; }
.pdp-hero--blue  { background: linear-gradient(135deg, var(--c-navy-950) 0%, var(--c-navy-600) 100%); }
.pdp-hero--green { background: linear-gradient(135deg, #0a2818 0%, #0d5c35 100%); }
.pdp-hero--dark  { background: linear-gradient(135deg, #050510 0%, #12122a 100%); }
.pdp-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,212,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.pdp-hero-inner { display: grid; grid-template-columns: 1fr 360px; gap: clamp(2rem, 4vw, 4rem); align-items: center; position: relative; }
.pdp-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c-cyan-500); margin-bottom: .5rem; display: block; }
.pdp-hero h1 { color: #fff; margin-bottom: .75rem; }
.pdp-tagline { font-size: clamp(.95rem, 1.5vw, 1.1rem); color: rgba(255,255,255,.75); margin-bottom: var(--sp-3); }
.pdp-hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* btn-outline inside dark hero needs light treatment */
.pdp-hero .btn-outline {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
  background: transparent;
}
.pdp-hero .btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}
.pdp-hero-img { display: flex; align-items: center; justify-content: center; }
.pdp-hero-img img { max-height: 280px; width: auto; filter: drop-shadow(0 8px 32px rgba(0,0,0,.4)); transition: transform var(--t-slow); }
.pdp-hero-img img:hover { transform: scale(1.03) translateY(-4px); }

.pdp-section { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.pdp-what { background: var(--c-white); }
.pdp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.pdp-col-text h2 { margin-bottom: var(--sp-2); }
.pdp-col-text p { color: var(--c-text-muted); line-height: 1.8; margin-bottom: var(--sp-2); }
.pdp-perfect {
  background: var(--c-surface); border-left: 3px solid var(--c-cyan-500);
  padding: .875rem 1.125rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pdp-perfect-label { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-cyan-500); margin-bottom: .35rem; }
.pdp-perfect p { margin: 0; color: var(--c-text-muted); font-size: .9375rem; }
.pdp-vis-img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); object-fit: cover; max-height: 320px; }

.pdp-features-section { background: var(--c-surface); }
.pdp-features-section h2 { text-align: center; margin-bottom: var(--sp-4); }
.pdp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-2); }
.pdp-feature-card {
  background: var(--c-white); border-radius: var(--r-lg);
  padding: var(--sp-3); box-shadow: var(--shadow-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pdp-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pdp-feature-icon { font-size: 2rem; display: block; margin-bottom: var(--sp-2); }
.pdp-feature-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.pdp-feature-card p { color: var(--c-text-muted); font-size: .9rem; line-height: 1.65; margin: 0; }

.pdp-specs-section { background: var(--c-white); }
.pdp-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.pdp-specs-col h2, .pdp-includes-col h2 { margin-bottom: var(--sp-2); }
.pdp-specs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pdp-specs-table th, .pdp-specs-table td { padding: .625rem .875rem; border-bottom: 1px solid var(--c-border); text-align: left; }
.pdp-specs-table th { color: var(--c-text-muted); font-weight: 500; width: 42%; }
.pdp-specs-table td { font-weight: 600; color: var(--c-text); }
.pdp-includes-list { list-style: none; padding: 0; margin: 0; }
.pdp-includes-list li { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid var(--c-border); font-size: .9375rem; color: var(--c-text); }
.pdp-includes-list li:last-child { border-bottom: none; }
.pdp-check { color: var(--c-green-600); font-weight: 700; flex-shrink: 0; }

.pdp-cta-section { background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-700)); padding: clamp(3rem, 6vw, 5rem) 0; }
.pdp-cta-section--dark { background: linear-gradient(135deg, #050510, #12122a); }
.pdp-cta-inner { text-align: center; color: #fff; }
.pdp-cta-inner h2 { color: #fff; margin-bottom: .75rem; }
.pdp-cta-inner p { color: rgba(255,255,255,.7); margin-bottom: var(--sp-3); font-size: 1.05rem; }
.pdp-cta-inner .btn { margin: 0 .5rem .75rem; }

@media (max-width: 900px) {
  .pdp-hero-inner { grid-template-columns: 1fr; }
  .pdp-hero-img { display: none; }
  .pdp-two-col { grid-template-columns: 1fr; }
  .pdp-specs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pdp-hero-actions { flex-direction: column; }
  .pdp-hero-actions .btn { width: 100%; }
}

/* ── 25. Onboarding ────────────────────────────────────────── */
.onboarding-section { background: var(--c-surface); padding: clamp(3rem, 6vw, 5rem) 0; }
.onboarding-header { text-align: center; margin-bottom: var(--sp-4); }
.onboarding-card { background: var(--c-white); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 760px; margin: 0 auto; box-shadow: var(--shadow-md); }
.role-selector, .products-selector { border: none; margin-bottom: var(--sp-3); }
.role-selector legend, .products-selector legend { font-weight: 600; margin-bottom: .75rem; font-size: .9375rem; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.role-card {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: var(--sp-2); border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-base); text-align: center;
}
.role-card:has(input:checked) { border-color: var(--c-cyan-500); background: rgba(0,212,255,.05); }
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-icon  { font-size: 1.75rem; }
.role-label { font-weight: 600; font-size: .875rem; }
.role-desc  { font-size: .75rem; color: var(--c-text-muted); }
.products-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; }
.check-label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; padding: .4rem; border-radius: var(--r-sm); }
.check-label:hover { background: var(--c-surface); }

/* ── 26. App Layout (Authenticated) ───────────────────────── */
body.app-layout { background: #f1f5f9; }

.app-navbar {
  background: rgba(5,13,26,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.app-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: var(--sp-2); height: 100%;
}
.app-logo { display: flex; align-items: center; flex-shrink: 0; }
.app-logo .logo-img { height: 50px; width: auto; }

.app-nav-links {
  display: flex; list-style: none; gap: 2px; flex: 1;
}
.app-nav-links a {
  display: flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.65); font-size: .875rem; font-weight: 500;
  padding: .5rem .875rem; border-radius: var(--r-sm);
  text-decoration: none; transition: all var(--t-fast);
  min-height: 44px; white-space: nowrap;
}
.app-nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-nav-links a.active { color: var(--c-cyan-500); background: rgba(0,212,255,.1); }

.app-nav-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

/* WireGuard status indicator in app nav */
.wg-status-indicator {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600;
  padding: .25rem .75rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.wg-status-indicator .wg-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.wg-connected    { color: #00e676; background: rgba(0,230,118,.1); }
.wg-connected    .wg-dot { background: #00e676; animation: pulse-green 2s infinite; }
.wg-disconnected { color: #ff6b6b; background: rgba(255,107,107,.1); }
.wg-disconnected .wg-dot { background: #ff6b6b; animation: pulse-red 2s infinite; }

/* Profile dropdown */
.profile-menu { position: relative; }
.profile-trigger {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; border-radius: var(--r-md); padding: .375rem .875rem;
  cursor: pointer; font-size: .875rem; transition: background var(--t-fast);
  min-height: 44px; font-family: var(--font-sans);
}
.profile-trigger:hover { background: rgba(255,255,255,.13); }
.profile-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-cyan-500); color: var(--c-navy-950);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; flex-shrink: 0;
}
.profile-name  { font-weight: 500; }
.profile-caret { font-size: .6rem; opacity: .6; }
.profile-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #111827; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); min-width: 210px; z-index: 200;
  box-shadow: var(--shadow-lg); overflow: hidden; padding: 4px;
}
.pd-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5625rem 1rem; color: rgba(255,255,255,.75);
  font-size: .875rem; text-decoration: none;
  transition: background var(--t-fast); white-space: nowrap;
  border-radius: var(--r-sm);
}
.pd-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.pd-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.pd-logout { color: #f87171; }
.pd-logout:hover { background: rgba(248,113,113,.1); color: #f87171; }

.app-plan-pill {
  font-size: .6875rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: #fff;
  text-transform: uppercase; letter-spacing: .04em;
}
.app-plan-basic_vpn   { background: rgba(100,100,100,.35); }
.app-plan-premium_vpn { background: rgba(0,212,255,.25); color: var(--c-cyan-300); }
.app-plan-vpn_box     { background: rgba(0,153,68,.35); }
.app-plan-home_vpn    { background: rgba(0,153,68,.35); }
.app-plan-office_vpn  { background: rgba(180,100,0,.45); }
.app-plan-cloud_vpn   { background: rgba(120,0,180,.35); }

.app-main {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  min-height: calc(100vh - var(--nav-h) - 48px);
}
.app-footer {
  background: var(--c-navy-950); color: rgba(255,255,255,.35);
  font-size: .75rem; height: 48px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.app-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.app-footer nav { display: flex; gap: var(--sp-2); }
.app-footer a { color: rgba(255,255,255,.35); text-decoration: none; }
.app-footer a:hover { color: rgba(255,255,255,.7); }

@media (max-width: 900px) { .app-nav-links { display: none; } }

/* ── 27. Dashboard ─────────────────────────────────────────── */
.dashboard-section { padding: clamp(1rem, 2vw, 1.5rem) 0; }
.dash-welcome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
.dash-plan-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 6px; font-size: .85rem; background: #0f172a; border: 1px solid #334155; color: #e2e8f0; margin-top: .35rem; }
.dash-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.dash-kpi { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem 0; text-decoration: none; color: #1e293b; transition: transform .15s; }
a.dash-kpi:hover { transform: translateY(-2px); text-decoration: none; }
.dash-ring { width: 120px; height: 120px; }
.dash-kpi-label { font-size: .78rem; color: #475569; text-align: center; font-weight: 500; }
.dash-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: .5rem; }
.dash-action { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem .75rem; background: #1a1d27; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; text-decoration: none; color: #e2e8f0; transition: border-color .15s, transform .15s; text-align: center; }
.dash-action:hover { border-color: #818cf8; transform: translateY(-2px); text-decoration: none; }
.dash-action-icon { font-size: 1.5rem; }
.dash-action strong { font-size: .82rem; font-weight: 600; }
@media (max-width: 768px) { .dash-kpi-grid, .dash-actions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-kpi-grid, .dash-actions-grid { grid-template-columns: 1fr; } }

/* ── 28. Data Tables ───────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); font-size: .9rem; }
.data-table th { background: var(--c-navy-900); color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 600; }
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--c-border); }
.data-table tr:hover td { background: var(--c-surface); }
.load-bar { display: inline-block; width: 60px; height: 7px; background: var(--c-border); border-radius: var(--r-pill); vertical-align: middle; margin-right: .4rem; overflow: hidden; }
.load-bar div { height: 100%; background: var(--c-green-500); border-radius: var(--r-pill); }
.empty-state { color: var(--c-text-muted); text-align: center; padding: clamp(2rem, 5vw, 4rem); }

/* ── 29. Devices ───────────────────────────────────────────── */
.devices-section { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.add-device-card { background: var(--c-white); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: var(--sp-3); box-shadow: var(--shadow-xs); border: 1.5px solid var(--c-border); }
.add-device-card h2 { margin: 0 0 var(--sp-2); font-size: 1.0625rem; }
.recommended-badge { font-size: .6875rem; font-weight: 700; background: rgba(0,212,255,.1); color: var(--c-navy-700); padding: .15rem .5rem; border-radius: var(--r-pill); margin-left: .4rem; }
.devices-list-wrap { margin-top: .5rem; }
.devices-list-wrap h2 { font-size: 1.0625rem; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: .5rem; }
.device-count { background: var(--c-navy-700); color: #fff; font-size: .6875rem; font-weight: 700; padding: .15rem .5rem; border-radius: var(--r-pill); }
.devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-2); }
.device-card { background: var(--c-white); border-radius: var(--r-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--shadow-xs); border: 1.5px solid var(--c-border); }
.device-card-header { display: flex; align-items: flex-start; gap: .75rem; }
.device-icon { font-size: 1.5rem; flex-shrink: 0; }
.device-info { flex: 1; }
.device-info strong { display: block; font-size: .9375rem; }
.device-node { font-size: .75rem; color: var(--c-text-muted); }
.device-card-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .75rem; color: var(--c-text-muted); }
.device-pubkey { font-size: .75rem; color: #aaa; display: flex; align-items: center; gap: .4rem; }
.pubkey-label { color: #bbb; }
.device-pubkey code { font-family: var(--font-mono); color: #888; }
.empty-state-card { background: var(--c-white); border: 1.5px dashed var(--c-border); border-radius: var(--r-lg); padding: 2.5rem; text-align: center; color: var(--c-text-muted); }
.empty-state-card span { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* ── 30. WireGuard Config Reveal ───────────────────────────── */
.wg-config-reveal { background: var(--c-navy-900); color: #e8f0fe; border-radius: var(--r-xl); padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: var(--sp-3); }
.wg-config-header { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.wg-config-icon { font-size: 1.75rem; flex-shrink: 0; }
.wg-config-header h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.0625rem; }
.wg-config-header p { margin: 0; font-size: .8125rem; color: rgba(255,255,255,.55); }
.wg-config-header strong { color: #ffd54f; }
.wg-config-body { display: grid; grid-template-columns: 1fr 220px; gap: var(--sp-3); align-items: start; }
.wg-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; font-size: .8125rem; color: rgba(255,255,255,.65); margin-bottom: .75rem; }
.wg-meta strong { color: #fff; }
.wg-conf-block { background: #030810; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 1rem; font-family: var(--font-mono); font-size: .75rem; line-height: 1.75; color: #a8d8a8; white-space: pre; overflow-x: auto; margin: 0 0 .75rem; }
.wg-conf-actions { display: flex; gap: .5rem; }
.wg-qr-label { font-size: .75rem; color: rgba(255,255,255,.55); margin: 0 0 .5rem; text-align: center; }
.wg-qr-box { background: #fff; border-radius: var(--r-md); padding: .75rem; display: flex; align-items: center; justify-content: center; min-height: 200px; }
@media (max-width: 640px) { .wg-config-body { grid-template-columns: 1fr; } }

/* ── 31. Modals ────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: var(--c-white); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2rem); max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); }
.modal-box h3 { margin: 0 0 .75rem; font-size: 1.125rem; }
.modal-box p { margin: 0 0 var(--sp-3); color: var(--c-text-muted); font-size: .9rem; line-height: 1.65; }
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; }

/* ── 32. Stats ─────────────────────────────────────────────── */
.stats-section { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.pstats-wrap { max-width: 1100px; }
.pstats-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pstats-header h1 { margin: 0 0 .25rem; }
.pstats-updated { color: var(--c-text-muted); font-size: .8125rem; margin: 0; }
.pstats-overall { font-size: .875rem; font-weight: 700; padding: .4rem 1rem; border-radius: var(--r-pill); background: rgba(0,153,68,.1); color: var(--c-green-600); border: 1px solid rgba(0,153,68,.2); white-space: nowrap; }
.pstats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pstats-card { background: var(--c-white); border-radius: var(--r-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--shadow-xs); border: 1.5px solid var(--c-border); }
.pstats-card-header { display: flex; align-items: flex-start; gap: .75rem; }
.pstats-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
.pstats-card-header h3 { margin: 0 0 .25rem; font-size: .9375rem; }
.pstats-status { font-size: .75rem; font-weight: 700; }
.status-ok   { color: var(--c-green-600); }
.status-warn { color: #92400e; }
.status-err  { color: var(--c-red-500); }
.pstats-metrics { display: flex; flex-direction: column; gap: .5rem; }
.pstats-metric { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; }
.pstats-metric-label { color: var(--c-text-muted); }
.pstats-metric-value { font-weight: 700; color: var(--c-text); }
.pstats-metric-value small { font-weight: 400; color: var(--c-text-muted); margin-left: .2rem; font-size: .75rem; }
.pstats-gauges { display: flex; flex-direction: column; gap: .5rem; }
.pstats-gauge { display: flex; flex-direction: column; gap: .2rem; }
.pstats-gauge-top { display: flex; justify-content: space-between; font-size: .75rem; color: var(--c-text-muted); }
.pstats-bar { height: 6px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.pstats-bar-fill { height: 100%; border-radius: var(--r-pill); transition: width .4s; }
.bar-ok     { background: var(--c-green-500); }
.bar-warn   { background: var(--c-amber-500); }
.bar-danger { background: var(--c-red-500); }
.pstats-section { margin-top: var(--sp-2); }
.pstats-section h2 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.pstats-nodes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-2); }
.pstats-node-card { background: var(--c-white); border-radius: var(--r-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; box-shadow: var(--shadow-xs); border: 1.5px solid var(--c-border); }
.pstats-node-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.pstats-node-header strong { display: block; font-size: .9375rem; }
.pstats-hostname { font-size: .75rem; color: var(--c-text-muted); font-family: var(--font-mono); }
.pstats-node-meta { display: flex; gap: var(--sp-2); font-size: .8125rem; color: var(--c-text-muted); flex-wrap: wrap; }

/* ── 33. Profile Pages ─────────────────────────────────────── */
.profile-wrap { max-width: 680px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2rem) 1rem; }
.profile-section { background: var(--c-white); border-radius: var(--r-lg); border: 1.5px solid var(--c-border); padding: 1.5rem; margin-bottom: var(--sp-2); box-shadow: var(--shadow-xs); }
.profile-section h2 { font-size: .9375rem; font-weight: 700; margin-bottom: var(--sp-2); color: var(--c-text); border-bottom: 1px solid var(--c-border); padding-bottom: .75rem; }
.profile-section h3 { font-size: .875rem; font-weight: 600; margin-bottom: .75rem; color: var(--c-text); }
.mfa-option { border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: 1rem; margin-bottom: .75rem; }
.mfa-option.active-mfa { border-color: var(--c-green-500); background: var(--c-green-100); }
.mfa-badge { display: inline-block; padding: .15rem .5rem; border-radius: var(--r-sm); font-size: .6875rem; font-weight: 700; }
.mfa-badge-active   { background: #dcfce7; color: #166534; }
.mfa-badge-inactive { background: #f3f4f6; color: #6b7280; }
.ticket-row { border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: .875rem 1rem; margin-bottom: .625rem; }
.ticket-status { display: inline-block; padding: .12rem .45rem; border-radius: var(--r-sm); font-size: .6875rem; font-weight: 700; text-transform: uppercase; }
.ticket-open        { background: #fef3c7; color: #92400e; }
.ticket-in_progress { background: #dbeafe; color: #1e40af; }
.ticket-resolved    { background: #dcfce7; color: #166534; }
.ticket-closed      { background: #f3f4f6; color: #6b7280; }
.plan-current { display: flex; align-items: center; gap: var(--sp-2); padding: 1rem; background: var(--c-surface); border-radius: var(--r-md); margin-bottom: var(--sp-2); }
.plan-icon-lg { font-size: 2rem; }
.upgrade-option { border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: 1rem; margin-bottom: .75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); transition: border-color var(--t-fast); }
.upgrade-option:hover { border-color: var(--c-cyan-500); }
.qr-wrap { text-align: center; padding: var(--sp-2) 0; }
.qr-wrap img { border-radius: var(--r-md); border: 4px solid #fff; box-shadow: var(--shadow-sm); }
.totp-secret { font-family: var(--font-mono); font-size: 1.0625rem; letter-spacing: .15em; background: var(--c-surface); padding: .5rem 1rem; border-radius: var(--r-sm); text-align: center; margin: .75rem 0; word-break: break-all; }
.opt-out-box { background: var(--c-red-100); border: 1.5px solid #fca5a5; border-radius: var(--r-md); padding: 1.25rem; }

/* ── 34. Home Offers ───────────────────────────────────────── */
.home-offers { background: var(--c-white); padding: var(--sp-8) 0; }
.home-offers-head { text-align: center; margin-bottom: var(--sp-5); }
.home-offers-head h2 { margin-bottom: .75rem; }
.home-offers-head p  { color: var(--c-text-muted); font-size: 1rem; max-width: 560px; margin: 0 auto; }
.home-offers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.offer-block {
  border-radius: var(--r-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; overflow: hidden;
}
.offer-consumer {
  background: linear-gradient(145deg, #e8f0fe 0%, #dbeafe 100%);
  border: 1.5px solid #bfdbfe;
}
.offer-business {
  background: linear-gradient(145deg, #0a1628 0%, #0d2040 100%);
  border: 1.5px solid rgba(0,212,255,.2);
}
.offer-block-header { display: flex; flex-direction: column; gap: .5rem; }
.offer-icon { font-size: 2.25rem; line-height: 1; }
.offer-block-header h3 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.offer-consumer .offer-block-header h3 { color: var(--c-navy-900); }
.offer-business .offer-block-header h3 { color: #fff; }
.offer-block-header p  { font-size: .9rem; margin: 0; }
.offer-consumer .offer-block-header p { color: var(--c-slate-500); }
.offer-business .offer-block-header p { color: rgba(255,255,255,.55); }

/* Product cards inside offer block */
.offer-products { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); flex: 1; }
.offer-product {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: 1.25rem 1rem;
  border-radius: var(--r-lg); text-align: center;
  transition: transform var(--t-base);
}
.offer-product:hover { transform: translateY(-3px); }
.offer-consumer .offer-product { background: rgba(255,255,255,.7); border: 1px solid rgba(191,219,254,.8); }
.offer-business .offer-product { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.offer-product img {
  height: 96px; width: 96px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.offer-product span { font-size: .875rem; font-weight: 700; }
.offer-consumer .offer-product span { color: var(--c-navy-900); }
.offer-business .offer-product span { color: #fff; }
.offer-product small { font-size: .75rem; line-height: 1.4; }
.offer-consumer .offer-product small { color: var(--c-text-muted); }
.offer-business .offer-product small { color: rgba(255,255,255,.5); }

/* CTAs */
.offer-consumer .btn-primary { margin-top: auto; }
.offer-business .btn-offer-business {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.5rem; border-radius: var(--r-md);
  background: var(--c-cyan-500); color: var(--c-navy-900);
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  border: none; transition: all var(--t-base); margin-top: auto;
}
.offer-business .btn-offer-business:hover {
  background: var(--c-cyan-400); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,212,255,.35); text-decoration: none;
}

@media (max-width: 900px) { .home-offers-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .offer-products { grid-template-columns: 1fr; } }

/* ── 35. Responsive ────────────────────────────────────────── */

/* Nav overlay for mobile menu dismiss */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 98;
}
.nav-overlay.open { display: block; }

/* Close button inside mobile menu — hidden on desktop */
.nav-close-item { display: none; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none; flex-direction: column;
    position: fixed; top: 0; right: 0;
    width: min(80vw, 320px); height: 100dvh;
    background: var(--c-navy-950);
    padding: var(--sp-3);
    padding-top: var(--sp-2);
    gap: 0; z-index: 99; overflow-y: auto;
    box-shadow: -4px 0 32px rgba(0,0,0,.5);
    border-left: 1px solid rgba(255,255,255,.07);
  }
  .nav-menu.open { display: flex; }
  .nav-menu li { border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-menu a { padding: .875rem .5rem; min-height: 52px; font-size: .9375rem; }
  .nav-divider-item { display: none; }

  /* Close button */
  .nav-close-item {
    display: flex; justify-content: flex-end;
    border-bottom: none !important;
    padding-bottom: var(--sp-1);
  }
  .nav-close {
    background: none; border: none; color: rgba(255,255,255,.7);
    font-size: 1.5rem; cursor: pointer; padding: .5rem;
    line-height: 1; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .nav-close:hover { color: #fff; }

  .nav-actions { gap: .5rem; }
  body.nav-open { overflow: hidden; }

  /* Language switcher: show short code on mobile */
  .lang-btn .lang-full { display: none; }
  .lang-btn .lang-short { display: inline; }

  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .cookie-bar { flex-direction: column; text-align: center; }
  .pstats-grid { grid-template-columns: 1fr; }
  .pstats-nodes-grid { grid-template-columns: 1fr; }
}

/* ── 36. Utility ───────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-hero {
  background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-700));
  color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero .section-sub { color: rgba(255,255,255,.65); margin: 0 auto; }
.pricing-no-price-note { background: var(--c-surface); border-radius: var(--r-md); padding: .875rem 1.125rem; font-size: .875rem; color: var(--c-text-muted); margin-bottom: var(--sp-3); border: 1px solid var(--c-border); }
.btn-ghost-dark { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); font-size: .8125rem; padding: .3rem .75rem; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; transition: all var(--t-fast); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

/* ── 35. Platform Stats (logged) ───────────────────────────── */
.ps-wrap { padding: 1.5rem 0 3rem; }
.ps-page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.ps-page-head h1 { font-size: 1.15rem; font-weight: 700; }
.ps-page-head small { font-size: .8rem; color: var(--c-text-muted); }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ps-card { background: #1a1d27; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; color: #e2e8f0; }
.ps-card-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; background: #22263a; border-bottom: 1px solid rgba(255,255,255,.07); }
.ps-card-head strong { flex: 1; font-size: .95rem; color: #f1f5f9; }
.ps-card-head .ps-loc { font-size: .75rem; color: #64748b; }
.ps-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ps-dot-ok   { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.ps-dot-warn { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.ps-dot-crit { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.ps-badge { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.ps-badge-ok   { background: rgba(34,197,94,.15);  color: #22c55e; }
.ps-badge-warn { background: rgba(245,158,11,.15); color: #f59e0b; }
.ps-badge-crit { background: rgba(239,68,68,.15);  color: #ef4444; }
.ps-kpi-row { display: flex; align-items: center; gap: .6rem; padding: .48rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.ps-kpi-row:last-child { border-bottom: none; }
.ps-kpi-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.ps-kpi-label { font-size: .8rem; color: #94a3b8; flex: 1; }
.ps-kpi-val { font-size: .85rem; font-weight: 600; white-space: nowrap; width: 44px; text-align: right; flex-shrink: 0; }
.ps-bar { width: 72px; height: 5px; flex-shrink: 0; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.ps-bar-fill { height: 100%; border-radius: 3px; }
.ps-card-foot { display: flex; align-items: center; justify-content: space-between; padding: .55rem 1rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .72rem; color: #64748b; }
.ps-empty { color: var(--c-text-muted); text-align: center; padding: 3rem; }
@media (max-width: 640px) { .ps-grid { grid-template-columns: 1fr; } }

/* ── 36. My Stats ───────────────────────────────────────────── */
.ms-wrap { padding: 1.5rem 0 3rem; }
.ms-page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.ms-page-head h1 { font-size: 1.15rem; font-weight: 700; }
.ms-summary { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ms-pill { background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 10px; padding: .75rem 1.25rem; display: flex; flex-direction: column; gap: .15rem; min-width: 120px; box-shadow: var(--shadow-xs); }
.ms-pill-val { font-size: 1.35rem; font-weight: 700; color: var(--c-navy-900); }
.ms-pill-label { font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ms-card { background: #1a1d27; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; color: #e2e8f0; }
.ms-card-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; background: #22263a; border-bottom: 1px solid rgba(255,255,255,.07); }
.ms-card-head strong { flex: 1; font-size: .95rem; color: #f1f5f9; }
.ms-card-head .ms-node { font-size: .8rem; color: #94a3b8; }
.ms-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ms-dot-active { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.ms-dot-removed { background: #64748b; }
.ms-row { display: flex; align-items: center; gap: .6rem; padding: .48rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.ms-row:last-child { border-bottom: none; }
.ms-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.ms-row-label { font-size: .8rem; color: #94a3b8; flex: 1; }
.ms-row-val { font-size: .85rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; }
.ms-row-val.ms-val-ok { color: #22c55e; }
.ms-row-val.ms-val-muted { color: #64748b; }
.ms-card-foot { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #94a3b8; }
.ms-card-foot a { color: #818cf8; font-size: .8rem; font-weight: 600; }
.ms-empty { color: var(--c-text-muted); text-align: center; padding: 3rem; }
@media (max-width: 640px) { .ms-grid { grid-template-columns: 1fr; } }

/* ── 37. Standalone Error / Maintenance Pages ──────────────── */
body.standalone-error-page {
  background: #0a1628;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  font-family: var(--font-sans);
}
.standalone-card {
  max-width: 480px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.standalone-logo { display: inline-block; margin-bottom: .5rem; }
.standalone-icon { font-size: 3.5rem; line-height: 1; }
.standalone-card h1 {
  font-size: 1.75rem; font-weight: 700; color: #f1f5f9;
}
.standalone-card p {
  color: rgba(255,255,255,.6); line-height: 1.7; font-size: .95rem;
}
.standalone-badge {
  display: inline-block; padding: .4rem 1.1rem; border-radius: 50px;
  font-size: .82rem; font-weight: 600;
}
.standalone-badge-warn {
  background: rgba(245,158,11,.15); color: #f59e0b;
  border: 1px solid rgba(245,158,11,.3);
}
.standalone-btn {
  display: inline-block; padding: .65rem 1.5rem;
  background: #00d4ff; color: #0a1628;
  border-radius: 8px; font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: opacity .15s;
}
.standalone-btn:hover { opacity: .85; text-decoration: none; }

/* 404 rendered inside main layout */
.standalone-inline {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 5rem 2rem; gap: 1rem;
}
.standalone-inline .standalone-icon { font-size: 3rem; }
.standalone-code {
  font-size: 6rem; font-weight: 800; line-height: 1;
  color: var(--c-navy-900); letter-spacing: -.04em;
}
.standalone-inline h1 { font-size: 1.5rem; font-weight: 700; color: var(--c-text); }
.standalone-inline p  { color: var(--c-text-muted); font-size: .95rem; }
.standalone-inline .standalone-btn {
  background: var(--c-navy-900); color: #fff; margin-top: .5rem;
}
.standalone-inline .standalone-btn:hover { background: var(--c-navy-800); }



.cmp-yes { color: #28a745; font-weight: bold; font-size: 1.5rem;}
.cmp-no { color: #dc3545; font-weight: bold; font-size: 1.3rem;}
.cmp-partial-old { color: #6c757d; font-weight: bold; }
.cmp-partial { color: #ffA500; font-weight: bold; font-size: 2rem; }