/* Foundation */
body {
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--brand-2) 5%, transparent), transparent 28rem),
    radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--brand) 4%, transparent), transparent 30rem),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  color: var(--ink);
}

.lbl {
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
}

::selection {
  background: color-mix(in srgb, var(--brand) 24%, transparent);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 72%, transparent);
  outline-offset: 3px;
}

/* Sidebar */
.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--brand-2) 4%), var(--card));
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 32px color-mix(in srgb, var(--ink) 5%, transparent);
}

.side-head {
  color: var(--ink);
  letter-spacing: -0.025em;
  font-weight: 800;
}

.side-link {
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 10px);
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.side-link svg,
.side-link i {
  color: currentColor;
  transition: color 200ms ease, transform 200ms ease;
}

.side-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-2) 6%, var(--card));
  border-color: color-mix(in srgb, var(--brand-2) 14%, var(--line));
  transform: translateX(3px);
}

.side-link:hover svg,
.side-link:hover i {
  color: var(--brand-2);
  transform: scale(1.08);
}

.side-link.active {
  color: var(--brand-2);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-2) 13%, transparent), color-mix(in srgb, var(--brand-2) 5%, transparent));
  border-color: color-mix(in srgb, var(--brand-2) 22%, var(--line));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-2) 13%, transparent);
  font-weight: 800;
}

.side-link.active::before {
  content: "";
  background: var(--brand);
  border-radius: 999px;
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.card:hover {
  border-color: color-mix(in srgb, var(--brand-2) 24%, var(--line));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 10%, transparent);
}

.card-title {
  color: var(--ink);
  letter-spacing: -0.015em;
  font-weight: 800;
}

/* Hero */
.hero-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg, 22px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.24), transparent 13rem),
    radial-gradient(circle at 10% 120%, rgba(255,183,93,.3), transparent 18rem),
    linear-gradient(120deg, #e95d08 0%, var(--brand) 44%, #ff9a3d 100%);
  box-shadow:
    0 22px 44px color-mix(in srgb, var(--brand) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.32);
  position: relative;
  isolation: isolate;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.22) 48%, transparent 58%);
  transform: translateX(-45%) rotate(8deg);
  animation: hero-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  right: 6%;
  top: -4rem;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5rem rgba(255,255,255,.06), 0 0 0 3rem rgba(255,255,255,.035);
  transform: rotate(-18deg);
  pointer-events: none;
}

.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card p,
.hero-card .lbl {
  color: #fff;
}

.hero-card .hero-cta,
.hero-card .btn,
.hero-card .btn-outline {
  border-color: rgba(255,255,255,.48);
  box-shadow: 0 8px 18px rgba(112, 39, 0, .16), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}

.hero-card .hero-cta:hover,
.hero-card .btn:hover,
.hero-card .btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.2);
}

/* Stats */
.card.h-stat {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.card.h-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--brand-2) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-2) 28%, var(--line));
}

.hc-num {
  color: var(--brand-2);
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--brand-2), color-mix(in srgb, var(--brand-2) 55%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px color-mix(in srgb, var(--brand-2) 18%, transparent);
  animation: stat-glow 4s ease-in-out infinite;
}

.hc-icon {
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: var(--radius-sm, 10px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 15%, var(--card)), var(--card));
  color: var(--brand);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 7%, transparent);
}

/* Buttons */
.btn {
  border-radius: var(--radius-sm, 10px);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}

.btn.primary {
  background: linear-gradient(135deg, var(--brand-2), color-mix(in srgb, var(--brand-2) 78%, #071f54));
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-2) 24%, transparent);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand-2) 32%, transparent);
}

.btn-outline:hover,
.btn-sm:hover {
  transform: translateY(-2px);
}

.btn:active,
.btn.primary:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 16%, transparent);
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
}

th {
  color: var(--muted);
  background: color-mix(in srgb, var(--brand-2) 6%, var(--card));
  border-bottom: 2px solid color-mix(in srgb, var(--brand-2) 18%, var(--line));
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 800;
}

td {
  border-bottom: 1px solid var(--line);
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--brand-2) 3%, var(--card));
}

tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
}

td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Motion */
@keyframes hero-sheen {
  0%, 35% { transform: translateX(-45%) rotate(8deg); }
  65%, 100% { transform: translateX(45%) rotate(8deg); }
}

@keyframes stat-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}