/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * MT Cyper - Main Stylesheet
 * Cyber-art inspired cybersecurity / hacker / tech lab template
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * @version     2.0.0
 * @author      mixing-theme
 * 
 * TABLE OF CONTENTS:
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * 1.  CSS VARIABLES & ROOT .............. Custom properties & theme colors
 * 2.  BASE STYLES & RESET ............... Typography, normalize, defaults
 * 3.  LAYOUT PRIMITIVES ................. Grid, containers, sections
 * 4.  BUTTONS ........................... Button styles & variants
 * 5.  NAVIGATION & HEADER ............... Navbar, dropdowns, mobile menu
 * 6.  HERO SECTIONS ..................... Hero banners & page headers
 * 7.  SERVICES .......................... Service cards & features
 * 8.  STATS & COUNTERS .................. Statistics & animated numbers
 * 9.  PROJECTS & PORTFOLIO .............. Gallery & MixItUp filters
 * 10. TESTIMONIALS ...................... Client reviews & sliders
 * 11. BLOG .............................. Articles & post cards
 * 12. TEAM & ABOUT ...................... Team members & company info
 * 13. CONTACT & FORMS ................... Forms & input styles
 * 14. 404 PAGE .......................... Error page styles
 * 15. FOOTER ............................ Footer sections & widgets
 * 16. UTILITIES ......................... Helper classes
 * 17. PAGE COMPONENTS ................... Specific page elements
 * 18. EFFECTS & ANIMATIONS .............. Transitions & keyframes
 * 19. MEGA MENU ......................... Multi-column dropdowns
 * 20. RESPONSIVE ........................ Media queries & breakpoints
 * 21. UTILITY CLASSES ................... Inline style replacements
 *     21.1 Shared Layout Properties
 *     21.2 Background Colors
 *     21.3 Text & Icon Colors
 *     21.4 Border Styles
 *     21.5 Component Sizes
 *     21.6 Progress & Gauges
 *     21.7 Typography
 *     21.8 Spacing & Dimensions
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 */

:root {
  --cyper-primary: #00ff99;
  --cyper-primary-glow: rgba(0, 255, 153, 0.4);
  --cyper-accent: #00e5ff;
  --cyper-accent-glow: rgba(0, 229, 255, 0.4);
  --cyper-secondary: #8b5cf6;
  --cyper-secondary-glow: rgba(139, 92, 246, 0.4);
  --cyper-tertiary: #ff6b35;
  --cyper-tertiary-glow: rgba(255, 107, 53, 0.4);
  --cyper-bg: #050610;
  --cyper-bg-alt: #0b0d1a;
  --cyper-bg-soft: #0f1224;
  --cyper-bg-glass: rgba(15, 18, 36, 0.85);
  --cyper-bg-gradient: linear-gradient(
    180deg,
    #050610 0%,
    #0a0f1f 50%,
    #050610 100%
  );
  --cyper-border: #27f1a1;
  --cyper-border-soft: rgba(39, 241, 161, 0.35);
  --cyper-border-accent: rgba(0, 229, 255, 0.4);
  --cyper-shadow: 0 0 0 2px var(--cyper-border), 0 10px 0 #000000;
  --cyper-glow-primary: 0 0 20px var(--cyper-primary-glow),
    0 0 40px rgba(0, 255, 153, 0.2);
  --cyper-glow-accent: 0 0 20px var(--cyper-accent-glow),
    0 0 40px rgba(0, 229, 255, 0.2);
  --cyper-glow-secondary: 0 0 20px var(--cyper-secondary-glow),
    0 0 40px rgba(139, 92, 246, 0.2);
  --cyper-radius: 0;
  --cyper-radius-sm: 4px;
  --cyper-radius-md: 8px;
  --cyper-text: #f5f7ff;
  --cyper-white: #f5f7ff;
  --cyper-dark: #2e2f33ff;
  --cyper-text-muted: #9ba3c3;
  --cyper-text-secondary: #b3bddf;
  --cyper-danger: #ff3b81;
  --cyper-danger-glow: rgba(255, 59, 129, 0.4);
  --cyper-warning: #ffc857;
  --cyper-warning-glow: rgba(255, 200, 87, 0.4);
  --cyper-success: #00ff99;
  --cyper-info: #00e5ff;
  --cyper-nav-height: 76px;

  /* Animation timing */
  --cyper-anim-fast: 0.15s;
  --cyper-anim-med: 0.3s;
  --cyper-anim-slow: 0.5s;

  /* Spacing scale */
  --cyper-space-xs: 0.25rem;
  --cyper-space-sm: 0.5rem;
  --cyper-space-md: 1rem;
  --cyper-space-lg: 2rem;
  --cyper-space-xl: 4rem;

  /* Grid lines for backgrounds */
  --cyper-grid-color: rgba(0, 255, 153, 0.08);
  --cyper-grid-size: 40px;

  /* Scanline effect */
  --cyper-scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );

  /* Navbar variables */
  --cyper-navbar-bg: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.9),
    rgba(15, 23, 42, 0.92)
  );
  --cyper-dropdown-bg: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.98),
    rgba(15, 23, 42, 1)
  );
  --cyper-dropdown-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85),
    0 18px 0 rgba(0, 0, 0, 0.9);
  --cyper-dropdown-hover: rgba(15, 23, 42, 0.95);

  --cyper-font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --cyper-font-mono: "Share Tech Mono", "Fira Code", ui-monospace,
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  --transition-fast: 0.18s ease-out;
  --transition-med: 0.28s ease-out;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--cyper-font-main);
  background-color: var(--cyper-bg);
  color: var(--cyper-text);
  text-rendering: optimizeLegibility;
}

.text-secondary,
.cyper-text-secondary {
  color: var(--cyper-text-secondary) !important;
}
.text-muted {
  color: var(--cyper-text-muted) !important;
}

img,
svg {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

a {
  color: var(--cyper-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--cyper-primary);
}

code,
pre {
  font-family: var(--cyper-font-mono);
}

.cyper-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

body.cyper-loaded .cyper-page-wrapper {
  opacity: 1;
}

main.cyper-main {
  flex: 1;
  padding-top: var(--cyper-nav-height);
}

/* Pixel primitives */

.cyper-border {
  border: 2px solid var(--cyper-border);
  border-radius: var(--cyper-radius);
}

.cyper-border-soft {
  border: 1px solid var(--cyper-border-soft);
}

.cyper-shadow {
  box-shadow: var(--cyper-shadow);
}

.cyper-shadow-soft {
  box-shadow: 0 0 0 1px var(--cyper-border-soft), 0 6px 0 rgba(0, 0, 0, 0.8);
}

.cyper-card {
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  border-radius: var(--cyper-radius);
  border: 2px solid var(--cyper-border-soft);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}

.cyper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.6;
  pointer-events: none;
}

.cyper-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cyper-section {
  position: relative;
  padding: 4.5rem 0;
  background: radial-gradient(
      circle at top left,
      rgba(0, 229, 255, 0.2),
      transparent 55%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 255, 153, 0.16),
      transparent 55%
    ),
    var(--cyper-bg);
}

.cyper-section-alt {
  background: radial-gradient(
      circle at top right,
      rgba(255, 59, 129, 0.18),
      transparent 55%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(0, 229, 255, 0.16),
      transparent 55%
    ),
    var(--cyper-bg-alt);
}

.cyper-section-dark {
  background: radial-gradient(
      circle at top,
      rgba(0, 0, 0, 0.7),
      transparent 60%
    ),
    #02030a;
}

.cyper-section-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyper-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cyper-section-label::before,
.cyper-section-label::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyper-accent));
}

.cyper-section-title {
  font-family: var(--cyper-font-mono);
  font-weight: 600;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cyper-section-subtitle {
  max-width: 560px;
  color: var(--cyper-text-muted);
}

/* Pixel buttons */

.cyper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--cyper-radius);
  border: 2px solid var(--cyper-border);
  background: linear-gradient(
    145deg,
    var(--cyper-primary),
    var(--cyper-accent)
  );
  color: #020617;
  font-family: var(--cyper-font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  box-shadow: var(--cyper-shadow);
  cursor: pointer;
  transition: transform var(--transition-fast),
    box-shadow var(--transition-fast), filter var(--transition-fast);
}

.cyper-btn span.cyper-btn-label {
  position: relative;
  z-index: 1;
}

.cyper-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.08) 0,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
  mix-blend-mode: soft-light;
  z-index: 0;
}

.cyper-btn:hover:not(.cyper-btn-outline) {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--cyper-border), 0 13px 0 #000000;
  filter: brightness(1.06);
  color: var(--cyper-dark);
}

.cyper-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 0 2px var(--cyper-border), 0 5px 0 #000000;
}

.cyper-btn-outline {
  background: transparent;
  color: var(--cyper-text);
  border-color: var(--cyper-border-soft);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
}

.cyper-btn-outline:hover {
  background: var(--cyper-bg);
}

.cyper-pill-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: radial-gradient(
    circle at top,
    rgba(148, 163, 184, 0.45),
    transparent 60%
  );
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Header & Navigation */

.cyper-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  backdrop-filter: blur(16px);
  background: var(--cyper-navbar-bg);
  border-bottom: 1px solid var(--cyper-border-soft);
}

.cyper-navbar .navbar-brand {
  font-family: var(--cyper-font-mono);
  color: var(--cyper-text);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cyper-brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 2px solid var(--cyper-primary);
  box-shadow: 0 0 0 1px rgba(0, 255, 153, 0.35), 0 0 12px rgba(0, 255, 153, 0.7);
  position: relative;
}

.cyper-brand-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: conic-gradient(
    from 45deg,
    var(--cyper-primary),
    var(--cyper-accent),
    var(--cyper-primary)
  );
  opacity: 0.4;
}

.cyper-nav-link {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
  padding: 0.25rem 0.6rem !important;
  margin: 0 0.1rem;
  position: relative;
}

.cyper-nav-link::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyper-accent),
    transparent
  );
  transform-origin: center;
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.cyper-nav-link:hover,
.cyper-nav-link:focus {
  color: var(--cyper-primary);
}

.nav-link.cyper-nav-link.active,
.nav-link.cyper-nav-link.dropdown-toggle.active {
  color: var(--cyper-primary);
}

.cyper-nav-link.active::after {
  transform: scaleX(1);
}

.cyper-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cyper-nav-dropdown .dropdown-menu {
  min-width: 240px;
  margin-top: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0;
  border: 1px solid var(--cyper-border-soft);
  background: var(--cyper-dropdown-bg);
  box-shadow: var(--cyper-dropdown-shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cyper-nav-dropdown .dropdown-item {
  font-family: var(--cyper-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyper-text-muted);
  padding: 0.4rem 1.1rem;
}

.cyper-nav-dropdown .dropdown-item:hover,
.cyper-nav-dropdown .dropdown-item:focus {
  color: var(--cyper-primary);
  background-color: var(--cyper-dropdown-hover);
}

.cyper-nav-dropdown .dropdown-item.active,
.cyper-nav-dropdown .dropdown-item.active:hover,
.cyper-nav-dropdown .dropdown-item.active:focus {
  color: var(--cyper-primary);
  background-color: var(--cyper-dropdown-hover);
}

.navbar-dark .navbar-nav .nav-link.dropdown-toggle::after {
  display: none;
}

.cyper-nav-dropdown-icon {
  font-size: 0.65rem;
}

.cyper-nav-dropdown .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hero */

.cyper-hero {
  padding-top: 3rem;
  padding-bottom: 4.5rem;
  position: relative;
  overflow: hidden;
}

.cyper-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: radial-gradient(
      circle at top,
      rgba(0, 229, 255, 0.35),
      transparent 60%
    ),
    radial-gradient(circle at bottom, rgba(0, 255, 153, 0.22), transparent 60%);
  opacity: 0.9;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cyper-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: linear-gradient(
      rgba(241, 241, 241, 0.65) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(241, 241, 241, 0.65) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, black 0, transparent 70%);
  pointer-events: none;
}

.cyper-terminal {
  position: relative;
  background: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.9),
    rgba(2, 6, 23, 0.96)
  );
  border-radius: var(--cyper-radius);
  border: 2px solid var(--cyper-border-soft);
  box-shadow: 0 0 0 1px #020617, 0 18px 0 rgba(0, 0, 0, 0.9);
  padding: 1.25rem 1.5rem 1.5rem;
}

.cyper-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.cyper-terminal-dots {
  display: flex;
  gap: 0.35rem;
}

.cyper-terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

.cyper-terminal-dot:nth-child(2) {
  background-color: #facc15;
}

.cyper-terminal-dot:nth-child(3) {
  background-color: #22c55e;
}

