/* ============================================================
   2026 MODERN SAAS DESIGN SYSTEM — Enhancement Layer
   Glassmorphism 2.0, Dark Mode, Enhanced Motion, Accessibility
   Applied on top of the existing Platinum design system.
   ============================================================ */

/* ===========================================
   §1  ADDITIONAL DESIGN TOKENS
   =========================================== */
:root {
  /* ── Z-Index Layer System ────────────────────────── */
  --z-base:      0;
  --z-raised:    10;
  --z-overlay:   100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── Enhanced Transition Tokens ──────────────────── */
  --transition-instant: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Glass Effect Tokens ─────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.05);
  --glass-bg-light:   rgba(255, 255, 255, 0.65);
  --glass-blur:       20px;
  --glass-saturate:   180%;
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-border-light: rgba(255, 255, 255, 0.12);

  /* ── Semantic Colors ─────────────────────────────── */
  --color-success:     #16a34a;
  --color-success-bg:  #f0fdf4;
  --color-warning:     #d97706;
  --color-warning-bg:  #fffbeb;
  --color-error:       #dc2626;
  --color-error-bg:    #fef2f2;
  --color-info:        #0069a6;
  --color-info-bg:     #ecf6fb;
}


/* ===========================================
   §2  SKIP-TO-CONTENT (Accessibility)
   =========================================== */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  background: var(--color-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 200ms ease;
  box-shadow: var(--shadow-lg);
}

.skip-to-content:focus {
  top: 0;
  outline: none;
}


/* ===========================================
   §3  GLASSMORPHISM 2.0
   =========================================== */

/* Standard glass panel */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

/* Light glass variant (for light mode surfaces) */
.glass-panel--light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border-light);
}

/* Dark glass variant */
.glass-panel--dark {
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient border effect */
.gradient-border {
  position: relative;
  background: var(--color-bg-white);
  border-radius: var(--radius-xl);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg,
    rgba(0, 105, 166, 0.5),
    transparent 50%,
    rgba(255, 137, 86, 0.3)
  );
  z-index: -1;
  pointer-events: none;
}

/* Brand glow for CTAs */
.glow-brand {
  box-shadow:
    0 0 20px rgba(0, 105, 166, 0.3),
    0 0 60px rgba(0, 105, 166, 0.1);
}

/* Text glow for hero */
.glow-text {
  text-shadow: 0 0 40px rgba(0, 105, 166, 0.4);
}


/* ===========================================
   §4  NOISE TEXTURE OVERLAY
   =========================================== */
.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}


/* ===========================================
   §5  ENHANCED MICRO-INTERACTIONS
   =========================================== */

/* Button press scale — tactile feel */
.btn:active {
  transform: scale(0.97);
  transition: transform 100ms var(--ease-spring);
}

/* Card 3D tilt on hover (subtle) */
.card-tilt:hover {
  transform: perspective(1000px) rotateY(2deg) rotateX(1deg) translateY(-4px);
  transition: transform 300ms var(--ease-smooth);
}

/* Input focus glow ring expansion */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 105, 166, 0.15),
              0 0 0 1px rgba(0, 105, 166, 0.3);
}

/* Error shake animation */
@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake-error {
  animation: shake-error 400ms ease;
}

/* Checkmark draw animation */
@keyframes draw-check {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

.draw-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-check 300ms ease forwards;
}

/* Skeleton shimmer for loading states */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Staggered fade-up for scroll reveals */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.fade-up[data-stagger="1"] { transition-delay: 80ms; }
.fade-up[data-stagger="2"] { transition-delay: 160ms; }
.fade-up[data-stagger="3"] { transition-delay: 240ms; }
.fade-up[data-stagger="4"] { transition-delay: 320ms; }
.fade-up[data-stagger="5"] { transition-delay: 400ms; }
.fade-up[data-stagger="6"] { transition-delay: 480ms; }


/* ===========================================
   §6  ENHANCED NAVIGATION SCROLL STATES
   =========================================== */

/* Navigation at top of page — transparent */
.header {
  transition: background-color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}

