:root {
  --brand: #5b7cfa;
  --bg-grad-1: #0f172a;
  --bg-grad-2: #1e293b;
}

[data-theme="dark"] {
  color-scheme: dark;
}

body {
  letter-spacing: .2px;
}

.tracking { letter-spacing: .5px; }
.brand-dot { color: var(--brand); }

.hero {
  background: radial-gradient(1200px 600px at 10% -10%, var(--brand) 0%, transparent 60%), 
              linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
  color: #e9eefc;
}

.hero .lead { color: #d6ddff; }

.hero .glass {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #e8edff;
}

.hero .tech-stack .badge { background: rgba(255,255,255,.15) !important; }

.eyebrow { letter-spacing: .12em; }

.stat { background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)); border: 1px solid rgba(0,0,0,.06); }

.card.lift { transition: transform .18s ease, box-shadow .18s ease; }
.card.lift:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }

.stack span {
  display: inline-block;
  padding: .25rem .5rem;
  margin-right: .25rem;
  background: rgba(0,0,0,.06);
  border-radius: .5rem;
}

.timeline { position: relative; margin-left: .5rem; padding-left: 1.5rem; }
.timeline:before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.1); }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item .dot { position: absolute; left: -2px; top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(91,124,250,.15); }
.timeline-item .content { margin-left: .5rem; }

/* Dark mode adjustments */
[data-theme="dark"] .bg-body, [data-theme="dark"] .bg-body-tertiary { background-color: #0b0f1a !important; }
[data-theme="dark"] body { background: #0b0f1a; color: #dee6ff; }
[data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .card { background: #0f1524; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .stack span { background: rgba(255,255,255,.08); }
[data-theme="dark"] .stat { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); border-color: rgba(255,255,255,.12); }


/* === Contrast Tweaks for Dark Mode === */
[data-theme="dark"] body { background: #0b0f1a; color: #eaf0ff; }
[data-theme="dark"] .text-secondary { color: #b8c2ff !important; }
[data-theme="dark"] a { color: #87a2ff; }
[data-theme="dark"] a:hover { color: #a9bcff; }
[data-theme="dark"] .navbar, 
[data-theme="dark"] .bg-body, 
[data-theme="dark"] .bg-body-tertiary { background-color: #0b0f1a !important; }
[data-theme="dark"] .card { background: #11182a; color: #eaf0ff; }
[data-theme="dark"] .card .text-secondary { color: #c3ccff !important; }
[data-theme="dark"] .border, 
[data-theme="dark"] .border-top, 
[data-theme="dark"] .border-bottom { border-color: rgba(255,255,255,.18) !important; }
[data-theme="dark"] .stack span { background: rgba(255,255,255,.12); color: #eaf0ff; }
[data-theme="dark"] .stat { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); border-color: rgba(255,255,255,.18); color: #eaf0ff; }
[data-theme="dark"] .hero .lead { color: #dbe3ff; }
[data-theme="dark"] .glass { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.22) !important; }
[data-theme="dark"] .btn-outline-light { color: #eaf0ff; border-color: #eaf0ff; }
[data-theme="dark"] .btn-outline-light:hover { background: #eaf0ff; color: #0b0f1a; }
[data-theme="dark"] .badge.text-bg-dark { background-color: #1b2540 !important; color: #eaf0ff !important; }