.cyper-terminal-title {
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-terminal-body {
  font-family: var(--cyper-font-mono);
  font-size: 0.82rem;
  color: var(--cyper-primary);
}

.cyper-terminal-line + .cyper-terminal-line {
  margin-top: 0.2rem;
}

.cyper-terminal-prompt {
  color: var(--cyper-accent);
}

.cyper-hero-kpi-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.cyper-kpi {
  padding: 0.75rem 0.9rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.85),
    rgba(15, 23, 42, 1)
  );
}

.cyper-kpi-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--cyper-text-muted);
  letter-spacing: 0.16em;
}

.cyper-kpi-value {
  font-family: var(--cyper-font-mono);
  color: var(--cyper-white);
  font-size: 0.9rem;
}

.cyper-hero-eyebrow {
  margin-bottom: 0.9rem;
}

.cyper-hero-eyebrow span {
  color: var(--cyper-accent);
}

.cyper-hero-title {
  font-family: var(--cyper-font-mono);
  font-size: clamp(2.2rem, 3.3vw + 1rem, 3.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cyper-hero-highlight {
  color: var(--cyper-primary);
}

.cyper-hero-lead {
  margin-top: 1rem;
  max-width: 540px;
  color: var(--cyper-text-muted);
}

.cyper-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1.75rem;
}

.cyper-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 1.6rem;
}

.cyper-hero-meta-item {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

.cyper-hero-meta-item strong {
  color: var(--cyper-primary);
}

/* Services */

.cyper-service-icon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 2px solid var(--cyper-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--cyper-primary);
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 153, 0.1),
    transparent 60%
  );
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

.cyper-threat-icon {
  width: 56px;
  height: 56px;
  border-radius: 0;
  border: 2px solid var(--cyper-border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyper-primary);
  background: radial-gradient(
    circle at center,
    var(--cyper-primary),
    transparent 60%
  );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cyper-card:hover .cyper-threat-icon {
  border-color: var(--cyper-accent);
  color: var(--cyper-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--cyper-accent), 0 0 18px rgba(0, 229, 255, 0.6);
}

.cyper-service-title {
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.cyper-service-desc {
  color: var(--cyper-text-muted);
}

.cyper-service-meta {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-service-card {
  transition: box-shadow var(--transition-fast),
    transform var(--transition-fast), border-color var(--transition-fast);
}

.cyper-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.9), 0 0 18px rgba(0, 229, 255, 0.7);
}

/* Stats / Counters */

.cyper-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.cyper-stat {
  padding: 1.3rem 1.1rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: var(--cyper-bg);
}

.cyper-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
}

.cyper-stat-value {
  margin-top: 0.4rem;
  font-family: var(--cyper-font-mono);
  font-size: 1.4rem;
  color: var(--cyper-primary);
}

.cyper-stat-tag {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
}

/* Projects / portfolio */

.cyper-filter-nav {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: var(--cyper-bg);
  padding: 0.25rem;
}

.cyper-filter-btn {
  border: 0;
  background: transparent;
  color: var(--cyper-text-muted);
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.4rem 0.8rem;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cyper-filter-btn.is-active {
  background: linear-gradient(
    90deg,
    rgba(0, 229, 255, 0.18),
    rgba(0, 255, 153, 0.18)
  );
  color: var(--cyper-primary);
}

[data-project-grid] {
  transition: opacity 0.35s ease;
}

[data-project-grid].is-filtering {
  opacity: 0;
}

.cyper-pagination {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cyper-page-btn {
  min-width: 2.4rem;
}

.cyper-project-card {
  padding: 1.4rem 1.4rem 1.1rem;
}

.cyper-project-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 2px solid rgba(15, 23, 42, 0.9);
  margin-bottom: 1rem;
}

.cyper-project-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent 40%);
  opacity: 0;
  transition: opacity var(--transition-med);
}

.cyper-project-thumb img {
  display: block;
  width: 100%;
  transform: scale(1.02);
  transition: transform var(--transition-med);
}

.cyper-project-hover-meta {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e5e7eb;
  font-size: 0.75rem;
}

.cyper-project-card:hover .cyper-project-thumb::before {
  opacity: 1;
}

.cyper-project-card:hover .cyper-project-thumb img {
  transform: scale(1.06);
}

.cyper-project-title {
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.cyper-project-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyper-white);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 1);
  gap: 0.2rem;
}

/* ============================================
   MixItUp Filter Items
   ============================================ */
[data-project-category] {
  backface-visibility: hidden;
  transition: opacity 0.3s ease;
}

/* Testimonials */

.cyper-testimonial {
  padding: 1.7rem 1.6rem 1.5rem;
}

.cyper-testimonial-quote {
  color: var(--cyper-text-muted);
}

.cyper-testimonial-meta {
  margin-top: 1rem;
}

.cyper-testimonial-name {
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.cyper-testimonial-role {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background-color: rgba(148, 163, 184, 0.6);
  opacity: 1;
}

.cyper-swiper-pagination .swiper-pagination-bullet-active {
  background: linear-gradient(
    145deg,
    var(--cyper-primary),
    var(--cyper-accent)
  );
}

/* Blog */

.cyper-blog-card {
  padding: 1.5rem 1.5rem 1.4rem;
}

.cyper-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
}

.cyper-blog-title {
  margin-top: 0.75rem;
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.cyper-blog-excerpt {
  margin-top: 0.6rem;
  color: var(--cyper-text-muted);
}

.cyper-pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cyper-page-link {
  min-width: 34px;
  height: 34px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.95),
    rgba(15, 23, 42, 1)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast),
    transform var(--transition-fast);
}

.cyper-page-link:hover {
  color: var(--cyper-primary);
  transform: translateY(-1px);
}

.cyper-page-link.is-active {
  background: linear-gradient(
    145deg,
    var(--cyper-primary),
    var(--cyper-accent)
  );
  color: #020617;
}

/* Team / About */

.cyper-avatar {
  width: 80px;
  height: 80px;
  border-radius: 2px;
  border: 3px solid var(--cyper-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 255, 153, 0.4);
  overflow: hidden;
}
.cyper-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cyper-team-name {
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.cyper-team-role {
  font-size: 0.76rem;
  color: var(--cyper-text-muted);
}

.cyper-skill-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-skill-bar {
  margin-top: 0.25rem;
  height: 9px;
  background: var(--cyper-bg);
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  position: relative;
  overflow: hidden;
}

.cyper-skill-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--cyper-primary), var(--cyper-accent));
}

.cyper-skill-90 .cyper-skill-bar-fill {
  width: 90%;
}

.cyper-skill-80 .cyper-skill-bar-fill {
  width: 80%;
}

.cyper-skill-70 .cyper-skill-bar-fill {
  width: 70%;
}

.cyper-skill-60 .cyper-skill-bar-fill {
  width: 60%;
}

.cyper-skill-50 .cyper-skill-bar-fill {
  width: 50%;
}

.cyper-mission-panel {
  padding: 1.6rem 1.4rem;
}

/* Services page */

.cyper-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.cyper-service-tag {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
}

/* Timeline / project details */

.cyper-timeline {
  position: relative;
  padding-left: 1.4rem;
}

.cyper-timeline::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyper-accent), transparent);
}

.cyper-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.cyper-timeline-bullet {
  position: absolute;
  left: -1.52rem;
  top: 0.2rem;
  width: 10px;
  height: 10px;
  background: var(--cyper-primary);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 1);
}

/* Blog single */

.cyper-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
}

.cyper-article-body {
  color: var(--cyper-text-muted);
}

.cyper-sidebar-panel {
  margin-bottom: 1.25rem;
}

.cyper-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cyper-tag {
  padding: 0.25rem 0.6rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Contact */

.cyper-form-control.form-control {
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--cyper-bg);
  color: var(--cyper-text);
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
}

.cyper-form-control.form-select {
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background-color: var(--cyper-bg);
  color: var(--cyper-text);
  font-size: 0.8rem;
}

.cyper-form-control.form-control::placeholder {
  color: var(--cyper-text-muted);
  opacity: 0.85;
}

.cyper-form-control.form-control:focus {
  border-color: var(--cyper-primary);
  box-shadow: 0 0 0 1px rgba(0, 255, 153, 0.4);
  background-color: var(--cyper-bg);
}

.cyper-form-control.form-select:focus {
  border-color: var(--cyper-primary);
  box-shadow: 0 0 0 1px rgba(0, 255, 153, 0.4);
  background-color: var(--cyper-bg);
}

.cyper-map-placeholder {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

/* 404 */

.cyper-hero-404 {
  min-height: calc(100vh - var(--cyper-nav-height) - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyper-404-title {
  font-family: var(--cyper-font-mono);
  font-size: clamp(3rem, 5vw + 1rem, 4.5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cyper-404-glitch {
  position: relative;
  color: var(--cyper-primary);
}

.cyper-404-glitch::before,
.cyper-404-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: screen;
  opacity: 0.7;
}

.cyper-404-glitch::before {
  color: #00e5ff;
  transform: translate(2px, -1px);
}

.cyper-404-glitch::after {
  color: #ff3b81;
  transform: translate(-2px, 1px);
}

/* Footer */

.cyper-footer {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: radial-gradient(
    circle at top,
    rgba(15, 23, 42, 0.96),
    rgba(15, 23, 42, 1)
  );
}

.cyper-footer-meta {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cyper-footer-nav a {
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyper-text-muted);
}

.cyper-footer-nav a:hover {
  color: var(--cyper-primary);
}

.cyper-social {
  display: inline-flex;
  gap: 0.5rem;
}

.cyper-social-link {
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-social-link:hover {
  border-color: var(--cyper-primary);
  color: var(--cyper-primary);
}

/* Utility */

.cyper-divider {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(148, 163, 184, 0.6),
    transparent
  );
  opacity: 0.7;
}

.cyper-badge {
  font-family: var(--cyper-font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.cyper-badge-success {
  border-color: rgba(34, 197, 94, 0.7);
  color: #4ade80;
}

.cyper-badge-danger {
  border-color: rgba(248, 113, 113, 0.75);
  color: #fb7185;
}

.cyper-hud {
  padding: 1.25rem 1.4rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: radial-gradient(
      circle at top,
      rgba(148, 163, 184, 0.14),
      transparent 55%
    ),
    linear-gradient(145deg, var(--cyper-bg-alt), var(--cyper-bg-soft));
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
}

.cyper-hud::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.cyper-hud-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cyper-hud-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyper-accent),
    transparent
  );
  opacity: 0.55;
}

.cyper-hud-value {
  margin-top: 0.4rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--cyper-text-secondary);
  font-variant-numeric: tabular-nums;
}

.cyper-hud-value > div + div {
  margin-top: 0.15rem;
}

.cyper-hud-value div:first-child {
  color: var(--cyper-white);
  font-weight: 600;
}

.cyper-hud-lg .cyper-hud-value div:first-child {
  font-size: 0.9rem;
}

.cyper-hud-value strong {
  color: var(--cyper-primary);
}

.cyper-hud .text-danger {
  color: var(--cyper-danger) !important;
}

.cyper-hud .text-warning {
  color: var(--cyper-warning) !important;
}

.cyper-hud .text-success {
  color: var(--cyper-success) !important;
}

.cyper-hud.text-center .cyper-hud-label {
  justify-content: center;
}

.cyper-hud-lg {
  padding: 1.5rem 1.7rem;
  border-width: 1.5px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

.cyper-hud-lg .cyper-hud-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}

.cyper-hud-lg .cyper-hud-value {
  font-size: 0.82rem;
}

.cyper-hud-lg .cyper-hud-value .small,
.cyper-hud-lg .cyper-hud-value small {
  font-size: 0.72rem;
  color: var(--cyper-text-muted);
}

.cyper-hud-alert {
  border-color: var(--cyper-danger-glow);
  background: radial-gradient(
      circle at top,
      var(--cyper-danger-glow),
      transparent 55%
    ),
    linear-gradient(145deg, #111827, var(--cyper-bg-soft));
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.95),
    0 0 22px var(--cyper-danger-glow);
}

.cyper-hud-alert .cyper-hud-label {
  color: var(--cyper-danger);
}

.cyper-hud-alert .cyper-hud-value {
  color: var(--cyper-text);
}

body.cyper-loading {
  overflow: hidden;
}

#cyper-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cyper-bg-gradient);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.85s ease-in-out;
  pointer-events: none;
}

#cyper-loader.cyper-loader-visible {
  transform: translateX(0);
  pointer-events: auto;
}

#cyper-loader.cyper-loader-hide {
  transform: translateX(-100%);
  opacity: 0;
}

#cyper-page-curtain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--cyper-bg-gradient);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
}

#cyper-page-curtain.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  animation: cyper-page-curtain-sweep 0.7s cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

