/* ============================================
   HQShop Tickets — Modern Design System
   Linear/Vercel-inspired, single-accent, dense pro UI
   ============================================ */

/* ===== CSS VARIABLES — DARK (default) ===== */
:root {
  /* Surfaces — deep slate, no blue tint */
  --bg-base: #0a0b0e;
  --bg-primary: #0e1015;
  --bg-secondary: #14171e;
  --bg-card: #161922;
  --bg-card-hover: #1c2030;
  --bg-elevated: #20242f;

  /* Single primary accent — Indigo */
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-strong: #4f46e5;
  --accent-glow: rgba(129, 140, 248, 0.35);
  --accent-subtle: rgba(129, 140, 248, 0.10);
  --accent-faint: rgba(129, 140, 248, 0.05);

  /* Data accents — used for charts/states only, NOT decoration */
  --accent-2: #34d399;        /* emerald — success / open */
  --accent-3: #c4b5fd;        /* violet  — neutral highlight */
  --accent-4: #fbbf24;        /* amber   — warning / claimed */
  --accent-2-glow: rgba(52, 211, 153, 0.25);
  --accent-3-glow: rgba(196, 181, 253, 0.25);

  /* Text */
  --text-primary: #f4f5f7;
  --text-secondary: #a1a7b3;
  --text-muted: #5e6473;

  /* Borders & dividers */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Shadows — multi-layer, soft */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.20);
  --ring-focus: 0 0 0 3px var(--accent-glow);

  /* Glass */
  --glass-bg: rgba(14, 16, 21, 0.72);
  --glass-border: rgba(255, 255, 255, 0.05);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Status */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.12);
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  --bg-base: #f7f8fa;
  --bg-primary: #ffffff;
  --bg-secondary: #f1f3f7;
  --bg-card: #ffffff;
  --bg-card-hover: #fafbfd;
  --bg-elevated: #ffffff;

  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-strong: #4338ca;
  --accent-glow: rgba(99, 102, 241, 0.20);
  --accent-subtle: rgba(99, 102, 241, 0.07);
  --accent-faint: rgba(99, 102, 241, 0.03);

  --accent-2: #10b981;
  --accent-3: #8b5cf6;
  --accent-4: #f59e0b;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border: rgba(15, 23, 42, 0.07);
  --border-hover: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.18);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);

  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 23, 42, 0.06);

  --success-bg: rgba(16, 185, 129, 0.10);
  --danger-bg: rgba(239, 68, 68, 0.10);
  --warning-bg: rgba(245, 158, 11, 0.12);
  --info-bg: rgba(59, 130, 246, 0.10);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.55;
  font-size: 14px;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  transition: background var(--transition), color var(--transition);
}

/* Body background layer 1: subtle noise texture (premium grain) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

[data-theme="light"] body::before {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* Body background layer 2: faint dot grid focal point */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, #000 30%, transparent 80%);
  opacity: 0.55;
}

[data-theme="light"] body::after { opacity: 0.4; }

/* Floating dots — CSS-only animated decoration (replaces particles canvas on landing) */
.floating-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -8;
  overflow: hidden;
}

.fd {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.22;
  filter: blur(0.5px);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: fdFloat 14s ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform, opacity;
}

@keyframes fdFloat {
  0%, 100% { transform: translateY(0); opacity: 0.15; }
  50% { transform: translateY(-32px); opacity: 0.32; }
}

[data-theme="light"] .fd { opacity: 0.18; }
[data-theme="light"] .fd { box-shadow: 0 0 6px var(--accent-glow); }

@media (prefers-reduced-motion: reduce) {
  .hero-aurora { animation: none; }
  .fd { animation: none; }
  .hero::before { display: none; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}

button { font-family: inherit; }

::selection { background: var(--accent-subtle); color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 999px; border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===== AMBIENT BACKGROUND ===== */
.particles-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(800px 600px at 10% -10%, rgba(129, 140, 248, 0.10), transparent 60%),
    radial-gradient(600px 600px at 90% 5%, rgba(196, 181, 253, 0.06), transparent 60%);
}

[data-theme="light"] .particles-container {
  background-image:
    radial-gradient(800px 600px at 10% -10%, rgba(99, 102, 241, 0.06), transparent 60%),
    radial-gradient(600px 600px at 90% 5%, rgba(139, 92, 246, 0.04), transparent 60%);
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 60px;
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition), border-color var(--transition);
}

/* Subtle gradient accent line at the bottom edge — visual life */
.navbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 18%, var(--accent-glow) 50%, var(--accent-3-glow) 72%, transparent 90%);
  opacity: 0.6;
  pointer-events: none;
  animation: navAccentFlow 8s ease-in-out infinite alternate;
}

@keyframes navAccentFlow {
  from { background-position: 0% 0%; opacity: 0.45; }
  to   { background-position: 100% 0%; opacity: 0.7; }
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  padding: 0 1.5rem;
  gap: 1rem;
}

/* ----- Brand ----- */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: opacity 0.2s var(--ease-out);
  text-decoration: none;
}

.navbar-brand:hover { color: var(--text-primary); }

.navbar-brand img { width: 28px; height: 28px; border-radius: 8px; }

.navbar-brand-name {
  color: var(--text-primary);
  white-space: nowrap;
}

.navbar-logo {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 2px 8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  flex-shrink: 0;
}

/* Always-on halo pulse (works under reduced motion too) */
.navbar-logo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: navLogoHalo 3.4s ease-out infinite;
}

@keyframes navLogoHalo {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  50%      { opacity: 0.45; transform: scale(1.28); }
}

.navbar-brand:hover .navbar-logo {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ----- Pill ----- */
.navbar-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  border-radius: 999px;
  margin-left: 0.4rem;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Shimmer strip sweeping across pill */
.navbar-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: pillShimmer 3.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pillShimmer {
  0%   { left: -55%; }
  55%  { left: 110%; }
  100% { left: 110%; }
}

/* ----- Nav links ----- */
.navbar-nav,
.navbar-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  flex: 1;
  justify-content: center;
}

.navbar-nav a,
.navbar-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease-out), background 0.25s var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.navbar-nav a i,
.navbar-links a i {
  font-size: 0.78rem;
  opacity: 0.75;
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), color 0.2s var(--ease-out);
}

.navbar-nav a:hover,
.navbar-links a:hover {
  color: var(--text-primary);
  background: var(--accent-faint);
}

.navbar-nav a:hover i,
.navbar-links a:hover i {
  opacity: 1;
  transform: scale(1.12);
}

/* Underline that slides in from center */
.navbar-nav a::after,
.navbar-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.32s var(--ease-out), opacity 0.25s var(--ease-out);
  opacity: 0;
  pointer-events: none;
}

.navbar-nav a:hover::after,
.navbar-links a:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.7;
}

/* Active state — current page (not clickable since you're already there) */
.navbar-nav a.active,
.navbar-links a.active {
  color: var(--accent);
  background: var(--accent-subtle);
  pointer-events: none;
  cursor: default;
}

.navbar-nav a.active i,
.navbar-links a.active i {
  opacity: 1;
  color: var(--accent);
}

.navbar-nav a.active::after,
.navbar-links a.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* ----- Right-side actions ----- */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .navbar-pill { display: none; }
  .navbar-nav,
  .navbar-links { display: none; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.btn:hover::after { opacity: 1; }

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; border-radius: 7px; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px var(--accent-strong);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--accent-strong);
  color: #fff;
}

