/* ============================================================
   ZODIAC UNIVERSE — Core Design System
   Palette: void navy, deep nebula purple, antique gold, starlight
   Type: Cinzel (display/celestial) + Inter (body) + Space Mono (data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --void:#080a1c;
  --void-2:#0d1230;
  --nebula:#171048;
  --nebula-2:#241a5e;
  --purple:#7c5cff;
  --purple-soft:#9b83ff;
  --gold:#e8b84b;
  --gold-soft:#f3d386;
  --ember:#ff7a59;
  --star:#f5f3ff;
  --star-dim:#b9b3d9;
  --line:rgba(230,220,255,0.12);
  --card:rgba(255,255,255,0.035);
  --card-hover:rgba(255,255,255,0.07);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 20px 60px rgba(0,0,0,0.45);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--star);
  font-family:'Inter',sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}

/* Starfield background */
.starfield{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 75% 15%, #fff 100%, transparent),
    radial-gradient(2px 2px at 40% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff 100%, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff 100%, transparent),
    radial-gradient(2px 2px at 60% 40%, rgba(255,255,255,.8) 100%, transparent),
    radial-gradient(1px 1px at 85% 90%, #fff 100%, transparent),
    radial-gradient(1px 1px at 55% 10%, #fff 100%, transparent);
  background-size: 100% 100%;
  opacity:.55;
}
.starfield::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--void) 0%, var(--nebula) 45%, var(--void-2) 100%);
  opacity:.9;
  z-index:-1;
}

h1,h2,h3,h4,.font-display{
  font-family:'Cinzel',serif;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--star);
  line-height:1.25;
}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);}
a{color:inherit;text-decoration:none;}
.mono{font-family:'Space Mono',monospace;}
p{color:var(--star-dim);}
ul{padding-left:1.2rem;color:var(--star-dim);}
img{max-width:100%;display:block;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:.9rem;
}
.eyebrow::before{content:"✦";}

.container{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem;}
.section{padding:5rem 0;}
.section-tight{padding:3rem 0;}
.section-head{max-width:680px; margin-bottom:2.6rem;}
.section-head p{font-size:1.05rem;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,10,28,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.5rem; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:'Cinzel',serif; font-weight:700; font-size:1.25rem;}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  background:conic-gradient(from 180deg, var(--gold), var(--purple), var(--ember), var(--gold));
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  box-shadow:0 0 18px rgba(232,184,75,.5);
}
.brand-mark span{color:var(--void);font-weight:800;}
.nav-links{display:flex; gap:1.6rem; align-items:center;}
.nav-links a{font-size:.92rem; font-weight:500; color:var(--star-dim); position:relative; padding:.3rem 0;}
.nav-links a:hover{color:var(--gold-soft);}
.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--ember));
  color:var(--void)!important; font-weight:700; padding:.55rem 1.15rem; border-radius:999px;
  font-size:.88rem;
}
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute; top:130%; left:0; background:var(--nebula);
  border:1px solid var(--line); border-radius:12px; padding:.6rem;
  min-width:220px; display:none; flex-direction:column; box-shadow:var(--shadow);
}
.dropdown:hover .dropdown-menu{display:flex;}
.dropdown-menu a{padding:.5rem .7rem; border-radius:8px; font-size:.88rem;}
.dropdown-menu a:hover{background:var(--card-hover);}
.nav-toggle{display:none; background:none; border:none; color:var(--star); font-size:1.6rem; cursor:pointer;}

@media(max-width:920px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--void-2); flex-direction:column;
    padding:2rem; gap:1.2rem; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .dropdown-menu{position:static; display:flex; background:none; border:none; padding:.3rem 0 0 1rem;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:.95rem;
  cursor:pointer; border:none; transition:transform .2s ease, box-shadow .2s ease;
  font-family:'Inter',sans-serif;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--ember)); color:var(--void); box-shadow:0 10px 30px rgba(232,184,75,.25);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(232,184,75,.4);}
.btn-outline{background:transparent; color:var(--star); border:1px solid var(--line);}
.btn-outline:hover{border-color:var(--gold-soft); color:var(--gold-soft);}
.btn-ghost{background:var(--card); color:var(--star);}
.btn-ghost:hover{background:var(--card-hover);}
.btn-block{width:100%;}

