/* =========================================
   Page-Specific Styles
   Premium Dark Trading Design System
   ========================================= */

/* ============================================
   Scroll-Globe Welcome Page
   Full-screen scroll-driven storytelling
   ============================================ */

/* ============================================
   Hero — full-viewport with 3D Earth inside
   The Earth is scoped to this section only.
   ============================================ */

.scroll-section--hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate; /* contain stacking context — globe cannot escape */
  background: var(--color-bg-deep);
}

/* Atmospheric radial glow behind the globe */
.hero-bg-radial {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 60% 50%, rgba(79, 172, 254, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(79, 172, 254, 0.05) 0%, transparent 50%);
  animation: heroRadialPulse 8s ease-in-out infinite;
}

@keyframes heroRadialPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* The Earth canvas — centred inside the hero, always square */
.hero-globe-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  border-radius: 50%;
  /* tight atmospheric rim glow — complements the Three.js haze sphere */
  box-shadow:
    0 0 30px rgba(79,  172, 254, 0.22),
    0 0 60px rgba(79,  172, 254, 0.10);
  animation: globeEntrance 1.4s var(--ease-out) 100ms forwards;
}

@keyframes globeEntrance {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  60%  { opacity: 0.7; }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
}

/* Hero text/content layered above the globe */
.hero-content-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  padding: var(--space-12) 0;
}

.scroll-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
  border: 1px solid rgba(79, 172, 254, 0.25);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  box-shadow: 0 0 16px rgba(79, 172, 254, 0.08);
  animation: fadeInDown var(--duration-slow) var(--ease-out) both;
}

.scroll-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

.hero-headline {
  font-size: clamp(var(--text-2xl), 5.6vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
  animation: fadeInUp var(--duration-slow) var(--ease-out) 80ms both;
}

.hero-headline-accent {
  background: linear-gradient(135deg, #4facfe 0%, #6fb8ff 50%, #c9a96e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  font-size: clamp(var(--text-base), 1.6vw, var(--text-md));
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-8);
  max-width: 480px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  animation: fadeInUp var(--duration-slow) var(--ease-out) 160ms both;
}

.hero-cta-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp var(--duration-slow) var(--ease-out) 240ms both;
}

/* Scroll hint at bottom of hero */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
  animation: fadeInUp var(--duration-slower) var(--ease-out) 600ms both;
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--color-text-muted), transparent);
  animation: float 2s ease-in-out infinite;
}

/* Hero entry animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 640px) {
  .scroll-section--hero { min-height: 92vh; }
  .hero-copy { padding: var(--space-8) 0; }
}

/* ============================================
   Welcome sections (below the hero)
   ============================================ */

.welcome-section {
  position: relative;
  z-index: 1;
  padding: var(--space-24) var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.welcome-section--alt {
  background: linear-gradient(180deg, transparent, rgba(13, 20, 36, 0.4), transparent);
  max-width: 100%;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.welcome-section--alt > .welcome-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.welcome-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.welcome-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.welcome-heading {
  font-size: clamp(var(--text-xl), 3.4vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 720px;
}

.welcome-lede {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 640px;
}

/* Two-column feature layout */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-10);
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Feature lists */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
}

@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; }
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.feature-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(79, 172, 254, 0.4);
}

/* ============================================
   Trade Journal Preview Card
   ============================================ */

.preview-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft);
}

.preview-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, rgba(79, 172, 254, 0.06), transparent 60%);
  pointer-events: none;
}

.preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.preview-card-symbol {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.preview-card-symbol-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  border: 1px solid rgba(79, 172, 254, 0.15);
}

.preview-card-symbol-text strong {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.preview-card-symbol-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.preview-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

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

.preview-card-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.preview-card-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

.preview-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.preview-card-row .label { color: var(--color-text-muted); }
.preview-card-row .value {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

/* ============================================
   Analytics Preview
   ============================================ */

.preview-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

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

.preview-metric {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transition:
    border-color var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft);
}

.preview-metric:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
}

.preview-metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
  font-weight: var(--weight-medium);
}

.preview-metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.preview-metric-value.profit { color: var(--color-profit); }
.preview-metric-value.loss   { color: var(--color-loss); }

/* Equity preview chart */
.preview-equity {
  margin-top: var(--space-6);
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  height: 220px;
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.preview-equity svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Win/Loss distribution */
.preview-distribution {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) { .preview-distribution { grid-template-columns: 1fr; } }

.preview-dist-card {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.preview-dist-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  margin: var(--space-3) 0 var(--space-2);
  overflow: hidden;
}

.preview-dist-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
}

.preview-dist-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ============================================
   Performance Cards
   ============================================ */

.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 900px) { .perf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perf-grid { grid-template-columns: 1fr; } }

