* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #0B0E1A;
  color: #E0D8C8;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Starry background */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(255, 215, 0, 0.6), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 15% 65%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(1px 1px at 65% 90%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 80% 75%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 92% 30%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 5% 42%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 48% 28%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 73% 58%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 18% 92%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 88% 12%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 35% 52%, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(1px 1px at 60% 5%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 95% 85%, rgba(255, 255, 255, 0.4), transparent);
  animation: twinkle1 8s ease-in-out infinite alternate;
}

body::after {
  background-image:
    radial-gradient(1px 1px at 8% 25%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 50%, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(1px 1px at 38% 18%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 52% 62%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 68% 38%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 8%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 12% 78%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 45% 95%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 75% 48%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 58% 82%, rgba(255, 215, 0, 0.3), transparent),
    radial-gradient(1px 1px at 28% 5%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 90% 65%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 3% 55%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 62% 15%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 78% 88%, rgba(255, 215, 0, 0.4), transparent);
  animation: twinkle2 10s ease-in-out infinite alternate;
}

@keyframes twinkle1 {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes twinkle2 {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}

header, main, footer {
  position: relative;
  z-index: 1;
}

header {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  background: linear-gradient(180deg, rgba(20, 24, 41, 0.85) 0%, rgba(11, 14, 26, 0.8) 100%);
  border-bottom: 1px solid #2A2D3A;
}

header h1 {
  font-size: 2rem;
  color: #FFD700;
  letter-spacing: 0.02em;
}

.tagline {
  margin-top: 0.5rem;
  color: #A89F8E;
  font-size: 1.05rem;
}

main {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  width: 100%;
}

h2 {
  color: #FFD700;
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #2A2D3A;
  padding-bottom: 0.35rem;
}

h3 {
  color: #F5E6C8;
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 0.85rem;
}

ul, ol {
  margin: 0.5rem 0 1rem 1.5rem;
}

li {
  margin-bottom: 0.4rem;
}

dl {
  margin: 1rem 0;
}

dt {
  color: #F5E6C8;
  font-weight: 600;
  margin-top: 1rem;
}

dd {
  margin-left: 0;
  margin-top: 0.25rem;
  color: #C8BFA8;
}

a {
  color: #FFD700;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.contact {
  font-size: 1.1rem;
  margin: 1rem 0;
}

.page-links {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2D3A;
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.page-links a {
  font-size: 0.95rem;
  color: #A89F8E;
  transition: color 0.2s;
}

.page-links a:hover {
  color: #FFD700;
}

footer {
  text-align: center;
  padding: 1.5rem;
  color: #5A5564;
  font-size: 0.85rem;
  border-top: 1px solid #1A1D2A;
}

@media (max-width: 600px) {
  header {
    padding: 2rem 1rem 1.5rem;
  }

  header h1 {
    font-size: 1.6rem;
  }

  main {
    padding: 1.5rem 1rem 2rem;
  }

  h2 {
    font-size: 1.2rem;
  }
}