.btn-primary:active { transform: translateY(0); }

.btn-outline, .btn-ghost {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-outline:hover, .btn-ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.btn-discord {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  color: #fff;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px var(--accent-strong), 0 4px 16px var(--accent-glow);
  font-weight: 600;
  width: 100%;
}

.btn-discord:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--accent-strong), 0 8px 24px var(--accent-glow);
  color: #fff;
}

.btn-icon {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.25s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  overflow: hidden;
  text-decoration: none;
}

.btn-icon i {
  transition: transform 0.3s var(--ease-out);
}

.btn-icon:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

/* Default icon micro-interaction on hover */
.btn-icon:hover i {
  transform: rotate(8deg) scale(1.1);
}

/* Theme toggle — more dramatic rotate */
.btn-icon#themeToggle:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-subtle);
}

.btn-icon#themeToggle:hover i {
  transform: rotate(22deg) scale(1.1);
}

/* Sign out — slide arrow right instead of rotate */
.btn-icon[aria-label="Sign out"]:hover {
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.3);
  background: var(--danger-bg);
}

.btn-icon[aria-label="Sign out"]:hover i {
  transform: translateX(2px) rotate(0deg) scale(1);
}

/* ===== PAGE CONTAINER ===== */
.page-content {
  position: relative;
  z-index: 1;
  padding-top: 60px;
}

/* ===== HERO ===== */
.hero {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hero-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}

.hero-bg .orb-1 {
  width: 480px; height: 480px;
  top: -8%; left: -5%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
}

.hero-bg .orb-2 {
  width: 420px; height: 420px;
  top: 25%; right: -6%;
  background: radial-gradient(circle, var(--accent-3-glow), transparent 70%);
}

.hero-bg .orb-3 {
  width: 360px; height: 360px;
  bottom: 5%; left: 30%;
  background: radial-gradient(circle, var(--accent-2-glow), transparent 70%);
}

[data-theme="light"] .hero-bg .orb {
  opacity: 0.75;
  filter: blur(80px);
}

/* Aurora ribbon — slow rotating conic gradient */
.hero-aurora {
  position: absolute;
  top: -25%;
  left: -15%;
  right: -15%;
  height: 70vh;
  background: conic-gradient(from 200deg at 50% 50%,
    var(--accent-glow) 0%,
    transparent 22%,
    var(--accent-3-glow) 44%,
    transparent 60%,
    var(--accent-2-glow) 78%,
    transparent 95%);
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: auroraRotate 32s linear infinite;
  transform-origin: center;
}

@keyframes auroraRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

[data-theme="light"] .hero-aurora {
  opacity: 0.4;
  filter: blur(90px);
}

/* Mouse-following spotlight in hero */
.hero { --mx: 50%; --my: 30%; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(450px circle at var(--mx) var(--my), var(--accent-glow), transparent 50%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s var(--ease-out);
}

[data-theme="light"] .hero::before { opacity: 0.4; }

.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

/* ----- Animated gradient mesh layer (slow morph) ----- */
.hero-mesh {
  position: absolute;
  inset: -10% -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(at 22% 30%, var(--accent-glow) 0%, transparent 45%),
    radial-gradient(at 78% 65%, var(--accent-3-glow) 0%, transparent 50%),
    radial-gradient(at 50% 95%, var(--accent-2-glow) 0%, transparent 45%);
  opacity: 0.55;
  animation: heroMeshDrift 18s ease-in-out infinite alternate;
  filter: blur(20px);
}

@keyframes heroMeshDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

[data-theme="light"] .hero-mesh { opacity: 0.4; filter: blur(28px); }

/* ----- Decorative light rays (diagonal beams) ----- */
.hero-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-ray {
  position: absolute;
  width: 1px;
  height: 140%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0.18;
  filter: blur(0.5px);
  transform-origin: top center;
}

.hero-ray.ray-1 {
  top: -20%;
  left: 18%;
  transform: rotate(8deg);
  animation: rayShimmer 6s ease-in-out infinite;
}

.hero-ray.ray-2 {
  top: -20%;
  right: 22%;
  transform: rotate(-8deg);
  background: linear-gradient(180deg, transparent, var(--accent-3), transparent);
  animation: rayShimmer 7s ease-in-out 2s infinite;
}

@keyframes rayShimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.22; }
}

/* ----- Editorial masthead — magazine-style announcement (no pill) ----- */
.hero-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
  background: transparent;
  border: 0;
  margin-bottom: 1.6rem;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.hero-masthead-ornament {
  font-size: 0.95rem;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
  transform-origin: center;
  animation: mastheadSpin 14s linear infinite;
  flex-shrink: 0;
}

@keyframes mastheadSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-masthead-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  flex-shrink: 0;
}

.hero-masthead-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-hover), transparent);
  flex-shrink: 0;
}

.hero-masthead-text {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.hero-masthead-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0 0 0.7rem;
  margin-left: 0.2rem;
  border-left: 1px solid var(--border);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.hero-masthead-cta i {
  font-size: 0.62rem;
  transition: transform 0.3s var(--ease-out);
}

.hero-badge:hover .hero-masthead-cta i { transform: translateX(4px); }
.hero-badge:hover .hero-masthead-text { color: var(--accent); }
.hero-badge:hover .hero-masthead-text { transition: color 0.3s var(--ease-out); }

/* ----- Editorial title: 3-tier rhythm (eyebrow + 2 lines + accent) ----- */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  margin-bottom: 1.6rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 1rem; /* base — children override */
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Eyebrow: small uppercase with em-dashes — editorial magazine style */
.hero-title-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
  opacity: 0.8;
}

/* Each title line is its own block — clean rhythm */
.hero-title-line {
  display: block;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero-title-line:nth-child(2) { font-weight: 800; color: var(--text-primary); }
.hero-title-line:nth-child(3) { font-weight: 800; }

.hero-title .char { display: inline-block; opacity: 0; }

/* Highlight word: gradient + italic display feel + decorative underline arc */
.hero-title .gradient,
.hero-title .highlight {
  position: relative;
  background: linear-gradient(135deg, var(--accent), var(--accent-3) 50%, var(--accent-4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-style: italic;
  font-weight: 900;
}

/* Hand-drawn squiggle underline (SVG-ish via clip-path) */
.hero-title .highlight::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 16%; /* leave space for the period */
  bottom: -0.08em;
  height: 0.12em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3) 50%, var(--accent-4));
  transform-origin: left;
  transform: scaleX(0);
  animation: heroUnderline 1.2s 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0.7;
  filter: blur(0.3px);
}

/* Period stays solid color (not gradient) — keeps it readable as a sentence */
.hero-title-period {
  color: var(--accent);
  font-style: normal;
  font-weight: 800;
  -webkit-text-fill-color: var(--accent);
  margin-left: 0.05em;
}

@keyframes heroUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ----- Subtitle as feature list (no paragraph) ----- */
.hero-subtitle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 2.4rem;
  position: relative;
  z-index: 1;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.hero-feature i {
  font-size: 0.82rem;
  color: var(--accent-2);
  opacity: 0.85;
}

.hero-feature-sep {
  color: var(--text-muted);
  opacity: 0.4;
  user-select: none;
}