.perf-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
  overflow: hidden;
}

.perf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-soft);
  pointer-events: none;
}

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

.perf-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.perf-card-icon.good { background: var(--color-profit-dim); color: var(--color-profit); }
.perf-card-icon.bad  { background: var(--color-loss-dim);   color: var(--color-loss); }
.perf-card-icon.info { background: var(--color-accent-dim); color: var(--color-accent); }

.perf-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.perf-card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 4px;
}

.perf-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}

/* ============================================
   Screenshot Review
   ============================================ */

.screenshot-review {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 900px) { .screenshot-review { grid-template-columns: 1fr; } }

.screenshot-frame {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

.screenshot-frame:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card);
}

.screenshot-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.screenshot-frame .placeholder-chart {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.85;
}

.screenshot-meta {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.screenshot-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.screenshot-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.screenshot-meta-row .label { color: var(--color-text-muted); }
.screenshot-meta-row .value { color: var(--color-text-primary); font-family: var(--font-mono); font-weight: var(--weight-medium); }
.screenshot-meta-row .value.profit { color: var(--color-profit); }
.screenshot-meta-row .value.loss   { color: var(--color-loss); }

/* ============================================
   Final CTA Section
   ============================================ */

.final-cta {
  text-align: center;
  padding: var(--space-24) var(--space-8);
  position: relative;
  z-index: 1;
}

.final-cta .welcome-heading { margin: 0 auto var(--space-4); }
.final-cta .welcome-lede    { margin: 0 auto var(--space-8); text-align: center; }

@media (max-width: 640px) {
  .welcome-section { padding: var(--space-16) var(--space-4); }
  .final-cta { padding: var(--space-16) var(--space-4); }
}

/* ============================================
   Overview / Dashboard
   Premium 3D Trading Dashboard
   ============================================ */

.overview-dashboard {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg-base);
  padding: var(--space-6) var(--space-6) var(--space-12);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Atmospheric radial background */
.overview-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(79, 172, 254, 0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(99, 102, 241, 0.04), transparent 60%),
    radial-gradient(600px 400px at 50% 80%, rgba(34, 197, 94, 0.02), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.overview-dashboard > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Welcome Strip
   ============================================ */

.overview-welcome-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.overview-welcome-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.4), transparent);
}

.welcome-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.welcome-greeting {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.greeting-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  font-weight: var(--weight-normal);
}

.user-name {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-date-time {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.time-separator {
  color: var(--color-border-strong);
}

.live-clock {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  min-width: 70px;
  display: inline-block;
}

.welcome-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.welcome-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   KPI Cards Grid
   ============================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

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

.kpi-card {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
  perspective: 1000px;
  transform-style: preserve-3d;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.3), transparent);
  opacity: 0.6;
}

.kpi-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.kpi-card:hover {
  border-color: var(--color-border-hover);
  transform: perspective(1000px) translateZ(8px) translateY(-2px);
  box-shadow: var(--shadow-card-hover), 0 0 32px rgba(79, 172, 254, 0.08);
}

.kpi-card-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon--pnl {
  background: var(--color-profit-dim);
  color: var(--color-profit);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.kpi-icon--winrate {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border: 1px solid rgba(79, 172, 254, 0.15);
}

.kpi-icon--trades {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

.kpi-icon--rr {
  background: var(--color-warning-dim);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.kpi-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-value.profit { color: var(--color-profit); }
.kpi-value.loss { color: var(--color-loss); }

.kpi-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.kpi-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  flex-wrap: wrap;
}

.change-badge {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.change-badge.profit {
  background: var(--color-profit-dim);
  color: var(--color-profit);
}

.change-badge.loss {
  background: var(--color-loss-dim);
  color: var(--color-loss);
}

.change-period {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.kpi-with-chart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kpi-mini-donut {
  display: flex;
  align-items: center;
}

.kpi-trendline, .kpi-sparkline {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  opacity: 0.85;
}

.kpi-trendline svg, .kpi-sparkline svg {
  display: block;
}

.kpi-mini-bar {
  margin-top: var(--space-2);
  width: 100%;
}

.mini-bar-track {
  width: 100%;
  height: 4px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: width 1.2s var(--ease-out);
}

/* ============================================
   Main Grid (2 columns)
   ============================================ */

.main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

.main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* ============================================
   Dashboard Cards (common)
   ============================================ */

.dashboard-card {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft);
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.2), transparent);
}

.dashboard-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.card-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

.card-subtitle {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.card-link {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-soft);
}

.card-link:hover {
  background: var(--color-accent-dim);
}

.equity-current-value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-profit);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Equity Curve Chart
   ============================================ */

.equity-chart-container {
  position: relative;
  width: 100%;
  height: 260px;
}

