/* ═══════════════════════════════════════════════════════════════════════════════
   Cloakly — Vercel Clean Slate / Electric Blue Design System
   Palette: Canvas #F8FAFC (slate-50) · Cards & Panels #FFFFFF
            Borders #E2E8F0 (slate-200) · Brand Accent #0070F3 (Electric Blue)
            Headings #0F172A (slate-900) · Secondary #64748B (slate-500)
   Font: Inter (Google Fonts) · JetBrains Mono
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (Vercel Clean Slate / Electric Blue)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-base:      #f8fafc;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-overlay:   #ffffff;
  --bg-muted:     #f1f5f9;
  --bg-subtle:    rgba(15, 23, 42, 0.03);
  --bg-hover:     #f1f5f9;
  --bg-active:    #e2e8f0;

  /* Borders & Dividers */
  --border:       #e2e8f0;
  --border-sub:   #f1f5f9;
  --border-hover: #cbd5e1;
  --border-focus: #0070f3;
  --border-accent:rgba(0, 112, 243, 0.35);

  /* Brand Accent: Electric Blue */
  --accent:       #0070f3;
  --accent-light: #3291ff;
  --accent-hover: #0060df;
  --accent-active:#0051c4;
  --accent-glow:  rgba(0, 112, 243, 0.12);
  --accent-dim:   rgba(0, 112, 243, 0.08);
  --accent-solid: #0070f3;
  --accent-ring:  #bfdbfe;

  /* Secondary Accent */
  --indigo:       #4f46e5;
  --indigo-glow:  rgba(79, 70, 229, 0.12);

  /* Link */
  --link:         #0070f3;
  --link-light:   #3291ff;

  /* Semantic Status — Exact Specification */
  /* Allowed / Active: Bg #ECFDF5, Border #A7F3D0, Text #059669 */
  --status-allow-bg:     #ecfdf5;
  --status-allow-border: #a7f3d0;
  --status-allow-text:   #059669;

  /* Blocked / Bot: Bg #FEF2F2, Border #FECACA, Text #DC2626 */
  --status-block-bg:     #fef2f2;
  --status-block-border: #fecaca;
  --status-block-text:   #dc2626;

  /* Suspicious / Proxy / Warning: Bg #FFFBEB, Border #FDE68A, Text #D97706 */
  --status-warn-bg:      #fffbeb;
  --status-warn-border:  #fde68a;
  --status-warn-text:    #d97706;

  /* General Semantic Variables */
  --success:      #059669;
  --success-dim:  #ecfdf5;
  --warning:      #d97706;
  --warning-dim:  #fffbeb;
  --danger:       #dc2626;
  --danger-dim:   #fef2f2;
  --info:         #0070f3;
  --info-dim:     #eff6ff;

  /* Typography */
  --text-primary:  #0f172a;
  --text-secondary:#64748b;
  --text-tertiary: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-link:     #0070f3;

  /* Fonts */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', 'Fira Code', Consolas, monospace;

  /* Radii */
  --r-xs:  4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 20px rgba(0, 112, 243, 0.15);

  /* Motion & Soft Fluid Animations */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fluid: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --t-fast:     0.18s;
  --t-base:     0.3s;
  --t-slow:     0.5s;
  --shadow-soft: 0 12px 32px -4px rgba(15, 23, 42, 0.08);

  /* Backward Compatibility Aliases */
  --clr-bg:var(--bg-base); --clr-bg-card:var(--bg-elevated); --clr-bg-hover:var(--bg-hover);
  --clr-border:var(--border); --clr-border-glow:var(--border-accent);
  --clr-primary:#0f172a; --clr-primary-lite:#334155; --clr-secondary:#64748b;
  --clr-accent:var(--accent); --clr-success:var(--success); --clr-warning:var(--warning); --clr-danger:var(--danger);
  --clr-text:var(--text-primary); --clr-text-muted:var(--text-secondary); --clr-text-dim:var(--text-tertiary);
  --font-display:var(--font-sans);
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:3.75rem;
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl); --radius-full:var(--r-full);
  --space-xs:var(--sp-1); --space-sm:var(--sp-2); --space-md:var(--sp-4); --space-lg:var(--sp-6);
  --space-xl:var(--sp-10); --space-2xl:var(--sp-16); --space-3xl:var(--sp-24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. GLOBAL RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{
  font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.6;
  background:var(--bg-base);color:var(--text-primary);min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(0, 112, 243, 0.04), transparent 70%),
    linear-gradient(to right, rgba(226, 232, 240, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)}
button{font-family:var(--font-sans);background:none;cursor:pointer;border:none}
input,textarea,select{font-family:var(--font-sans)}
code{
  font-family:var(--font-mono);font-size:.85em;background:#f1f5f9;
  padding:2px 6px;border-radius:var(--r-xs);color:#0f172a;border:1px solid #e2e8f0;
}

/* Custom scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
::selection{background:#bfdbfe;color:#0f172a}

/* ─── Page Loader ───────────────────────────────────────────────────────────── */
.page-loader{position:fixed;inset:0;z-index:9999;background:#ffffff;display:flex;align-items:center;justify-content:center;transition:opacity .3s var(--ease),visibility .3s}
.page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.page-loader__bar{width:140px;height:3px;background:#e2e8f0;border-radius:3px;overflow:hidden;position:relative}
.page-loader__bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0070f3,#3291ff);animation:loaderSlide .9s var(--ease) infinite}
@keyframes loaderSlide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ─────────────────────────────────────────────────────────────────────────────
   3. BRAND LOGO (Iconic Geometric Cloak Emblem)
   ───────────────────────────────────────────────────────────────────────────── */
.brand-logo{
  display:inline-flex;align-items:center;gap:10px;font-weight:800;
  font-size:15px;letter-spacing:-.03em;color:#0f172a;user-select:none;text-decoration:none;
}
.brand-logo-icon{
  position:relative;width:30px;height:30px;border-radius:8px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:transparent !important;
  box-shadow:none !important;
  flex-shrink:0;
  transition:transform .2s ease;
}
.brand-logo:hover .brand-logo-icon{
  transform:scale(1.05);
}
.brand-logo-icon img, .brand-logo-img{
  width:100%;height:100%;object-fit:contain;display:block;border-radius:8px;
  background:transparent !important;
}
.brand-logo-icon svg, .brand-logo svg{
  display:none !important;
}
.brand-logo-text{display:flex;align-items:center;gap:6px}
.brand-logo-title{font-size:15px;font-weight:800;letter-spacing:-.03em;color:#0f172a}
.brand-logo-badge{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;
  background:#eff6ff;color:#0070f3;border:1px solid #bfdbfe;
  letter-spacing:.06em;text-transform:uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. NAVIGATION (Navbar)
   ───────────────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 var(--sp-6);
  background:rgba(255, 255, 255, 0.85);backdrop-filter:blur(20px) saturate(190%);
  -webkit-backdrop-filter:blur(20px) saturate(190%);
  border-bottom:1px solid #e2e8f0;
}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__link{
  padding:6px 12px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--text-secondary);
  transition:all var(--t-fast) var(--ease);
}
.nav__link:hover{background:var(--bg-hover);color:#0f172a}
.nav__link.active{color:#0070f3;background:#eff6ff;font-weight:600}

/* Free Trial Telegram Button in Navbar */
.btn-free-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #0284c7 0%, #0070f3 100%);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 112, 243, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-free-trial:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 112, 243, 0.5);
  background: linear-gradient(135deg, #0369a1 0%, #0060df 100%);
  color: #ffffff !important;
}
.btn-free-trial svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.btn-free-trial:hover svg {
  transform: translateX(1px) rotate(-10deg);
}

@media (max-width: 768px) {
  .nav__links .nav__link {
    display: none;
  }
}
@media (max-width: 480px) {
  .btn-free-trial {
    padding: 5px 10px;
    font-size: 11px;
  }
  .btn-free-trial span {
    display: inline;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. BUTTONS & VERCEL ELECTRIC BLUE SHIMMER
   ───────────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  cursor:pointer;user-select:none;transition:all var(--t-fast) var(--ease);
  border:1px solid transparent;outline:none;position:relative;
}
.btn:active{transform:scale(0.98)}
.btn:focus-visible{box-shadow:0 0 0 2px #ffffff,0 0 0 4px #bfdbfe}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Primary — Vercel Electric Blue */
.btn--primary, .cta-shimmer{
  background:linear-gradient(135deg, #0070f3 0%, #0060df 100%);
  color:#ffffff !important;
  border-color:#0060df;
  box-shadow:0 1px 3px rgba(0, 112, 243, 0.3), 0 0 0 1px rgba(0, 112, 243, 0.1);
  position:relative;
  overflow:hidden;
}
.btn--primary:hover, .cta-shimmer:hover{
  background:linear-gradient(135deg, #0060df 0%, #0051c4 100%);
  box-shadow:0 4px 14px rgba(0, 112, 243, 0.4);
  transform:translateY(-1px);
  color:#ffffff !important;
}
.btn--primary:active, .cta-shimmer:active{
  transform:translateY(1px) scale(0.98);
}

/* 45° Diagonal Light Shimmer Sweep */
.btn--primary::after, .cta-shimmer::after{
  content:'';
  position:absolute;
  top:-60%;
  left:-80%;
  width:50%;
  height:240%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  transform:rotate(45deg);
  pointer-events:none;
  animation:cta-sheen-loop 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.btn--primary:hover::after, .cta-shimmer:hover::after{
  animation:cta-sheen-fast 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cta-sheen-loop {
  0%, 70% { transform:translateX(-250%) rotate(45deg); }
  85%, 100% { transform:translateX(380%) rotate(45deg); }
}
@keyframes cta-sheen-fast {
  0% { transform:translateX(-250%) rotate(45deg); }
  100% { transform:translateX(380%) rotate(45deg); }
}

/* Outline button */
.btn--outline{
  background:#ffffff;color:#0f172a;
  border:1px solid #e2e8f0;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.05);
}
.btn--outline:hover{
  background:#f8fafc;border-color:#cbd5e1;color:#0070f3;
}

/* Ghost button */
.btn--ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn--ghost:hover{background:var(--bg-hover);color:#0f172a}

/* Danger / Warning */
.btn--danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.btn--danger:hover{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}

/* Sizes */
.btn--sm{padding:5px 12px;font-size:12px;border-radius:var(--r-sm)}
.btn--lg{padding:10px 20px;font-size:14px;border-radius:var(--r-md);font-weight:600}
.btn--full{width:100%}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CARDS & CLEAN PANELS
   ───────────────────────────────────────────────────────────────────────────── */
.card, .stat-card, .pricing-card, .t-card, .fp-cell, .docs-card{
  position:relative;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  overflow:hidden;
}

.card:hover, .stat-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.5. BILLING CYCLE TOGGLE TABS (HOMEPAGE & PRICING)
   ───────────────────────────────────────────────────────────────────────────── */
.billing-toggle-pill, #home-billing-toggle, #billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 9999px;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.03);
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
}

.cycle-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #64748b;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.cycle-tab:hover {
  color: #0f172a;
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.cycle-tab.active {
  background: linear-gradient(135deg, #0070f3 0%, #0060df 100%) !important;
  color: #ffffff !important;
  border-color: #0060df;
  box-shadow: 0 4px 14px rgba(0, 112, 243, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.cycle-tab.active:hover {
  background: linear-gradient(135deg, #0060df 0%, #0051c4 100%) !important;
  color: #ffffff !important;
}

.save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.cycle-tab:hover .save-badge {
  background: #dcfce7;
  color: #16a34a;
}

.cycle-tab.active .save-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 640px) {
  .billing-toggle-pill, #home-billing-toggle, #billing-toggle {
    border-radius: 20px;
    padding: 5px;
    gap: 4px;
    width: 100%;
    max-width: 420px;
  }
  .cycle-tab {
    padding: 7px 12px;
    font-size: 12px;
    flex: 1 1 calc(50% - 6px);
  }
  .save-badge {
    font-size: 10px;
    padding: 1px 6px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.6. CRYPTO GATEWAY PILLS & +99 BADGE
   ───────────────────────────────────────────────────────────────────────────── */
.crypto-gateway-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  transition: all 0.3s ease;
}
.crypto-gateway-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 10px 30px -5px rgba(0, 112, 243, 0.12);
}
.crypto-list {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.crypto-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.crypto-pill:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.crypto-pill svg {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.crypto-plus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0070f3 0%, #0060df 100%);
  border: 1.5px solid #0060df;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(0, 112, 243, 0.35);
  transition: all 0.22s ease;
  user-select: none;
  cursor: default;
}
.crypto-plus-badge:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 112, 243, 0.5);
  background: linear-gradient(135deg, #0060df 0%, #0051c4 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. PRICING CARDS & PRO POPULAR HIGHLIGHT
   ───────────────────────────────────────────────────────────────────────────── */
.pricing-card--popular{
  position:relative;
  background:#ffffff;
  border:2px solid #0070f3;
  box-shadow:0 10px 25px -5px rgba(0, 112, 243, 0.15), 0 8px 10px -6px rgba(0, 112, 243, 0.1);
  z-index:1;
}

.pricing-card__badge{
  position:absolute;top:var(--sp-4);right:var(--sp-4);
  padding:3px 9px;border-radius:var(--r-full);
  background:#eff6ff;color:#0070f3;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border:1px solid #bfdbfe;
}

.pricing-card__name{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;color:#0f172a}
.pricing-card__price{font-size:2.5rem;font-weight:800;letter-spacing:-.05em;color:#0f172a}
.pricing-card__period{font-size:var(--text-sm);color:var(--text-secondary)}
.pricing-card__features{display:flex;flex-direction:column;gap:10px;flex:1;margin-top:8px}
.pricing-card__feature{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.pricing-card__feature::before{
  content:'✓';display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:#eff6ff;color:#0070f3;font-size:9px;font-weight:800;
  flex-shrink:0;margin-top:2px;border:1px solid #bfdbfe;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. AD PLATFORMS MARQUEE (Seamless Infinite Scrolling Bar)
   ───────────────────────────────────────────────────────────────────────────── */
.marquee-container{
  width:100%;overflow:hidden;position:relative;
  padding:12px 0;
  background:#ffffff;
  border-bottom:1px solid #e2e8f0;
  mask-image:linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}
.marquee-track{
  display:flex;width:max-content;
  align-items:center;
}
.marquee-group{
  display:flex;align-items:center;gap:14px;
  padding-right:14px;
  flex-shrink:0;
  animation:marquee-scroll 42s linear infinite;
  will-change:transform;
}
.marquee-container:hover .marquee-group{
  animation-play-state:paused;
}

@keyframes marquee-scroll {
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}

.platform-pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;
  background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:var(--r-full);font-size:12px;font-weight:600;color:#334155;
  white-space:nowrap;transition:all var(--t-fast) var(--ease);
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.04);
}
.platform-pill:hover{
  background:#ffffff;border-color:#bfdbfe;
  color:#0070f3;transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0, 112, 243, 0.12);
}
.platform-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ─────────────────────────────────────────────────────────────────────────────
   9. DATA TABLES & CLICKS PAGE SPECIFIC STYLING
   ───────────────────────────────────────────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;border-radius:var(--r-lg);border:1px solid #e2e8f0;
  background:#ffffff;box-shadow:0 1px 3px rgba(15, 23, 42, 0.04);
}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  padding:10px 16px;text-align:left;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
  background:#f8fafc;white-space:nowrap;border-bottom:1px solid #e2e8f0;
}
.table td{
  padding:11px 16px;color:#334155;
  border-bottom:1px solid #f1f5f9;vertical-align:middle;white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:#f8fafc;color:#0f172a}

/* Clicks Table Row Contrasts */
.click-row--black{
  background:rgba(236, 253, 245, 0.5) !important;
  color:#0f172a !important;
  border-left:3px solid #059669;
}
.click-row--black td{color:#0f172a !important}
.click-row--safe{
  background:#ffffff !important;
}
.click-row--safe td{color:#64748b !important}

/* Badges — Strict Color Tokens */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:.01em;
  line-height:1.5;border:1px solid transparent;white-space:nowrap;
}
/* Allowed / Active: Bg #ECFDF5, Border #A7F3D0, Text #059669 */
.badge--active, .badge--blackpage, .badge-active, .badge-paid{
  background:#ecfdf5 !important;color:#059669 !important;border-color:#a7f3d0 !important;
}
/* Blocked / Bot: Bg #FEF2F2, Border #FECACA, Text #DC2626 */
.badge--expired, .badge--block, .badge-suspended, .badge-failed{
  background:#fef2f2 !important;color:#dc2626 !important;border-color:#fecaca !important;
}
/* Suspicious / Proxy / Warning: Bg #FFFBEB, Border #FDE68A, Text #D97706 */
.badge--pending, .badge--warning, .badge-pending{
  background:#fffbeb !important;color:#d97706 !important;border-color:#fde68a !important;
}
/* Paused / Neutral */
.badge--paused, .badge--safepage, .badge-expired, .badge-cancelled{
  background:#f1f5f9 !important;color:#64748b !important;border-color:#e2e8f0 !important;
}
.badge-admin{
  background:#eff6ff !important;color:#0070f3 !important;border-color:#bfdbfe !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. STAT CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.stat-card{display:flex;flex-direction:column;gap:6px;background:#ffffff;border:1px solid #e2e8f0}
.stat-card__label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.stat-card__value{font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#0f172a;line-height:1.2}
.stat-card__sub{font-size:12px;color:var(--text-secondary)}

/* ─────────────────────────────────────────────────────────────────────────────
   11. SIDEBAR & APP LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.app-layout{display:flex;min-height:100vh}
.sidebar{
  width:220px;min-height:100vh;background:#ffffff;
  border-right:1px solid #e2e8f0;display:flex;flex-direction:column;
  padding:18px 0;position:fixed;top:0;left:0;bottom:0;z-index:50;overflow-y:auto;
}
.sidebar__logo{padding:4px 18px 18px;border-bottom:1px solid #f1f5f9;margin-bottom:12px}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1;padding:0 12px}
.sidebar__link{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--text-secondary);
  transition:all var(--t-fast) var(--ease);border:1px solid transparent;
}
.sidebar__link svg{width:16px;height:16px;flex-shrink:0;opacity:.7;transition:all var(--t-fast)}
.sidebar__link:hover{background:#f8fafc;color:#0f172a}
.sidebar__link:hover svg{opacity:1;stroke:#0070f3}
.sidebar__link.active{
  background:#eff6ff;color:#0070f3;font-weight:600;
  border-color:#bfdbfe;
}
.sidebar__link.active svg{opacity:1;stroke:#0070f3}
.sidebar__section-label{padding:8px 12px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.sidebar__footer{padding:14px 16px;border-top:1px solid #e2e8f0;margin-top:16px}
.sidebar__user{font-size:11px;color:var(--text-secondary);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.main-content{margin-left:220px;flex:1;padding:36px;max-width:100%;min-height:100vh;background:#f8fafc}
.page-header{margin-bottom:28px}
.page-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:#0f172a}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FORM ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;font-weight:600;color:#334155}
.form-input{
  width:100%;padding:9px 13px;
  background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--r-md);
  color:#0f172a;font-size:var(--text-sm);font-family:var(--font-sans);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  -webkit-appearance:none;appearance:none;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.03);
}
.form-input:hover{border-color:#cbd5e1}
.form-input:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #bfdbfe}
.form-input::placeholder{color:#94a3b8}
.form-select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.form-hint{font-size:12px;color:#64748b}

/* Toggle Switch */
.toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:#ffffff;border:1px solid #e2e8f0;
  border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast) var(--ease);user-select:none;
}
.toggle:hover{background:#f8fafc;border-color:#cbd5e1}
.toggle__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.toggle__label{font-size:13px;font-weight:600;color:#0f172a}
.toggle__hint{font-size:11px;color:#64748b;line-height:1.4}
.toggle__badge{display:inline-flex;padding:1px 6px;border-radius:9999px;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-left:6px;vertical-align:middle}
.toggle__badge--required{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.toggle__badge--recommended{background:#eff6ff;color:#0070f3;border:1px solid #bfdbfe}
.toggle__track{position:relative;width:38px;height:20px;background:#cbd5e1;border-radius:10px;flex-shrink:0;transition:background var(--t-fast) var(--ease)}
.toggle__track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#ffffff;border-radius:50%;box-shadow:0 1px 2px rgba(15, 23, 42, 0.2);transition:all var(--t-fast) var(--ease)}
.toggle input{display:none}
.toggle input:checked~.toggle__track{background:#0070f3}
.toggle input:checked~.toggle__track::after{transform:translateX(18px);background:#fff}

/* Collapsible Panel */
.collapse-panel{background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--r-md);overflow:hidden;transition:all var(--t-base) var(--ease)}
.collapse-panel.open{border-color:#bfdbfe;box-shadow:0 2px 8px rgba(0, 112, 243, 0.08)}
.collapse-trigger{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;user-select:none;transition:background var(--t-fast)}
.collapse-trigger:hover{background:#f8fafc}
.collapse-trigger__left{display:flex;align-items:center;gap:10px}
.collapse-trigger__icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#eff6ff;flex-shrink:0}
.collapse-trigger__icon svg{width:13px;height:13px;stroke:#0070f3;fill:none;stroke-width:2}
.collapse-trigger__title{font-size:13px;font-weight:600;color:#0f172a}
.collapse-trigger__chevron{width:14px;height:14px;transition:transform .2s var(--ease);color:#64748b}
.collapse-panel.open .collapse-trigger__chevron{transform:rotate(180deg);color:#0070f3}
.collapse-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.collapse-panel.open .collapse-body{max-height:600px}
.collapse-body__inner{padding:0 14px 14px}
.collapse-body textarea{
  width:100%;min-height:85px;background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:var(--r-md);color:#0f172a;font-family:var(--font-mono);font-size:12px;padding:10px;
  resize:vertical;transition:border-color var(--t-fast);
}
.collapse-body textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #bfdbfe}

/* Country Picker */
.country-picker{max-height:240px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#e2e8f0;border:1px solid #e2e8f0;border-radius:var(--r-md)}
.country-picker label{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff;cursor:pointer;font-size:12px;color:#334155;transition:all var(--t-fast);user-select:none}
.country-picker label:hover{background:#f8fafc;color:#0f172a}
.country-picker input[type="checkbox"]{width:14px;height:14px;accent-color:#0070f3;flex-shrink:0;cursor:pointer}
.country-picker input[type="checkbox"]:checked+span{color:#0070f3;font-weight:600}
.country-search{width:100%;padding:8px 12px;background:#ffffff;border:1px solid #e2e8f0;border-radius:var(--r-md);color:#0f172a;font-size:12px;margin-bottom:8px}
.country-search:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 3px #bfdbfe}

/* ─────────────────────────────────────────────────────────────────────────────
   13. ALERTS & NOTICES
   ───────────────────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r-md);font-size:var(--text-sm);line-height:1.5;border:1px solid transparent}
.alert--error{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.alert--success{background:#ecfdf5;border-color:#a7f3d0;color:#059669}
.alert--warning{background:#fffbeb;border-color:#fde68a;color:#d97706}
.alert--info{background:#eff6ff;border-color:#bfdbfe;color:#0070f3}

/* ─────────────────────────────────────────────────────────────────────────────
   14. GRIDS & UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.grid{display:grid}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--stats{grid-template-columns:repeat(4,1fr)}
.container{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-sm{gap:var(--sp-2)}
.gap-md{gap:var(--sp-4)}
.gap-lg{gap:var(--sp-6)}
.gap-xl{gap:var(--sp-10)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--text-secondary)}
.text-sm{font-size:var(--text-sm)}
.text-xs{font-size:var(--text-xs)}
.font-mono{font-family:var(--font-mono)}
.w-full{width:100%}
.mt-sm{margin-top:var(--sp-2)}
.mt-md{margin-top:var(--sp-4)}
.mt-lg{margin-top:var(--sp-6)}
.mt-xl{margin-top:var(--sp-10)}
.mb-sm{margin-bottom:var(--sp-2)}
.mb-md{margin-bottom:var(--sp-4)}
.mb-lg{margin-bottom:var(--sp-6)}
.mb-xl{margin-bottom:var(--sp-10)}

/* ─────────────────────────────────────────────────────────────────────────────
   15. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media(max-width:1024px){.grid--4,.grid--stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform var(--t-base) var(--ease)}.sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0;padding:var(--sp-5)}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .nav{padding:0 var(--sp-4)}
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. AUTHENTICATION (LOGIN & REGISTER)
   ───────────────────────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f8fafc;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.auth-container {
  width: 100%;
  max-width: 440px;
  margin: auto;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  margin: 0 auto;
}
.auth-card:hover {
  border-color: #cbd5e1;
}
.auth-card__header {
  text-align: center;
  margin-bottom: 24px;
}
.auth-card__title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin: 0 0 6px 0;
}
.auth-card__sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. SOFT FLUID ANIMATIONS & TRAFFIC ROUTER DESIGN SYSTEM
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes floatSmooth {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(0.3deg); }
}
@keyframes ambientPulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.15); opacity: 0.8; }
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}
@keyframes sweepBeam {
  0% { left: -100%; }
  100% { left: 200%; }
}

.float-soft {
  animation: floatSmooth 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Fluid interactive cards with soft lifting & shadow diffusion */
.card, .pricing-card, .fp-cell, .stat-card {
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft) !important;
}
.card:hover, .pricing-card:hover, .fp-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 112, 243, 0.1);
  border-color: #cbd5e1;
}

/* Soft glowing buttons with silky sheen */
.btn {
  transition: all 0.25s var(--ease-soft);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Interactive Cloaking Traffic Router Component */
.traffic-router {
  position: relative;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 112, 243, 0.08);
  overflow: hidden;
  transition: all 0.4s var(--ease-soft);
}
.traffic-router:hover {
  box-shadow: 0 30px 60px -15px rgba(0, 112, 243, 0.18), 0 0 0 1px rgba(0, 112, 243, 0.2);
}

/* Network Logo Bar */
.router-adbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}
.ad-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--ease-soft);
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  white-space: nowrap;
}
.ad-source-pill:hover {
  border-color: #bfdbfe;
  color: #0070f3;
  transform: translateY(-1px);
}
.ad-source-pill.active {
  background: #eff6ff;
  border-color: #0070f3;
  color: #0070f3;
  box-shadow: 0 2px 8px rgba(0, 112, 243, 0.15);
}

/* Traffic Flow Branch Cards */
.traffic-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
.branch-card {
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.35s var(--ease-soft);
  position: relative;
  overflow: hidden;
}
.branch-card--safe.active {
  border-color: #3b82f6;
  background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.18), 0 0 0 1px #3b82f6;
}
.branch-card--black.active {
  border-color: #10b981;
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.22), 0 0 0 1px #10b981;
}
.branch-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: transform 0.3s var(--ease-soft);
}
.branch-card.active .branch-icon {
  transform: scale(1.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. ORBITAL REVOLVING AD PLATFORMS SHOWCASE & CLOAKER SPLIT
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbitCounterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes radarSweepGlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes corePulseGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(0, 112, 243, 0.4), 0 0 50px rgba(0, 112, 243, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 112, 243, 0.65), 0 0 70px rgba(0, 112, 243, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
  }
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.02); }
}

.orbit-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Radar scan background beam */
.orbit-radar-beam {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 112, 243, 0.12) 0deg, rgba(0, 112, 243, 0.02) 60deg, transparent 90deg, transparent 360deg);
  animation: radarSweepGlow 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Outer Orbit dashed ring */
.orbit-ring-outer {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 112, 243, 0.3);
  box-shadow: 0 0 20px rgba(0, 112, 243, 0.06);
  animation: ringPulse 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Inner Orbit faint guide ring */
.orbit-ring-inner {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.8);
  pointer-events: none;
  z-index: 1;
}

/* Center Core (CloakShield Neural Node) */
.orbit-core-node {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0070f3 0%, #0051c4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: corePulseGlow 3.5s ease-in-out infinite;
  z-index: 10;
  cursor: default;
  user-select: none;
}

/* Revolving container holding all nodes */
.orbit-revolving-disc {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  animation: orbitSpin 22s linear infinite;
  z-index: 5;
}
.orbit-wrapper:hover .orbit-revolving-disc {
  animation-play-state: paused;
}

/* Individual orbit node placed around circle */
.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  width: 48px;
  height: 48px;
}

/* Math for 6 nodes on circle with radius 135px */
.orbit-item:nth-child(1) { transform: rotate(0deg) translate(135px); }
.orbit-item:nth-child(2) { transform: rotate(60deg) translate(135px); }
.orbit-item:nth-child(3) { transform: rotate(120deg) translate(135px); }
.orbit-item:nth-child(4) { transform: rotate(180deg) translate(135px); }
.orbit-item:nth-child(5) { transform: rotate(240deg) translate(135px); }
.orbit-item:nth-child(6) { transform: rotate(300deg) translate(135px); }

/* The logo badge itself: counter-rotates to remain upright at all angles */
.orbit-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 112, 243, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
  animation: orbitCounterSpin 22s linear infinite;
  position: relative;
}
.orbit-wrapper:hover .orbit-badge {
  animation-play-state: paused;
}
.orbit-badge:hover {
  transform: scale(1.22);
  border-color: #0070f3;
  box-shadow: 0 8px 24px rgba(0, 112, 243, 0.28), 0 0 0 2px #bfdbfe;
  z-index: 20;
}

/* Hover Tooltip on Orbit Badges */
.orbit-tooltip {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-soft);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.orbit-badge:hover .orbit-tooltip {
  opacity: 1;
}

@media(max-width: 480px) {
  .orbit-wrapper { height: 300px; }
  .orbit-ring-outer { width: 220px; height: 220px; }
  .orbit-revolving-disc { width: 220px; height: 220px; }
  .orbit-radar-beam { width: 220px; height: 220px; }
  .orbit-item:nth-child(1) { transform: rotate(0deg) translate(110px); }
  .orbit-item:nth-child(2) { transform: rotate(60deg) translate(110px); }
  .orbit-item:nth-child(3) { transform: rotate(120deg) translate(110px); }
  .orbit-item:nth-child(4) { transform: rotate(180deg) translate(110px); }
  .orbit-item:nth-child(5) { transform: rotate(240deg) translate(110px); }
  .orbit-item:nth-child(6) { transform: rotate(300deg) translate(110px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. ESSENTIAL LAYOUT & UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }

.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 32px; }

.grid { display: grid; }
.grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 32px; }

.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 32px; }

.text-muted { color: var(--text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-mono { font-family: var(--font-mono); }