.hero-subtitle strong {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ----- CTA: single confident button + microcopy perks + existing-user link ----- */
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-cta .btn { padding: 0.95rem 2rem; font-size: 0.98rem; border-radius: 12px; }

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 12px 32px -10px var(--accent-glow), 0 4px 14px -4px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.hero-btn-primary:hover {
  box-shadow: 0 16px 40px -10px var(--accent-glow), 0 6px 18px -4px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* Animated glow sweep across button on hover */
.hero-btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
  transition: left 0.7s ease-out;
}

.hero-btn-primary:hover .hero-btn-glow { left: 130%; }

.hero-btn-arrow {
  font-size: 0.82rem;
  margin-left: 0.15rem;
  opacity: 0.85;
  transform: translateX(-3px);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.hero-btn-primary:hover .hero-btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Perks: 3 micro-features below the button (free, fast setup, no card) */
.hero-cta-perks {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.hero-cta-perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.hero-cta-perks li i {
  font-size: 0.7rem;
  color: var(--accent-2);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
  flex-shrink: 0;
}

/* Existing-user link: subtle, gives existing users a path */
.hero-cta-existing {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-cta-existing strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.hero-cta-existing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--accent);
  font-weight: 600;
  position: relative;
}

.hero-cta-existing-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1.1rem;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.hero-cta-existing-link i {
  font-size: 0.65rem;
  transition: transform 0.3s var(--ease-out);
}

.hero-cta-existing:hover .hero-cta-existing-link::after { transform: scaleX(1); }
.hero-cta-existing:hover .hero-cta-existing-link i { transform: translateX(3px); }

/* ----- Secondary CTA: minimal text-link with arrow ----- */
.hero-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.25s var(--ease-out);
  position: relative;
}

.hero-btn-link i {
  font-size: 0.72rem;
  opacity: 0.7;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.hero-btn-link:hover {
  color: var(--text-primary);
}

.hero-btn-link:hover i {
  transform: translateX(4px);
  opacity: 1;
}

.hero-btn-link::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 1.6rem;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}

.hero-btn-link:hover::after {
  opacity: 0.4;
  transform: scaleX(1);
}

/* ----- Live activity panel (replaces stats/trust) ----- */
.hero-activity {
  margin: 2.75rem auto 0;
  width: 100%;
  max-width: 460px;
  padding: 0.7rem 0.95rem 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  position: relative;
  z-index: 1;
  text-align: left;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px) saturate(140%);
}

.hero-activity::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 50%, var(--accent-3-glow));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}

[data-theme="light"] .hero-activity {
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18), 0 6px 16px -6px rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

.hero-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  padding: 0 0.15rem;
}

.hero-activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--success-bg);
  color: var(--accent-2);
  border: 1px solid var(--accent-2-glow);
  border-radius: 999px;
}

.hero-activity-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: previewPulse 1.6s ease-in-out infinite;
}

.hero-activity-meta {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero-activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  background: var(--bg-secondary);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(8px);
  animation: activityRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(1.2s + var(--i, 0) * 0.18s);
  transition: background 0.2s var(--ease-out);
}

.hero-activity-row:hover { background: var(--bg-elevated); }

@keyframes activityRise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-activity-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.hero-activity-avatar.a1 { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.hero-activity-avatar.a2 { background: linear-gradient(135deg, var(--accent-3), #8b5cf6); }
.hero-activity-avatar.a3 { background: linear-gradient(135deg, var(--accent-4), #d97706); }

.hero-activity-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-activity-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.hero-activity-tag {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-activity-stars {
  display: inline-flex;
  gap: 1px;
  margin: 0 0.15rem;
  color: #fbbf24;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4));
}

.hero-activity-stars i { font-size: 0.55rem; }

.hero-activity-time {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero-activity-time-now {
  color: var(--accent-2);
  font-weight: 600;
}

@media (max-width: 600px) {
  .hero-activity { max-width: 100%; }
  .hero-activity-text { font-size: 0.72rem; }
  .hero-cta { max-width: 360px; margin: 0 auto; }
  .hero-btn-primary { width: 100%; justify-content: center; }
  .hero-cta-perks { font-size: 0.72rem; gap: 0.3rem 0.85rem; }
  .hero-cta-existing { font-size: 0.72rem; flex-direction: column; gap: 0.25rem; }
  .hero-masthead { flex-wrap: wrap; gap: 0.4rem 0.6rem; justify-content: center; }
  .hero-masthead-rule { display: none; }
  .hero-masthead-cta { padding-left: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none; }
  .hero-ray { animation: none; opacity: 0.15; }
  .hero-masthead-ornament { animation: none; }
  .hero-badge:hover .hero-masthead-cta i { transform: none; }
  .hero-title .highlight::after { transform: scaleX(1); animation: none; }
  .hero-btn-arrow { transform: translateX(0); opacity: 1; }
  .hero-btn-primary:hover { transform: none; }
  .hero-btn-primary:hover .hero-btn-arrow { transform: translateX(0); }
  .hero-btn-primary:hover .hero-btn-glow { left: -100%; }
  .hero-btn-link:hover i { transform: translateX(0); }
  .hero-cta-existing:hover .hero-cta-existing-link i { transform: none; }
  .hero-cta-existing:hover .hero-cta-existing-link::after { transform: scaleX(0); }
  .hero-activity-row { opacity: 1; transform: translateY(0); animation: none; }
  /* Keep: pulse dot, masthead ornament static visible (but no spin) */
}

/* ===== SECTION HEADERS ===== */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.section-title {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.65rem;
  letter-spacing: -0.025em;
}

.section-subtitle, .section-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.section { padding: 6rem 2rem; position: relative; }

/* ===== FEATURES ===== */
.features {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.features-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 400px at 15% 10%, var(--accent-faint), transparent 60%),
    radial-gradient(800px 500px at 85% 90%, var(--accent-3-glow), transparent 65%);
  opacity: 0.6;
  z-index: 0;
}

.features > .container { position: relative; z-index: 1; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.feature-card {
  --feature-color: var(--accent);
  --feature-glow: var(--accent-glow);
  --feature-bg: var(--accent-subtle);
  position: relative;
  padding: 2.1rem 1.85rem 1.95rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    background 0.3s ease;
}

/* Glow halo behind card on hover */
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--feature-glow), transparent 50%, var(--feature-glow));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Soft radial accent in top-right */
.feature-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--feature-bg), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--feature-glow);
  background: var(--bg-card-hover);
  box-shadow:
    0 20px 40px -20px var(--feature-glow),
    0 8px 16px -8px rgba(0, 0, 0, 0.15);
}

.feature-card:hover::before { opacity: 0.7; }
.feature-card:hover::after { opacity: 1; }

/* Number prefix top-right */
.feature-num {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.feature-card:hover .feature-num {
  opacity: 1;
  color: var(--feature-color);
}

/* Icon container — bigger, more refined */
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 1.15rem;
  background: var(--feature-bg);
  color: var(--feature-color);
  border: 1px solid var(--feature-glow);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
  position: relative;
  z-index: 1;
}

.feature-card:hover .feature-icon {
  transform: translateY(-2px) scale(1.06) rotate(-3deg);
  box-shadow: 0 8px 22px -6px var(--feature-glow);
}

/* Color variants — set CSS vars on card so children inherit */
.feature-card:has(.feature-icon.blue),
.feature-icon.blue ~ * .feature-icon.blue {
  --feature-color: var(--accent);
  --feature-glow: var(--accent-glow);
  --feature-bg: var(--accent-subtle);
}

.feature-card:has(.feature-icon.green) {
  --feature-color: var(--accent-2);
  --feature-glow: var(--accent-2-glow);
  --feature-bg: var(--success-bg);
}

.feature-card:has(.feature-icon.purple) {
  --feature-color: var(--accent-3);
  --feature-glow: var(--accent-3-glow);
  --feature-bg: rgba(196, 181, 253, 0.10);
}

.feature-card:has(.feature-icon.orange) {
  --feature-color: var(--accent-4);
  --feature-glow: rgba(251, 191, 36, 0.30);
  --feature-bg: var(--warning-bg);
}

/* Fallback for browsers without :has support — apply icon color directly */
.feature-icon.blue { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-glow); }
.feature-icon.green { background: var(--success-bg); color: var(--accent-2); border-color: var(--accent-2-glow); }
.feature-icon.purple { background: rgba(196, 181, 253, 0.10); color: var(--accent-3); border-color: var(--accent-3-glow); }
.feature-icon.orange { background: var(--warning-bg); color: var(--accent-4); border-color: rgba(251, 191, 36, 0.25); }

.feature-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  position: relative;
  display: inline-block;
}