.equity-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.chart-axis-label {
  fill: var(--color-text-muted);
  font-size: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.equity-line {
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.4));
}

.equity-marker {
  filter: drop-shadow(0 0 8px var(--color-profit));
  animation: pulse-marker 2s ease-in-out infinite;
}

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

.equity-tooltip {
  position: absolute;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--text-xs);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
}

.tooltip-date {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.tooltip-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.tooltip-value.profit { color: var(--color-profit); }
.tooltip-value.loss { color: var(--color-loss); }

/* ============================================
   Recent Trades Table
   ============================================ */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--space-3));
  padding: 0 var(--space-3);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.data-table thead th {
  text-align: left;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr {
  transition: background var(--duration-fast) var(--ease-soft);
}

.data-table tbody tr:hover {
  background: rgba(120, 145, 190, 0.04);
}

.data-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.trade-symbol {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
}

.direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.direction-badge.long {
  background: var(--color-profit-dim);
  color: var(--color-profit);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.direction-badge.short {
  background: var(--color-loss-dim);
  color: var(--color-loss);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.trade-pnl, .trade-rr {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.trade-pnl.profit, .trade-rr.profit { color: var(--color-profit); }
.trade-pnl.loss, .trade-rr.loss { color: var(--color-loss); }

.trade-time {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

/* ============================================
   Strategy Bars
   ============================================ */

.strategy-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.strategy-bar-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.strategy-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.strategy-name {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.strategy-pnl {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.strategy-pnl.profit { color: var(--color-profit); }
.strategy-pnl.loss { color: var(--color-loss); }

.strategy-bar-track {
  width: 100%;
  height: 6px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.strategy-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1.2s var(--ease-out);
}

.strategy-bar-fill.profit {
  background: linear-gradient(90deg, var(--color-profit), var(--color-profit-bright));
  box-shadow: 0 0 8px var(--color-profit-glow);
}

.strategy-bar-fill.loss {
  background: linear-gradient(90deg, var(--color-loss), var(--color-loss-bright));
  box-shadow: 0 0 8px var(--color-loss-glow);
}

.strategy-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================
   Session Bars
   ============================================ */

.session-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.session-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.session-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.session-value.profit { color: var(--color-profit); }
.session-value.loss { color: var(--color-loss); }

.session-bar-track {
  width: 100%;
  height: 6px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.session-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1.2s var(--ease-out);
}

.session-bar-fill.profit {
  background: linear-gradient(90deg, var(--color-profit), var(--color-profit-bright));
  box-shadow: 0 0 6px var(--color-profit-glow);
}

.session-bar-fill.loss {
  background: linear-gradient(90deg, var(--color-loss), var(--color-loss-bright));
  box-shadow: 0 0 6px var(--color-loss-glow);
}

.session-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================
   Quick Stats
   ============================================ */

.quick-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: rgba(6, 12, 24, 0.4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.quick-stat-item:hover {
  border-color: var(--color-border);
}

.quick-stat-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.quick-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.quick-stat-value.profit { color: var(--color-profit); }
.quick-stat-value.loss { color: var(--color-loss); }

.quick-stat-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================
   Bottom Grid (Heatmap + Psychology)
   ============================================ */

.bottom-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-4);
}

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

/* ============================================
   Calendar Heatmap
   ============================================ */

.heatmap-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.heatmap-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 2px;
}

.heatmap-day-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-align: center;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heatmap-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  position: relative;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-soft);
  min-height: 32px;
}

.heatmap-cell.empty {
  background: transparent;
  border: 1px dashed var(--color-border-soft);
  opacity: 0.4;
  cursor: default;
}

.heatmap-cell:not(.empty):hover {
  transform: scale(1.08);
  z-index: 5;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-dim);
}

.heatmap-cell.profit.low {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.2);
  color: var(--color-profit);
}

.heatmap-cell.profit.medium {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--color-profit);
}

.heatmap-cell.profit.high {
  background: rgba(34, 197, 94, 0.55);
  border-color: rgba(34, 197, 94, 0.6);
  color: #fff;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.heatmap-cell.loss.low {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--color-loss);
}

.heatmap-cell.loss.medium {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--color-loss);
}

.heatmap-cell.loss.high {
  background: rgba(239, 68, 68, 0.55);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.heatmap-cell::after {
  content: attr(data-date) ': ' attr(data-pnl);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--text-2xs);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-soft);
  z-index: 10;
  box-shadow: var(--shadow-md);
  font-weight: var(--weight-medium);
}

.heatmap-cell:hover::after {
  opacity: 1;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  justify-content: flex-end;
}

.legend-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.legend-scale {
  display: flex;
  gap: 3px;
}

.legend-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--color-border-soft);
}