/* ---------- Hero ---------- */
.hero{
  padding:5.5rem 0 4rem; position:relative; overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;}
.hero h1{margin-bottom:1.1rem;}
.hero .accent{background:linear-gradient(135deg,var(--gold),var(--purple-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{font-size:1.12rem; max-width:520px; margin-bottom:1.8rem;}
.hero-actions{display:flex; gap:.9rem; flex-wrap:wrap;}
.hero-stats{display:flex; gap:1.8rem; margin-top:2.2rem; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:'Cinzel',serif; font-size:1.4rem; color:var(--gold-soft);}
.hero-stat span{font-size:.78rem; color:var(--star-dim); text-transform:uppercase; letter-spacing:.08em;}

.zodiac-wheel-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
.zodiac-wheel{
  width:min(420px,90%); aspect-ratio:1/1; border-radius:50%; position:relative;
  background:radial-gradient(circle at center, var(--nebula-2) 0%, var(--void) 72%);
  border:1px solid var(--line); box-shadow:0 0 80px rgba(124,92,255,.25), inset 0 0 60px rgba(0,0,0,.5);
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.wheel-sign{
  position:absolute; width:50px; height:50px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--gold-soft); left:50%; top:50%; transform-origin:center;
  animation:counterspin 90s linear infinite;
}
@keyframes counterspin{to{transform:rotate(-360deg) translate(0,0);}}
.wheel-center{
  position:absolute; inset:0; margin:auto; width:34%; height:34%; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--purple)); display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-weight:700; color:var(--void); text-align:center; font-size:.8rem; padding:.5rem;
  box-shadow:0 0 40px rgba(232,184,75,.4);
}
@media(prefers-reduced-motion:reduce){ .zodiac-wheel, .wheel-sign{animation:none;} }

/* ---------- Birthday Finder ---------- */
.finder-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem; display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end;
}
.field{display:flex; flex-direction:column; gap:.4rem; flex:1; min-width:140px;}
.field label{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--star-dim);}
.field select,.field input{
  background:var(--void-2); border:1px solid var(--line); color:var(--star);
  padding:.75rem .9rem; border-radius:var(--radius-sm); font-size:.95rem; font-family:'Inter',sans-serif;
}
.finder-result{
  margin-top:1.6rem; padding:1.4rem; border-radius:var(--radius-sm); background:var(--card-hover);
  display:none; align-items:center; gap:1rem;
}
.finder-result.show{display:flex;}
.finder-result .glyph{font-size:2.4rem; color:var(--gold-soft);}

/* ---------- Cards Grid ---------- */
.grid{display:grid; gap:1.4rem;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:920px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .hero-grid{grid-template-columns:1fr;} }

.sign-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; transition:transform .25s ease, background .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.sign-card:hover{transform:translateY(-6px); background:var(--card-hover); border-color:rgba(232,184,75,.4);}
.sign-card .glyph{font-size:2.2rem; color:var(--gold-soft); margin-bottom:.6rem; display:block;}
.sign-card h3{margin:0 0 .2rem;}
.sign-card .dates{font-family:'Space Mono',monospace; font-size:.78rem; color:var(--purple-soft);}
.sign-card p{font-size:.9rem; margin:.7rem 0 0;}
.sign-card .tag{
  position:absolute; top:1.2rem; right:1.2rem; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--star-dim); background:rgba(255,255,255,.06); padding:.25rem .55rem; border-radius:999px;
}

