/* === Base cosmic background and shared layout === */
:root {
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow-x: hidden; }

/* Star background animation */
.stars, .stars::before, .stars::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  display: block;
  pointer-events: none;
  background-repeat: repeat;
  background-position: 0 0;
  image-rendering: pixelated;
}
.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px,#fff8,#0000),
    radial-gradient(1px 1px at 60px 80px,#fff5,#0000),
    radial-gradient(1px 1px at 120px 50px,#fff6,#0000),
    radial-gradient(2px 2px at 200px 90px,#fff7,#0000);
  background-size: 250px 250px;
  animation: drift1 120s linear infinite;
}
.stars::before {
  background-image:
    radial-gradient(2px 2px at 40px 120px,#fff6,#0000),
    radial-gradient(1px 1px at 180px 30px,#fff5,#0000),
    radial-gradient(2px 2px at 300px 200px,#fff9,#0000);
  background-size: 350px 350px;
  opacity: .8;
  animation: drift2 180s linear infinite;
}
.stars::after {
  background-image:
    radial-gradient(2px 2px at 90px 40px,#fff7,#0000),
    radial-gradient(1px 1px at 210px 160px,#fff8,#0000),
    radial-gradient(2px 2px at 320px 80px,#fff4,#0000);
  background-size: 500px 500px;
  opacity: .6;
  animation: drift3 260s linear infinite;
}
@keyframes drift1 { from { background-position:0 0 } to { background-position:-2500px -2500px } }
@keyframes drift2 { from { background-position:0 0 } to { background-position:2500px -1500px } }
@keyframes drift3 { from { background-position:0 0 } to { background-position:-2000px 2000px } }

/* Core structure helpers */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
section { padding: 4rem 0; }
footer { padding: 2.5rem 0; text-align: center; }