.legend-cell.loss.high { background: rgba(239, 68, 68, 0.55); border-color: rgba(239, 68, 68, 0.6); }
.legend-cell.loss.medium { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.35); }
.legend-cell.loss.low { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.2); }
.legend-cell.empty { background: var(--color-bg-input); }
.legend-cell.profit.low { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.2); }
.legend-cell.profit.medium { background: rgba(34, 197, 94, 0.3); border-color: rgba(34, 197, 94, 0.35); }
.legend-cell.profit.high { background: rgba(34, 197, 94, 0.55); border-color: rgba(34, 197, 94, 0.6); }

/* ============================================
   Psychology Stats
   ============================================ */

.psych-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.psych-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(6, 12, 24, 0.5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.psych-card:hover {
  border-color: var(--color-border);
}

.psych-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.psych-card--good .psych-icon {
  background: var(--color-profit-dim);
  color: var(--color-profit);
}

.psych-card--bad .psych-icon {
  background: var(--color-loss-dim);
  color: var(--color-loss);
}

.psych-card--warning .psych-icon {
  background: var(--color-warning-dim);
  color: var(--color-warning);
}

.psych-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.psych-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

.psych-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.psych-value.profit { color: var(--color-profit); }
.psych-value.loss { color: var(--color-loss); }

.psych-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================
   Entry Animations
   ============================================ */

[data-animate] {
  opacity: 0;
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-animate="fade-in"] {
  transform: translateY(8px);
}

[data-animate="slide-up"] {
  transform: translateY(24px);
}

[data-animate="slide-up"].animated {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-in"].animated {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  .overview-dashboard {
    padding: var(--space-4);
  }

  .overview-welcome-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }

  .welcome-actions {
    width: 100%;
  }

  .welcome-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .kpi-value {
    font-size: var(--text-xl);
  }

  .equity-chart-container {
    height: 200px;
  }

  .heatmap-cell {
    min-height: 28px;
    font-size: 10px;
  }
}

/* ============================================
   Chart Area
   ============================================ */

.chart-area {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.chart-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(79, 172, 254, 0.03), transparent 70%);
  pointer-events: none;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.chart-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.chart-controls {
  display: flex;
  gap: var(--space-2);
}

.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ============================================
   Activity Feed
   ============================================ */

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
  transition: background var(--duration-fast) var(--ease-soft);
}

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

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-content { flex: 1; }
.activity-title {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  margin-bottom: 2px;
}
.activity-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Trade Form
   ============================================ */

.trade-form-section {
  margin-bottom: var(--space-6);
}

.trade-form-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Screenshot Upload */
.screenshot-upload {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-soft),
    background var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
  text-align: center;
  min-height: 140px;
  background: rgba(120, 145, 190, 0.02);
}

.screenshot-upload:hover,
.screenshot-upload.drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.06);
}

.screenshot-upload-icon {
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-soft);
}

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

.screenshot-upload-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.screenshot-upload-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.screenshot-preview {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.screenshot-preview img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  background: var(--color-bg-input);
  display: block;
}

.screenshot-preview-remove {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

/* ============================================
   Analytics
   ============================================ */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.analytics-grid-wide {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 1280px) {
  .analytics-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid-wide { grid-template-columns: 1fr; }
  .analytics-charts-row { grid-template-columns: 1fr !important; }
}

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

/* Performance bar */
.perf-bar-wrap {
  margin-bottom: var(--space-4);
}

.perf-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
}

.perf-bar-name {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.perf-bar-value {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.perf-bar-track {
  height: 6px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ============================================
   Settings
   ============================================ */

.settings-section {
  margin-bottom: var(--space-8);
  max-width: 600px;
}

.settings-section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-snug);
}

.settings-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.settings-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

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

.settings-item-info {}
.settings-item-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.settings-item-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.settings-item-control {
  flex-shrink: 0;
}

/* ============================================
   3D Canvas Wrapper
   ============================================ */

.canvas-3d-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.canvas-3d-wrap canvas {
  display: block;
  width: 100%;
  height: 360px;
}

/* ============================================
   Search & Filter Bar
   ============================================ */

.filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  align-items: center;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-wrap .form-input {
  padding-left: 38px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ============================================
   Scroll-Globe Welcome Page
   Full-screen scroll-driven storytelling
   ============================================ */

.landing {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-base);
  overflow: visible;
}

/* Atmospheric dark gradient for the scroll-globe page */
.landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1400px 800px at 70% 20%, rgba(79, 172, 254, 0.05), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(99, 102, 241, 0.04), transparent 60%),
    var(--color-bg-base);
  pointer-events: none;
  z-index: 0;
}

