/* styles.css */
:root{
  --bg0:#0d0d0d; --bg1:#1a1a1a; --bg2:#202020; --bg3:#2a2a2a;
  --primary:#ff7a29; --primary-warm:#ff9933; --primary-soft:#ffb347;
  --secondary:#ffd966; --cream:#fff2cc; --white:#ffffff;
}
*{box-sizing:border-box}
html,body{background:var(--bg0); color:var(--white)}
/* Utilities */
.container{max-width:72rem; margin-inline:auto; padding-inline:1rem}
.section{padding-block:3.5rem}
.section-title{font-size:1.5rem; font-weight:800; margin-bottom:.5rem}
.section-sub{color:rgba(255,255,255,.65); margin-bottom:1.25rem}

/* Buttons */
.btn-primary{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius:.875rem; background:#ff7a29; color:var(--white); font-weight:700; box-shadow:0 0 24px rgba(255,122,41,.35); transition:transform .15s ease, filter .2s ease;
	
	}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1rem; border-radius:.875rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.btn-mini{display:inline-flex; align-items:center; padding:.4rem .7rem; border-radius:.7rem; background:var(--primary); color:var(--bg0); font-weight:700}

/* Hero */
.badge-soft{padding:.4rem .7rem; border-radius:999px; background:rgba(255,242,204,.08); border:1px solid rgba(255,217,102,.25); color:var(--cream); font-size:.8rem}

/* Cards */
.card{background:rgba(26,26,26,.75); border:1px solid rgba(255,255,255,.08); border-radius:1.25rem; padding:1rem; backdrop-filter:blur(12px); transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 0 30px rgba(255,179,71,.2)}
.card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.card-icon{font-size:1.4rem}
.chip{font-size:.75rem; padding:.2rem .5rem; border:1px solid rgba(255,255,255,.12); border-radius:.5rem; color:rgba(255,255,255,.8); background:rgba(255,255,255,.04)}
.card-title{font-weight:800; font-size:1.1rem; margin:.25rem 0}
.card-desc{color:rgba(255,255,255,.75)}
.card-cta{margin-top:.9rem; display:flex; align-items:center; justify-content:space-between}
.price{font-weight:800; background:linear-gradient(135deg,var(--primary),var(--primary-soft)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Steps */
.step{background:rgba(32,32,32,.6); border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:1rem}
.step-num{display:inline-grid; place-items:center; height:2rem; width:2rem; border-radius:.6rem; background:linear-gradient(135deg,var(--primary),var(--primary-soft)); color:var(--bg0); font-weight:900; margin-bottom:.5rem}
.step-title{font-weight:800}
.step-desc{color:rgba(255,255,255,.75)}

/* Quotes */
.quote{background:rgba(26,26,26,.7); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:1rem}
.quote p{color:rgba(255,255,255,.9)}
.quote footer{margin-top:.75rem; color:rgba(255,255,255,.6); font-size:.9rem}

/* Pricing */
.plan{background:linear-gradient(180deg,rgba(42,42,42,.6),rgba(26,26,26,.6)); border:1px solid rgba(255,255,255,.08); border-radius:1.25rem; padding:1rem}
.plan.highlight{outline:2px solid rgba(255,122,41,.3); box-shadow:0 0 40px rgba(255,122,41,.18)}
.plan-name{font-weight:800}
.plan-price{margin:.3rem 0 .7rem}
.amount{font-size:1.4rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--primary-soft)); -webkit-background-clip:text; background-clip:text; color:transparent}
.plan-list{color:rgba(255,255,255,.75); display:grid; gap:.4rem; margin:.7rem 0}

/* FAQ */
.faq-item{background:rgba(26,26,26,.7); border:1px solid rgba(255,255,255,.08); border-radius:.9rem; padding:.8rem 1rem}
.faq-item summary{cursor:pointer; font-weight:600}
.faq-item[open]{outline:1px solid rgba(255,153,51,.25)}

/* Inputs */
.input{width:100%; background:rgba(32,32,32,.7); border:1px solid rgba(255,255,255,.1); color:var(--white); padding:.7rem .9rem; border-radius:.9rem}
.input::placeholder{color:rgba(255,255,255,.5)}
.input:focus{outline:2px solid rgba(255,122,41,.4)}

/* Footer */
.icon-btn{display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}

/* Bottom Nav */
.bottom-link{display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.35rem .6rem; border-radius:.7rem; color:rgba(255,255,255,.8)}
.bottom-link.active{background:rgba(255,217,102,.12); color:var(--cream)}

/* Reveal Animations */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

/* Zodiac ring labels */
.zodiac-items{position:absolute; inset:0; list-style:none; margin:0; padding:0}
.zodiac-items li{position:absolute; font-size:1.1rem; color:var(--cream); text-shadow:0 0 10px rgba(255,217,102,.2)}
/* 12 positions around circle */
.zodiac-items li:nth-child(1){top:2%; left:50%; transform:translate(-50%,0)}
.zodiac-items li:nth-child(2){top:13%; left:76%}
.zodiac-items li:nth-child(3){top:28%; left:89%}
.zodiac-items li:nth-child(4){top:50%; left:98%; transform:translate(-100%,-50%)}
.zodiac-items li:nth-child(5){top:67%; left:86%}
.zodiac-items li:nth-child(6){top:82%; left:72%}
.zodiac-items li:nth-child(7){bottom:2%; left:50%; transform:translate(-50%,0)}
.zodiac-items li:nth-child(8){top:83%; left:24%}
.zodiac-items li:nth-child(9){top:68%; left:9%}
.zodiac-items li:nth-child(10){top:50%; left:2%; transform:translate(0,-50%)}
.zodiac-items li:nth-child(11){top:27%; left:6%}
.zodiac-items li:nth-child(12){top:10%; left:22%}

/* Starfield subtle dots */
.zodiac-starfield{position:absolute; inset:0; background:
  radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
  radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.25), transparent 60%),
  radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.25), transparent 60%),
  radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,.25), transparent 60%)}

/* Mobile tweaks */
@media (max-width:640px){
  .section{padding-block:2.5rem}
}

/* Accessibility focus */
:focus-visible{outline:2px solid rgba(255,179,71,.55); outline-offset:2px}

/* style.css */
#card-container::-webkit-scrollbar {
  display: none;
}
#card-container {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}