.feature-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--feature-color);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover .feature-title::after { transform: scaleX(1); }

.feature-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Bottom accent bar — grows on hover */
.feature-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--feature-color), transparent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover .feature-bar { width: 100%; }

/* Stagger entrance animation when revealed */
.feature-card.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.feature-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .feature-card { padding: 1.65rem 1.4rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card .feature-icon,
  .feature-title::after,
  .feature-bar { transition: none; }
  .feature-card:hover { transform: none; }
  .feature-card:hover .feature-icon { transform: none; }
  .feature-card.reveal { transition-delay: 0ms; }
}

/* ===== HOW IT WORKS ===== */
.how-it-works {
  padding: 6rem 0;
  background:
    radial-gradient(900px 500px at 50% 0%, var(--accent-faint), transparent 60%),
    var(--bg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--border-hover) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-3), transparent);
  opacity: 0.55;
  z-index: 0;
}

.steps::after {
  content: '';
  position: absolute;
  top: 31px;
  left: 12.5%;
  height: 3px;
  width: 60px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 999px;
  filter: blur(0.5px);
  animation: stepsFlow 4.8s linear infinite;
  z-index: 1;
}

@keyframes stepsFlow {
  0% { left: 8%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 88%; opacity: 0; }
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.step::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent-3));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.step:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow);
}

.step:hover::before { opacity: 0.75; }

.step-num {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 auto 0.85rem;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
  transition: all var(--transition);
  letter-spacing: -0.02em;
  position: relative;
}

.step-num::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--accent-glow);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  transform: scale(0.95);
}

.step:hover .step-num {
  transform: scale(1.06);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.step:hover .step-num::after {
  opacity: 1;
  transform: scale(1.15);
}

.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  transition: all var(--transition);
}

.step:hover .step-icon { color: var(--accent); }

.step-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  letter-spacing: -0.015em;
}

.step-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }

/* ===== SHOWCASE ===== */
/* ===== SHOWCASE ===== */
.showcase {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.showcase-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 500px at 80% 50%, var(--accent-glow), transparent 65%),
    radial-gradient(600px 400px at 10% 90%, var(--accent-3-glow), transparent 70%);
  opacity: 0.4;
  z-index: 0;
}

.showcase > .container { position: relative; z-index: 1; }

.showcase-content {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.showcase-text .section-label { text-align: left; }

.showcase-title {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.showcase-desc {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 460px;
}

.showcase-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.showcase-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.showcase-list .check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.showcase-list li:hover .check {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 14px var(--accent-2-glow);
}

/* ----- Preview window ----- */
.showcase-preview {
  position: relative;
  perspective: 1400px;
  isolation: isolate;
}

.showcase-preview::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  background: radial-gradient(60% 60% at 50% 50%, var(--accent-glow), transparent 70%);
  filter: blur(50px);
  z-index: -1;
  opacity: 0.7;
  animation: showcaseGlow 6s ease-in-out infinite alternate;
}

@keyframes showcaseGlow {
  0% { opacity: 0.4; transform: scale(0.95); }
  100% { opacity: 0.85; transform: scale(1.05); }
}

.preview-window {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 16px 30px -10px var(--accent-glow);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
  transform: perspective(1400px) rotateY(-3deg) rotateX(2deg);
}

.showcase-preview:hover .preview-window {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.45),
    0 20px 40px -10px var(--accent-glow);
}

.preview-titlebar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.preview-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.preview-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.preview-dot.red { background: #f06868; }
.preview-dot.yellow { background: #f0c868; }
.preview-dot.green { background: #6be0b8; }

.preview-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.preview-url i { font-size: 0.62rem; opacity: 0.7; }

.preview-content {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 280px;
}

.preview-sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 0.85rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.preview-sidebar-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem 0.55rem;
}

.preview-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 7px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.preview-sidebar-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.preview-sidebar-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

.preview-sidebar-item i { width: 14px; text-align: center; font-size: 0.72rem; }

.preview-main {
  padding: 1rem 1.1rem 1.15rem;
}

.preview-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.95rem;
}

.preview-main-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.preview-breadcrumb {
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.preview-breadcrumb i { font-size: 0.5rem; opacity: 0.6; }
.preview-breadcrumb strong { color: var(--text-secondary); font-weight: 600; }

.preview-main-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.preview-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: previewWave 2.4s ease-in-out 0.8s 3;
}

@keyframes previewWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}

.preview-main-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.preview-period-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.preview-period-pill i { font-size: 0.5rem; opacity: 0.7; }

.preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.preview-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: previewPulse 1.6s ease-in-out infinite;
}

@keyframes previewPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.preview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.preview-stat {
  --c: var(--accent);
  --c-glow: var(--accent-glow);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.7rem 0.8rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.preview-stat.blue { --c: var(--accent); --c-glow: var(--accent-glow); }
.preview-stat.green { --c: var(--accent-2); --c-glow: var(--accent-2-glow); }

.preview-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
}

.preview-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c);
  letter-spacing: -0.025em;
  line-height: 1;
}

.preview-stat-bar {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.35rem;
}

.preview-stat-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c), var(--c-glow));
  border-radius: 2px;
}

.preview-chart {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.75rem 0.85rem 0.85rem;
}

.preview-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.preview-chart-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
}

.preview-chart-meta {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-2);
}

.preview-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
}

.preview-chart-bar {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  border-radius: 3px 3px 1px 1px;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: bottom;
}

.showcase-preview:hover .preview-chart-bar {
  animation: chartBarPulse 0.8s ease-out forwards;
}

.preview-chart-bar:nth-child(1) { animation-delay: 0ms !important; }
.preview-chart-bar:nth-child(2) { animation-delay: 60ms !important; }
.preview-chart-bar:nth-child(3) { animation-delay: 120ms !important; }
.preview-chart-bar:nth-child(4) { animation-delay: 180ms !important; }
.preview-chart-bar:nth-child(5) { animation-delay: 240ms !important; }
.preview-chart-bar:nth-child(6) { animation-delay: 300ms !important; }
.preview-chart-bar:nth-child(7) { animation-delay: 360ms !important; }

@keyframes chartBarPulse {
  0% { opacity: 0.85; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.04); }
  100% { opacity: 0.85; transform: scaleY(1); }
}

@media (max-width: 900px) {
  .showcase-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .preview-window {
    transform: none;
  }
  .showcase-preview:hover .preview-window {
    transform: translateY(-4px);
  }
}

/* ----- Floating decorative cards around preview window ----- */
.preview-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem 0.7rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.35), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
  min-width: 200px;
}