@keyframes cyper-page-curtain-sweep {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.cyper-loader-inner {
  width: min(520px, 100%);
  margin-right: 8vw;
  padding: 1.4rem 1.6rem;
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
}

.cyper-loader-bar {
  height: 3px;
  margin-bottom: 0.85rem;
  background: linear-gradient(90deg, var(--cyper-accent), var(--cyper-primary));
  transform-origin: left;
  animation: cyper-loader-bar 1s ease-in-out infinite alternate;
}

.cyper-loader-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.cyper-loader-label {
  color: var(--cyper-accent);
}

.cyper-loader-progress {
  color: var(--cyper-text-secondary);
}

@keyframes cyper-loader-bar {
  0% {
    transform: scaleX(0.15);
  }
  100% {
    transform: scaleX(1);
  }
}
/* body.cyper-cursor-enabled {
  cursor: none;
} */

#cyper-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--cyper-accent);
  border-radius: 2px;
  transform: translate3d(-999px, -999px, 0);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
  transition: transform 0.22s ease-out, opacity 0.25s ease-out;
  opacity: 0.85;
}

.cyper-cursor-edge {
  animation: cyper-cursor-edge-pulse 0.25s ease-out;
}

@keyframes cyper-cursor-edge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 153, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 255, 153, 0);
  }
}

body.cyper-loading #cyper-cursor {
  opacity: 0;
}

.cyper-click-pulse {
  position: fixed;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--cyper-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 18px var(--cyper-primary-glow),
    0 0 28px var(--cyper-accent-glow);
  pointer-events: none;
  z-index: 9997;
  transform: scale(0.3);
  opacity: 1;
  transition: transform 0.55s ease-out, opacity 0.55s ease-out;
}

.cyper-click-pulse.is-active {
  transform: scale(2.1);
  opacity: 0;
}

.cyper-engagement-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cyper-engagement-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cyper-text-muted);
}

.cyper-engagement-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--cyper-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 255, 153, 0.7);
}

.cyper-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cyper-chip {
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-size: 0.7rem;
}

/* ============================================
   NEW PAGES COMPONENTS
   ============================================ */

/* Icon Box */
.cyper-icon-box {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
}

/* Process Cards */
.cyper-process-card {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  transition: all var(--transition-fast);
}

.cyper-process-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
}

.cyper-process-number {
  font-family: var(--cyper-font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cyper-primary);
  opacity: 0.8;
  line-height: 1;
}

/* Timeline Cards */
.cyper-timeline-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  position: relative;
}

.cyper-timeline-number {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cyper-font-mono);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Code Block */
.cyper-code-block,
.cyper-terminal-card {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.cyper-code-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--cyper-bg);
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.cyper-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.5);
  margin-right: 6px;
}

.cyper-code-dot:nth-child(1) {
  background: #ff5f56;
}
.cyper-code-dot:nth-child(2) {
  background: #ffbd2e;
}
.cyper-code-dot:nth-child(3) {
  background: #27ca40;
}

.cyper-code-content {
  padding: 1rem;
  margin: 0;
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: #a5f3fc;
  overflow-x: auto;
}

/* Feature Lists */
.cyper-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cyper-feature-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.875rem;
  color: var(--cyper-text-muted);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.cyper-feature-list li:last-child {
  border-bottom: none;
}

.cyper-feature-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--cyper-primary);
  font-weight: bold;
}

.cyper-feature-list-lg li {
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cyper-feature-list-lg li strong {
  color: var(--cyper-text);
  font-size: 0.9rem;
}

.cyper-feature-list-lg li span {
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

.cyper-check-list {
  list-style: none;
  padding: 0;
}

.cyper-check-list li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  color: var(--cyper-text-muted);
}

.cyper-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cyper-primary);
  font-weight: bold;
}

/* Tier Badges */
.cyper-tier-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: var(--cyper-bg);
}

.cyper-tier-featured {
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  border-color: var(--cyper-primary);
}

/* Tech Badges */
.cyper-tech-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  font-size: 0.85rem;
}

.cyper-tech-badge i {
  color: var(--cyper-primary);
}

/* Cert Badges */
.cyper-cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-cert-name {
  font-family: var(--cyper-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cyper-primary);
}

.cyper-cert-full {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
  margin-top: 0.25rem;
}

/* Compliance Badges (Index 7 Hero) */
.cyper-compliance-badges {
  max-width: 360px;
  margin-left: auto;
}

.cyper-badge-card {
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--cyper-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.cyper-badge-icon {
  font-family: var(--cyper-font-mono);
  font-size: 1rem;
  color: var(--cyper-primary);
}

.cyper-badge-name {
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Stat Cards */
.cyper-stat-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--cyper-bg);
}

.cyper-stat-value {
  font-family: var(--cyper-font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cyper-primary);
  line-height: 1.1;
}

.cyper-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyper-text-muted);
  margin-top: 0.5rem;
}

/* Network Diagram (Index 8 Hero) */
.cyper-network-diagram {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--cyper-bg);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cyper-node {
  padding: 1rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-node i {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
  color: var(--cyper-primary);
}

.cyper-node span {
  display: block;
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cyper-node-firewall {
  /* inherits base .cyper-node styles */
}

.cyper-node-firewall i {
  /* inherits base .cyper-node icon styles */
}

/* Architecture Layers (Index 8) */
.cyper-architecture-layers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cyper-layer {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--cyper-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cyper-layer-name {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cyper-layer-items {
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

/* Zero Trust Principles (Index 8) */
.cyper-zt-principles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cyper-zt-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-zt-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cyper-font-mono);
  font-size: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
}

.cyper-zt-text {
  font-size: 0.9rem;
}

/* Status Dots */
.cyper-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.cyper-status-online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.cyper-status-alert {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.cyper-status-alert.pulse {
  animation: pulse-alert 1.5s infinite;
}

@keyframes pulse-alert {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Severity Badges */
.cyper-severity-critical {
  background: #dc2626;
  color: white;
}
.cyper-severity-high {
  background: #ea580c;
  color: white;
}
.cyper-severity-medium {
  background: #ca8a04;
  color: white;
}
.cyper-severity-low {
  background: #65a30d;
  color: white;
}

/* Report Preview */
.cyper-report-preview {
  padding: 1.25rem;
}

.cyper-report-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cyper-report-badge {
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
}

/* Accordion */
.cyper-accordion-item {
  border: 1px solid rgba(148, 163, 184, 0.3);
  margin-bottom: 0.5rem;
  background: var(--cyper-bg);
}

.cyper-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}

.cyper-accordion-header:hover {
  background: rgba(148, 163, 184, 0.1);
}

.cyper-accordion-content {
  padding: 0 1.25rem 1rem;
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  display: none;
}

.cyper-accordion-item.active .cyper-accordion-content {
  display: block;
}

/* CTA Card */
.cyper-cta-card {
  padding: 3rem 2rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.8),
    rgba(30, 41, 59, 0.6)
  );
}

/* Alert Badge */
.cyper-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ef4444;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  font-size: 0.8rem;
  font-family: var(--cyper-font-mono);
}

/* IR Phase Cards */
.cyper-ir-phase {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-phase-number {
  font-family: var(--cyper-font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cyper-primary);
}

.cyper-phase-time {
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  color: var(--cyper-primary);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

/* Team Cards */
.cyper-team-card {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  text-align: center;
  transition: all var(--transition-fast);
}

.cyper-team-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
}

.cyper-team-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-radius: 50%;
  color: var(--cyper-primary);
}

.cyper-team-avatar-sm {
  width: 50px;
  height: 50px;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 50%;
  color: var(--cyper-primary);
}

.cyper-team-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cyper-team-role {
  font-size: 0.8rem;
  color: var(--cyper-primary);
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cyper-team-bio {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  margin-top: 0.75rem;
}

.cyper-team-certs,
.cyper-team-certs-sm {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
  font-family: var(--cyper-font-mono);
  margin-top: 0.5rem;
}

.cyper-team-social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cyper-team-social a {
  color: var(--cyper-text-muted);
  transition: color var(--transition-fast);
}

.cyper-team-social a:hover {
  color: var(--cyper-primary);
}

.cyper-team-card-sm {
  padding: 1.25rem 1rem;
}

/* Pricing Cards */
.cyper-pricing-card {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-fast);
}

.cyper-pricing-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
}

.cyper-pricing-featured {
  border-color: var(--cyper-primary);
}

.cyper-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  padding: 0.25rem 1rem;
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
}

.cyper-pricing-header {
  padding: 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.cyper-pricing-tier {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cyper-text-muted);
  font-family: var(--cyper-font-mono);
}

.cyper-pricing-price {
  margin-top: 1rem;
}

.cyper-price-currency {
  font-size: 1.25rem;
  vertical-align: super;
}

.cyper-price-amount {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--cyper-font-mono);
  color: var(--cyper-primary);
}

.cyper-price-period {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
}

.cyper-pricing-desc {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  margin-top: 0.5rem;
}

.cyper-pricing-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cyper-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex: 1;
}

