:root {
  --bg: #0d0f14;
  --text: #eceff8;
  --muted: #b6bfd4;
  --accent-soft: #e54d67;
  --line: #2b3447;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  background-color: #0b0d12;
}

html { scroll-behavior: smooth; }

body {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(229, 77, 103, 0.24), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(63, 98, 186, 0.2), transparent 25%),
    linear-gradient(160deg, #0b0d12 0%, #141822 55%, #131a2a 100%);
  min-height: 100vh;
}

a { color: #f3b5c0; }
a:hover { color: #ffd0d8; }

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.06;
  font-family: "IBM Plex Serif", serif;
}

h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin-bottom: 1.2rem;
  font-family: "IBM Plex Serif", serif;
}

p {
  margin: 0;
  line-height: 1.65;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}