.preview-float-tr {
  top: -1.5rem;
  right: -1.25rem;
  animation: previewFloatRise 0.7s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, previewFloatBob 6s 1s ease-in-out infinite;
}

.preview-float-bl {
  bottom: -1.25rem;
  left: -1.5rem;
  animation: previewFloatRise 0.7s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both, previewFloatBob 7s 1.3s ease-in-out infinite reverse;
}

.preview-float-tl {
  top: 18%;
  left: -2rem;
  animation: previewFloatRise 0.7s 0.85s cubic-bezier(0.16, 1, 0.3, 1) both, previewFloatBob 8s 1.7s ease-in-out infinite;
}

.preview-float-toast { min-width: 215px; }

.preview-toast-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  margin-right: 0.3rem;
  vertical-align: middle;
  animation: previewPulse 1.6s ease-in-out infinite;
}

.preview-float-icon.purple {
  background: linear-gradient(135deg, var(--accent-3), #7c3aed);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-3-glow);
}

@keyframes previewFloatRise {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.preview-float-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.preview-float-icon.green {
  background: linear-gradient(135deg, var(--accent-2), #059669);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-2-glow);
}

.preview-float-icon.blue {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.preview-float-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.1rem;
}

.preview-float-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}

[data-theme="light"] .preview-float {
  box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
}

/* ----- Titlebar action button (search) ----- */
.preview-titlebar-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ----- Sidebar brand block ----- */
.preview-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.5rem 0.7rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.preview-sidebar-brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.55rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--accent-glow);
}

.preview-sidebar-brand-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Sidebar item with span/count badge ----- */
.preview-sidebar-item {
  position: relative;
}

.preview-sidebar-item span:not(.preview-sidebar-count) {
  flex: 1;
}

.preview-sidebar-count {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-left: auto;
}

/* ----- Sidebar footer (avatars + online status) ----- */
.preview-sidebar { display: flex; flex-direction: column; }
.preview-sidebar-foot {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.preview-sidebar-avatars {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

.preview-mini-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--bg-card);
  margin-left: -5px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.preview-mini-avatar:first-child { margin-left: 0; }

.preview-mini-avatar.a1 { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.preview-mini-avatar.a2 { background: linear-gradient(135deg, var(--accent-3), #8b5cf6); }
.preview-mini-avatar.a3 { background: linear-gradient(135deg, var(--accent-4), #d97706); }
.preview-mini-avatar.plus {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.5rem;
}

.preview-sidebar-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.35rem 0.5rem;
}

.preview-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: previewPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* ----- 4 KPI cards row ----- */
.preview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.preview-kpi {
  --c: var(--accent);
  --c-glow: var(--accent-glow);
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.55rem 0.65rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
}

.preview-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), transparent);
}

.preview-kpi.blue { --c: var(--accent); --c-glow: var(--accent-glow); }
.preview-kpi.green { --c: var(--accent-2); --c-glow: var(--accent-2-glow); }
.preview-kpi.purple { --c: var(--accent-3); --c-glow: var(--accent-3-glow); }
.preview-kpi.orange { --c: var(--accent-4); --c-glow: rgba(251, 191, 36, 0.3); }

.preview-kpi-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
}

.preview-kpi-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c);
  letter-spacing: -0.025em;
  line-height: 1;
  font-family: 'Poppins', 'Inter', sans-serif;
}

.preview-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.62rem;
  font-weight: 600;
}

.preview-kpi-trend.up { color: var(--accent-2); }
.preview-kpi-trend.down { color: var(--accent-2); }
.preview-kpi-trend.down i { transform: rotate(0); }

/* Mini sparkline inside KPI card */
.preview-kpi-spark {
  position: absolute;
  bottom: 0.35rem;
  right: 0.4rem;
  width: 36px;
  height: 14px;
  pointer-events: none;
  opacity: 0.7;
}

/* Split row: chart (wide) + donut (compact) */
.preview-split-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

/* Chart filter pills */
.preview-chart-titles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-chart-filters {
  display: inline-flex;
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 2px;
}

.preview-filter-pill {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: default;
  transition: background 0.2s, color 0.2s;
}

.preview-filter-pill.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Satisfaction donut */
.preview-donut {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.preview-donut-head {
  width: 100%;
  text-align: center;
}

.preview-donut-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.preview-donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.preview-donut-arc {
  filter: drop-shadow(0 0 4px var(--accent-2-glow));
}

/* Static marker at the end of the arc */
.preview-donut-marker {
  filter: drop-shadow(0 0 5px var(--accent-2));
}

/* Sonar ripples from marker — 2 staggered for continuous wave */
.preview-donut-ripple {
  transform-origin: 24.6px 12px;
  transform-box: fill-box;
  opacity: 0;
  animation: donutRipple 2.2s ease-out infinite;
}

.preview-donut-ripple.r1 { animation-delay: 0s; }
.preview-donut-ripple.r2 { animation-delay: 1.1s; }

@keyframes donutRipple {
  0% {
    r: 3;
    opacity: 0.7;
    stroke-width: 1.8;
  }
  100% {
    r: 14;
    opacity: 0;
    stroke-width: 0.5;
  }
}

.preview-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  pointer-events: none;
}

.preview-donut-value {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;
}

.preview-donut-value small {
  font-size: 0.55rem;
  color: var(--text-muted);
  font-weight: 600;
}

.preview-donut-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

/* Tickets resolution-rate footer */
.preview-tickets-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.preview-tickets-foot-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

.preview-tickets-foot-bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.preview-tickets-foot-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 2px;
  transform-origin: left;
  animation: previewBarGrow 1.5s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes previewBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.preview-tickets-foot-value {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

/* ----- Sparkline chart canvas ----- */
.preview-chart-canvas {
  position: relative;
  height: 70px;
}

.preview-spark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.preview-spark-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: sparkDraw 2.4s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.preview-spark-fill {
  opacity: 0;
  animation: sparkFade 1.2s 1.6s ease-out forwards;
}

.preview-spark-marker {
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--accent));
  animation: sparkMarkerPop 0.5s 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.preview-spark-ripple {
  opacity: 0;
  animation: sparkRipple 2.2s ease-out infinite;
}

.preview-spark-ripple.sr1 { animation-delay: 2.7s; }
.preview-spark-ripple.sr2 { animation-delay: 3.8s; }

@keyframes sparkDraw {
  from { stroke-dashoffset: 600; }
  to { stroke-dashoffset: 0; }
}

@keyframes sparkFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sparkMarkerPop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sparkRipple {
  0%   { r: 3.5; opacity: 0.7; stroke-width: 1.8; }
  100% { r: 14;  opacity: 0;   stroke-width: 0.5; }
}

.preview-chart-canvas .preview-chart-bars {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.4;
}

.preview-chart-canvas .preview-chart-bar {
  background: linear-gradient(180deg, var(--accent-glow), transparent);
}

/* ----- Recent tickets list ----- */
.preview-tickets {
  margin-top: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.7rem 0.85rem 0.85rem;
}