.cyper-pricing-features li {
  padding: 0.6rem 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cyper-pricing-features li i {
  color: var(--cyper-primary);
}

.cyper-feature-disabled {
  opacity: 0.4;
}

.cyper-feature-disabled i {
  color: var(--cyper-text-muted) !important;
}

/* Managed Pricing */
.cyper-managed-pricing {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  text-align: center;
}

.cyper-managed-name {
  font-size: 1rem;
  font-weight: 600;
}

.cyper-managed-price {
  font-family: var(--cyper-font-mono);
  font-size: 1.75rem;
  color: var(--cyper-primary);
  margin: 0.75rem 0;
}

.cyper-managed-price span {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
}

.cyper-managed-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

.cyper-managed-features li {
  padding: 0.35rem 0;
}

/* Case Study Cards */
.cyper-case-card {
  padding: 1.75rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  height: 100%;
  transition: all var(--transition-fast);
}

.cyper-case-card:hover {
  border-color: var(--cyper-primary);
}

.cyper-case-header {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cyper-case-industry,
.cyper-case-service {
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.cyper-case-service {
  background: rgba(148, 163, 184, 0.1);
}

.cyper-case-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.cyper-case-excerpt {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  margin-bottom: 1.25rem;
}

.cyper-case-results {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.cyper-case-stat {
  text-align: center;
  flex: 1;
}

.cyper-case-stat .cyper-stat-value {
  font-size: 1.25rem;
}

.cyper-case-stat .cyper-stat-label {
  font-size: 0.65rem;
}

/* Testimonial Cards */
.cyper-testimonial-card {
  padding: 1.75rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  height: 100%;
}

.cyper-testimonial-rating {
  color: #fbbf24;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.cyper-testimonial-text {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cyper-text);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.cyper-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cyper-author-avatar {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 50%;
  color: var(--cyper-primary);
}

.cyper-author-info {
  display: flex;
  flex-direction: column;
}

.cyper-author-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.cyper-author-role {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

/* Client Logos */
.cyper-client-logo {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: var(--cyper-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyper-text-muted);
  transition: all var(--transition-fast);
}

.cyper-client-logo:hover {
  color: var(--cyper-primary);
  border-color: var(--cyper-primary);
}

/* Partner Cards */
.cyper-partner-card {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  text-align: center;
  height: 100%;
  transition: all var(--transition-fast);
}

.cyper-partner-card:hover {
  border-color: var(--cyper-primary);
}

.cyper-partner-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
  transition: transform var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.cyper-partner-logo i {
  font-size: 1.75rem;
}

.cyper-partner-card:hover .cyper-partner-logo {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--cyper-primary);
  background: var(--cyper-bg);
}

.cyper-partner-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cyper-partner-tier {
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
  color: var(--cyper-primary);
  text-transform: uppercase;
}

.cyper-partner-desc {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  margin-top: 0.75rem;
}

.cyper-cloud-partner {
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
}

.cyper-cloud-partner i {
  color: var(--cyper-primary);
}

/* Certification Cards */
.cyper-cert-card {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
  height: 100%;
}

.cyper-cert-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
  transition: transform var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.cyper-cert-icon i {
  font-size: 1.75rem;
}

.cyper-cert-card:hover .cyper-cert-icon {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--cyper-primary);
  background: var(--cyper-bg);
}

.cyper-cert-type {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
  text-transform: uppercase;
  font-family: var(--cyper-font-mono);
}

.cyper-cert-badge-card {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cyper-cert-badge-name {
  font-family: var(--cyper-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyper-primary);
}

.cyper-cert-badge-count {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-cert-badge-count::before {
  content: "×";
  margin-right: 0.25rem;
}

/* Feature Cards */
.cyper-feature-card {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--cyper-bg);
}

.cyper-feature-card i {
  color: var(--cyper-primary);
}

.cyper-feature-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.cyper-feature-desc {
  color: var(--cyper-text-muted);
}

/* Framework Cards */
.cyper-framework-card {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-framework-name {
  font-family: var(--cyper-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cyper-primary);
}

.cyper-framework-full {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
  display: block;
  margin-top: 0.25rem;
}

.cyper-framework-detail {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  height: 100%;
}

.cyper-framework-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cyper-framework-desc {
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  margin-bottom: 0.75rem;
}

.cyper-framework-timeline {
  font-size: 0.75rem;
  font-family: var(--cyper-font-mono);
  color: var(--cyper-primary);
}

/* Provider Cards */
.cyper-provider-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
  transition: all var(--transition-fast);
}

.cyper-provider-card:hover {
  border-color: var(--cyper-primary);
  background: var(--cyper-bg);
}

/* Vendor/Tool/Integration Cards */
.cyper-vendor-card,
.cyper-tool-card,
.cyper-integration-card {
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  transition: all var(--transition-fast);
}

.cyper-vendor-card:hover,
.cyper-tool-card:hover,
.cyper-integration-card:hover {
  border-color: var(--cyper-primary);
}

.cyper-vendor-card i,
.cyper-tool-card i,
.cyper-integration-card i {
  color: var(--cyper-primary);
}

/* Risk List */
.cyper-risk-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cyper-risk-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: var(--cyper-bg);
}

.cyper-risk-badge {
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-family: var(--cyper-font-mono);
  min-width: 60px;
  text-align: center;
}

.cyper-risk-desc {
  font-size: 0.85rem;
}

/* MITRE Cards */
.cyper-mitre-card {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-mitre-id {
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  color: var(--cyper-primary);
  display: block;
}

.cyper-mitre-name {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Actor Cards */
.cyper-actor-card {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-actor-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cyper-actor-origin {
  font-size: 1.25rem;
}

.cyper-actor-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.cyper-actor-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cyper-actor-details span {
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-family: var(--cyper-font-mono);
}

/* Feed Styles */
.cyper-threat-feed {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
}

.cyper-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-feed-title {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.cyper-feed-status {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
}

.cyper-feed-status i {
  font-size: 0.5rem;
  margin-right: 0.35rem;
}

.cyper-feed-items {
  padding: 0.5rem;
}

.cyper-darkweb-monitor {
  border: 1px solid var(--cyper-border-soft);
  background: radial-gradient(
    circle at top,
    var(--cyper-bg-soft),
    var(--cyper-bg)
  );
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
}

.cyper-monitor-header {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-text-muted);
  margin-bottom: 1rem;
}

.cyper-monitor-alert {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 0;
  border: 1px solid var(--cyper-border-soft);
  background: var(--cyper-bg);
  color: var(--cyper-text);
  margin-bottom: 1.25rem;
}

.cyper-alert-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--cyper-primary);
  background: var(--cyper-bg);
  color: var(--cyper-primary);
  flex-shrink: 0;
}

.cyper-alert-icon i {
  font-size: 1.1rem;
}

.cyper-alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cyper-alert-content strong {
  font-size: 0.9rem;
}

.cyper-alert-content span {
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

.cyper-monitor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.cyper-monitor-stat {
  flex: 1;
  min-width: 120px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
}

.cyper-stat-num {
  display: block;
  font-family: var(--cyper-font-mono);
  font-size: 1.4rem;
  color: var(--cyper-primary);
}

.cyper-stat-lbl {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
}

.cyper-feed-item {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cyper-feed-item:last-child {
  border-bottom: none;
}

.cyper-feed-time {
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
}

.cyper-feed-badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.6rem;
  font-family: var(--cyper-font-mono);
}

.cyper-feed-text {
  flex: 1;
  min-width: 200px;
}

/* Training Stats */
.cyper-training-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cyper-training-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-training-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: var(--cyper-primary);
  font-size: 1.25rem;
}

.cyper-training-info {
  display: flex;
  flex-direction: column;
}

.cyper-training-num {
  font-family: var(--cyper-font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cyper-primary);
  line-height: 1;
}

.cyper-training-label {
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
}

/* Course Level */
.cyper-course-level {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-family: var(--cyper-font-mono);
  text-transform: uppercase;
  border: 1px solid var(--cyper-primary);
  color: var(--cyper-primary);
}

/* Topics Grid */
.cyper-topics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cyper-topic-tag {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  transition: all var(--transition-fast);
}

.cyper-topic-tag:hover {
  border-color: var(--cyper-primary);
  color: var(--cyper-primary);
}

/* SDLC Cards */
.cyper-sdlc-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
  height: 100%;
}

.cyper-sdlc-phase {
  display: inline-block;
  padding: 0.25rem 1rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  text-transform: uppercase;
}

/* OWASP Grid */
.cyper-owasp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.cyper-owasp-item {
  padding: 0.75rem;
  font-size: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--cyper-bg);
}

.cyper-owasp-num {
  font-family: var(--cyper-font-mono);
  color: var(--cyper-primary);
  margin-right: 0.5rem;
}

/* Pipeline Visual */
.cyper-pipeline-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-pipeline-stage i {
  font-size: 1.5rem;
  color: var(--cyper-primary);
}

.cyper-pipeline-stage span {
  font-weight: 600;
  font-size: 0.85rem;
}

.cyper-pipeline-stage small {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
  font-family: var(--cyper-font-mono);
}

.cyper-pipeline-arrow {
  color: var(--cyper-primary);
}

/* Cert Prep Cards */
.cyper-cert-prep-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
  height: 100%;
}

.cyper-cert-duration {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.75rem;
  font-family: var(--cyper-font-mono);
  color: var(--cyper-primary);
}

/* Platform Features */
.cyper-platform-feature {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
}

.cyper-platform-feature i {
  color: var(--cyper-primary);
}

/* Phishing Results */
.cyper-phishing-results {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: var(--cyper-bg);
}

.cyper-phishing-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
}

.cyper-phishing-metrics {
  display: flex;
  justify-content: space-around;
  padding: 1.5rem 1rem;
}

.cyper-metric {
  text-align: center;
}

.cyper-metric-value {
  font-family: var(--cyper-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cyper-primary);
  display: block;
}

.cyper-metric-label {
  font-size: 0.7rem;
  color: var(--cyper-text-muted);
}

.cyper-phishing-trend {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 0.8rem;
  text-align: center;
}

/* Intel Levels */
.cyper-intel-level {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.cyper-intel-featured {
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  border-color: var(--cyper-primary);
}

/* Managed Card */
.cyper-managed-card {
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: var(--cyper-bg);
  text-align: center;
}

.cyper-managed-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: var(--cyper-primary);
  font-size: 1.5rem;
}

/* Button Variations */
.cyper-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.cyper-btn-urgent {
  background: #dc2626;
  border-color: #dc2626;
}

.cyper-btn-urgent:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Helper Classes */
.min-vh-75 {
  min-height: 75vh;
}

.text-success {
  color: #22c55e !important;
}
.text-warning {
  color: #eab308 !important;
}
.text-primary {
  color: var(--cyper-primary) !important;
}

/* ============================================
   ENHANCED DARK THEME BACKGROUNDS & EFFECTS
   ============================================ */

/* Cyber Grid Background */
.cyper-cyber-grid {
  position: relative;
  overflow: hidden;
}

.cyper-cyber-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(0, 255, 153, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 255, 153, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* Scanline Effect */
.cyper-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  opacity: 0.4;
}

/* Glowing Orbs Background */
.cyper-orbs-bg {
  position: relative;
  overflow: hidden;
}

.cyper-orbs-bg::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
      circle at 20% 30%,
      var(--cyper-primary-glow) 0%,
      transparent 25%
    ),
    radial-gradient(
      circle at 80% 70%,
      var(--cyper-accent-glow) 0%,
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--cyper-secondary-glow) 0%,
      transparent 30%
    );
  animation: orbsFloat 30s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orbsFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5%, 5%) rotate(90deg);
  }
  50% {
    transform: translate(-5%, 10%) rotate(180deg);
  }
  75% {
    transform: translate(10%, -5%) rotate(270deg);
  }
}

/* Matrix Rain Effect (for hero sections) */
.cyper-matrix-bg {
  position: relative;
  overflow: hidden;
}

.cyper-matrix-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 153, 0.02) 50%,
    transparent 100%
  );
  background-size: 100% 200px;
  animation: matrixRain 3s linear infinite;
  pointer-events: none;
}

@keyframes matrixRain {
  0% {
    background-position: 0 -200px;
  }
  100% {
    background-position: 0 200px;
  }
}

/* Neon Border Glow */
.cyper-neon-border {
  border: 1px solid var(--cyper-primary);
  box-shadow: 0 0 5px var(--cyper-primary-glow),
    0 0 10px var(--cyper-primary-glow), inset 0 0 5px rgba(0, 255, 153, 0.1);
}

.cyper-neon-border-accent {
  border: 1px solid var(--cyper-accent);
  box-shadow: 0 0 5px var(--cyper-accent-glow),
    0 0 10px var(--cyper-accent-glow), inset 0 0 5px rgba(0, 229, 255, 0.1);
}

/* Enhanced Card Styles */
.cyper-card-glow {
  background: linear-gradient(
    145deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
  border: 1px solid var(--cyper-border-soft);
  position: relative;
  transition: all var(--transition-med);
}

.cyper-card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    135deg,
    var(--cyper-primary),
    var(--cyper-accent)
  );
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-med);
}

.cyper-card-glow:hover::before {
  opacity: 0.15;
}

.cyper-card-glow:hover {
  transform: translateY(-5px);
  box-shadow: var(--cyper-glow-primary);
}

/* Hex Pattern Background */
.cyper-hex-bg {
  position: relative;
}

.cyper-hex-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300ff99' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

/* Gradient Text */
.cyper-gradient-text {
  background: linear-gradient(
    135deg,
    var(--cyper-primary),
    var(--cyper-accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated Border */
.cyper-animated-border {
  position: relative;
  background: var(--cyper-bg);
}

.cyper-animated-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    var(--cyper-primary),
    var(--cyper-accent),
    var(--cyper-secondary),
    var(--cyper-primary)
  );
  background-size: 400% 400%;
  z-index: -1;
  animation: borderGradient 8s ease infinite;
}

.cyper-animated-border::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyper-bg);
  z-index: -1;
}

@keyframes borderGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulse Animation */
.cyper-pulse {
  animation: pixelPulse 2s ease-in-out infinite;
}

@keyframes pixelPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Glow Text */
.cyper-text-glow {
  text-shadow: 0 0 10px var(--cyper-primary-glow),
    0 0 20px var(--cyper-primary-glow);
}

.cyper-text-glow-accent {
  text-shadow: 0 0 10px var(--cyper-accent-glow),
    0 0 20px var(--cyper-accent-glow);
}

/* Dark Section Variants */
.cyper-section-cyber {
  position: relative;
  background: radial-gradient(
      ellipse at top left,
      rgba(0, 255, 153, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at bottom right,
      rgba(0, 229, 255, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at center,
      rgba(139, 92, 246, 0.05) 0%,
      transparent 70%
    ),
    var(--cyper-bg);
  overflow: hidden;
}

.cyper-section-gradient {
  background: var(--cyper-bg-gradient);
}

.cyper-section-deep {
  background: radial-gradient(
      circle at 50% 0%,
      rgba(15, 23, 42, 0.8) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #020408 0%, var(--cyper-bg) 100%);
}

/* Icon Glow Effects */
.cyper-icon-glow {
  color: var(--cyper-primary);
  filter: drop-shadow(0 0 8px var(--cyper-primary-glow));
  transition: filter var(--transition-fast);
}

.cyper-icon-glow:hover {
  filter: drop-shadow(0 0 15px var(--cyper-primary-glow))
    drop-shadow(0 0 25px var(--cyper-primary-glow));
}

/* Status Indicators */
.cyper-status-active {
  position: relative;
}

.cyper-status-active::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--cyper-success);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyper-success);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%,
  100% {
    box-shadow: 0 0 5px var(--cyper-success);
  }
  50% {
    box-shadow: 0 0 20px var(--cyper-success), 0 0 30px var(--cyper-success);
  }
}

/* Progress Bar Glow */
.cyper-progress-glow {
  height: 8px;
  background: rgba(148, 163, 184, 0.2);
  position: relative;
  overflow: hidden;
}

.cyper-progress-glow-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyper-primary), var(--cyper-accent));
  box-shadow: 0 0 10px var(--cyper-primary-glow);
  position: relative;
}

.cyper-progress-glow-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Floating Elements */
.cyper-float {
  animation: pixelFloat 6s ease-in-out infinite;
}

@keyframes pixelFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Cyber Button Variants */
.cyper-btn-cyber {
  background: transparent;
  border: 2px solid var(--cyper-primary);
  color: var(--cyper-primary);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cyper-btn-cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyper-primary);
  transform: translateX(-100%);
  transition: transform var(--transition-med);
  z-index: -1;
}

.cyper-btn-cyber:hover {
  color: var(--cyper-bg);
}

.cyper-btn-cyber:hover::before {
  transform: translateX(0);
}

/* Data Grid */
.cyper-data-grid {
  display: grid;
  gap: 1px;
  background: rgba(148, 163, 184, 0.1);
}

.cyper-data-cell {
  background: var(--cyper-bg);
  padding: 1rem;
  transition: all var(--transition-fast);
}

.cyper-data-cell:hover {
  background: var(--cyper-bg-alt);
}

