* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: radial-gradient(circle at top, #2a1a3d, #0b0613);
  color: white;
  overflow-x: hidden;
}

/* 🌌 NAVBAR */
header {
  display: flex;
  justify-content: space-between;
  padding: 5px 60px;
  align-items: center;
}

header h1 {
  font-size: 28px;
  color: #e6ccff;
}

nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #ddd;
}

.btn {
  background: #a855f7;
  padding: 8px 15px;
  border-radius: 20px;
}

/* 🌙 HERO */
.hero {
  height: 768px;
  display: flex;
  align-items: center;
  padding: 0 60px;
}

.hero {
  background-image: url('hero.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.hero h2 {
  font-size: 50px;
  line-height: 1.3;
}
img.logo {
    width: 30%;
}
.buttons button {
  margin: 15px 10px 0 0;
  padding: 12px 20px;
  border-radius: 25px;
  border: none;
  background: #9333ea;
  color: white;
  cursor: pointer;
}

 a.btn {
  margin: 15px 10px 0 0;
  padding: 12px 20px;
  border-radius: 25px;
  border: none;
  background: #9333ea;
  color: white;
  cursor: pointer;
}
.buttons .outline {
  background: transparent;
  border: 1px solid #9333ea;
}

/* 🔮 SERVICES */
.services {
  text-align: center;
  padding: 80px 20px;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}
img.card-img {
    width: stretch;
}
.card {
  background: rgba(255,255,255,0.05);
  padding: 30px;
  border-radius: 15px;
  width: 300px;
  backdrop-filter: blur(10px);
}

.card button {
  margin-top: 15px;
  padding: 10px 15px;
  background: #a855f7;
  border: none;
  border-radius: 20px;
}

/* 📞 CONTACT */
.contact {
  display: flex;
  justify-content: space-around;
  padding: 80px 40px;
}

.contact form {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.contact input,
.contact textarea {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 10px;
  border: none;
}

.contact button {
  padding: 10px;
  background: #9333ea;
  border: none;
  border-radius: 20px;
}

.tarot-container {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 50px;
}

.tarot-card {
  width: 180px;
  height: 300px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

.tarot-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* FRONT */
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("tarot-back.jpg") center/cover;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(168,85,247,0.6);
}

/* BACK */
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a0f2e, #2a1a3d);
  color: white;
  transform: rotateY(180deg);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.card-inner.flipped {
  transform: rotateY(180deg);
}
.spread {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  gap: 20px;
}

.spread-card {
  width: 140px;
  height: 220px;
  background: url("tarot-back.jpg") center/cover;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(100px) rotate(10deg);
  animation: deal 0.8s forwards;
}

.spread-card:nth-child(2) {
  animation-delay: 0.3s;
}
.spread-card:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes deal {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

/* 🌌 FOOTER */
footer {
  text-align: center;
  padding: 30px;
  background: rgba(0,0,0,0.3);
}

/* ✨ STAR ANIMATION */
/* ✨ SIDE STAR CONTAINERS */
/* 🌌 STAR BASE */
.stars, .stars2, .stars3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-repeat: repeat;
  z-index: -1;
}

/* ⭐ SMALL STARS */
.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 100px 150px, white, transparent),
    radial-gradient(1.5px 1.5px at 200px 80px, #ddd, transparent),
    radial-gradient(2px 2px at 300px 200px, #fff, transparent);
    
  animation: moveStars 80s linear infinite,
             twinkle 2s ease-in-out infinite alternate;
}

/* ⭐ MEDIUM STARS */
.stars2 {
  background-image:
    radial-gradient(2px 2px at 50px 160px, #aaa, transparent),
    radial-gradient(2px 2px at 180px 60px, #ccc, transparent),
    radial-gradient(1.5px 1.5px at 250px 120px, #eee, transparent);

  animation: moveStars 120s linear infinite,
             twinkle 3s ease-in-out infinite alternate;
}

/* ⭐ BIG STARS */
.stars3 {
  background-image:
    radial-gradient(3px 3px at 200px 200px, #fff, transparent),
    radial-gradient(2.5px 2.5px at 300px 100px, #ddd, transparent);

  animation: moveStars 160s linear infinite,
             twinkle 4s ease-in-out infinite alternate;
}

/* 🌌 MOVEMENT */
@keyframes moveStars {
  from { transform: translateY(0); }
  to { transform: translateY(-1000px); }
}

.stars, .stars2, .stars3 {
  filter: drop-shadow(0 0 6px #a855f7);
}

/* ✨ SPARKLE / BLINK EFFECT */
@keyframes twinkle {
  0%   { opacity: 0.3; transform: scale(1); }
  25%  { opacity: 1; transform: scale(1.4); }
  50%  { opacity: 0.5; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0.4; transform: scale(1); }
}