.header:not(.scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Navigation scrolled — glass effect */
.header.scrolled {
  background-color: rgba(247, 248, 250, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


/* ===========================================
   §7  DARK MODE THEME
   =========================================== */
[data-theme="dark"] {
  /* ── Background Layers (deepest → elevated) ──── */
  --color-bg:        #0A0A0F;
  --color-bg-white:  #111118;
  --color-bg-light:  #1A1A24;
  --color-bg-tinted: #141420;
  --color-bg-dark:   #08080D;
  --color-bg-darker: #050508;

  /* ── Text Colors ──────────────────────────────── */
  --color-text:           rgba(255, 255, 255, 0.92);
  --color-text-body:      rgba(255, 255, 255, 0.78);
  --color-text-secondary: rgba(255, 255, 255, 0.60);
  --color-text-light:     rgba(255, 255, 255, 0.38);
  --color-text-muted:     rgba(255, 255, 255, 0.24);

  /* ── Borders ──────────────────────────────────── */
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-border-dark:  rgba(255, 255, 255, 0.18);

  /* ── Shadows (dark mode — deeper, bluer) ──────── */
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 24px 72px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 32px rgba(0, 105, 166, 0.15), 0 24px 72px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 3px rgba(0, 105, 166, 0.2), 0 0 24px rgba(0, 105, 166, 0.1);
  --shadow-blue-glow: 0 0 48px rgba(0, 105, 166, 0.2), 0 8px 40px rgba(0, 105, 166, 0.15);

  /* ── Cards ────────────────────────────────────── */
  --card-bg: #111118;
  --card-border: 1px solid rgba(255, 255, 255, 0.08);
  --card-hover-border: rgba(0, 105, 166, 0.3);

  /* ── Glass Tokens (dark) ──────────────────────── */
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-bg-light: rgba(255, 255, 255, 0.06);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(255, 255, 255, 0.06);

  /* ── Semantic BG (dark-adjusted) ──────────────── */
  --color-success-bg:  rgba(22, 163, 74, 0.12);
  --color-warning-bg:  rgba(217, 119, 6, 0.12);
  --color-error-bg:    rgba(220, 38, 38, 0.12);
  --color-info-bg:     rgba(0, 105, 166, 0.12);

  /* Selection color */
  color-scheme: dark;
}

/* ── Dark mode body ────────────────────────────── */
[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text-body);
}

/* ── Dark mode scrollbar ───────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 105, 166, 0.5);
}

/* ── Dark mode selection ───────────────────────── */
[data-theme="dark"] ::selection {
  background: rgba(0, 105, 166, 0.3);
  color: #fff;
}

/* ── Dark mode header ──────────────────────────── */
[data-theme="dark"] .header.scrolled {
  background-color: rgba(10, 10, 15, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Dark mode nav links ───────────────────────── */
[data-theme="dark"] .nav-link {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme="dark"] .nav-link:hover {
  color: #fff;
}

/* ── Dark mode cards ───────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .testimonial-card {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .feature-card:hover {
  border-color: rgba(0, 105, 166, 0.25);
}

/* ── Dark mode hero ────────────────────────────── */
[data-theme="dark"] .hero {
  background-color: var(--color-bg);
}

[data-theme="dark"] .hero__title {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .hero__subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* ── Dark mode hero waves ──────────────────────── */
[data-theme="dark"] .hero-wave__path--3 {
  fill: var(--color-bg);
}

/* ── Dark mode sections ────────────────────────── */
[data-theme="dark"] .section--bg-light,
[data-theme="dark"] .section--bg-white {
  background-color: var(--color-bg-white);
}

[data-theme="dark"] .section__title {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .section__subtitle {
  color: rgba(255, 255, 255, 0.60);
}

/* ── Dark mode badges/chips ────────────────────── */
[data-theme="dark"] .hero__badge {
  background: rgba(0, 105, 166, 0.15);
  border-color: rgba(0, 105, 166, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .hero__chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
}

/* ── Dark mode buttons ─────────────────────────── */
[data-theme="dark"] .btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] .nav-link--ghost {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Dark mode forms ───────────────────────────── */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: rgba(0, 105, 166, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 105, 166, 0.2);
}

[data-theme="dark"] .form-input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

/* ── Dark mode mega menu ───────────────────────── */
[data-theme="dark"] .mega-menu {
  background: rgba(17, 17, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mega-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mega-tabs__btn {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] .mega-tabs__btn.is-active {
  color: #fff;
  background: rgba(0, 105, 166, 0.15);
}

/* ── Dark mode footer ──────────────────────────── */
[data-theme="dark"] .footer-v2 {
  background: #08080D;
  border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .footer-v2__text,
[data-theme="dark"] .footer-v2 a {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .footer-v2 a:hover {
  color: rgba(255, 255, 255, 0.90);
}

/* ── Dark mode trust bar ───────────────────────── */
[data-theme="dark"] .trust-bar__fade--left {
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}

[data-theme="dark"] .trust-bar__fade--right {
  background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}

/* ── Dark mode comparison table ────────────────── */
[data-theme="dark"] .comparison-table th,
[data-theme="dark"] .comparison-table td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .comparison-table thead th {
  background: var(--color-bg-white);
}

/* ── Dark mode CTA sections ────────────────────── */
[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #0e2344 0%, #163760 50%, #0069a6 100%);
}

/* ── Dark mode accordion ───────────────────────── */
[data-theme="dark"] .accordion__header {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .accordion__header:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Dark mode social proof ────────────────────── */
[data-theme="dark"] .hero__social-proof {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hero__proof-divider {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Dark mode pricing ─────────────────────────── */
[data-theme="dark"] .pricing-card--featured {
  background: var(--color-bg-light);
  border-color: rgba(0, 105, 166, 0.3);
}

/* ── Dark mode auth pages ─────────────────────────── */
[data-theme="dark"] .auth {
  background: var(--color-bg);
}

[data-theme="dark"] .auth__form-panel {
  background: var(--color-bg-white);
}

[data-theme="dark"] .auth__form-icon {
  background: linear-gradient(135deg, rgba(0, 105, 166, 0.15) 0%, rgba(0, 105, 166, 0.08) 100%);
}

[data-theme="dark"] .auth__title {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .auth__subtitle {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] .auth__subtitle a {
  color: #4da6db;
}

[data-theme="dark"] .auth__label {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .auth__input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .auth__input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] .auth__input:focus {
  border-color: rgba(0, 105, 166, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 105, 166, 0.15);
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .auth__input-icon {
  color: rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] .auth__input:focus ~ .auth__input-icon {
  color: #4da6db;
}

[data-theme="dark"] .auth__pw-toggle {
  color: rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] .auth__pw-toggle:hover {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] .auth__check-label {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] .auth__forgot {
  color: #4da6db;
}

[data-theme="dark"] .auth__forgot:hover {
  color: #7bbfe8;
}

[data-theme="dark"] .auth__divider {
  color: rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] .auth__divider::before,
[data-theme="dark"] .auth__divider::after {
  background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .auth__google-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .auth__google-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] .auth__recaptcha-notice {
  color: rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] .auth__recaptcha-notice a {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .auth__recaptcha-notice a:hover {
  color: #4da6db;
}

[data-theme="dark"] .auth__footer {
  color: rgba(255, 255, 255, 0.50);
}

[data-theme="dark"] .auth__footer a {
  color: #4da6db;
}

[data-theme="dark"] .auth__footer a:hover {
  color: #7bbfe8;
}

[data-theme="dark"] .auth__footer-links,
[data-theme="dark"] .auth__footer-links a {
  color: rgba(255, 255, 255, 0.40);
}

[data-theme="dark"] .auth__footer-links a:hover {
  color: #4da6db;
}

[data-theme="dark"] .auth__info-card {
  background: rgba(0, 105, 166, 0.08);
  border-color: rgba(0, 105, 166, 0.20);
  color: rgba(255, 255, 255, 0.70);
}

[data-theme="dark"] .auth__success-title {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .auth__success-text {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] .auth__pw-label {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .auth__pw-req {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .auth__pw-bar {
  background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .auth__pw-req-dot {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Dark mode skeleton ────────────────────────── */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
}

/* ── Dark mode icon containers ─────────────────── */
[data-theme="dark"] .icon-container {
  background: rgba(255, 255, 255, 0.06);
}


/* ===========================================
   §8  DARK MODE TOGGLE BUTTON
   =========================================== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 105, 166, 0.05);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 300ms var(--ease-spring);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Sun icon shown in dark mode, moon in light mode */
.theme-toggle__sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.70);
}

[data-theme="dark"] .theme-toggle:hover {
  border-color: rgba(0, 105, 166, 0.5);
  color: #fff;
  background: rgba(0, 105, 166, 0.12);
}


/* ===========================================
   §9  ENHANCED PREFERS-REDUCED-MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  /* Disable all custom animations */
  .fade-up,
  .anim-slide-left,
  .anim-slide-right,
  .anim-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable card tilts and hover lifts */
  .card-tilt:hover,
  .card:hover,
  .feature-card:hover {
    transform: none !important;
  }

  /* Disable button press animation */
  .btn:active {
    transform: none !important;
  }

  /* Disable hero canvas effects */
  .hero-canvas,
  .global-bg-canvas,
  .aurora__orb,
  .light-particle {
    display: none !important;
  }

  /* Disable parallax & scroll-driven transforms */
  .parallax,
  [data-parallax] {
    transform: none !important;
  }

  /* Keep focus rings visible */
  :focus-visible {
    outline: 2.5px solid var(--color-primary) !important;
    transition: none !important;
  }
}


/* ===========================================
   §10  TOAST NOTIFICATION SYSTEM
   =========================================== */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  max-width: 380px;
  animation: toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-info); }

.toast.is-exiting {
  animation: toast-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

[data-theme="dark"] .toast {
  background: #1A1A24;
  border-color: rgba(255, 255, 255, 0.10);
}


/* ===========================================
   §11  EMPTY STATES
   =========================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  max-width: 400px;
  margin: 0 auto;
}

.empty-state__illustration {
  width: 160px;
  height: 160px;
  margin-bottom: var(--space-6);
  opacity: 0.8;
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.empty-state__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}


/* ===========================================
   §12  RESPONSIVE DARK MODE ADJUSTMENTS
   =========================================== */
@media (max-width: 768px) {
  [data-theme="dark"] .header.scrolled {
    background-color: rgba(10, 10, 15, 0.92);
  }

  .toast-container {
    top: auto;
    bottom: 20px;
    right: 16px;
    left: 16px;
  }

  .toast {
    max-width: 100%;
  }
}


/* ===========================================
   §13  PRINT STYLES ENHANCEMENT
   =========================================== */
@media print {
  [data-theme="dark"] {
    --color-bg: #fff;
    --color-text: #000;
    --color-text-body: #333;
  }

  .theme-toggle,
  .skip-to-content,
  .toast-container {
    display: none !important;
  }
}