:root{
  --bg:#070411;
  --bg-2:#140B2D;
  --violet:#8B5CF6;
  --gold:#F6C76E;
  --pink:#FF6B9E;
  --aura:#56D6FF;
  --text:#FFF7EA;
  --muted:#C9B8E8;
  --panel:rgba(20,11,45,.72);
  --panel-strong:rgba(255,247,234,.1);
  --line:rgba(255,247,234,.18);
  --line-strong:rgba(246,199,110,.45);
  --radius:8px;
  --shadow:0 22px 70px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.cosmic-app{
  min-height:100vh;
  color:var(--text);
  font-family:"Manrope",system-ui,sans-serif;
  background:
    linear-gradient(140deg,rgba(86,214,255,.08),transparent 32%),
    linear-gradient(215deg,rgba(255,107,158,.09),transparent 38%),
    linear-gradient(180deg,var(--bg) 0%,#0d061f 54%,var(--bg-2) 100%);
}
body.cosmic-app::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    radial-gradient(circle at 12px 18px,rgba(255,247,234,.35) 1px,transparent 1.5px),
    radial-gradient(circle at 76px 92px,rgba(86,214,255,.24) 1px,transparent 1.5px);
  background-size:150px 150px,210px 210px;
  mix-blend-mode:screen;
}
body.cosmic-app a{color:inherit}
body.cosmic-app .site-shell{padding:1.25rem .75rem 4rem}
body.cosmic-app .container-xxl{position:relative;z-index:1}

h1,h2,h3,.brand-copy strong{
  font-family:"Playfair Display",Georgia,serif;
  letter-spacing:0;
}
h1{font-size:clamp(2.35rem,5vw,5.2rem);line-height:.98;margin:0 0 1rem}
h2{font-size:2rem;line-height:1.05;margin:0 0 .8rem}
h3{font-size:1.25rem;line-height:1.15;margin:0 0 .55rem}
p{color:var(--muted);line-height:1.7}

.site-header{
  background:rgba(7,4,17,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.navbar-shell{padding:.7rem 0}
.brand-mark{
  border-radius:8px;
  background:linear-gradient(135deg,var(--gold),var(--pink) 48%,var(--violet));
  color:#070411;
  box-shadow:0 14px 44px rgba(139,92,246,.32);
}
.brand-copy strong{color:var(--text);font-size:1.05rem}
.brand-copy span,.eyebrow,.meta-label{
  color:var(--gold);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}
.navbar-nav .nav-link{
  color:var(--muted);
  border:0;
  border-radius:8px;
  padding:.55rem .7rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:var(--text);
  background:rgba(255,247,234,.08);
  border:0;
}
.navbar-toggler{color:var(--text)}
.navbar-toggler-icon{filter:invert(1)}
.header-premium-link{display:inline-flex}
.search-shell{width:auto;max-width:none;flex:0 0 auto}
.header-search .form-control,
input,select,textarea{
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,247,234,.08);
  box-shadow:none;
}
.header-search .form-control{width:11rem;min-width:11rem}
.header-search .form-control::placeholder,
input::placeholder,
textarea::placeholder{color:rgba(201,184,232,.72)}
.header-search .form-control:focus,
input:focus,
select:focus,
textarea:focus{
  color:var(--text);
  background:rgba(255,247,234,.11);
  border-color:var(--aura);
  box-shadow:0 0 0 .18rem rgba(86,214,255,.16);
}
select option{background:#140B2D;color:var(--text)}

.card,
.glass-panel,
.form-card,
.premium-summary,
.report-reader,
.centered-empty{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,247,234,.1),rgba(255,247,234,.045));
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  color:var(--text);
}
.glass-panel,.report-reader{padding:1.25rem}
.content-main.card,.aside-card.card,.hero-panel.card,.hero-note.card{background:linear-gradient(180deg,rgba(255,247,234,.1),rgba(255,247,234,.045))}

.btn{
  border-radius:8px;
  font-weight:800;
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
}
.btn-accent{
  border:1px solid rgba(246,199,110,.62);
  color:#120815;
  background:linear-gradient(135deg,var(--gold),#ffdca0 45%,var(--pink));
  box-shadow:0 14px 40px rgba(246,199,110,.24);
}
.btn-accent:hover,.btn-accent:focus{color:#120815;filter:brightness(1.05)}
.btn-secondary{
  border:1px solid rgba(86,214,255,.34);
  color:var(--text);
  background:rgba(86,214,255,.1);
}
.btn-secondary:hover,.btn-secondary:focus{border-color:var(--aura);background:rgba(86,214,255,.16);color:var(--text)}
.btn-quiet{
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(255,247,234,.07);
}
.btn-quiet:hover,.btn-quiet:focus{color:var(--text);background:rgba(255,247,234,.12)}

.cosmic-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,24rem);
  gap:1rem;
  min-height:34rem;
  padding:clamp(1.2rem,4vw,3rem);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#080512;
  box-shadow:var(--shadow);
}
.cosmic-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,4,17,.95) 0%,rgba(7,4,17,.78) 38%,rgba(7,4,17,.2) 100%);
}
.cosmic-hero-media{
  position:absolute;
  inset:0;
  background-image:url("/assets/img/cosmic/hero-astral-wheel.png");
  background-size:cover;
  background-position:center right;
  opacity:.86;
}
.cosmic-hero-content,
.hero-product-panel,
.hero-oracle-panel,
.tarot-hero-spread,
.astral-wheel-preview{
  position:relative;
  z-index:1;
}
.cosmic-hero-content{
  max-width:48rem;
  align-self:center;
}
.cosmic-hero-content p{max-width:42rem;font-size:1.08rem}
.hero-actions,.wizard-actions,.share-actions,.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
}
.hero-product-panel,.hero-oracle-panel{
  align-self:end;
  padding:1.1rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:rgba(7,4,17,.56);
  backdrop-filter:blur(18px);
}
.hero-product-panel strong,.hero-oracle-panel strong,.price-tag{
  display:block;
  color:var(--gold);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:2.35rem;
  line-height:1;
  margin:.35rem 0 .55rem;
}

