:root {
  --depth-ink: #10231e;
  --depth-teal: #0f6b7a;
  --depth-cyan: #8ecbd4;
  --depth-mint: #dcefe8;
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-surface-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(103, 148, 136, 0.26);
  --depth-shadow: 0 26px 72px rgba(14, 43, 36, 0.12);
  --depth-shadow-tight: 0 16px 38px rgba(12, 42, 36, 0.12);
  --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(142, 203, 212, 0.36), transparent 30vw),
    radial-gradient(circle at 94% 3%, rgba(220, 239, 232, 0.68), transparent 28vw),
    linear-gradient(180deg, #f8faf7 0%, var(--bg-color) 42%, #eff5f2 100%);
}

.site-shell {
  position: relative;
}

.site-header {
  border-bottom: 1px solid rgba(119, 150, 139, 0.18);
  box-shadow: 0 14px 38px rgba(13, 36, 29, 0.05);
}

.has-page-depth .site-header {
  background: color-mix(in srgb, var(--bg-color) 78%, rgba(255, 255, 255, 0.68));
  box-shadow: 0 18px 42px rgba(13, 36, 29, 0.08);
}

.brand-mark {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(15, 107, 122, 0.9), rgba(27, 127, 93, 0.95)),
    var(--accent-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px rgba(15, 107, 122, 0.18);
}

.brand-mark::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.34) 45%, transparent 68%);
  content: "";
  transform: translateX(-120%);
  transition: transform 0.75s var(--premium-ease);
}

.brand:hover .brand-mark::after {
  transform: translateX(120%);
}

.hero-dashboard {
  position: relative;
  isolation: isolate;
  padding: clamp(10px, 1.6vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(117, 155, 143, 0.18);
  border-radius: calc(var(--radius) + 10px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(232, 243, 239, 0.45)),
    radial-gradient(circle at 70% 24%, rgba(142, 203, 212, 0.2), transparent 38%);
  box-shadow: var(--depth-shadow);
  perspective: 1200px;
}

.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero-ambient::before,
.hero-ambient::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.hero-ambient::before {
  inset: -18% -10%;
  background:
    radial-gradient(circle at 66% 28%, rgba(15, 107, 122, 0.15), transparent 28%),
    radial-gradient(circle at 30% 78%, rgba(27, 127, 93, 0.13), transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.62), transparent 54%);
}

.hero-ambient::after {
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(15, 107, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 107, 122, 0.07) 1px, transparent 1px);
  background-position: center;
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 72% 36%, #000 0, transparent 65%);
}

.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.76;
  mix-blend-mode: multiply;
}

.hero-dashboard > :not(.hero-ambient) {
  position: relative;
  z-index: 1;
}

.hero-copy,
.kpi-card,
.ticker-panel,
.table-section,
.chart-section,
.method-card,
.faq-section,
.site-footer {
  border-color: var(--glass-border);
  background:
    linear-gradient(180deg, var(--glass-surface-strong), var(--glass-surface)),
    var(--surface);
  box-shadow: var(--depth-shadow-tight);
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .hero-copy,
  .kpi-card,
  .ticker-panel,
  .table-section,
  .chart-section,
  .method-card,
  .faq-section,
  .site-footer,
  .filter-panel {
    -webkit-backdrop-filter: blur(18px) saturate(122%);
    backdrop-filter: blur(18px) saturate(122%);
  }
}

.hero-copy {
  position: relative;
  overflow: hidden;
}

.hero-copy::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.82), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(142, 203, 212, 0.16), transparent 32%);
  content: "";
}

.hero-copy h1 {
  color: #14241f;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-subtitle,
.hero-method {
  color: color-mix(in srgb, var(--muted-color) 88%, var(--depth-ink));
}

.notice-box {
  border-color: rgba(154, 100, 23, 0.42);
  background: linear-gradient(180deg, rgba(255, 249, 234, 0.92), rgba(255, 247, 232, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.kpi-card,
.chart-card,
.method-card,
.details-kpi {
  transform-style: preserve-3d;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 247, 0.7)),
    var(--surface);
  transition: border-color 0.35s var(--premium-ease), box-shadow 0.35s var(--premium-ease), transform 0.35s var(--premium-ease);
}

.kpi-card::before,
.chart-card::before,
.method-card::before,
.details-kpi::before {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(142, 203, 212, 0.32), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%);
  content: "";
  pointer-events: none;
  transition: opacity 0.35s var(--premium-ease);
}

.kpi-card:hover::before,
.chart-card:hover::before,
.method-card:hover::before,
.details-kpi:hover::before {
  opacity: 1;
}

.kpi-card-primary {
  background:
    linear-gradient(155deg, rgba(220, 239, 242, 0.86), rgba(255, 255, 255, 0.72)),
    var(--surface);
}

.kpi-card strong,
.details-kpi strong {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
}

.premium-tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(0, var(--lift), 0);
  will-change: transform;
}