.preview-tickets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.preview-link {
  font-size: 0.62rem;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.preview-link i { font-size: 0.55rem; }

.preview-ticket-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.preview-ticket-row:hover { background: var(--bg-elevated); }

.preview-ticket-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.preview-ticket-avatar.a1 { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.preview-ticket-avatar.a2 { background: linear-gradient(135deg, var(--accent-3), #8b5cf6); }
.preview-ticket-avatar.a3 { background: linear-gradient(135deg, var(--accent-4), #d97706); }

.preview-ticket-body { min-width: 0; }

.preview-ticket-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-ticket-meta {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 0.05rem;
}

.preview-ticket-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.preview-ticket-badge.open {
  color: var(--accent-2);
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
}

.preview-ticket-badge.claimed {
  color: var(--accent-4);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.preview-ticket-badge.closed {
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

@media (max-width: 900px) {
  .preview-float { display: none; }
  .preview-kpis { grid-template-columns: repeat(2, 1fr); }
  .preview-split-row { grid-template-columns: 1fr; }
  .preview-donut { flex-direction: row; justify-content: space-around; }
}

/*
  Reduced-motion: keep ESSENTIAL ambient effects (subtle pulse, entrance,
  static visible state of decorations) so the dashboard still feels alive.
  Only disable heavy looping/transform animations.
*/
@media (prefers-reduced-motion: reduce) {
  /* Disable heavy continuous transforms */
  .showcase-preview::before { animation: none; opacity: 0.5; }
  .preview-window {
    transform: perspective(1400px) rotateY(-1.5deg) rotateX(1deg); /* subtle static tilt instead of resetting */
  }
  .showcase-preview:hover .preview-window { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
  .preview-float { animation: previewFloatRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } /* keep one-shot rise, drop bob */
  .preview-float-tr { animation-delay: 0.4s; }
  .preview-float-bl { animation-delay: 0.6s; }
  .preview-float-tl { animation-delay: 0.85s; }
  .showcase-preview:hover .preview-chart-bar { animation: none; }
  .preview-wave { animation: none; }

  /* Keep visible end-state of sparkline + donut (don't draw, just show) */
  .preview-spark-line { stroke-dashoffset: 0; animation: none; }
  .preview-spark-fill { opacity: 1; animation: none; }
  .preview-spark-marker { opacity: 1; animation: none; }
  .preview-spark-ripple { animation: none; opacity: 0; }
  .preview-donut-ripple { animation: none; opacity: 0; }
  .preview-tickets-foot-bar span { transform: scaleX(1); animation: none; }

  /* KEEP these short, subtle ambient effects for "alive" feel */
  /* .preview-pill-dot, .preview-sidebar-dot, .preview-toast-dot — keep pulse */
}

/* ===== STATS SECTION ===== */
/* ===== STATS — editorial table-of-contents style ===== */
.stats-section {
  padding: 7rem 0;
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}

.stats-section > * { position: relative; z-index: 1; }

/* Editorial header (kicker · title · live chip) */
.stats-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 4rem;
}

.stats-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}

.stats-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  color: var(--text-primary);
}

.stats-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-2);
  margin-top: 0.4rem;
}

.stats-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: previewPulse 1.6s ease-in-out infinite;
}

/* Stats grid: hairline borders top/bottom, vertical dividers between */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Drop card chrome — pure editorial typography */
.stat-card {
  position: relative;
  text-align: center;
  padding: 3rem 1rem 2.6rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Stagger entrance */
.stat-card.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.stat-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Vertical dividers between stats */
.stat-card + .stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--border);
}

/* Magazine-style "01/02/03" index */
.stat-index {
  display: block;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.stat-index::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.stat-value {
  font-size: clamp(3rem, 6vw, 4.4rem);
  font-weight: 800;
  margin-bottom: 0.65rem;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  line-height: 0.95;
  font-family: 'Poppins', 'Inter', sans-serif;
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* ===== CTA — editorial declarative ===== */
.cta-section {
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 5rem 2rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  position: relative;
  overflow: visible;
}

/* Soft halo behind */
.cta-card::after {
  content: '';
  position: absolute;
  inset: -10% auto auto 50%;
  width: 600px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--accent-glow), transparent 65%);
  pointer-events: none;
  opacity: 0.5;
  z-index: -1;
  filter: blur(20px);
}

.cta-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}

.cta-title {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 800;
  margin-bottom: 1.1rem;
  letter-spacing: -0.04em;
  line-height: 1.05;
  position: relative;
  z-index: 1;
}

.cta-highlight {
  position: relative;
  background: linear-gradient(135deg, var(--accent), var(--accent-3) 60%, var(--accent-4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  font-weight: 900;
  display: inline-block;
}

.cta-period {
  color: var(--accent);
  font-style: normal;
  font-weight: 800;
  -webkit-text-fill-color: var(--accent);
  margin-left: 0.05em;
}

.cta-desc {
  color: var(--text-secondary);
  font-size: 1.02rem;
  margin: 0 auto 2rem;
  max-width: 500px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.cta-buttons {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: 1.25rem;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.2rem;
  font-size: 1rem;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 14px 36px -10px var(--accent-glow), 0 4px 14px -4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.cta-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px -10px var(--accent-glow), 0 6px 18px -4px rgba(0, 0, 0, 0.25);
}

.cta-btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
  transition: left 0.7s ease-out;
}

.cta-btn-primary:hover .cta-btn-glow { left: 130%; }

.cta-btn-arrow {
  font-size: 0.85rem;
  margin-left: 0.15rem;
  opacity: 0.85;
  transform: translateX(-3px);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.cta-btn-primary:hover .cta-btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.cta-existing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
  transition: color 0.25s var(--ease-out);
}

.cta-existing-link i {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.cta-existing-link:hover {
  color: var(--text-primary);
}

.cta-existing-link:hover i {
  transform: translateX(3px);
  opacity: 1;
}

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card + .stat-card::before {
    left: 25%;
    right: 25%;
    top: 0;
    bottom: auto;
    height: 1px;
    width: auto;
  }
  .stat-card { padding: 2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-live-dot { animation: none; }
  .stat-card.reveal { transition-delay: 0ms; }
  .cta-btn-primary:hover { transform: none; }
  .cta-btn-primary:hover .cta-btn-glow { left: -100%; }
  .cta-btn-primary:hover .cta-btn-arrow { transform: translateX(0); }
  .cta-existing-link:hover i { transform: translateX(0); }
}

/* ===== LOGIN — split layout ===== */
.login-shell {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
  background: var(--bg-base);
}

/* ----- LEFT: brand showcase ----- */
.login-aside {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, var(--bg-primary), var(--bg-base));
  border-right: 1px solid var(--border);
}

.login-aside-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.login-mesh-1,
.login-mesh-2,
.login-mesh-3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.7;
}

.login-mesh-1 {
  width: 580px; height: 580px;
  top: -10%; left: -12%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.45), transparent 60%);
}

.login-mesh-2 {
  width: 460px; height: 460px;
  bottom: -10%; right: -8%;
  background: radial-gradient(circle, rgba(196, 181, 253, 0.35), transparent 60%);
}

.login-mesh-3 {
  width: 380px; height: 380px;
  top: 35%; left: 45%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18), transparent 60%);
  animation: meshDrift 16s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.1); }
}

.login-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
}

/* Floating mock ticket cards — contained right column */
.login-floats {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  pointer-events: none;
  z-index: 1;
}

.float-card {
  position: relative;
  width: 240px;
  padding: 0.95rem 1.1rem;
  background: rgba(22, 25, 34, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  will-change: transform;
}

[data-theme="light"] .float-card {
  background: rgba(255, 255, 255, 0.85);
}

.float-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 50%, var(--accent-3-glow));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
  pointer-events: none;
}

/* Per-card offsets give an organic, slightly-staggered look */
.float-card.f1 {
  align-self: flex-start;
  animation: floatY1 7.2s ease-in-out infinite;
}