/* ---- Scroll Progress Bar (top) ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  right: 0;
  height: 2px;
  background: rgba(120, 145, 190, 0.05);
  z-index: 50;
  pointer-events: none;
}

.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
  box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
  transition: width 80ms linear;
}

/* ---- Right-side Navigation Dots ---- */
.scroll-nav {
  position: fixed;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
}

@media (max-width: 768px) {
  .scroll-nav { right: var(--space-3); gap: var(--space-2); }
}

.scroll-nav-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(120, 145, 190, 0.25);
  cursor: pointer;
  padding: 0;
  transition: all var(--duration-base) var(--ease-soft);
}

.scroll-nav-dot::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transform: translate(-50%, -50%);
  transition: all var(--duration-base) var(--ease-soft);
}

.scroll-nav-dot:hover {
  border-color: var(--color-accent);
  background: rgba(79, 172, 254, 0.08);
}

.scroll-nav-dot:hover::before {
  background: var(--color-accent);
}

.scroll-nav-dot.active {
  border-color: var(--color-accent);
  background: rgba(79, 172, 254, 0.12);
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.08);
}

.scroll-nav-dot.active::before {
  background: var(--color-accent);
  width: 6px;
  height: 6px;
}

.scroll-nav-tooltip {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all var(--duration-base) var(--ease-soft);
  letter-spacing: var(--tracking-snug);
  box-shadow: var(--shadow-md);
}

.scroll-nav-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--color-border-strong);
}

.scroll-nav-dot:hover .scroll-nav-tooltip,
.scroll-nav-dot.active .scroll-nav-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ---- Section base ---- */
.scroll-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-24) var(--space-8);
  width: 100%;
}

.scroll-section--alt {
  background: linear-gradient(180deg, transparent, rgba(11, 19, 34, 0.4), transparent);
}

.scroll-section--cta {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

@media (max-width: 768px) {
  .scroll-section {
    padding: var(--space-16) var(--space-4);
  }
}

.scroll-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.scroll-content--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.scroll-content--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 980px) {
  .scroll-content--two-col { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ---- Eyebrow label ---- */
.scroll-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
  border: 1px solid rgba(79, 172, 254, 0.25);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  box-shadow: 0 0 16px rgba(79, 172, 254, 0.08);
  width: fit-content;
}

.scroll-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
  animation: breathe 2.4s ease-in-out infinite;
}

.scroll-content--centered .scroll-eyebrow { margin-inline: auto; }

/* ---- Headlines ---- */
.scroll-headline {
  font-size: clamp(var(--text-2xl), 5.6vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
  margin-bottom: var(--space-5);
  max-width: 18ch;
}

.scroll-headline-sm {
  font-size: clamp(var(--text-xl), 4.4vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.scroll-headline-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 50%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.scroll-content--centered .scroll-headline,
.scroll-content--centered .scroll-headline-sm {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---- Lede (subtitle) ---- */
.scroll-lede {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.scroll-lede-sm {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 480px;
}

.scroll-content--centered .scroll-lede,
.scroll-content--centered .scroll-lede-sm {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---- CTAs ---- */
.scroll-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.scroll-content--centered .scroll-actions { justify-content: center; }

.scroll-cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ---- Scroll hint at hero bottom ---- */
.scroll-hint {
  position: absolute;
  bottom: -16vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.scroll-hint-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--color-text-muted), transparent);
  animation: float 2.4s ease-in-out infinite;
}

/* ---- Feature list ---- */
.scroll-feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
}

@media (max-width: 640px) { .scroll-feature-list { grid-template-columns: 1fr; } }

.scroll-feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.scroll-feature-list li svg {
  color: var(--color-accent);
  flex-shrink: 0;
  background: var(--color-accent-dim);
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  border: 1px solid rgba(79, 172, 254, 0.2);
}

/* ---- Preview card (Journal section) ---- */
.scroll-preview-card {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft);
}

.scroll-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 0% 0%, rgba(79, 172, 254, 0.08), transparent 60%);
  pointer-events: none;
}

.scroll-preview-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.scroll-preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.scroll-preview-card-symbol {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.scroll-preview-symbol-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  border: 1px solid rgba(79, 172, 254, 0.18);
}

.scroll-preview-symbol-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.scroll-preview-symbol-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.scroll-preview-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 480px) {
  .scroll-preview-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.scroll-preview-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scroll-preview-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}

.scroll-preview-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.scroll-preview-value.mono { font-family: var(--font-mono); }

.scroll-preview-card-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ---- Metrics strip (Analytics section) ---- */
.scroll-metrics-strip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8);
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  width: 100%;
  max-width: 880px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.scroll-metrics-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, rgba(79, 172, 254, 0.06), transparent 60%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .scroll-metrics-strip { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5); }
}

.scroll-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 0;
}