/* Threat Level Indicators */
.cyper-threat-critical {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}

.cyper-threat-high {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  box-shadow: 0 0 15px rgba(234, 88, 12, 0.5);
}

.cyper-threat-medium {
  background: linear-gradient(135deg, #ca8a04, #a16207);
  box-shadow: 0 0 15px rgba(202, 138, 4, 0.5);
}

.cyper-threat-low {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 0 15px rgba(22, 163, 74, 0.5);
}

/* Console/Terminal Styles */
.cyper-console {
  background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
  border: 1px solid rgba(0, 255, 153, 0.3);
  font-family: var(--cyper-font-mono);
  padding: 1.5rem;
  position: relative;
}

.cyper-console::before {
  content: "TERMINAL";
  position: absolute;
  top: -10px;
  left: 15px;
  background: var(--cyper-bg);
  padding: 0 0.5rem;
  font-size: 0.65rem;
  color: var(--cyper-primary);
  letter-spacing: 0.2em;
}

.cyper-console-line {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.cyper-console-prompt {
  color: var(--cyper-accent);
}

.cyper-console-output {
  color: var(--cyper-primary);
}

.cyper-console-error {
  color: var(--cyper-danger);
}

/* Radar/Scanner Effect */
.cyper-radar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid var(--cyper-primary);
  position: relative;
  overflow: hidden;
}

.cyper-radar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyper-primary), transparent);
  transform-origin: left center;
  animation: radarSweep 4s linear infinite;
}

.cyper-radar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, var(--cyper-bg) 70%),
    repeating-radial-gradient(
      circle,
      transparent 0px,
      transparent 20px,
      rgba(0, 255, 153, 0.1) 21px,
      rgba(0, 255, 153, 0.1) 22px
    );
}

@keyframes radarSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   MEGA MENU STYLES
   ============================================ */

.cyper-mega-dropdown {
  position: static;
}

.cyper-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--cyper-dropdown-bg);
  border: 1px solid var(--cyper-border-soft);
  /* border-top: 1px solid var(--cyper-primary); */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-med);
  z-index: 1000;
}

.cyper-mega-dropdown.show .cyper-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cyper-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.cyper-mega-column {
  display: flex;
  flex-direction: column;
}

.cyper-mega-column-title {
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyper-primary);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--cyper-border-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cyper-mega-column-title i {
  font-size: 0.85rem;
}

.cyper-mega-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  margin: 0.15rem 0;
  font-family: var(--cyper-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyper-text-muted);
  border-radius: 0;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.cyper-mega-link:hover {
  color: var(--cyper-primary);
  background: rgba(0, 255, 153, 0.08);
  transform: translateX(4px);
}

.cyper-mega-link.active {
  color: var(--cyper-primary);
  background: rgba(0, 255, 153, 0.1);
}

.cyper-mega-link i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cyper-primary);
  opacity: 0.7;
}

.cyper-mega-link:hover i {
  opacity: 1;
}

/* Hide Blog & Contact only inside mega menu (top nav/footer unaffected) */
.cyper-mega-menu .cyper-mega-link[href="blog.html"],
.cyper-mega-menu .cyper-mega-link[href="contact.html"] {
  display: none;
}

/* ============================================
   404 PAGE - ENHANCED STYLES
   ============================================ */
.cyper-404-container {
  position: relative;
  padding: var(--cyper-space-xl) 0;
}

.cyper-404-matrix {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.15;
  pointer-events: none;
}

.cyper-404-matrix::before {
  content: "01001000 01000001 01000011 01001011 01000101 01000100 00100000 01000011 01001111 01001110 01001110 01000101 01000011 01010100 01001001 01001111 01001110";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  color: var(--cyper-primary);
  word-wrap: break-word;
  line-height: 1.8;
  animation: matrix-scroll 20s linear infinite;
}

@keyframes matrix-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.cyper-404-code-display {
  font-family: var(--cyper-font-mono);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  position: relative;
  display: inline-block;
}

.cyper-404-code-display::before,
.cyper-404-code-display::after {
  content: attr(data-code);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.cyper-404-code-display::before {
  color: var(--cyper-accent);
  animation: glitch-1 0.3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.cyper-404-code-display::after {
  color: var(--cyper-danger);
  animation: glitch-2 0.3s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
  0%,
  100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-3px, 3px);
  }
  40% {
    transform: translate(3px, -3px);
  }
  60% {
    transform: translate(-3px, -3px);
  }
  80% {
    transform: translate(3px, 3px);
  }
}

@keyframes glitch-2 {
  0%,
  100% {
    transform: translate(0);
  }
  20% {
    transform: translate(3px, -3px);
  }
  40% {
    transform: translate(-3px, 3px);
  }
  60% {
    transform: translate(3px, 3px);
  }
  80% {
    transform: translate(-3px, -3px);
  }
}

.cyper-404-terminal {
  max-width: 500px;
  margin: var(--cyper-space-lg) auto;
  text-align: left;
}

.cyper-404-error-log {
  font-family: var(--cyper-font-mono);
  font-size: 0.8rem;
  padding: var(--cyper-space-md);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--cyper-border-soft);
}

.cyper-404-error-log .error-line {
  color: var(--cyper-danger);
  margin-bottom: var(--cyper-space-xs);
}

.cyper-404-error-log .warn-line {
  color: var(--cyper-warning);
  margin-bottom: var(--cyper-space-xs);
}

.cyper-404-error-log .info-line {
  color: var(--cyper-accent);
}

.cyper-404-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cyper-space-md);
  margin-top: var(--cyper-space-lg);
}

.cyper-404-suggestion-card {
  padding: var(--cyper-space-md);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-404-suggestion-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
  box-shadow: var(--cyper-glow-primary);
}

.cyper-404-suggestion-card i {
  font-size: 1.5rem;
  color: var(--cyper-primary);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-404-suggestion-card h4 {
  font-family: var(--cyper-font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--cyper-space-xs);
}

.cyper-404-suggestion-card p {
  font-size: 0.8rem;
  color: var(--cyper-text-muted);
  margin: 0;
}

.cyper-404-search-box {
  max-width: 400px;
  margin: var(--cyper-space-lg) auto 0;
  position: relative;
}

.cyper-404-search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  background: var(--cyper-bg);
  border: 1px solid var(--cyper-border-soft);
  color: var(--cyper-text);
  font-family: var(--cyper-font-mono);
  font-size: 0.85rem;
}

.cyper-404-search-box input:focus {
  outline: none;
  border-color: var(--cyper-primary);
  box-shadow: var(--cyper-glow-primary);
}

.cyper-404-search-box button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: var(--cyper-primary);
  border: none;
  color: var(--cyper-bg);
  cursor: pointer;
  transition: background var(--cyper-anim-fast);
}

.cyper-404-search-box button:hover {
  background: var(--cyper-accent);
}

/* ============================================
   ABOUT PAGE - ENHANCED STYLES
   ============================================ */
.cyper-about-hero {
  position: relative;
  overflow: hidden;
}

.cyper-about-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    var(--cyper-primary-glow) 0%,
    transparent 70%
  );
  opacity: 0.3;
  pointer-events: none;
}

.cyper-story-timeline {
  position: relative;
  padding-left: 2rem;
}

.cyper-story-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--cyper-primary),
    var(--cyper-accent),
    var(--cyper-secondary)
  );
}

.cyper-story-item {
  position: relative;
  padding-bottom: var(--cyper-space-lg);
  padding-left: var(--cyper-space-md);
}

.cyper-story-item::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 14px;
  height: 14px;
  background: var(--cyper-primary);
  border: 3px solid var(--cyper-bg);
  box-shadow: 0 0 0 2px var(--cyper-primary), var(--cyper-glow-primary);
}

.cyper-story-year {
  font-family: var(--cyper-font-mono);
  font-size: 0.75rem;
  color: var(--cyper-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cyper-value-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
  position: relative;
  overflow: hidden;
}

.cyper-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyper-primary), var(--cyper-accent));
  transform: scaleX(0);
  transition: transform var(--cyper-anim-med);
}

.cyper-value-card:hover::before {
  transform: scaleX(1);
}

.cyper-value-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-6px);
}

.cyper-value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--cyper-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cyper-border-soft);
  color: var(--cyper-primary);
  font-size: 1.5rem;
  transition: all var(--cyper-anim-fast);
}

.cyper-value-card:hover .cyper-value-icon {
  border-color: var(--cyper-primary);
  box-shadow: var(--cyper-glow-primary);
  transform: scale(1.1);
}

.cyper-trust-counter {
  padding: var(--cyper-space-md);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-trust-counter:hover {
  border-color: var(--cyper-primary);
}

.cyper-trust-counter .cyper-stat-value {
  font-size: 2rem;
}

.cyper-trust-label {
  font-size: 0.75rem;
  color: var(--cyper-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cyper-cta-banner {
  padding: var(--cyper-space-xl) var(--cyper-space-lg);
  background: linear-gradient(
    135deg,
    var(--cyper-bg-alt) 0%,
    var(--cyper-bg-soft) 100%
  );
  border: 1px solid var(--cyper-border-soft);
  position: relative;
  overflow: hidden;
}

.cyper-cta-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      90deg,
      transparent 49%,
      var(--cyper-grid-color) 50%,
      transparent 51%
    ),
    linear-gradient(
      0deg,
      transparent 49%,
      var(--cyper-grid-color) 50%,
      transparent 51%
    );
  background-size: var(--cyper-grid-size) var(--cyper-grid-size);
  pointer-events: none;
}

/* ============================================
   POLICY PAGES - ENHANCED STYLES
   ============================================ */
.cyper-policy-hero-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--cyper-primary);
  border: 2px solid var(--cyper-border-soft);
  background: var(--cyper-bg-glass);
}

.cyper-policy-nav {
  position: sticky;
  top: 100px;
}

.cyper-policy-nav .nav-link {
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--cyper-text-muted);
  border-left: 2px solid transparent;
  padding-left: var(--cyper-space-sm);
  transition: all var(--cyper-anim-fast);
}

.cyper-policy-nav .nav-link:hover,
.cyper-policy-nav .nav-link.active {
  color: var(--cyper-primary);
  border-left-color: var(--cyper-primary);
}

.cyper-policy-section {
  padding-bottom: var(--cyper-space-md);
  margin-bottom: var(--cyper-space-md);
  border-bottom: 1px solid var(--cyper-border-soft);
}

.cyper-policy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.cyper-policy-title {
  font-family: var(--cyper-font-mono);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: var(--cyper-space-sm);
  margin-bottom: var(--cyper-space-md);
  border-bottom: 2px solid var(--cyper-primary);
}

.cyper-policy-title-success {
  border-bottom-color: var(--cyper-success);
}

.cyper-policy-title-danger {
  border-bottom-color: var(--cyper-danger);
}

.cyper-policy-title-warning {
  border-bottom-color: var(--cyper-warning);
}

.cyper-policy-alert {
  padding: var(--cyper-space-md);
  border: 1px solid var(--cyper-danger);
  background: rgba(255, 59, 129, 0.1);
  margin-bottom: var(--cyper-space-md);
}

.cyper-policy-alert-warning {
  border-color: var(--cyper-warning);
  background: rgba(255, 200, 87, 0.1);
}

.cyper-policy-alert-success {
  border-color: var(--cyper-success);
  background: rgba(0, 255, 153, 0.1);
}

.cyper-violation-card {
  padding: var(--cyper-space-md);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-violation-card:hover {
  border-color: var(--cyper-danger);
}

.cyper-violation-icon {
  font-size: 2rem;
  color: var(--cyper-danger);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-level-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cyper-level-1 {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-level-2 {
  background: var(--cyper-tertiary);
  color: var(--cyper-bg);
}

.cyper-level-3 {
  background: var(--cyper-danger);
  color: white;
}

.cyper-policy-sidebar-card {
  border-left: 3px solid var(--cyper-success);
}

.cyper-policy-sidebar-card-warning {
  border-left-color: var(--cyper-warning);
}

.cyper-policy-sidebar-card-danger {
  border-left-color: var(--cyper-danger);
}

.cyper-ack-box {
  border: 2px solid var(--cyper-primary);
  padding: var(--cyper-space-lg);
  background: linear-gradient(
    135deg,
    var(--cyper-bg-alt),
    var(--cyper-bg-soft)
  );
}

.cyper-related-policy-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-related-policy-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
}

.cyper-related-policy-icon {
  font-size: 2.5rem;
  color: var(--cyper-primary);
  margin-bottom: var(--cyper-space-sm);
}

/* ============================================
   AI PAGES - ENHANCED STYLES
   ============================================ */
.cyper-ai-hero-card {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.05),
    rgba(0, 136, 255, 0.05)
  );
  border: 1px solid var(--cyper-border-soft);
  position: relative;
  overflow: hidden;
}

.cyper-ai-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyper-primary), var(--cyper-accent));
}