.float-card.f2 {
  align-self: flex-end;
  animation: floatY2 8.4s ease-in-out -2s infinite;
}

.float-card.f3 {
  align-self: flex-start;
  margin-left: 1.25rem;
  animation: floatY3 6.6s ease-in-out -4s infinite;
}

@keyframes floatY1 {
  0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px))                         rotate(-1.5deg); }
  50%      { transform: translate(var(--px, 0px), calc(var(--py, 0px) - 14px))            rotate(-2deg); }
}

@keyframes floatY2 {
  0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px))                         rotate(1deg); }
  50%      { transform: translate(var(--px, 0px), calc(var(--py, 0px) + 12px))            rotate(1.6deg); }
}

@keyframes floatY3 {
  0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px))                         rotate(-0.5deg); }
  50%      { transform: translate(var(--px, 0px), calc(var(--py, 0px) - 10px))            rotate(-1deg); }
}

.float-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.float-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.float-card-pill.success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--accent-2-glow);
}

.float-card-pill.muted {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-color: var(--border);
}

.float-card-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.float-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.float-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.float-card-meta .float-card-avatar {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
}

/* Foreground brand content */
.login-aside-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.25rem 22rem 3.25rem 3.5rem;
  gap: 2rem;
  max-width: 100%;
}

.login-aside-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.login-aside-brand .login-aside-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.login-aside-middle {
  max-width: 480px;
}

.login-aside-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.login-aside-eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.login-aside-title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  background: linear-gradient(120deg, var(--text-primary) 0%, var(--text-primary) 30%, var(--accent) 50%, var(--accent-3) 70%, var(--text-primary) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleSweep 9s ease-in-out infinite;
}

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

.login-aside-tagline {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 420px;
}

/* ----- Feature cards (replaces old check-list) ----- */
.login-aside-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.login-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: rgba(22, 25, 34, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.25s var(--ease-out);
  overflow: hidden;
  /* CSS-only entrance with stagger */
  opacity: 0;
  animation: featureIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .login-feature {
  background: rgba(255, 255, 255, 0.6);
}

@keyframes featureIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.login-aside-features > .login-feature:nth-child(1) { animation-delay: 0.10s; }
.login-aside-features > .login-feature:nth-child(2) { animation-delay: 0.18s; }
.login-aside-features > .login-feature:nth-child(3) { animation-delay: 0.26s; }

/* Animated accent line that sweeps down across features (always-on ambient) */
.login-aside-features::before {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  height: 28%;
  background: linear-gradient(to bottom, transparent, var(--accent), var(--accent-3), transparent);
  border-radius: 2px;
  pointer-events: none;
  animation: featureScan 6s ease-in-out infinite;
  z-index: 1;
  opacity: 0.7;
}

@keyframes featureScan {
  0%   { top: -10%; opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { top: 72%; opacity: 0.8; }
  100% { top: 72%; opacity: 0; }
}

.login-aside-features {
  position: relative;
}

.login-feature::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent-3));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}

.login-feature:hover {
  transform: translateX(4px);
  background: rgba(28, 32, 48, 0.7);
  border-color: transparent;
}

[data-theme="light"] .login-feature:hover {
  background: rgba(255, 255, 255, 0.95);
}

.login-feature:hover::after { opacity: 0.8; }

.login-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 0.92rem;
  transition: all 0.3s var(--ease-out);
}

.login-feature:nth-child(1) .login-feature-icon {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent-glow);
}
.login-feature:nth-child(2) .login-feature-icon {
  background: rgba(196, 181, 253, 0.10);
  color: var(--accent-3);
  border-color: var(--accent-3-glow);
}
.login-feature:nth-child(3) .login-feature-icon {
  background: var(--success-bg);
  color: var(--accent-2);
  border-color: var(--accent-2-glow);
}

.login-feature:hover .login-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.login-feature-body {
  flex: 1;
  min-width: 0;
}

.login-feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.login-feature-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.login-feature-arrow {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.25s var(--ease-out);
}

.login-feature:hover .login-feature-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

/* ----- Foot trust badges (replaces old stat-mini block) ----- */
.login-aside-foot {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.login-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  transition: all 0.25s var(--ease-out);
  /* Subtle ambient glow loop */
  animation: badgeIdle 5s ease-in-out infinite;
}

.login-trust-badge:nth-child(1) { animation-delay: 0s; }
.login-trust-badge:nth-child(2) { animation-delay: -1.7s; }
.login-trust-badge:nth-child(3) { animation-delay: -3.4s; }

@keyframes badgeIdle {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
  50%      { box-shadow: 0 0 0 1px var(--accent-glow); border-color: var(--accent-glow); }
}

.login-trust-badge:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.login-trust-badge i {
  color: var(--accent);
  font-size: 0.78rem;
}

.login-trust-badge:nth-child(2) i { color: var(--accent-4); }
.login-trust-badge:nth-child(3) i { color: var(--accent-2); }

/* Backward compat — keep old classes available but unused in HTML */
.login-aside-list { list-style: none; display: none; }
.login-stat-mini-value, .login-stat-mini-label { display: none; }

/* ----- RIGHT: login form ----- */
.login-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}

.login-theme {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 2.75rem 2.25rem 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  --mx: 50%;
  --my: 0%;
  transform-style: preserve-3d;
  transition: box-shadow 0.35s var(--ease-out);
  will-change: transform;
  animation: cardGlow 5s ease-in-out infinite alternate;
}

@keyframes cardGlow {
  from { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(129, 140, 248, 0.06); }
  to   { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48), 0 8px 22px rgba(0, 0, 0, 0.24), 0 0 32px var(--accent-glow); }
}

.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 50%, var(--accent-3-glow));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.login-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--accent-glow), transparent 60%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s var(--ease-out);
}

.login-card > *:not(.login-spotlight) { position: relative; z-index: 2; }

