/** * VESS AIdentity Theme * Supports light (default) and dark modes via CSS custom properties. * Add class="dark" to or to activate dark mode. * * Light Palette: * - Background: Stone-50 (#fafaf9) to Stone-100 (#f5f5f4) — warm off-white * - Accent Primary: Teal-Blue (#236D8B) * - Accent Secondary: Teal (#2d8fb3) * - Success: Emerald-600 (#059669) * - Warning: Amber-600 (#d97706) * - Error: Red-600 (#dc2626) * * Dark Palette: * - Background: Slate-900 (#0f172a) to Slate-800 (#1e293b) * - Accent Primary: Cyan-500 (#06b6d4) * - Accent Secondary: Indigo-500 (#6366f1) * - Success: Emerald-500 (#10b981) * - Warning: Amber-500 (#f59e0b) * - Error: Red-500 (#ef4444) */ /* ======================================== Google Fonts Import ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ======================================== CSS Custom Properties — Light (default) ======================================== */ :root { /* Background Colors */ --bg-primary: #fafaf9; --bg-secondary: #f5f5f4; --bg-tertiary: #d6d3d1; --bg-hover: rgba(35, 109, 139, 0.05); /* Accent Colors */ --accent-cyan: #236D8B; --accent-indigo: #2d8fb3; --accent-violet: #1a5269; /* Glow / Shadow Colors */ --glow-cyan: rgba(35, 109, 139, 0.12); --glow-indigo: rgba(45, 143, 179, 0.08); /* Text Colors */ --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; /* Status Colors */ --color-success: #059669; --color-warning: #d97706; --color-error: #dc2626; --color-info: #236D8B; /* Card / Glass Effect */ --glass-bg: #ffffff; --glass-border: #e7e5e4; --glass-blur: 12px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.35s ease; /* Light-specific tokens */ --badge-success-bg: #ecfdf5; --badge-success-text: #059669; --badge-success-border: #a7f3d0; --badge-warning-bg: #fffbeb; --badge-warning-text: #d97706; --badge-warning-border: #fde68a; --badge-error-bg: #fef2f2; --badge-error-text: #dc2626; --badge-error-border: #fecaca; --badge-info-bg: #e8f4f8; --badge-info-text: #1a5269; --badge-info-border: #a3d4e3; --badge-neutral-bg: #f5f5f4; --badge-neutral-text: #57534e; --badge-neutral-border: #e7e5e4; --alert-success-bg: #ecfdf5; --alert-success-border: #a7f3d0; --alert-success-text: #065f46; --alert-warning-bg: #fffbeb; --alert-warning-border: #fde68a; --alert-warning-text: #92400e; --alert-error-bg: #fef2f2; --alert-error-border: #fecaca; --alert-error-text: #991b1b; --alert-info-bg: #e8f4f8; --alert-info-border: #a3d4e3; --alert-info-text: #14404f; --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); --shadow-md: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-lg: 0 4px 12px rgba(28, 25, 23, 0.07); --shadow-xl: 0 8px 24px rgba(28, 25, 23, 0.06); --shadow-modal: 0 24px 48px rgba(28, 25, 23, 0.12); --overlay-bg: rgba(0, 0, 0, 0.4); --sidebar-active-bg: #e8f4f8; --code-bg: #f5f5f4; --code-border: #e7e5e4; --code-text: #292524; } /* ======================================== CSS Custom Properties — Dark ======================================== */ .dark { /* Background Colors */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --bg-hover: rgba(6, 182, 212, 0.1); /* Accent Colors */ --accent-cyan: #06b6d4; --accent-indigo: #6366f1; --accent-violet: #8b5cf6; /* Glow / Shadow Colors */ --glow-cyan: rgba(6, 182, 212, 0.3); --glow-indigo: rgba(99, 102, 241, 0.3); /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; /* Status Colors */ --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #06b6d4; /* Card / Glass Effect */ --glass-bg: rgba(30, 41, 59, 0.8); --glass-border: rgba(6, 182, 212, 0.2); /* Dark-specific tokens */ --badge-success-bg: rgba(16, 185, 129, 0.2); --badge-success-text: #34d399; --badge-success-border: rgba(16, 185, 129, 0.3); --badge-warning-bg: rgba(245, 158, 11, 0.2); --badge-warning-text: #fbbf24; --badge-warning-border: rgba(245, 158, 11, 0.3); --badge-error-bg: rgba(239, 68, 68, 0.2); --badge-error-text: #f87171; --badge-error-border: rgba(239, 68, 68, 0.3); --badge-info-bg: rgba(6, 182, 212, 0.2); --badge-info-text: #22d3ee; --badge-info-border: rgba(6, 182, 212, 0.3); --badge-neutral-bg: rgba(100, 116, 139, 0.2); --badge-neutral-text: #94a3b8; --badge-neutral-border: rgba(100, 116, 139, 0.3); --alert-success-bg: rgba(16, 185, 129, 0.1); --alert-success-border: rgba(16, 185, 129, 0.3); --alert-success-text: #34d399; --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-border: rgba(245, 158, 11, 0.3); --alert-warning-text: #fbbf24; --alert-error-bg: rgba(239, 68, 68, 0.1); --alert-error-border: rgba(239, 68, 68, 0.3); --alert-error-text: #f87171; --alert-info-bg: rgba(6, 182, 212, 0.1); --alert-info-border: rgba(6, 182, 212, 0.3); --alert-info-text: #22d3ee; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.3); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.5); --overlay-bg: rgba(0, 0, 0, 0.7); --sidebar-active-bg: rgba(6, 182, 212, 0.15); --code-bg: rgba(15, 23, 42, 0.9); --code-border: rgba(6, 182, 212, 0.2); --code-text: #e2e8f0; } /* ======================================== Base Styles ======================================== */ body.futuristic { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%); background-attachment: fixed; color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; } /* Subtle pattern overlay — dark only */ .dark body.futuristic::before, body.futuristic.dark::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, rgba(6, 182, 212, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(99, 102, 241, 0.03) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* ======================================== Typography ======================================== */ .font-mono-cyber { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace; letter-spacing: -0.02em; } /* ======================================== Glass Card Component ======================================== */ .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--shadow-md); transition: all var(--transition-normal); } /* Glass effect — dark only */ @supports (backdrop-filter: blur(12px)) { .dark .glass-card { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } } .glass-card:hover { border-color: var(--accent-cyan); box-shadow: var(--shadow-lg); } .dark .glass-card:hover { box-shadow: var(--shadow-lg), 0 0 24px var(--glow-cyan); } /* ======================================== Buttons ======================================== */ .btn-glow { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-indigo) 100%); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all var(--transition-normal); box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3); } .dark .btn-glow { box-shadow: 0 0 20px var(--glow-cyan); } .btn-glow:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25); } .dark .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 30px var(--glow-cyan), 0 4px 16px rgba(0, 0, 0, 0.3); } .btn-glow:active { transform: translateY(0); } .btn-glow:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-outline-glow { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: transparent; color: var(--accent-cyan); border: 1px solid var(--accent-cyan); border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all var(--transition-normal); } .btn-outline-glow:hover { background: var(--bg-hover); box-shadow: 0 2px 8px var(--glow-cyan); } .dark .btn-outline-glow:hover { box-shadow: 0 0 20px var(--glow-cyan); } /* ======================================== Input Fields ======================================== */ .input-cyber { width: 100%; padding: 0.75rem 1rem; background: var(--bg-primary); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-primary); font-size: 0.875rem; transition: all var(--transition-fast); } .dark .input-cyber { background: rgba(30, 41, 59, 0.6); border-color: rgba(100, 116, 139, 0.3); } .input-cyber:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--glow-cyan); } .input-cyber::placeholder { color: var(--text-muted); } .input-cyber:disabled { opacity: 0.5; cursor: not-allowed; } /* Select styling */ .select-cyber { width: 100%; padding: 0.75rem 1rem; background: var(--bg-primary); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-primary); font-size: 0.875rem; cursor: pointer; transition: all var(--transition-fast); } .dark .select-cyber { background: rgba(30, 41, 59, 0.6); border-color: rgba(100, 116, 139, 0.3); } .select-cyber:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--glow-cyan); } /* ======================================== Badges ======================================== */ .badge-cyber { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; } .badge-cyber.success { background: var(--badge-success-bg); color: var(--badge-success-text); border: 1px solid var(--badge-success-border); } .badge-cyber.warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border: 1px solid var(--badge-warning-border); } .badge-cyber.error { background: var(--badge-error-bg); color: var(--badge-error-text); border: 1px solid var(--badge-error-border); } .badge-cyber.info { background: var(--badge-info-bg); color: var(--badge-info-text); border: 1px solid var(--badge-info-border); } .badge-cyber.neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); border: 1px solid var(--badge-neutral-border); } /* ======================================== Sidebar Navigation ======================================== */ .sidebar-cyber { background: var(--bg-primary); border-right: 1px solid var(--glass-border); } .dark .sidebar-cyber { background: rgba(15, 23, 42, 0.95); } .sidebar-link-cyber { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 8px; color: var(--text-secondary); border-left: 3px solid transparent; transition: all var(--transition-fast); text-decoration: none; } .sidebar-link-cyber:hover { background: var(--bg-hover); color: var(--accent-cyan); border-left-color: var(--accent-cyan); } .sidebar-link-cyber.active { background: var(--sidebar-active-bg); color: var(--accent-cyan); border-left-color: var(--accent-cyan); } /* ======================================== Header ======================================== */ .header-cyber { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid var(--glass-border); } .dark .header-cyber { background: rgba(15, 23, 42, 0.9); border-bottom-color: rgba(6, 182, 212, 0.1); } @supports (backdrop-filter: blur(12px)) { .header-cyber { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dark .header-cyber { background: rgba(15, 23, 42, 0.7); } } /* ======================================== Hero Section ======================================== */ .hero-cyber { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); position: relative; overflow: hidden; } .hero-cyber::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 50%, rgba(79, 70, 229, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 60%); pointer-events: none; } .dark .hero-cyber::before { background: radial-gradient(ellipse at 20% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 60%); } /* ======================================== Tabs ======================================== */ .tab-cyber { padding: 0.75rem 1.5rem; color: var(--text-secondary); border-bottom: 2px solid transparent; background: transparent; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .tab-cyber:hover { color: var(--accent-cyan); background: var(--bg-hover); } .tab-cyber.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); } /* ======================================== Stats Card ======================================== */ .stat-card-cyber { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; transition: all var(--transition-normal); } .stat-card-cyber:hover { border-color: var(--accent-cyan); transform: translateY(-4px); box-shadow: var(--shadow-xl); } .stat-value { font-size: 2rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-indigo) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Timeline ======================================== */ .timeline-item-cyber { border-left: 2px solid var(--glass-border); padding-left: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; transition: all var(--transition-fast); } .dark .timeline-item-cyber { border-left-color: rgba(6, 182, 212, 0.3); } .timeline-item-cyber:hover { border-left-color: var(--accent-cyan); background: var(--bg-hover); border-radius: 0 8px 8px 0; } /* ======================================== Code Block ======================================== */ .code-block-cyber { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px; padding: 1rem; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.875rem; color: var(--code-text); overflow-x: auto; } .code-block-cyber code { color: inherit; background: transparent; } /* ======================================== Loading Spinner ======================================== */ .loading-cyber { width: 40px; height: 40px; border: 3px solid var(--glass-border); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin-cyber 1s linear infinite; } @keyframes spin-cyber { to { transform: rotate(360deg); } } /* ======================================== Alerts / Messages ======================================== */ .alert-cyber { padding: 1rem 1.25rem; border-radius: 8px; border: 1px solid; } .alert-cyber.success { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); } .alert-cyber.warning { background: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); } .alert-cyber.error { background: var(--alert-error-bg); border-color: var(--alert-error-border); color: var(--alert-error-text); } .alert-cyber.info { background: var(--alert-info-bg); border-color: var(--alert-info-border); color: var(--alert-info-text); } /* ======================================== Modal ======================================== */ .modal-cyber { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--shadow-modal); } .modal-overlay-cyber { background: var(--overlay-bg); } @supports (backdrop-filter: blur(4px)) { .modal-overlay-cyber { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } /* ======================================== Table ======================================== */ .table-cyber { width: 100%; border-collapse: separate; border-spacing: 0; } .table-cyber thead { background: var(--bg-secondary); } .table-cyber th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--glass-border); } .table-cyber td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--bg-tertiary); } .dark .table-cyber td { border-bottom-color: rgba(100, 116, 139, 0.1); } .table-cyber tbody tr { transition: background var(--transition-fast); } .table-cyber tbody tr:hover { background: var(--bg-hover); } /* ======================================== Divider ======================================== */ .divider-cyber { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); margin: 1.5rem 0; } /* ======================================== Text Utilities ======================================== */ .text-glow { text-shadow: none; } .dark .text-glow { text-shadow: 0 0 10px var(--glow-cyan); } .gradient-text { background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-indigo) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Feature Card ======================================== */ .feature-card-cyber { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; transition: all var(--transition-normal); } .feature-card-cyber:hover { border-color: var(--accent-cyan); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .dark .feature-card-cyber:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 24px var(--glow-cyan); } .feature-icon-cyber { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); border-radius: 12px; margin-bottom: 1rem; } .dark .feature-icon-cyber { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%); } .feature-icon-cyber svg { width: 24px; height: 24px; color: var(--accent-cyan); } /* ======================================== Step Indicator ======================================== */ .step { display: none; animation: fadeIn 0.3s ease-in-out; } .step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .step-indicator { display: flex; justify-content: center; align-items: center; gap: 1rem; } .step-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-tertiary); border: 2px solid var(--text-muted); transition: all var(--transition-normal); } .step-dot.active { width: 16px; height: 16px; background: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: 0 0 8px var(--glow-cyan); } .step-dot.completed { background: var(--color-success); border-color: var(--color-success); } .step-number-cyber { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-indigo) 100%); border-radius: 50%; color: white; font-weight: 700; font-size: 1.25rem; font-family: 'JetBrains Mono', monospace; box-shadow: 0 2px 8px var(--glow-cyan); } .dark .step-number-cyber { box-shadow: 0 0 20px var(--glow-cyan); } /* ======================================== Scrollbar (Webkit) ======================================== */ body.futuristic::-webkit-scrollbar { width: 8px; } body.futuristic::-webkit-scrollbar-track { background: var(--bg-secondary); } body.futuristic::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; } body.futuristic::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); } /* ======================================== Quick Action Button ======================================== */ .quick-action-cyber { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-primary); font-weight: 500; cursor: pointer; transition: all var(--transition-normal); } .quick-action-cyber:hover { background: var(--bg-hover); border-color: var(--accent-cyan); box-shadow: 0 2px 8px var(--glow-cyan); } .dark .quick-action-cyber:hover { box-shadow: 0 0 16px var(--glow-cyan); } .quick-action-cyber.primary { background: var(--sidebar-active-bg); border-color: var(--accent-cyan); } .dark .quick-action-cyber.primary { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%); } .quick-action-cyber.success { background: var(--badge-success-bg); border-color: var(--badge-success-border); } .quick-action-cyber.success:hover { border-color: var(--color-success); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); } .dark .quick-action-cyber.success:hover { box-shadow: 0 0 16px rgba(16, 185, 129, 0.3); } /* ======================================== Footer ======================================== */ .footer-cyber { background: var(--bg-primary); border-top: 1px solid var(--glass-border); } .dark .footer-cyber { background: rgba(15, 23, 42, 0.95); } /* ======================================== Responsive Adjustments ======================================== */ @media (max-width: 768px) { /* Global word-break to prevent horizontal overflow */ body { word-break: break-word; overflow-wrap: break-word; } /* Prevent flex children from overflowing viewport */ .flex-1 { min-width: 0; } /* Ensure main content area doesn't overflow */ main { overflow-x: hidden; } .glass-card { border-radius: 8px; padding: 1.25rem; } .stat-card-cyber { padding: 1rem; } .stat-value { font-size: 1.25rem; } /* Heading sizes - scoped to app content areas, not hero sections */ .glass-card h1, .header-cyber h1 { font-size: 1.25rem; } .glass-card h2, .header-cyber h2 { font-size: 1.1rem; } .glass-card h3 { font-size: 1rem; } /* Slide panels - full width on mobile */ .slide-panel { width: 100vw !important; } /* Tables - horizontal scroll */ .table-cyber { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Code blocks - scoped to avoid affecting inline

 in prose */
  .code-block-cyber,
  .glass-card pre,
  .glass-card code {
    font-size: 0.75rem;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* Badges */
  .badge-cyber {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
  }

  /* Standalone buttons - full width, but not when inside a flex row */
  .btn-glow:only-child,
  .btn-outline-glow:only-child {
    width: 100%;
    text-align: center;
  }

  /* Feature cards */
  .feature-card-cyber {
    padding: 1rem;
  }
  .feature-icon-cyber {
    width: 40px;
    height: 40px;
  }

  /* Tabs - smaller, scrollable */
  .tab-cyber {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  /* Modal - nearly full width */
  .modal-cyber {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
    width: calc(100vw - 1rem);
  }

  /* Timeline adjustments */
  .timeline-item-cyber {
    padding-left: 1rem;
  }
}

/* Extra small screens (phones < 480px) */
@media (max-width: 480px) {
  .glass-card {
    padding: 1rem;
  }

  .stat-card-cyber {
    padding: 0.75rem;
  }

  .stat-value {
    font-size: 1rem;
  }

  .step-indicator {
    gap: 0.5rem;
  }
  .step-number-cyber {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* ========================================
   Pricing Cards
   ======================================== */
.pricing-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.recommended {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.dark .pricing-card.recommended {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px var(--glow-cyan), var(--shadow-lg);
}

.pricing-card.recommended:hover {
  box-shadow: var(--shadow-xl);
}

.dark .pricing-card.recommended:hover {
  box-shadow: 0 0 32px var(--glow-cyan), var(--shadow-xl);
}

.pricing-card.muted {
  opacity: 0.75;
}

.pricing-card.muted:hover {
  opacity: 1;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-indigo) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-early-offer {
  background: var(--badge-info-bg);
  border: 1px solid var(--badge-info-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--badge-info-text);
  margin-top: auto;
}

@media (max-width: 768px) {
  .pricing-card {
    padding: 1.5rem;
  }
  .pricing-price {
    font-size: 2rem;
  }
}

/* ========================================
   Tier System
   ======================================== */
.tier-gated {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.3);
}