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

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

/* Floating balls background */
.balls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ball {
  position: absolute;
  border-radius: 50%;
  opacity: 0.18;
  animation: float 12s ease-in-out infinite alternate;
}

.ball:nth-child(1)  { width: 60px; height: 60px; background: #E74C3C; top: 8%;  left: 5%;  animation-delay: 0s;    animation-duration: 14s; }
.ball:nth-child(2)  { width: 45px; height: 45px; background: #3498DB; top: 20%; left: 85%; animation-delay: -2s;   animation-duration: 11s; }
.ball:nth-child(3)  { width: 55px; height: 55px; background: #2ECC71; top: 35%; left: 15%; animation-delay: -4s;   animation-duration: 16s; }
.ball:nth-child(4)  { width: 40px; height: 40px; background: #F1C40F; top: 50%; left: 75%; animation-delay: -1s;   animation-duration: 13s; }
.ball:nth-child(5)  { width: 70px; height: 70px; background: #9B59B6; top: 65%; left: 45%; animation-delay: -3s;   animation-duration: 15s; }
.ball:nth-child(6)  { width: 35px; height: 35px; background: #E67E22; top: 12%; left: 55%; animation-delay: -5s;   animation-duration: 12s; }
.ball:nth-child(7)  { width: 50px; height: 50px; background: #FF69B4; top: 78%; left: 10%; animation-delay: -2.5s; animation-duration: 14s; }
.ball:nth-child(8)  { width: 42px; height: 42px; background: #1ABC9C; top: 42%; left: 90%; animation-delay: -4.5s; animation-duration: 11s; }
.ball:nth-child(9)  { width: 38px; height: 38px; background: #E74C3C; top: 88%; left: 65%; animation-delay: -1.5s; animation-duration: 13s; }
.ball:nth-child(10) { width: 52px; height: 52px; background: #3498DB; top: 55%; left: 25%; animation-delay: -3.5s; animation-duration: 16s; }
.ball:nth-child(11) { width: 30px; height: 30px; background: #F1C40F; top: 5%;  left: 35%; animation-delay: -0.5s; animation-duration: 10s; }
.ball:nth-child(12) { width: 48px; height: 48px; background: #2ECC71; top: 72%; left: 80%; animation-delay: -5.5s; animation-duration: 15s; }

@keyframes float {
  0%   { transform: translateY(0) translateX(0); }
  33%  { transform: translateY(-15px) translateX(8px); }
  66%  { transform: translateY(10px) translateX(-6px); }
  100% { transform: translateY(-8px) translateX(4px); }
}

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

header {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  background: linear-gradient(180deg, rgba(22, 33, 62, 0.9) 0%, rgba(26, 26, 46, 0.8) 100%);
  border-bottom: 1px solid #2A2A4A;
}

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

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

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

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

h3 {
  color: #E8E8E8;
  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: #E8E8E8;
  font-weight: 600;
  margin-top: 1rem;
}

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

a {
  color: #4A90D9;
  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 #2A2A4A;
  display: flex;
  gap: 2rem;
  justify-content: center;
}

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

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

footer {
  text-align: center;
  padding: 1.5rem;
  color: #555577;
  font-size: 0.85rem;
  border-top: 1px solid #2A2A4A;
}

@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;
  }
}