.scroll-metric-value {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.scroll-metric-value.profit { color: var(--color-profit); }
.scroll-metric-value.loss   { color: var(--color-loss); }

.scroll-metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.scroll-metric-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .scroll-metric-divider { display: none; }
  .scroll-metric { flex: 1 1 calc(50% - var(--space-2)); }
}

/* ---- Chart preview (Analytics) ---- */
.scroll-chart-preview {
  margin-top: var(--space-8);
  width: 100%;
  max-width: 880px;
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  height: 240px;
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
}

.scroll-chart-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Distribution strip (Win/Loss) ---- */
.scroll-dist-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  width: 100%;
  max-width: 880px;
}

@media (max-width: 640px) { .scroll-dist-strip { grid-template-columns: 1fr; } }

.scroll-dist-item {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.scroll-dist-item:hover { border-color: var(--color-border-hover); }

.scroll-dist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.scroll-dist-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.scroll-dist-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px currentColor;
}

.scroll-dist-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}

/* ---- Performance grid ---- */
.scroll-perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  width: 100%;
  max-width: 980px;
}

@media (max-width: 900px) { .scroll-perf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .scroll-perf-grid { grid-template-columns: 1fr; } }

.scroll-perf-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

.scroll-perf-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.scroll-perf-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.scroll-perf-card-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.scroll-perf-card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.scroll-perf-card-meta {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

/* ---- Chart frame (Review section) ---- */
.scroll-chart-frame {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

.scroll-chart-frame:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
}

.scroll-chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Review meta table ---- */
.scroll-review-meta {
  margin-top: var(--space-6);
  background: rgba(11, 19, 34, 0.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
}

.scroll-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
}

.scroll-review-row:last-child { border-bottom: none; }

.scroll-review-row span:first-child {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

/* ============================================================
   Landing page — scroll-reveal animations
   ============================================================ */

/* Scroll-reveal animation targets */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal="fade"] {
  transform: translateY(16px);
}

[data-reveal="up"] {
  transform: translateY(32px);
}

[data-reveal="scale"] {
  transform: scale(0.97);
}

[data-reveal="left"] {
  transform: translateX(-24px);
}

[data-reveal="right"] {
  transform: translateX(24px);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal-stagger].revealed > *:nth-child(1)  { transition-delay:  0ms; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(2)  { transition-delay: 60ms; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(3)  { transition-delay: 120ms; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(4)  { transition-delay: 180ms; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(5)  { transition-delay: 240ms; opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(6)  { transition-delay: 300ms; opacity: 1; transform: none; }

/* ============================================================
   Section inner container
   ============================================================ */

.scroll-section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.scroll-section-inner--centered {
  align-items: center;
  text-align: center;
}

/* ============================================================
   Section headings (variants for different naming patterns)
   ============================================================ */

.scroll-heading {
  font-size: clamp(var(--text-xl), 3.8vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 20ch;
}

.scroll-heading-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-bright) 60%, #5eead4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   Section body text
   ============================================================ */

.scroll-body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 560px;
}

/* ============================================================
   Journal Preview Card
   ============================================================ */

.journal-preview-card {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
  margin-top: var(--space-8);
}

.journal-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 0% 0%, rgba(79, 172, 254, 0.06), transparent 60%);
  pointer-events: none;
}

.journal-preview-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.journal-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.journal-preview-symbol {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.journal-preview-symbol-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  border: 1px solid rgba(79, 172, 254, 0.2);
  flex-shrink: 0;
}

.journal-preview-symbol-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.journal-preview-symbol-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.journal-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

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

.journal-preview-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.journal-preview-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}

.journal-preview-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
}

.journal-preview-value.mono { font-family: var(--font-mono); }

.journal-preview-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   Analytics — Metrics Strip + Chart
   ============================================================ */

.analytics-metrics-strip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  width: 100%;
  max-width: 880px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.analytics-metrics-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, rgba(79, 172, 254, 0.05), transparent 60%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .analytics-metrics-strip { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5); }
}

.analytics-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 0;
}

.analytics-metric-value {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.analytics-metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

.analytics-metric-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .analytics-metric-divider { display: none; }
  .analytics-metric { flex: 1 1 calc(50% - var(--space-2)); }
}

.analytics-chart {
  margin-top: var(--space-6);
  width: 100%;
  max-width: 880px;
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
}

.analytics-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Analytics — Win/Loss Distribution
   ============================================================ */

.distribution-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
  width: 100%;
  max-width: 880px;
}

@media (max-width: 640px) {
  .distribution-strip { grid-template-columns: 1fr; }
}

.dist-card {
  background: rgba(11, 19, 34, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.dist-card:hover { border-color: var(--color-border-hover); }

.dist-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.dist-card-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.dist-card-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s var(--ease-out);
}

.dist-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}