.section{margin-top:2.1rem}
.section-head{max-width:48rem;margin-bottom:1rem}
.section-head-inline{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:end;
  max-width:none;
}
.section-head p{margin-bottom:0}

.quick-start-panel,
.premium-strip,
.result-stage,
.checkout-grid,
.split-feature,
.landing-commercial-grid,
.compatibility-lab{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,28rem);
  gap:1rem;
  align-items:stretch;
}
.quick-start-panel{grid-template-columns:minmax(18rem,.72fr) minmax(0,1.28fr)}
.quick-start-copy,
.premium-strip-copy,
.section-copy,
.compatibility-form{
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,247,234,.06);
}
.quick-action-grid,
.premium-strip-grid,
.viral-grid,
.zodiac-grid,
.service-choice-grid,
.landing-link-grid,
.faq-grid,
.insight-grid,
.grid{
  display:grid;
  gap:1rem;
}
.quick-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.premium-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.viral-grid,.insight-grid,.landing-commercial-grid,.faq-grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.landing-link-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

.quick-action-card,
.premium-mini-card,
.zodiac-card,
.shareable-card,
.service-choice,
.landing-link-card,
.faq-item,
.insight-panel,
.hour-card{
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,247,234,.07);
  color:var(--text);
}
.service-choice{
  text-align:left;
  min-height:11.5rem;
}
.service-choice.is-selected,
.zodiac-card.is-favorite{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(246,199,110,.16),rgba(139,92,246,.12));
}
.quick-action-card h3,
.premium-mini-card h3,
.zodiac-card h3,
.shareable-card h3{margin-top:.35rem}
.inline-fields,
.compatibility-selectors{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}
.search-block{display:grid;grid-template-columns:1fr auto;gap:.7rem;margin-top:1rem}
.hour-card{display:grid;gap:.55rem}
.hour-card .time{
  color:var(--gold);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:2rem;
  line-height:1;
}
.badge{
  justify-self:start;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,247,234,.08);
  color:var(--muted);
}
.premium-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,28rem);
  gap:1rem;
  align-items:start;
}
.premium-layout .span-12{grid-column:1/-1}
.compatibility-selectors{
  grid-template-columns:1fr auto 1fr;
  align-items:end;
}
.compatibility-pulse{
  width:3rem;
  height:3rem;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--gold);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:1.4rem;
}