/* ---------- Feature / Info Cards ---------- */
.info-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;}
.info-card h3{margin-top:0;}
.element-card{border-top:3px solid; }
.element-fire{border-color:#ff6b4a;}
.element-earth{border-color:#8bc78a;}
.element-air{border-color:#8ec9ff;}
.element-water{border-color:#8a7dff;}

/* ---------- Horoscope preview ---------- */
.horo-tabs{display:flex; gap:.6rem; margin-bottom:1.4rem; flex-wrap:wrap;}
.horo-tab{
  padding:.5rem 1rem; border-radius:999px; background:var(--card); border:1px solid var(--line);
  cursor:pointer; font-size:.85rem; color:var(--star-dim);
}
.horo-tab.active{background:linear-gradient(135deg,var(--gold),var(--ember)); color:var(--void); font-weight:700; border-color:transparent;}
.horo-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; display:none;}
.horo-panel.active{display:block;}

/* ---------- Compatibility ---------- */
.compat-widget{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2rem;}
.compat-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap;}
.compat-bar-wrap{flex:1; min-width:200px; background:var(--void-2); border-radius:999px; height:14px; overflow:hidden;}
.compat-bar{height:100%; background:linear-gradient(90deg,var(--purple),var(--gold)); width:0%; transition:width .6s ease;}
.compat-score{font-family:'Cinzel',serif; font-size:1.6rem; color:var(--gold-soft); min-width:64px; text-align:right;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:1.2rem 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; gap:1rem;}
.faq-q::after{content:"+"; font-size:1.4rem; color:var(--gold-soft); transition:transform .2s ease;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:600px; padding-top:.8rem;}

/* ---------- Ad Slots ---------- */
.ad-slot{
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 10px, transparent 10px, transparent 20px);
  border:1px dashed var(--line); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  color:var(--star-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin:2rem auto;
}
.ad-slot.leaderboard{max-width:728px; height:90px;}
.ad-slot.rectangle{max-width:300px; height:250px;}
.ad-slot.inline{max-width:100%; height:100px;}

/* ---------- Article ---------- */
.article-hero{padding:3rem 0 2rem; border-bottom:1px solid var(--line);}
.breadcrumbs{font-size:.82rem; color:var(--star-dim); margin-bottom:1rem;}
.breadcrumbs a{color:var(--purple-soft);}
.breadcrumbs span{margin:0 .4rem;}
.quick-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2rem 0;}
@media(max-width:800px){ .quick-facts{grid-template-columns:repeat(2,1fr);} }
.qf-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem; text-align:center;}
.qf-item .label{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--star-dim);}
.qf-item .value{font-family:'Cinzel',serif; color:var(--gold-soft); margin-top:.3rem;}
.article-body{max-width:820px; margin:0 auto;}
.article-body h2{margin-top:2.6rem; border-left:3px solid var(--gold); padding-left:.8rem;}
.article-body h3{margin-top:1.8rem; color:var(--purple-soft);}
.article-body p{font-size:1.02rem;}
.toc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.8rem; max-width:820px; margin:0 auto 2rem;}
.toc h4{margin:0 0 .6rem;}
.toc ol{margin:0; padding-left:1.2rem;}
.toc a{color:var(--star-dim);}
.toc a:hover{color:var(--gold-soft);}
.related-grid{margin-top:1rem;}

/* ---------- Table ---------- */
table.zt{width:100%; border-collapse:collapse; margin:1.5rem 0;}
table.zt th,table.zt td{padding:.7rem .9rem; border-bottom:1px solid var(--line); text-align:left; font-size:.92rem;}
table.zt th{color:var(--gold-soft); font-family:'Space Mono',monospace; font-size:.75rem; text-transform:uppercase;}
table.zt tr:hover{background:var(--card);}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:3.5rem 0 1.5rem; margin-top:3rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2rem;}
@media(max-width:920px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
.footer-col h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-soft); margin-bottom:1rem;}
.footer-col a{display:block; color:var(--star-dim); font-size:.88rem; margin-bottom:.6rem;}
.footer-col a:hover{color:var(--star);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--star-dim);
}

/* ---------- Tool Pages ---------- */
.tool-hero{padding:3.5rem 0 2rem; text-align:center;}
.tool-card{max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2.4rem;}
.quiz-option{
  display:block; width:100%; text-align:left; background:var(--void-2); border:1px solid var(--line);
  color:var(--star); padding:.9rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:.7rem; cursor:pointer; font-size:.95rem;
}
.quiz-option:hover{border-color:var(--gold-soft);}
.progress-bar{height:8px; background:var(--void-2); border-radius:999px; overflow:hidden; margin-bottom:1.6rem;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--purple),var(--gold)); width:0%; transition:width .4s ease;}

.swatch{width:100%; height:90px; border-radius:var(--radius-sm); margin-bottom:1rem;}

/* Utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-gold{color:var(--gold-soft);}
.text-purple{color:var(--purple-soft);}
.small{font-size:.85rem; color:var(--star-dim);}
.divider{height:1px; background:var(--line); margin:2.5rem 0;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:var(--void); padding:.6rem 1rem; z-index:1000;}
.skip-link:focus{left:1rem; top:1rem;}
:focus-visible{outline:2px solid var(--gold-soft); outline-offset:2px;}