/* ============================================================
   Performance — 2-column grid cards
   ============================================================ */

.perf-grid-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  width: 100%;
  max-width: 900px;
}

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

.perf-card-2 {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  transition:
    border-color var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

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

.perf-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.perf-card-icon--good {
  background: var(--color-profit-dim);
  color: var(--color-profit);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.perf-card-icon--bad {
  background: var(--color-loss-dim);
  color: var(--color-loss);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.perf-card-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.perf-card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.perf-card-meta {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

/* ============================================================
   Review — chart + details layout
   ============================================================ */

.review-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  margin-top: var(--space-8);
  width: 100%;
  max-width: 900px;
  align-items: start;
}

@media (max-width: 900px) {
  .review-layout { grid-template-columns: 1fr; }
}

.review-chart-frame {
  background: rgba(11, 19, 34, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

.review-chart-frame:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
}

.review-chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

.review-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.review-meta-table {
  background: rgba(11, 19, 34, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
}

.review-meta-row:last-child { border-bottom: none; }

.review-meta-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.review-meta-value {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================================
   Keyframe animations
   ============================================================ */

@keyframes breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-accent); }
  50%       { opacity: 0.7; box-shadow: 0 0 12px var(--color-accent); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

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

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


/* ============================================================
   1. FLOATING 3D STAT CARDS - hero section
   ============================================================ */

.hero-stat-cards {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.stat-card {
  position: absolute;
  background: rgba(11, 19, 34, 0.62);
  border: 1px solid rgba(120, 145, 190, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(120, 145, 190, 0.08) inset, 0 0 20px rgba(79, 172, 254, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  cursor: default;
  will-change: transform;
  transform-style: preserve-3d;
  opacity: 0;
}

.stat-card--1 { top: 18%; right: 12%; }
.stat-card--2 { top: 36%; right: 5%; }
.stat-card--3 { top: 8%;  right: 20%; }
.stat-card--4 { top: 50%; right: 18%; }

@keyframes statCardFloat {
  0%   { transform: translateY(0px)    translateX(0px)  rotate(0deg); }
  25%  { transform: translateY(-12px)  translateX(4px)  rotate(0.8deg); }
  50%  { transform: translateY(-6px)   translateX(-3px) rotate(-0.5deg); }
  75%  { transform: translateY(-16px)  translateX(2px)  rotate(0.4deg); }
  100% { transform: translateY(0px)    translateX(0px)  rotate(0deg); }
}

/* Stack float + entrance animations; add composition so transforms layer */
.stat-card { animation-composition: add; }

.stat-card--1 { animation: statCardFloat 7s   ease-in-out infinite, statCardEntrance 700ms var(--ease-out) both; }
.stat-card--2 { animation: statCardFloat 8.5s ease-in-out infinite, statCardEntrance 700ms var(--ease-out) both; animation-delay: -2s, 140ms; }
.stat-card--3 { animation: statCardFloat 6.5s ease-in-out infinite, statCardEntrance 700ms var(--ease-out) both; animation-delay: -4.5s, 280ms; }
.stat-card--4 { animation: statCardFloat 9s   ease-in-out infinite, statCardEntrance 700ms var(--ease-out) both; animation-delay: -1.2s, 420ms; }

@keyframes statCardEntrance {
  0%   { opacity: 0; transform: translateY(24px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.stat-card-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-dim);
  border: 1px solid rgba(79, 172, 254, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.stat-card-icon--profit {
  background: var(--color-profit-dim);
  border-color: rgba(34, 197, 94, 0.18);
  color: var(--color-profit);
}

.stat-card-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-card-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-medium);
}

@media (max-width: 900px) {
  .hero-stat-cards { display: none; }
}

/* ============================================================
   3. CURSOR-TRACKING GLOW - hero section
   ============================================================ */

.hero-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

.hero-cursor-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at center, rgba(79, 172, 254, 0.14) 0%, rgba(79, 172, 254, 0.06) 30%, rgba(79, 172, 254, 0.02) 60%, transparent 80%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   2. PARALLAX DECORATIVE ELEMENTS - per section
   ============================================================ */

.section-parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}

.scroll-section-inner {
  position: relative;
  z-index: 1;
}

.parallax-deco--journal {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 420px;
  height: 420px;
}

.deco-glow-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(79, 172, 254, 0.12);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(79, 172, 254, 0.06), inset 0 0 40px rgba(79, 172, 254, 0.04);
  animation: decoRingPulse 5s ease-in-out infinite;
}

@keyframes decoRingPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   box-shadow: 0 0 60px rgba(79, 172, 254, 0.10), inset 0 0 60px rgba(79, 172, 254, 0.07); }
}

.deco-star {
  position: absolute;
  top: 8%; right: 12%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.95), transparent 70%);
  box-shadow: 0 0 16px rgba(79, 172, 254, 0.7);
  animation: decoStarBlink 3s ease-in-out infinite;
}

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

.deco-grid-lines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 0.15;
}

.deco-grid-lines span { border: 1px solid rgba(79, 172, 254, 0.3); }

.parallax-deco--analytics {
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.parallax-deco--analytics svg { width: 100%; height: 100%; display: block; }

.parallax-deco--performance { position: absolute; inset: 0; }

.deco-shape { position: absolute; opacity: 0.08; border: 1px solid rgba(79, 172, 254, 0.5); }

.deco-hexagon {
  top: 15%; right: 8%;
  width: 120px; height: 120px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(79, 172, 254, 0.4);
  animation: decoHexRotate 24s linear infinite;
}

.deco-triangle {
  bottom: 20%; right: 25%;
  width: 0; height: 0;
  border: none;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid rgba(79, 172, 254, 0.18);
  animation: decoTriFloat 8s ease-in-out infinite;
}

.deco-circle {
  top: 35%; right: 30%;
  width: 80px; height: 80px;
  border-radius: 50%;
  animation: decoShapeFloat 10s ease-in-out infinite;
}

.deco-diamond {
  top: 55%; right: 5%;
  width: 60px; height: 60px;
  transform: rotate(45deg);
  background: rgba(79, 172, 254, 0.08);
  animation: decoShapeFloat 7s ease-in-out infinite reverse;
}

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

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

@keyframes decoShapeFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(-18px) rotate(45deg); }
}

.parallax-deco--review { position: absolute; inset: 0; opacity: 0.6; }
.parallax-deco--review svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   4. ENHANCED SCROLL REVEAL - stagger for feature lists & metrics
   ============================================================ */

.feature-list[data-reveal-stagger] li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}