.premium-tilt.is-tilting {
  --lift: -2px;
}

.chart-card {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 251, 0.82)),
    var(--surface);
  transition: border-color 0.35s var(--premium-ease), box-shadow 0.35s var(--premium-ease), transform 0.35s var(--premium-ease);
}

.chart-card:hover {
  border-color: rgba(15, 107, 122, 0.32);
  box-shadow: 0 22px 52px rgba(14, 43, 36, 0.14);
  transform: translateY(-2px);
}

.details-kpi {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(238, 247, 243, 0.94), rgba(255, 255, 255, 0.76)),
    var(--surface-soft);
}

.btn-primary,
.btn-outline-secondary {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: border-color 0.25s var(--premium-ease), box-shadow 0.25s var(--premium-ease), transform 0.25s var(--premium-ease);
}

.btn-primary::after,
.btn-outline-secondary::after {
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.42) 44%, transparent 68%);
  content: "";
  transform: translateX(-130%);
  transition: transform 0.72s var(--premium-ease);
}

.btn-primary:hover,
.btn-outline-secondary:hover {
  transform: translateY(-1px);
}

.btn-primary:hover::after,
.btn-outline-secondary:hover::after {
  transform: translateX(130%);
}

.ticker-panel {
  position: relative;
}

.ticker-panel::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(15, 107, 122, 0.08), transparent 28%, rgba(142, 203, 212, 0.1));
  content: "";
  pointer-events: none;
}

.ticker-label,
.filter-chip,
.metric-cell,
.status-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.table-section,
.chart-section,
.method-card,
.faq-section {
  position: relative;
}

.table-section::before,
.chart-section::before,
.method-card::after,
.faq-section::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 203, 212, 0.58), transparent);
  content: "";
  pointer-events: none;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition: opacity 0.72s var(--premium-ease), transform 0.72s var(--premium-ease);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-3d-fallback .hero-ambient::before {
  opacity: 0.86;
}

.hero-3d-fallback .hero-3d-canvas {
  display: none;
}

@media (max-width: 1180px) {
  .hero-dashboard {
    padding: 12px;
  }

  .hero-3d-canvas {
    opacity: 0.46;
  }
}

@media (max-width: 780px), (pointer: coarse) {
  .site-header {
    min-width: 0;
  }

  .header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .header-actions .btn {
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
  }

  .hero-dashboard {
    min-width: 0;
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 246, 242, 0.72)),
      radial-gradient(circle at 78% 8%, rgba(142, 203, 212, 0.18), transparent 36%);
  }

  .hero-copy,
  .kpi-grid,
  .kpi-card,
  .notice-box {
    min-width: 0;
    max-width: 100%;
  }

  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-subtitle,
  .hero-method,
  .notice-box {
    overflow-wrap: anywhere;
  }

  .hero-3d-canvas {
    display: none;
  }

  .hero-ambient::after {
    opacity: 0.24;
    background-size: 34px 34px;
    mask-image: linear-gradient(#000, transparent 74%);
  }

  .premium-tilt,
  .premium-tilt.is-tilting {
    transform: none;
    will-change: auto;
  }

  .hero-copy,
  .kpi-card,
  .ticker-panel,
  .table-section,
  .chart-section,
  .method-card,
  .faq-section,
  .site-footer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 520px) {
  .hero-dashboard {
    border-radius: var(--radius);
  }

  .hero-copy,
  .kpi-card {
    box-shadow: 0 12px 26px rgba(14, 43, 36, 0.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d-canvas {
    display: none;
  }

  .brand-mark::after,
  .btn-primary::after,
  .btn-outline-secondary::after,
  .motion-ready .motion-reveal {
    transition: none !important;
  }

  .premium-tilt,
  .premium-tilt.is-tilting {
    transform: none !important;
    will-change: auto;
  }
}