:root {
  --primary-color: #0d6efd;
  --primary-hover: #0a58ca;
  --card-background: rgba(26, 26, 26, 0.7);
  --text-color: #f8f9fa;
  --muted-text: #adb5bd;
  --border-color: rgba(255, 255, 255, 0.2);
  --shadow: 0 10px 30px rgba(0,0,0,.2);
  --border-radius: 20px;
  --transition-speed: 0.4s;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background-color: #0a0a0a;
  line-height: 1.6;
  overflow-x: hidden;
}

.wrap {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px 60px;
  position: relative;
  z-index: 2;
}

h2 {
  font-size: 28px;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  letter-spacing: .5px;
  color: var(--text-color);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}

p { margin: 0.5rem 0; }
.muted { color: var(--muted-text); }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: underline; }

#galaxy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transition: transform 0.1s linear;
    will-change: transform;
}

#stars-far, #stars-mid, #stars-close, #aurora-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-position: center;
    will-change: transform;
}

#stars-far {
    background-image:
      radial-gradient(0.8px 0.8px at 50px 100px, white, transparent),
      radial-gradient(0.8px 0.8px at 120px 220px, white, transparent),
      radial-gradient(0.8px 0.8px at 250px 80px, white, transparent),
      radial-gradient(0.8px 0.8px at 300px 310px, white, transparent),
      radial-gradient(0.8px 0.8px at 40px 400px, white, transparent),
      radial-gradient(0.8px 0.8px at 150px 380px, white, transparent),
      radial-gradient(0.8px 0.8px at 280px 420px, white, transparent),
      radial-gradient(0.8px 0.8px at 340px 200px, white, transparent),
      radial-gradient(0.8px 0.8px at 400px 50px, white, transparent),
      radial-gradient(0.8px 0.8px at 10px 250px, white, transparent),
      radial-gradient(0.8px 0.8px at 190px 30px, white, transparent),
      radial-gradient(0.8px 0.8px at 380px 380px, white, transparent);
    background-size: 450px 450px;
    animation: twinkle-far 10s infinite linear alternate;
}

#stars-mid {
    background-image:
      radial-gradient(1.2px 1.2px at 80px 50px, white, transparent),
      radial-gradient(1.2px 1.2px at 210px 180px, white, transparent),
      radial-gradient(1.2px 1.2px at 380px 300px, white, transparent),
      radial-gradient(1.2px 1.2px at 480px 100px, white, transparent),
      radial-gradient(1.2px 1.2px at 100px 420px, white, transparent),
      radial-gradient(1.2px 1.2px at 280px 500px, white, transparent),
      radial-gradient(1.2px 1.2px at 520px 380px, white, transparent);
    background-size: 600px 600px;
    animation: twinkle-mid 7s infinite linear alternate;
}

#stars-close {
    background-image:
      radial-gradient(2px 2px at 200px 150px, white, transparent),
      radial-gradient(2px 2px at 450px 350px, white, transparent),
      radial-gradient(2.5px 2.5px at 600px 50px, white, transparent),
      radial-gradient(2px 2px at 50px 500px, white, transparent),
      radial-gradient(2.5px 2.5px at 700px 480px, white, transparent);
    background-size: 800px 800px;
    animation: twinkle-close 5s infinite linear alternate;
}

@keyframes twinkle-far {
    from { opacity: 0.4; }
    to { opacity: 0.8; }
}
@keyframes twinkle-mid {
    from { opacity: 0.6; }
    to { opacity: 1; }
}
@keyframes twinkle-close {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

#aurora-background {
    opacity: 1;
}

#aurora-background::before,
#aurora-background::after {
    content: '';
    position: absolute;
    inset: -50vmax;
    background-repeat: no-repeat;
    mix-blend-mode: plus-lighter;
    filter: blur(100px);
}

#aurora-background::before {
    background-image: radial-gradient(circle, hsla(215, 100%, 70%, 0.25), transparent 40%);
    animation: aurora-final-drift 25s infinite alternate ease-in-out;
}

#aurora-background::after {
    background-image: radial-gradient(circle, hsla(350, 100%, 75%, 0.25), transparent 40%);
    animation: aurora-final-drift 30s infinite alternate ease-in-out reverse;
}

@keyframes aurora-final-drift {
    0% { transform: rotate(0deg) translateX(30vmax); }
    100% { transform: rotate(360deg) translateX(30vmax); }
}

.module-container {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.module-container:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.signature {
    text-align: center;
    margin: 40px 0 20px;
    font-size: 0.9em;
    color: var(--muted-text);
    position: relative;
    z-index: 2;
}

.profile-module-wrapper {
    width: 100%;
    padding: 20px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
  h2 { font-size: 24px; }
  .module-container { padding: 20px; }
  .wrap { margin: 20px auto; }
}