label{display:grid;gap:.4rem;color:var(--muted);font-weight:700}
input,select,textarea{width:100%;padding:.82rem .9rem}
textarea{min-height:9rem;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.span-2,.context-field{grid-column:1/-1}
[hidden]{display:none!important}

.premium-wizard-shell{
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,247,234,.045);
}
.wizard-progress{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.7rem;
  margin:1rem 0;
}
.wizard-progress button{
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  background:rgba(255,247,234,.05);
  padding:.75rem;
  font-weight:800;
}
.wizard-progress button span{
  display:inline-grid;
  place-items:center;
  width:1.55rem;
  height:1.55rem;
  margin-right:.45rem;
  border-radius:50%;
  background:rgba(255,247,234,.09);
}
.wizard-progress button.is-active{color:var(--text);border-color:var(--gold)}
.premium-wizard{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(7,4,17,.42);
  padding:1rem;
}
.wizard-step{display:none}
.wizard-step.is-active{display:grid;gap:1rem}
.wizard-step-copy{max-width:44rem}
.premium-summary{padding:1rem}
.premium-preview-output .info-card{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:rgba(255,247,234,.06)}
.checkout-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.checkout-preview>div{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:rgba(255,247,234,.06)}
.premium-review-dialog{
  max-width:38rem;
  width:calc(100% - 2rem);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--text);
  background:#100821;
  box-shadow:var(--shadow);
}
.premium-review-dialog::backdrop{background:rgba(7,4,17,.76);backdrop-filter:blur(8px)}
.dialog-inner{padding:1rem}
.dialog-summary{display:grid;gap:.5rem;margin:1rem 0}
.dialog-summary span{display:block;padding:.65rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}

.chip-link,
.text-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.58rem .78rem;
  background:rgba(255,247,234,.06);
  color:var(--text);
  font-weight:800;
}
button.chip-link{cursor:pointer}
.chip-link:hover,.text-link:hover{border-color:var(--gold);color:var(--text)}
.chip-link.is-dark{background:rgba(246,199,110,.16);border-color:rgba(246,199,110,.42)}
.chip-column{display:grid;gap:.55rem}
.list-clean{padding-left:0;list-style:none;display:grid;gap:.55rem}
.list-clean li{color:var(--muted)}
.list-clean li::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.55rem;border-radius:50%;background:var(--gold)}

.zodiac-symbol{
  width:3.4rem;
  height:3.4rem;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--gold);
  font-size:2rem;
  margin-bottom:.85rem;
  background:rgba(246,199,110,.1);
}
.result-card{
  padding:1.25rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(255,107,158,.1));
  box-shadow:var(--shadow);
}
.score-orbit{
  --score:75;
  width:10rem;
  height:10rem;
  display:grid;
  place-items:center;
  margin:1rem 0;
  border-radius:50%;
  background:
    radial-gradient(circle,#120815 58%,transparent 59%),
    conic-gradient(var(--gold) calc(var(--score) * 1%),rgba(255,247,234,.14) 0);
}
.score-orbit strong{
  color:var(--gold);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:2rem;
  line-height:1;
}
.score-orbit span{color:var(--muted);font-size:.8rem}
.metric-list{display:grid;gap:.8rem}
.metric-list div{display:grid;gap:.35rem}
.metric-list span{color:var(--muted)}
.metric-list strong{font-family:"Space Grotesk",system-ui,sans-serif;color:var(--text)}
.metric-list i,
.report-preview-bars i{
  display:block;
  height:.45rem;
  border-radius:8px;
  background:linear-gradient(90deg,var(--aura),var(--gold),var(--pink));
}
.report-preview-panel{
  padding:1.25rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:rgba(7,4,17,.55);
}
.report-preview-top strong{display:block;font-size:1.4rem;color:var(--text)}
.report-preview-bars{display:grid;gap:1rem;margin-top:1rem}
.report-preview-bars div{display:grid;gap:.4rem;color:var(--muted)}
.fact-list{display:grid;gap:.55rem;margin-top:1rem}
.fact-list span{padding:.65rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}

.content-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,22rem);
  gap:1rem;
  align-items:start;
}
.content-side{display:grid;gap:1rem}
.article-body{color:var(--muted)}
.prose h1,.prose h2,.prose h3{color:var(--text);margin-top:1.2rem}
.prose p,.prose li{color:var(--muted)}
.prose a{color:var(--gold);font-weight:800}
.article-lead{font-size:1.08rem;color:var(--text)}

.tarot-stage{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
  background:rgba(255,247,234,.055);
}
.tarot-hero-spread{
  display:flex;
  gap:.8rem;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-height:16rem;
}
.tarot-hero-spread span,
.tarot-picker-card::before{
  width:6rem;
  height:9rem;
  border:1px solid rgba(246,199,110,.52);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(246,199,110,.28),transparent 28%),
    linear-gradient(215deg,rgba(86,214,255,.18),transparent 38%),
    #120821;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.tarot-hero-spread span:nth-child(1){transform:rotate(-8deg)}