.cyper-ai-stat-value {
  font-family: var(--cyper-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.cyper-ai-stat-primary {
  color: var(--cyper-primary);
}

.cyper-ai-stat-warning {
  color: var(--cyper-warning);
}

.cyper-ai-stat-accent {
  color: var(--cyper-accent);
}

.cyper-ai-stat-success {
  color: var(--cyper-success);
}

.cyper-ai-stat-danger {
  color: var(--cyper-danger);
}

.cyper-ai-detection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cyper-space-xs) 0;
  font-size: 0.85rem;
}

.cyper-ai-detection-item + .cyper-ai-detection-item {
  border-top: 1px solid var(--cyper-border-soft);
  margin-top: var(--cyper-space-xs);
  padding-top: var(--cyper-space-xs);
}

.cyper-ai-feature-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  transition: all var(--cyper-anim-fast);
  height: 100%;
}

.cyper-ai-feature-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
  box-shadow: var(--cyper-glow-primary);
}

.cyper-ai-feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cyper-border-soft);
  color: var(--cyper-primary);
  font-size: 1.25rem;
  margin-bottom: var(--cyper-space-md);
  transition: all var(--cyper-anim-fast);
}

.cyper-ai-feature-card:hover .cyper-ai-feature-icon {
  border-color: var(--cyper-primary);
  box-shadow: var(--cyper-glow-primary);
}

.cyper-ai-model-card {
  padding: var(--cyper-space-md);
  background: var(--cyper-bg);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-ai-model-card:hover {
  border-color: var(--cyper-accent);
}

.cyper-ai-model-icon {
  font-size: 2rem;
  color: var(--cyper-accent);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-ai-pipeline {
  display: flex;
  flex-direction: column;
  gap: var(--cyper-space-sm);
}

.cyper-ai-pipeline-step {
  display: flex;
  align-items: center;
  gap: var(--cyper-space-md);
  padding: var(--cyper-space-md);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  transition: all var(--cyper-anim-fast);
}

.cyper-ai-pipeline-step:hover {
  border-color: var(--cyper-primary);
}

.cyper-ai-pipeline-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyper-primary);
  color: var(--cyper-bg);
  font-family: var(--cyper-font-mono);
  font-weight: 700;
  font-size: 0.85rem;
}

.cyper-ai-metric-bar {
  height: 8px;
  background: var(--cyper-bg);
  border: 1px solid var(--cyper-border-soft);
  overflow: hidden;
  margin-top: var(--cyper-space-xs);
}

.cyper-ai-metric-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyper-primary), var(--cyper-accent));
  transition: width 0.5s ease;
}

.cyper-ai-section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyper-border-soft),
    transparent
  );
  margin: var(--cyper-space-lg) 0;
}

/* ============================================
   SERVICES PAGE - ENHANCED STYLES
   ============================================ */
.cyper-industry-card {
  padding: var(--cyper-space-md);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-industry-card:hover {
  border-color: var(--cyper-primary);
  transform: translateY(-4px);
}

.cyper-industry-icon {
  font-size: 2rem;
  color: var(--cyper-primary);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-service-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cyper-border-soft);
  color: var(--cyper-primary);
  font-size: 1.25rem;
  transition: all var(--cyper-anim-fast);
}

.cyper-service-card:hover .cyper-service-icon-box {
  border-color: var(--cyper-primary);
  box-shadow: var(--cyper-glow-primary);
}

.cyper-stat-highlight {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  transition: all var(--cyper-anim-fast);
}

.cyper-stat-highlight:hover {
  border-color: var(--cyper-primary);
}

.cyper-stat-highlight .cyper-stat-value {
  font-size: 2.5rem;
}

/* ============================================
   STATUS PAGE - ENHANCED STYLES
   ============================================ */
.cyper-status-hero {
  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.1),
    rgba(39, 174, 96, 0.1)
  );
}

.cyper-status-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: status-pulse 2s infinite;
}

.cyper-status-indicator-sm {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.cyper-status-operational {
  background: var(--cyper-success);
}

.cyper-status-degraded {
  background: var(--cyper-warning);
}

.cyper-status-outage {
  background: var(--cyper-danger);
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.cyper-status-badge {
  padding: 0.25rem 0.75rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cyper-status-badge-operational {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

.cyper-status-badge-degraded {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-status-badge-outage {
  background: var(--cyper-danger);
  color: white;
}

.cyper-status-badge-lg {
  font-size: 1rem;
}

.cyper-uptime-value {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--cyper-font-mono);
}

.cyper-uptime-bar {
  height: 8px;
  background: var(--cyper-bg);
  border: 1px solid var(--cyper-border-soft);
  overflow: hidden;
}

.cyper-uptime-fill {
  height: 100%;
  background: var(--cyper-success);
}

.cyper-uptime-block {
  width: 10px;
  height: 30px;
  border-radius: 2px;
}

.cyper-uptime-block-success {
  background: var(--cyper-success);
}

.cyper-uptime-block-warning {
  background: var(--cyper-warning);
}

.cyper-uptime-block-danger {
  background: var(--cyper-danger);
}

.cyper-incident-item {
  padding: var(--cyper-space-md);
  border-left: 3px solid var(--cyper-border-soft);
  background: var(--cyper-bg-glass);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-incident-resolved {
  border-left-color: var(--cyper-success);
}

.cyper-incident-ongoing {
  border-left-color: var(--cyper-warning);
}

/* ============================================
   BACKUP/PASSWORD POLICY - ENHANCED STYLES
   ============================================ */
.cyper-policy-icon-hero {
  font-size: 10rem;
  opacity: 0.8;
  color: var(--cyper-primary);
}

.cyper-policy-icon-title {
  color: var(--cyper-primary);
}

.cyper-321-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  height: 100%;
}

.cyper-321-card-primary {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.2),
    rgba(118, 75, 162, 0.2)
  );
}

.cyper-321-card-success {
  background: linear-gradient(
    135deg,
    rgba(67, 233, 123, 0.2),
    rgba(56, 249, 215, 0.2)
  );
}

.cyper-321-card-warning {
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.2),
    rgba(255, 100, 0, 0.2)
  );
}

.cyper-321-number {
  font-size: 4rem;
  font-weight: 700;
  font-family: var(--cyper-font-mono);
}

.cyper-321-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--cyper-border-soft);
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 153, 0.12),
    transparent 60%
  );
  color: var(--cyper-primary);
}

.cyper-schedule-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cyper-schedule-icon-danger {
  background: var(--cyper-danger);
  color: white;
}

.cyper-schedule-icon-warning {
  background: var(--cyper-warning);
  color: white;
}

.cyper-schedule-icon-primary {
  background: var(--cyper-primary);
  color: var(--cyper-bg);
}

.cyper-schedule-icon-success {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

.cyper-freq-badge {
  padding: 0.25rem 0.75rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.cyper-freq-realtime {
  background: var(--cyper-danger);
  color: white;
}

.cyper-freq-daily {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-freq-weekly {
  background: var(--cyper-primary);
  color: var(--cyper-bg);
}

.cyper-freq-monthly {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

/* ============================================
   PIPELINE CARDS - ENHANCED STYLES
   ============================================ */
.cyper-pipeline-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  height: 100%;
  transition: all var(--cyper-anim-fast);
}

.cyper-pipeline-card:hover {
  transform: translateY(-4px);
}

.cyper-pipeline-card-primary {
  border-left: 3px solid var(--cyper-primary);
}

.cyper-pipeline-card-success {
  border-left: 3px solid var(--cyper-success);
}

.cyper-pipeline-card-warning {
  border-left: 3px solid var(--cyper-warning);
}

.cyper-pipeline-card-danger {
  border-left: 3px solid var(--cyper-danger);
}

.cyper-pipeline-icon {
  font-size: 2rem;
  color: var(--cyper-primary);
  margin-bottom: var(--cyper-space-md);
}

.cyper-step-badge {
  padding: 0.25rem 0.75rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-bottom: var(--cyper-space-sm);
  display: inline-block;
}

.cyper-step-badge-warning {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-step-badge-danger {
  background: var(--cyper-danger);
  color: white;
}

/* ============================================
   AWARENESS / TRAINING - ENHANCED STYLES
   ============================================ */
.cyper-threat-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  height: 100%;
  transition: all var(--cyper-anim-fast);
}

.cyper-threat-card:hover {
  transform: translateY(-4px);
}

.cyper-threat-card-danger {
  border-top: 4px solid var(--cyper-danger);
}

.cyper-threat-card-warning {
  border-top: 4px solid var(--cyper-warning);
}

.cyper-threat-card-primary {
  border-top: 4px solid var(--cyper-primary);
}

.cyper-threat-card-success {
  border-top: 4px solid var(--cyper-success);
}

.cyper-threat-icon {
  font-size: 4rem;
}

.cyper-threat-icon-danger {
  color: var(--cyper-danger);
}

.cyper-threat-icon-warning {
  color: var(--cyper-warning);
}

.cyper-threat-icon-primary {
  color: var(--cyper-primary);
}

.cyper-threat-icon-success {
  color: var(--cyper-success);
}

.cyper-module-card {
  padding: var(--cyper-space-lg);
  border: 1px solid var(--cyper-border-soft);
  height: 100%;
  transition: all var(--cyper-anim-fast);
}

.cyper-module-card:hover {
  transform: translateY(-4px);
}

.cyper-module-beginner {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1),
    rgba(118, 75, 162, 0.1)
  );
}

.cyper-module-intermediate {
  background: linear-gradient(
    135deg,
    rgba(240, 147, 251, 0.1),
    rgba(245, 87, 108, 0.1)
  );
}

.cyper-module-advanced {
  background: linear-gradient(
    135deg,
    rgba(67, 233, 123, 0.1),
    rgba(56, 249, 215, 0.1)
  );
}

.cyper-level-badge-success {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

.cyper-level-badge-warning {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-level-badge-danger {
  background: var(--cyper-danger);
  color: white;
}

.cyper-progress-bar {
  height: 8px;
  background: var(--cyper-bg);
  border: 1px solid var(--cyper-border-soft);
  overflow: hidden;
  margin-top: var(--cyper-space-md);
}

.cyper-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.cyper-tip-icon {
  font-size: 2rem;
}

.cyper-hero-icon-lg {
  font-size: 10rem;
  line-height: 1;
  color: var(--cyper-primary);
}

/* ============================================
   DEVELOPERS / API PAGE - ENHANCED STYLES
   ============================================ */
.cyper-api-icon {
  font-size: 3rem;
}

.cyper-api-icon-primary {
  color: var(--cyper-primary);
}
.cyper-api-icon-warning {
  color: var(--cyper-warning);
}
.cyper-api-icon-danger {
  color: var(--cyper-danger);
}
.cyper-api-icon-success {
  color: var(--cyper-success);
}

.cyper-step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.cyper-step-circle-primary {
  background: var(--cyper-primary);
}
.cyper-step-circle-warning {
  background: var(--cyper-warning);
}
.cyper-step-circle-success {
  background: var(--cyper-success);
}
.cyper-step-circle-danger {
  background: var(--cyper-danger);
}

.cyper-code-block {
  background: #1a1a2e;
  padding: var(--cyper-space-md);
  border-radius: var(--cyper-radius-md);
  overflow-x: auto;
  font-size: 0.8rem;
  font-family: var(--cyper-font-mono);
}

.cyper-code-block code {
  color: #a9b7c6;
}

.cyper-lang-icon-python {
  color: #3776ab;
}
.cyper-lang-icon-js {
  color: #f7df1e;
}
.cyper-lang-icon-go {
  color: #00add8;
}

.cyper-copy-btn {
  padding: 5px 10px;
}

.cyper-method-badge {
  padding: 0.25rem 0.5rem;
  font-family: var(--cyper-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.cyper-method-get {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}
.cyper-method-post {
  background: var(--cyper-primary);
  color: var(--cyper-bg);
}
.cyper-method-put {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}
.cyper-method-delete {
  background: var(--cyper-danger);
  color: white;
}

/* ============================================
   PASSWORD POLICY - ENHANCED STYLES
   ============================================ */
.cyper-requirement-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  height: 100%;
}

.cyper-requirement-card-primary {
  border-top: 4px solid var(--cyper-primary);
}
.cyper-requirement-card-success {
  border-top: 4px solid var(--cyper-success);
}
.cyper-requirement-card-warning {
  border-top: 4px solid var(--cyper-warning);
}
.cyper-requirement-card-danger {
  border-top: 4px solid var(--cyper-danger);
}

.cyper-requirement-value {
  font-size: 4rem;
  font-weight: 700;
  font-family: var(--cyper-font-mono);
  line-height: 1;
}

.cyper-do-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 2px solid var(--cyper-success);
  height: 100%;
}

.cyper-dont-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 2px solid var(--cyper-danger);
  height: 100%;
}

.cyper-timeline-container {
  border-top: 3px solid var(--cyper-primary);
  padding-top: 30px;
}

.cyper-timeline-item {
  text-align: center;
  flex: 1;
}

.cyper-timeline-marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: -50px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.cyper-timeline-marker-primary {
  background: var(--cyper-primary);
}
.cyper-timeline-marker-success {
  background: var(--cyper-success);
}
.cyper-timeline-marker-warning {
  background: var(--cyper-warning);
}
.cyper-timeline-marker-danger {
  background: var(--cyper-danger);
}

.cyper-icon-title-warning {
  color: var(--cyper-warning);
}

/* ============================================
   DOWNLOADS PAGE - ENHANCED STYLES
   ============================================ */
.cyper-download-hero-icon {
  font-size: 8rem;
  color: var(--cyper-primary);
}

.cyper-download-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  height: 100%;
}

.cyper-download-card-primary {
  border-left: 4px solid var(--cyper-primary);
}
.cyper-download-card-success {
  border-left: 4px solid var(--cyper-success);
}
.cyper-download-card-warning {
  border-left: 4px solid var(--cyper-warning);
}

.cyper-file-icon {
  font-size: 3rem;
}

.cyper-file-icon-pdf {
  color: var(--cyper-primary);
}
.cyper-file-icon-tool {
  color: var(--cyper-success);
}
.cyper-file-icon-word {
  color: #2b579a;
}
.cyper-file-icon-excel {
  color: #217346;
}
.cyper-file-icon-ppt {
  color: #d24726;
}
.cyper-file-icon-zip {
  color: var(--cyper-warning);
}

.cyper-download-link {
  color: var(--cyper-primary);
  transition: color var(--cyper-anim-fast);
}

.cyper-download-link:hover {
  color: var(--cyper-accent);
}

.cyper-badge-tool {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

/* ============================================
   INDUSTRY PAGES - ENHANCED STYLES
   ============================================ */
.cyper-threat-border-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  text-align: center;
  height: 100%;
  transition: all var(--cyper-anim-fast);
}

.cyper-threat-border-danger {
  border: 2px solid var(--cyper-danger);
}
.cyper-threat-border-warning {
  border: 2px solid var(--cyper-warning);
}
.cyper-threat-border-primary {
  border: 2px solid var(--cyper-primary);
}
.cyper-threat-border-success {
  border: 2px solid var(--cyper-success);
}

.cyper-clearance-card {
  padding: var(--cyper-space-lg);
  text-align: center;
  height: 100%;
}

.cyper-clearance-confidential {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 0, 0.1),
    rgba(0, 100, 0, 0.1)
  );
}