.login-logo {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.4rem;
  border-radius: 14px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.login-logo::before,
.login-logo::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

.login-logo::before { animation: logoHalo 3.2s ease-out infinite; }
.login-logo::after  { animation: logoHalo 3.2s ease-out 1.6s infinite; }

@keyframes logoHalo {
  0%   { opacity: 0.55; transform: scale(0.92); border-width: 2px; }
  90%  { opacity: 0;    transform: scale(1.55); border-width: 1px; }
  100% { opacity: 0;    transform: scale(1.55); border-width: 1px; }
}

.login-logo svg,
.login-logo .discord-logo {
  width: 100%;
  height: 100%;
}

.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.login-headline {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  color: var(--text-primary);
}

.login-sub {
  color: var(--text-secondary);
  margin-bottom: 1.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.login-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px var(--accent-strong),
    0 8px 24px var(--accent-glow);
  transition: transform 0.2s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.login-cta:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px var(--accent-strong),
    0 16px 36px var(--accent-glow);
}

.login-cta:active { transform: translateY(0); }

.login-cta-shine {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
  animation: ctaShineAuto 5.5s ease-in-out 2s infinite;
}

@keyframes ctaShineAuto {
  0%, 78%, 100% { transform: translateX(-110%); }
  40%           { transform: translateX(110%); }
}

.login-cta:hover .login-cta-shine {
  animation: ctaShineHover 0.9s var(--ease-out);
}

@keyframes ctaShineHover {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

.login-cta .login-cta-arrow {
  margin-left: 0.15rem;
  transition: transform 0.3s var(--ease-out);
}

.login-cta:hover .login-cta-arrow { transform: translateX(3px); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.5rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin: 0 auto;
}

.login-trust i { color: var(--accent-2); }

.login-footer-text {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.login-footer-text a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.login-footer-text a:hover { color: var(--accent); }

/* Center column container helper for login-card content */
.login-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Backward compat: keep old wrapper class working if rendered somewhere */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  z-index: 0;
}

/* ----- Responsive ----- */
/* Below 1180px the right preview column is too narrow — hide floats so brand content gets full width */
@media (max-width: 1180px) {
  .login-floats { display: none; }
  .login-aside-content { padding-right: 3.5rem; }
}

@media (max-width: 960px) {
  .login-shell { grid-template-columns: 1fr; }

  .login-aside {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .login-aside-content {
    padding: 2.25rem 2rem;
    gap: 1.5rem;
  }

  .login-aside-foot { display: none; }

  .login-main { padding: 2rem 1.25rem 4rem; }
  .login-footer-text { position: static; margin-top: 1.5rem; }
}

@media (max-width: 640px) {
  .login-aside { padding-bottom: 1rem; }
  .login-aside-content { padding: 1.75rem 1.5rem 1rem; }
  .login-aside-title { font-size: 1.65rem; }
  .login-card { padding: 2rem 1.5rem 1.75rem; }
  .login-headline { font-size: 1.5rem; }
}

/* ===== STATUS PAGE ===== */
.status-page { padding-bottom: 4rem; }

/* Legacy header — kept for backward compat */
.status-header {
  text-align: center;
  padding: 5rem 2rem 2.5rem;
}

/* ===== Hero card ===== */
.status-hero {
  padding: 4.5rem 0 2.5rem;
  position: relative;
}

.status-hero-card {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.25rem 2.25rem 2rem;
  background:
    radial-gradient(800px 400px at 50% -20%, var(--accent-subtle), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.status-hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-glow), transparent 50%, var(--accent-3-glow));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}

.status-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
  transition: all var(--transition);
}

.status-indicator.offline {
  background: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.25);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-bg), 0 0 12px var(--success);
  flex-shrink: 0;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--success);
  opacity: 0;
  animation: dotRipple 2.4s ease-out infinite;
}

.status-dot.offline {
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-bg), 0 0 12px var(--danger);
}

.status-dot.offline::after {
  border-color: var(--danger);
}

.status-dot.small { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--success-bg); }
.status-dot.small::after { display: none; }

@keyframes dotRipple {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(2.6); }
}

.status-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--success);
  letter-spacing: -0.005em;
}

.status-indicator.offline .status-text { color: var(--danger); }

.status-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.status-meta-sep { opacity: 0.5; }

.status-headline {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.status-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

/* Metrics row */
.status-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  position: relative;
  z-index: 1;
}

.status-metric {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.status-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.status-metric:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}

.status-metric:hover::before { opacity: 1; }

.status-metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.status-metric-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.status-metric-value.good   { color: var(--success); }
.status-metric-value.ok     { color: var(--warning); }
.status-metric-value.bad    { color: var(--danger); }

.status-metric-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
}

.status-metric-foot {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  font-weight: 500;
}

.status-spark {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 0.5rem;
  opacity: 0.85;
}

.status-pill-large {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--accent-2-glow);
  letter-spacing: -0.005em;
}

.status-pill-large.offline {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.25);
}

/* ===== Section header (inline) ===== */
.section-header-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 3rem 0 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

.section-h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-h2-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ===== Shards ===== */
.shards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.shard-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  opacity: 0;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.shard-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--success);
  opacity: 0.7;
  transition: all var(--transition);
}

.shard-card.warn::before { background: var(--warning); }
.shard-card.bad::before { background: var(--danger); }

.shard-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.shard-card:hover::before { opacity: 1; }

.shard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.shard-name {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.shard-name i {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.shard-status {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.shard-status.online {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--accent-2-glow);
}

.shard-status.offline {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.25);
}

.shard-ping {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.shard-ping-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 3px;
  font-weight: 500;
}

.shard-progress {
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 999px;
  margin-top: 0.85rem;
  overflow: hidden;
  position: relative;
}

.shard-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #6ee7b7);
  border-radius: inherit;
  transition: width 0.6s var(--ease-out);
  width: 0;
}

.shard-card.warn .shard-progress-bar {
  background: linear-gradient(90deg, var(--warning), #fcd34d);
}

.shard-card.bad .shard-progress-bar {
  background: linear-gradient(90deg, var(--danger), #fca5a5);
}

@media (max-width: 768px) {
  .status-hero-card { padding: 1.75rem 1.25rem 1.5rem; border-radius: var(--radius-xl); }
  .status-metrics { grid-template-columns: 1fr 1fr; }
  .status-headline { font-size: 1.65rem; }
}

@media (max-width: 480px) {
  .status-metrics { grid-template-columns: 1fr; }
}

/* ===== 404 ===== */
.notfound-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
}

.notfound-digits {
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
}

.notfound-digits span { display: inline-block; opacity: 0; }

.notfound-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  opacity: 0;
}

.envelope-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  display: inline-block;
  color: var(--accent);
}

/* ===== FOOTER ===== */
.footer {
  padding: 4rem 0 1.75rem;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 300px at 20% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(600px 280px at 80% 100%, var(--accent-3-glow), transparent 70%);
  opacity: 0.35;
  z-index: -1;
}

.footer-simple {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer-simple a { color: var(--text-secondary); }

/* Footer top row — massive wordmark + status pill */
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.footer-wordmark-block {
  max-width: 520px;
}

.footer-wordmark {
  display: inline-block;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.3s var(--ease-out);
}

.footer-wordmark:hover { opacity: 0.85; }

.footer-tagline {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0.95rem 0 0;
  max-width: 460px;
}

/* Inline single-line nav (replaces 3-col grid) */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
}

.footer-nav a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  padding: 0.2rem 0;
  transition: color 0.25s var(--ease-out);
}

.footer-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

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

.footer-nav a:hover::after { transform: scaleX(1); }

.footer-nav-sep {
  color: var(--text-muted);
  opacity: 0.4;
  user-select: none;
  font-size: 0.85rem;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 0 1.25rem;
}

.footer-bottom {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.footer-copy { letter-spacing: 0.005em; }

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: var(--success-bg);
  border: 1px solid var(--accent-2-glow);
  border-radius: 999px;
  color: var(--accent-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: footerStatusPulse 2s ease-in-out infinite;
}

@keyframes footerStatusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

@media (max-width: 720px) {
  .footer-top {
    flex-direction: column;
    gap: 1.25rem;
  }
}

@media (max-width: 540px) {
  .footer-nav { font-size: 0.82rem; gap: 0.35rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-wordmark:hover { opacity: 1; }
  .footer-nav a:hover::after { transform: scaleX(0); }
  .footer-status-dot { animation: none; }
}

/* ===== UTILITY ===== */
.refresh-indicator {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 1rem;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
}

.skeleton-text { height: 12px; width: 80%; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 10px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .steps::before { display: none; }
  .showcase-content { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  body { font-size: 13.5px; }
  .navbar .container { padding: 0 1rem; }
  .navbar-nav, .navbar-links { display: none; }
  .hero { padding: 3rem 1rem; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 1.75rem; }
  .hero-cta { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
  .login-card { padding: 2rem 1.5rem; }
  .section { padding: 4rem 1rem; }
  .cta-card { padding: 3rem 1.5rem; }
  .cta-buttons { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
}