.feature-list[data-reveal-stagger].revealed li:nth-child(1) { opacity: 1; transform: none; transition-delay:   0ms; }
.feature-list[data-reveal-stagger].revealed li:nth-child(2) { opacity: 1; transform: none; transition-delay:  70ms; }
.feature-list[data-reveal-stagger].revealed li:nth-child(3) { opacity: 1; transform: none; transition-delay: 140ms; }
.feature-list[data-reveal-stagger].revealed li:nth-child(4) { opacity: 1; transform: none; transition-delay: 210ms; }
.feature-list[data-reveal-stagger].revealed li:nth-child(5) { opacity: 1; transform: none; transition-delay: 280ms; }
.feature-list[data-reveal-stagger].revealed li:nth-child(6) { opacity: 1; transform: none; transition-delay: 350ms; }

.analytics-metrics-strip[data-reveal-stagger] .analytics-metric {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}

.analytics-metrics-strip[data-reveal-stagger] .analytics-metric-divider {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric:nth-child(1) { opacity: 1; transform: none; transition-delay:   0ms; }
.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric:nth-child(3) { opacity: 1; transform: none; transition-delay: 100ms; }
.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric:nth-child(5) { opacity: 1; transform: none; transition-delay: 200ms; }
.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric:nth-child(7) { opacity: 1; transform: none; transition-delay: 300ms; }

.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric-divider:nth-child(2) { opacity: 1; transition-delay:  60ms; }
.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric-divider:nth-child(4) { opacity: 1; transition-delay: 160ms; }
.analytics-metrics-strip[data-reveal-stagger].revealed .analytics-metric-divider:nth-child(6) { opacity: 1; transition-delay: 260ms; }

/* ============================================================
   HEADING SCALE-UP ON REVEAL
   ============================================================ */

.scroll-heading {
  transition: transform var(--duration-slower) var(--ease-spring), opacity var(--duration-slower) var(--ease-out);
  transform: scale(0.96);
  opacity: 0.4;
}

.scroll-heading.heading-revealed {
  transform: scale(1);
  opacity: 1;
}

/* ============================================================
   5. HOVER INTERACTIONS
   ============================================================ */

.journal-preview-card {
  will-change: transform;
}

.scroll-nav-dot:hover {
  border-color: var(--color-accent);
  background: rgba(79, 172, 254, 0.12);
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.14), 0 0 16px rgba(79, 172, 254, 0.25);
}

.scroll-nav-dot:hover::before {
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(79, 172, 254, 0.8);
  transform: translate(-50%, -50%) scale(1.2);
}

.scroll-nav-dot.active:hover {
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.14), 0 0 20px rgba(79, 172, 254, 0.30);
}

.analytics-chart { cursor: crosshair; }

.review-chart-frame {
  transition: border-color var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft);
}

.review-chart-frame:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}