.cyper-clearance-secret {
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, 0.1),
    rgba(139, 69, 0, 0.1)
  );
}

.cyper-clearance-topsecret {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 0.1),
    rgba(139, 0, 0, 0.1)
  );
}

.cyper-solution-icon {
  font-size: 2.5rem;
}

/* ============================================
   WEBINARS PAGE - ENHANCED STYLES
   ============================================ */
.cyper-live-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 2px solid var(--cyper-danger);
}

.cyper-live-badge {
  animation: pulse 1s infinite;
}

.cyper-webinar-timeline {
  border-left: 3px solid var(--cyper-primary);
  padding-left: 30px;
  position: relative;
}

.cyper-timeline-dot {
  position: absolute;
  top: -7px;
  left: -5px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.cyper-timeline-dot-primary {
  background: var(--cyper-primary);
}
.cyper-timeline-dot-warning {
  background: var(--cyper-warning);
}
.cyper-timeline-dot-success {
  background: var(--cyper-success);
}

.cyper-badge-free {
  background: var(--cyper-success);
  color: var(--cyper-bg);
}

.cyper-badge-premium {
  background: var(--cyper-warning);
  color: var(--cyper-bg);
}

.cyper-video-thumbnail {
  height: 160px;
  border-radius: var(--cyper-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cyper-video-thumb-purple {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.cyper-video-thumb-pink {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.cyper-video-thumb-blue {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.cyper-video-thumb-dark {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.cyper-featured-video {
  border-radius: 12px;
  overflow: hidden;
}

.cyper-featured-video-inner {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyper-play-icon {
  color: var(--cyper-primary);
  cursor: pointer;
  transition: transform var(--cyper-anim-fast);
}

.cyper-play-icon:hover {
  transform: scale(1.1);
}

/* ============================================
   STATUS PAGE - ADDITIONAL STYLES
   ============================================ */
.cyper-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
}

.cyper-incident-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
}

.cyper-incident-warning {
  border-left: 4px solid var(--cyper-warning);
}

.cyper-incident-resolved {
  border-left: 4px solid var(--cyper-success);
}

.cyper-subscribe-card {
  padding: 3rem;
  text-align: center;
}

.cyper-subscribe-icon {
  font-size: 4rem;
  color: var(--cyper-primary);
}

/* ============================================
   AI DETECTION LAYERS - ENHANCED STYLES
   ============================================ */
.cyper-layer-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  text-align: center;
  height: 100%;
  position: relative;
  overflow: visible;
}

.cyper-layer-card-primary {
  border: 2px solid var(--cyper-primary);
}
.cyper-layer-card-warning {
  border: 2px solid var(--cyper-warning);
}
.cyper-layer-card-danger {
  border: 2px solid var(--cyper-danger);
}

.cyper-layer-label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyper-bg);
  padding: 0 1rem;
}

.cyper-layer-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.cyper-layer-icon-primary {
  background: linear-gradient(
    135deg,
    var(--cyper-primary),
    var(--cyper-success)
  );
}

.cyper-layer-icon-warning {
  background: linear-gradient(
    135deg,
    var(--cyper-warning),
    var(--cyper-danger)
  );
}

.cyper-layer-icon-danger {
  background: linear-gradient(
    135deg,
    var(--cyper-danger),
    var(--cyper-primary)
  );
}

.cyper-active-dot {
  font-size: 6px;
}

.cyper-risk-progress {
  height: 8px;
  background: var(--cyper-card-bg);
}

/* ============================================
   PARTNER PORTAL - ENHANCED STYLES
   ============================================ */
.cyper-partner-tier-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  text-align: center;
  height: 100%;
}

.cyper-partner-tier-primary {
  border-top: 4px solid var(--cyper-primary);
}
.cyper-partner-tier-warning {
  border-top: 4px solid var(--cyper-warning);
}
.cyper-partner-tier-info {
  border-top: 4px solid var(--cyper-info);
}
.cyper-partner-tier-success {
  border-top: 4px solid var(--cyper-success);
}

.cyper-partner-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyper-partner-icon-purple {
  background: linear-gradient(135deg, var(--cyper-primary), #764ba2);
}

.cyper-partner-icon-orange {
  background: linear-gradient(135deg, var(--cyper-warning), #e74c3c);
}

.cyper-partner-icon-green {
  background: linear-gradient(135deg, var(--cyper-success), #27ae60);
}

.cyper-medal-icon {
  font-size: 4rem;
}

.cyper-medal-bronze {
  color: #cd7f32;
}
.cyper-medal-silver {
  color: #c0c0c0;
}
.cyper-medal-gold {
  color: #ffd700;
}

.cyper-tier-discount {
  font-size: 1.5rem;
  font-weight: 700;
}

.cyper-silver-card {
  border: 2px solid var(--cyper-warning);
  transform: scale(1.05);
  position: relative;
}

.cyper-gold-card {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1),
    rgba(255, 165, 0, 0.1)
  );
}

.cyper-popular-badge {
  background: var(--cyper-warning);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.cyper-benefit-icon-primary {
  color: var(--cyper-primary);
}
.cyper-benefit-icon-warning {
  color: var(--cyper-warning);
}
.cyper-benefit-icon-success {
  color: var(--cyper-success);
}
.cyper-benefit-icon-danger {
  color: var(--cyper-danger);
}
.cyper-benefit-icon-info {
  color: var(--cyper-info);
}

/* ============================================
   AI GOVERNANCE - ENHANCED STYLES
   ============================================ */
.cyper-governance-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 2px solid var(--cyper-primary);
}

.cyper-governance-divider {
  border-top: 1px solid var(--cyper-border);
  margin-top: var(--cyper-space-md);
  padding-top: var(--cyper-space-md);
}

.cyper-pillar-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  text-align: center;
  height: 100%;
}

.cyper-pillar-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.cyper-pillar-icon-primary {
  background: var(--cyper-primary);
}
.cyper-pillar-icon-warning {
  background: var(--cyper-warning);
}
.cyper-pillar-icon-info {
  background: var(--cyper-info);
}
.cyper-pillar-icon-success {
  background: var(--cyper-success);
}

.cyper-risk-item {
  padding: var(--cyper-space-md);
  border-radius: var(--cyper-radius-md);
  margin-bottom: var(--cyper-space-sm);
}

.cyper-risk-item-high {
  background: rgba(255, 0, 0, 0.1);
  border-left: 4px solid var(--cyper-danger);
}

.cyper-risk-item-medium {
  background: rgba(255, 200, 0, 0.1);
  border-left: 4px solid var(--cyper-warning);
}

.cyper-risk-item-low {
  background: rgba(0, 255, 0, 0.1);
  border-left: 4px solid var(--cyper-success);
}

/* ============================================
   AI TOOLS - ENHANCED STYLES
   ============================================ */
.cyper-tool-card {
  padding: var(--cyper-space-lg);
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
  height: 100%;
}

.cyper-tool-card-primary {
  border-top: 3px solid var(--cyper-primary);
}
.cyper-tool-card-danger {
  border-top: 3px solid var(--cyper-danger);
}
.cyper-tool-card-warning {
  border-top: 3px solid var(--cyper-warning);
}
.cyper-tool-card-info {
  border-top: 3px solid var(--cyper-info);
}
.cyper-tool-card-success {
  border-top: 3px solid var(--cyper-success);
}
.cyper-tool-card-purple {
  border-top: 3px solid #9c27b0;
}

.cyper-tool-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cyper-tool-icon-primary {
  background: var(--cyper-primary);
}
.cyper-tool-icon-danger {
  background: var(--cyper-danger);
}
.cyper-tool-icon-warning {
  background: var(--cyper-warning);
}
.cyper-tool-icon-info {
  background: var(--cyper-info);
}
.cyper-tool-icon-success {
  background: var(--cyper-success);
}
.cyper-tool-icon-purple {
  background: #9c27b0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   21. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════
   Optimized & grouped utility classes for inline style replacements.
   These classes provide reusable styling patterns across the template.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   21.1 SHARED LAYOUT PROPERTIES
   ───────────────────────────────────────────────────────────────────────────── */

/* Flexbox Center */
.cyper-icon-circle,
.cyper-icon-circle-lg,
.cyper-icon-square,
.cyper-speaker-avatar,
.cyper-video-thumb,
.cyper-doc-thumb,
.cyper-step-indicator,
.cyper-step-circle,
.cyper-tool-circle,
.cyper-circular-progress,
.cyper-circular-gauge,
.cyper-circular-progress-inner,
.cyper-circular-gauge-inner,
.cyper-gauge,
.cyper-gauge-inner,
.cyper-assessment-gauge,
.cyper-assessment-gauge-inner,
.cyper-world-map,
.cyper-threat-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Border Radius 8px */
.cyper-bg-danger-soft,
.cyper-bg-warning-soft,
.cyper-bg-success-soft,
.cyper-bg-muted-soft,
.cyper-video-thumb,
.cyper-doc-thumb,
.cyper-map-container,
.cyper-map-placeholder-lg,
.cyper-map-placeholder-md,
.cyper-world-map,
.cyper-threat-map-placeholder,
.cyper-code-pre,
.cyper-search-input,
.cyper-search-box {
  border-radius: 8px;
}

/* Border Radius 50% (Circle) */
.cyper-icon-circle,
.cyper-icon-circle-lg,
.cyper-speaker-avatar,
.cyper-step-indicator,
.cyper-step-circle,
.cyper-tool-circle,
.cyper-circular-progress,
.cyper-circular-gauge,
.cyper-circular-progress-inner,
.cyper-circular-gauge-inner,
.cyper-gauge,
.cyper-gauge-inner,
.cyper-assessment-gauge,
.cyper-assessment-gauge-inner {
  border-radius: 50%;
}

/* Margin Auto Center */
.cyper-speaker-avatar,
.cyper-step-circle,
.cyper-tool-circle,
.cyper-gauge,
.cyper-assessment-gauge {
  margin: 0 auto;
}

/* Flex Direction Column */
.cyper-circular-progress-inner,
.cyper-circular-gauge-inner,
.cyper-gauge-inner,
.cyper-assessment-gauge-inner {
  flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.2 BACKGROUND COLORS
   ───────────────────────────────────────────────────────────────────────────── */

/* Primary */
.cyper-progress-bar-primary,
.cyper-icon-circle-primary,
.cyper-step-circle-primary,
.cyper-step-indicator-primary,
.cyper-badge-primary {
  background: var(--cyper-primary);
}

/* Success */
.cyper-progress-bar-success,
.cyper-icon-circle-success,
.cyper-uptime-bar-success,
.cyper-step-circle-success,
.cyper-badge-success {
  background: var(--cyper-success);
}

/* Danger */
.cyper-progress-bar-danger,
.cyper-icon-circle-danger,
.cyper-uptime-bar-danger,
.cyper-step-circle-danger,
.cyper-badge-bg-danger {
  background: var(--cyper-danger);
}

/* Warning */
.cyper-progress-bar-warning,
.cyper-icon-circle-warning,
.cyper-uptime-bar-warning,
.cyper-step-circle-warning {
  background: var(--cyper-warning);
}

/* Info */
.cyper-progress-bar-info,
.cyper-icon-circle-info,
.cyper-step-circle-info {
  background: var(--cyper-info);
}

/* Soft Backgrounds */
.cyper-map-container,
.cyper-map-placeholder-lg,
.cyper-map-placeholder-md,
.cyper-threat-map-placeholder {
  background: var(--cyper-bg-soft);
}

/* Inner Backgrounds */
.cyper-circular-progress-inner,
.cyper-circular-gauge-inner,
.cyper-gauge-inner,
.cyper-assessment-gauge-inner {
  background: var(--cyper-bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.3 TEXT & ICON COLORS
   ───────────────────────────────────────────────────────────────────────────── */
.cyper-text-primary,
.cyper-icon-primary,
.cyper-display-number-primary {
  color: var(--cyper-primary);
}
.cyper-text-success,
.cyper-icon-success,
.cyper-stat-value-success {
  color: var(--cyper-success);
}
.cyper-text-danger,
.cyper-icon-danger,
.cyper-stat-value-danger {
  color: var(--cyper-danger);
}
.cyper-text-warning,
.cyper-icon-warning,
.cyper-stat-value-warning,
.cyper-display-number-warning {
  color: var(--cyper-warning);
}
.cyper-text-info,
.cyper-stat-value-info {
  color: var(--cyper-info);
}
.cyper-text-purple,
.cyper-icon-purple {
  color: #9b59b6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.4 BORDER STYLES
   ───────────────────────────────────────────────────────────────────────────── */

/* Border Left Accents */
.cyper-border-left-primary {
  border-left: 4px solid var(--cyper-primary);
}
.cyper-border-left-danger {
  border-left: 4px solid var(--cyper-danger);
}
.cyper-border-left-warning {
  border-left: 4px solid var(--cyper-warning);
}
.cyper-border-left-success {
  border-left: 4px solid var(--cyper-success);
}
.cyper-border-left-info {
  border-left: 4px solid var(--cyper-info);
}

/* Border Top Accents */
.cyper-border-top-primary {
  border-top: 3px solid var(--cyper-primary);
}
.cyper-border-top-danger {
  border-top: 3px solid var(--cyper-danger);
}
.cyper-border-top-warning {
  border-top: 3px solid var(--cyper-warning);
}
.cyper-border-top-success {
  border-top: 3px solid var(--cyper-success);
}
.cyper-border-top-info {
  border-top: 3px solid var(--cyper-info);
}

/* Border Accent Styles */
.cyper-border-primary {
  border: 2px solid var(--cyper-primary);
}
.cyper-border-accent-primary {
  border: 3px solid var(--cyper-primary);
}
.cyper-border-accent-success {
  border: 3px solid var(--cyper-success);
}
.cyper-border-accent-warning {
  border: 3px solid var(--cyper-warning);
}
.cyper-border-accent-danger {
  border: 3px solid var(--cyper-danger);
}

/* Background Soft Colors */
.cyper-bg-danger-soft {
  background: rgba(255, 0, 0, 0.1);
}
.cyper-bg-warning-soft {
  background: rgba(255, 136, 0, 0.1);
}
.cyper-bg-success-soft {
  background: rgba(0, 255, 136, 0.1);
}
.cyper-bg-muted-soft {
  background: rgba(128, 128, 128, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.5 COMPONENT SIZES
   ───────────────────────────────────────────────────────────────────────────── */

/* Icon Circles */
.cyper-icon-circle {
  width: 50px;
  height: 50px;
}
.cyper-icon-circle-lg {
  width: 100px;
  height: 100px;
  font-size: 2.5rem;
}

/* Icon Squares */
.cyper-icon-square {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}
.cyper-icon-square-danger {
  background: linear-gradient(135deg, var(--cyper-danger), #ff6b6b);
}
.cyper-icon-square-warning {
  background: linear-gradient(135deg, var(--cyper-warning), #ffa500);
}
.cyper-icon-square-info {
  background: linear-gradient(135deg, var(--cyper-info), #00bcd4);
}
.cyper-icon-square-success {
  background: linear-gradient(135deg, var(--cyper-success), #00e676);
}
.cyper-icon-square-primary {
  background: linear-gradient(135deg, var(--cyper-primary), #00ff88);
}
.cyper-icon-square-purple {
  background: linear-gradient(135deg, #9c27b0, #e040fb);
}

/* Speaker Avatars */
.cyper-speaker-avatar {
  width: 100px;
  height: 100px;
  font-size: 2.5rem;
}
.cyper-speaker-avatar-1 {
  background: linear-gradient(135deg, var(--cyper-primary), #764ba2);
}
.cyper-speaker-avatar-2,
.cyper-video-thumb-2,
.cyper-doc-thumb-2 {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}
.cyper-speaker-avatar-3,
.cyper-video-thumb-3,
.cyper-doc-thumb-3 {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.cyper-speaker-avatar-4,
.cyper-video-thumb-4 {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

/* Video & Doc Thumbnails */
.cyper-video-thumb {
  height: 120px;
}
.cyper-doc-thumb {
  height: 150px;
}
.cyper-video-thumb-1,
.cyper-doc-thumb-1 {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Uptime Bars */
.cyper-uptime-bar {
  width: 10px;
  height: 30px;
  border-radius: 2px;
}

/* Step Indicators & Circles */
.cyper-step-indicator {
  width: 40px;
  height: 40px;
  font-weight: bold;
}
.cyper-step-indicator-primary {
  color: var(--cyper-bg);
}
.cyper-step-indicator-muted {
  background: var(--cyper-bg-soft);
  color: var(--cyper-text-muted);
}
.cyper-step-circle {
  width: 50px;
  height: 50px;
  color: white;
  font-weight: bold;
}
.cyper-step-circle-purple {
  background: #9b59b6;
}

/* Tool Circles */
.cyper-tool-circle {
  width: 80px;
  height: 80px;
}
.cyper-tool-circle-orange {
  background: linear-gradient(135deg, #f39c12, #e74c3c);
}
.cyper-tool-circle-blue {
  background: linear-gradient(135deg, #3498db, #2980b9);
}
.cyper-tool-circle-purple {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.cyper-tool-circle-teal {
  background: linear-gradient(135deg, #1abc9c, #16a085);
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.6 PROGRESS & GAUGES
   ───────────────────────────────────────────────────────────────────────────── */

/* Progress Bars */
.cyper-progress-sm,
.cyper-progress-sm-dark {
  height: 8px;
}
.cyper-progress-xs {
  height: 6px;
}
.cyper-progress-xxs {
  height: 4px;
}
.cyper-progress-md {
  height: 10px;
}
.cyper-progress-sm.cyper-progress-bg,
.cyper-progress-bg-dark,
.cyper-progress-sm-dark {
  background: var(--cyper-card-bg);
}

/* Circular Progress & Gauges */
.cyper-circular-progress,
.cyper-circular-gauge {
  width: 120px;
  height: 120px;
}
.cyper-circular-progress-inner,
.cyper-circular-gauge-inner {
  width: 100px;
  height: 100px;
}
.cyper-gauge,
.cyper-assessment-gauge {
  width: 200px;
  height: 200px;
}
.cyper-gauge-inner,
.cyper-assessment-gauge-inner {
  width: 160px;
  height: 160px;
}

.cyper-circular-progress-success,
.cyper-circular-gauge-success {
  background: conic-gradient(
    var(--cyper-success) 0deg 324deg,
    rgba(0, 255, 153, 0.2) 324deg 360deg
  );
}
.cyper-circular-progress-warning,
.cyper-circular-gauge-warning {
  background: conic-gradient(
    var(--cyper-warning) 0deg 270deg,
    rgba(255, 200, 87, 0.2) 270deg 360deg
  );
}
.cyper-gauge-70,
.cyper-assessment-gauge {
  background: conic-gradient(
    var(--cyper-success) 0deg 252deg,
    var(--cyper-bg-soft) 252deg 360deg
  );
}

/* Map Heights */
.cyper-map-sm {
  height: 200px;
}
.cyper-map-md,
.cyper-map-placeholder-md,
.cyper-world-map {
  height: 300px;
}
.cyper-map-lg,
.cyper-map-container,
.cyper-map-placeholder-lg,
.cyper-threat-map-placeholder {
  height: 400px;
}

/* Mini Progress */
.cyper-mini-progress {
  height: 4px;
  background: var(--cyper-bg-soft);
  border-radius: 2px;
  overflow: hidden;
}
.cyper-mini-progress-bar {
  height: 100%;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.7 TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

/* Font Sizes */
.cyper-icon-2x,
.cyper-font-2x {
  font-size: 2rem;
}
.cyper-icon-3x {
  font-size: 3rem;
}
.cyper-icon-4x {
  font-size: 4rem;
}
.cyper-font-5x {
  font-size: 5rem;
}
.cyper-font-sm,
.cyper-terminal-mono {
  font-size: 0.85rem;
}
.cyper-stat-value-lg {
  font-size: 2.5rem;
}
.cyper-display-number {
  font-size: 3rem;
  font-weight: bold;
}

/* Value 2x with Colors */
.cyper-value-2x-danger,
.cyper-value-2x-success,
.cyper-value-2x-warning,
.cyper-value-2x-info,
.cyper-value-2x-primary {
  font-size: 2rem;
}
.cyper-value-2x-danger {
  color: var(--cyper-danger);
}
.cyper-value-2x-success {
  color: var(--cyper-success);
}
.cyper-value-2x-warning {
  color: var(--cyper-warning);
}
.cyper-value-2x-info {
  color: var(--cyper-info);
}
.cyper-value-2x-primary {
  color: var(--cyper-primary);
}

/* Badge Backgrounds */
.cyper-badge-bg-warning {
  background: var(--cyper-warning);
  color: #000;
}
.cyper-badge-bg-info {
  background: var(--cyper-info);
  color: #000;
}
.cyper-badge-bg-success {
  background: var(--cyper-success);
  color: #000;
}

/* Alert Cards */
.cyper-alert-card-danger {
  border: 2px solid var(--cyper-danger);
  background: rgba(255, 0, 0, 0.05);
}
.cyper-alert-card-warning {
  border: 2px solid var(--cyper-warning);
  background: rgba(255, 200, 0, 0.05);
}

/* Search & Inputs */
.cyper-search-input,
.cyper-search-box {
  border: 2px solid var(--cyper-primary);
}

/* Card & Dashboard */
.cyper-card-lg {
  padding: 3rem;
}
.cyper-dashboard-card {
  padding: 1.5rem;
  background: var(--cyper-bg-glass);
  border: 1px solid var(--cyper-border-soft);
}

/* Filter Tags */
.cyper-filter-tag {
  padding: 0.5rem 1rem;
  border: 1px solid var(--cyper-border-soft);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cyper-filter-tag:hover,
.cyper-filter-tag.active {
  border-color: var(--cyper-primary);
  background: rgba(0, 255, 153, 0.1);
}

/* Hexagon Shape */
.cyper-hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 2rem 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21.8 SPACING & DIMENSIONS
   ───────────────────────────────────────────────────────────────────────────── */

/* Width Utilities */
.w-20 {
  width: 20%;
}
.w-30 {
  width: 30%;
}
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.w-85 {
  width: 85%;
}
.w-90 {
  width: 90%;
}
.w-95 {
  width: 95%;
}

/* Max Width Utilities */
.cyper-max-w-500 {
  max-width: 500px;
}
.cyper-max-w-600 {
  max-width: 600px;
}

/* Code Blocks */
.cyper-code-pre {
  background: #1a1a2e;
  padding: 15px;
  overflow-x: auto;
  font-size: 0.8rem;
}
.cyper-code-pre code {
  color: #a9b7c6;
}
.cyper-terminal-mono {
  font-family: monospace;
}

/* Language Icon Colors */
.cyper-icon-python {
  color: #3776ab;
}
.cyper-icon-js {
  color: #f7df1e;
}
.cyper-icon-go {
  color: #00add8;
}
.cyper-icon-rust {
  color: #dea584;
}
.cyper-icon-cli {
  color: #4eaa25;
}
.cyper-icon-curl {
  color: #f39c12;
}

/* World Map */
.cyper-world-map {
  background: radial-gradient(
    circle at center,
    var(--cyper-bg-soft) 0%,
    var(--cyper-bg) 100%
  );
}