@import url("./style.css");

:root {
  --bg: #0b1220;
  --bg-soft: #111a2d;
  --text: #e6eefc;
  --muted: #9fb3d9;
  --line: rgba(128, 152, 204, 0.28);
  --blue: #7c9bff;
  --cyan: #4dd7ff;
  --mint: #66f0c2;
}

body {
  background: radial-gradient(circle at 10% 0%, rgba(124, 155, 255, 0.15), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(77, 215, 255, 0.12), transparent 40%),
    var(--bg);
  color: var(--text);
}

.section,
.hero,
.about,
.journey,
.expertise,
.education,
.contact {
  background: transparent;
}

.hero-summary,
.section-lead,
.panel-body,
.journey-copy,
.expertise-copy,
.education-copy,
.contact-copy {
  color: var(--muted);
}

.story-panel,
.journey-card,
.expertise-card,
.reveal-card,
.education-item {
  border-color: rgba(124, 155, 255, 0.22);
}

.contact-pill {
  border-color: rgba(124, 155, 255, 0.35);
  color: var(--text);
}