/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);
  color:#e0e0e0;
  min-height:100vh;
  line-height:1.6;
}
a{color:#bb86fc;text-decoration:none;transition:color .3s}
a:hover{color:#e0b3ff}
img{max-width:100%;display:block}

/* ===== HEADER / NAV ===== */
.site-header{
  background:rgba(15,12,41,.85);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgba(187,134,252,.15);
}
.nav-container{
  max-width:1200px;margin:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.logo{font-size:1.6rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.logo span{font-size:1.8rem}
.nav-links{list-style:none;display:flex;gap:24px}
.nav-links a{color:#ccc;font-weight:500;font-size:.95rem}
.nav-links a:hover,.nav-links a.active{color:#bb86fc}

/* ===== HERO ===== */
.hero{
  text-align:center;padding:80px 24px 60px;
  background:radial-gradient(ellipse at top,rgba(187,134,252,.12),transparent 70%);
}
.hero h1{font-size:2.8rem;color:#fff;margin-bottom:12px}
.hero p{font-size:1.15rem;color:#aaa;max-width:600px;margin:auto}

/* ===== ZODIAC GRID ===== */
.zodiac-section{padding:40px 24px 80px}
.zodiac-section h2{text-align:center;font-size:1.8rem;color:#fff;margin-bottom:40px}
.zodiac-grid{
  max-width:1100px;margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}
.zodiac-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(187,134,252,.15);
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  cursor:pointer;
}
.zodiac-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(187,134,252,.2);
  border-color:rgba(187,134,252,.5);
}
.zodiac-card .icon{font-size:2.8rem;margin-bottom:12px}
.zodiac-card h3{font-size:1.15rem;color:#fff;margin-bottom:4px}
.zodiac-card .dates{font-size:.82rem;color:#999;margin-bottom:10px}
.zodiac-card .desc{font-size:.88rem;color:#bbb}

/* ===== FEATURES ===== */
.features{padding:60px 24px;background:rgba(0,0,0,.2)}
.features h2{text-align:center;font-size:1.8rem;color:#fff;margin-bottom:40px}
.features-grid{
  max-width:1000px;margin:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;
}
.feature-card{
  background:rgba(255,255,255,.04);border-radius:14px;
  padding:30px 24px;text-align:center;
  border:1px solid rgba(255,255,255,.06);
}
.feature-card .feat-icon{font-size:2.2rem;margin-bottom:14px}
.feature-card h3{color:#fff;margin-bottom:8px}
.feature-card p{color:#aaa;font-size:.92rem}

/* ===== FOOTER ===== */
.site-footer{
  background:rgba(15,12,41,.9);
  border-top:1px solid rgba(187,134,252,.1);
  padding:40px 24px 24px;
}
.footer-inner{
  max-width:1200px;margin:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;
}
.footer-col h4{color:#fff;margin-bottom:12px;font-size:1rem}
.footer-col p,.footer-col a{color:#999;font-size:.9rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:6px}
.footer-bottom{
  max-width:1200px;margin:24px auto 0;
  text-align:center;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#666;font-size:.82rem;
}

/* ===== LEGAL PAGES (Privacy / Terms) ===== */
.legal-page{max-width:860px;margin:auto;padding:60px 24px 80px}
.legal-page h1{font-size:2.2rem;color:#fff;margin-bottom:8px}
.legal-page .updated{color:#888;font-size:.88rem;margin-bottom:32px;display:block}
.legal-page h2{font-size:1.3rem;color:#bb86fc;margin:32px 0 12px;border-bottom:1px solid rgba(187,134,252,.15);padding-bottom:6px}
.legal-page p,.legal-page li{color:#ccc;font-size:.95rem;margin-bottom:10px}
.legal-page ul{padding-left:20px;margin-bottom:16px}
.legal-page a{color:#bb86fc}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero h1{font-size:2rem}
  .nav-links{gap:16px}
  .nav-links a{font-size:.85rem}
  .footer-inner{flex-direction:column;gap:20px}
}
@media(max-width:480px){
  .hero{padding:50px 16px 40px}
  .hero h1{font-size:1.6rem}
  .zodiac-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .nav-container{padding:10px 16px}
  .logo{font-size:1.2rem}
}