.tarot-hero-spread span:nth-child(3){transform:rotate(8deg)}
.tarot-hero-spread.is-small{min-height:11rem}
.tarot-slot-grid,
.tarot-picker-grid,
.tarot-reading-summary{
  display:grid;
  gap:1rem;
}
.tarot-slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:1rem 0}
.tarot-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tarot-picker-card,
.tarot-slot-card,
.tarot-reading-chip{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
  background:rgba(255,247,234,.06);
  color:var(--text);
  text-align:left;
}
.tarot-picker-card::before{
  content:"";
  width:100%;
  height:6rem;
  display:block;
  margin-bottom:.8rem;
}
.tarot-slot-card.is-active,.tarot-picker-card.is-used{border-color:var(--gold)}
.tarot-slot-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.tarot-slot-toggle{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:.5rem;margin-top:.7rem}
.tarot-slot-toggle input{width:auto}

.astral-wheel-preview{
  align-self:center;
  justify-self:center;
  width:min(24rem,100%);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(circle,rgba(246,199,110,.9) 0 4%,transparent 5%),
    radial-gradient(circle,transparent 0 28%,rgba(246,199,110,.28) 29% 30%,transparent 31% 47%,rgba(86,214,255,.22) 48% 49%,transparent 50%),
    conic-gradient(from 0deg,rgba(246,199,110,.4),rgba(139,92,246,.14),rgba(86,214,255,.22),rgba(255,107,158,.18),rgba(246,199,110,.4));
  box-shadow:inset 0 0 50px rgba(246,199,110,.12),0 20px 60px rgba(0,0,0,.36);
}
.astral-wheel-preview span{
  display:block;
  width:68%;
  aspect-ratio:1;
  margin:16%;
  border-radius:50%;
  border:1px dashed rgba(255,247,234,.42);
}
.astral-wheel-preview.is-small{width:15rem}

.footer-shell{
  border-top:1px solid var(--line);
  color:var(--muted);
}
.site-footer{background:rgba(7,4,17,.88)}
.footer-lead{font-size:1.05rem}
.footer-col h3{color:var(--text)}
.footer-col a,.footer-bottom a{color:var(--muted)}
.footer-col a:hover,.footer-bottom a:hover{color:var(--gold)}
.footer-install{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,247,234,.05);
}
.footer-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.footer-badges a{border:1px solid var(--line);border-radius:8px;padding:.45rem .65rem;color:var(--text)}

.flash{
  margin-top:1rem;
  border:1px solid rgba(86,214,255,.38);
  border-radius:var(--radius);
  background:rgba(86,214,255,.1);
  color:var(--text);
}
.flash-error{border-color:rgba(255,107,158,.5);background:rgba(255,107,158,.12)}
.skeleton-card{background:rgba(255,247,234,.08);border-color:var(--line)}
.breadcrumbs a,.breadcrumbs span{color:var(--muted)}

@media (max-width:1199px){
  .navbar-collapse{
    margin-top:.9rem;
    padding:1rem;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(7,4,17,.94);
  }
  .search-shell{max-width:none;margin-top:.75rem}
}
@media (max-width:980px){
  .cosmic-hero,
  .quick-start-panel,
  .premium-strip,
  .result-stage,
  .checkout-grid,
  .split-feature,
  .compatibility-lab,
  .premium-layout,
  .content-layout{
    grid-template-columns:1fr;
  }
  .quick-action-grid,
  .premium-strip-grid,
  .viral-grid,
  .zodiac-grid,
  .service-choice-grid,
  .landing-link-grid,
  .faq-grid,
  .insight-grid,
  .tarot-slot-grid,
  .tarot-picker-grid,
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .section-head-inline{align-items:start;flex-direction:column}
  .cosmic-hero{min-height:auto}
  .cosmic-hero::after{background:linear-gradient(180deg,rgba(7,4,17,.95),rgba(7,4,17,.65))}
  .hero-product-panel,.hero-oracle-panel{align-self:auto}
}
@media (max-width:640px){
  body.cosmic-app .site-shell{padding:.85rem .5rem 3rem}
  h1{font-size:2.45rem}
  h2{font-size:1.65rem}
  .cosmic-hero{padding:1rem}
  .quick-action-grid,
  .premium-strip-grid,
  .viral-grid,
  .zodiac-grid,
  .service-choice-grid,
  .landing-link-grid,
  .faq-grid,
  .insight-grid,
  .tarot-slot-grid,
  .tarot-picker-grid,
  .grid,
  .form-grid,
  .checkout-preview,
  .compatibility-selectors,
  .inline-fields,
  .search-block,
  .wizard-progress{
    grid-template-columns:1fr;
  }
  .compatibility-pulse{justify-self:center}
  .hero-actions .btn,.wizard-actions .btn,.share-actions .chip-link{width:100%}
  .tarot-hero-spread{min-height:10rem}
  .tarot-hero-spread span{width:4.4rem;height:6.7rem}
}