/* ==========================================================================
   DESTINY OF ZODIAC — Core Design System (Compact Luxury Galaxy Edition)
   Deep navy celestial background, refined luxury typography, razor-sharp UI
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* --- core luxury palette --- */
  --void:        #040612;   /* deep cosmic navy void */
  --void-2:      #080C22;
  --panel:       #0A0E24;   /* sleek card panel */
  --panel-2:     #101535;   /* raised panel */
  --line:        rgba(201,162,75,0.16);   /* hairline constellation rule */
  --line-strong: rgba(201,162,75,0.32);

  --gold:        #C9A24B;   /* primary brand gold */
  --gold-bright: #E7C57A;
  --gold-dim:    #8A6E33;
  --cream:       #F3E9D2;   /* celestial starlight text */
  --ash:         #A8A5B2;   /* secondary text */
  --ash-dim:     #6D6A78;

  /* --- zodiac elemental accents --- */
  --z-aries:       #E2432A;
  --z-taurus:      #4CAF6D;
  --z-gemini:      #E0559C;
  --z-cancer:      #4A8FE0;
  --z-leo:         #E0A930;
  --z-virgo:       #D9668F;
  --z-libra:       #D9B23C;
  --z-scorpio:     #2F7FE0;
  --z-sagittarius: #9C6FDB;
  --z-capricorn:   #C97A3D;
  --z-aquarius:    #3E9CD6;
  --z-pisces:      #2FB8A6;

  --accent: var(--gold);
  --accent-soft: rgba(201,162,75,0.14);

  /* --- luxury typography --- */
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body: 'Jost', 'Century Gothic', 'Futura', -apple-system, 'Segoe UI', sans-serif;

  /* --- compact refined spacing --- */
  --edge: clamp(16px, 4vw, 48px);
  --radius: 3px;
  --radius-lg: 8px;
  --ease: cubic-bezier(.22,.68,.16,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   PAGE BACKGROUND (Deep Navy Galaxy)
   ========================================================================== */
body{
  margin:0;
  background: radial-gradient(ellipse at 50% 0%, #0d1238 0%, #070a20 40%, #040612 100%);
  background-attachment: fixed;
  color:var(--cream);
  font-family:var(--f-body);
  font-size:0.92rem;
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Subtle, non-intrusive nebula glow layer in background */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(40,60,160,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 65%, rgba(90,30,140,0.08) 0%, transparent 60%);
  opacity:0.85;
}

#stars{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.02; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{ position:relative; z-index:3; }

/* ==========================================================================
   TYPOGRAPHY (Compact & Ultra-Refined)
   ========================================================================== */
h1,h2,h3,h4,h5{ font-family:var(--f-display); font-weight:600; color:var(--cream); margin:0; letter-spacing:.01em; }
h1{ font-size:clamp(2rem, 3.8vw, 3.2rem); line-height:1.1; font-weight:600; }
h2{ font-size:clamp(1.5rem, 2.5vw, 2.1rem); line-height:1.18; }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.25; }
h4{ font-size:0.92rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--f-body); font-weight:500; }
h5{ font-size:0.75rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--f-body); font-weight:500; }

p{ margin:0; color:var(--ash); font-weight:300; font-size:0.92rem; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold); color:var(--void); }
:focus-visible{ outline:1.5px solid var(--gold-bright); outline-offset:2px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:12px;
}
.eyebrow::before{ content:''; width:20px; height:1px; background:var(--gold-dim); }

.glyph{
  font-family:var(--f-display);
  font-size:1.15em;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold-bright);
  text-shadow:0 0 10px rgba(201,162,75,0.4);
  transition:transform .3s var(--ease), text-shadow .3s var(--ease), color .3s;
}

.glyph-seal{
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,0.15) 0%, rgba(10,14,36,0.85) 100%);
  border:1px solid rgba(201,162,75,0.3);
  box-shadow:0 0 10px rgba(201,162,75,0.12);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
  transition:all .3s var(--ease);
}
.glyph-seal .glyph{ font-size:1.05rem; }

/* ==========================================================================
   LAYOUT & WRAPPERS
   ========================================================================== */
.wrap{ max-width:1200px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); width:100%; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); width:100%; }

section{ position:relative; padding:clamp(32px, 4.2vw, 52px) 0; }

.rule{
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
  position:relative; margin:0;
}
.rule::after{
  content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--gold); background:var(--void); padding:0 12px; font-size:.65rem;
}

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 60ms); }

/* ==========================================================================
   BUTTONS (Compact & Elegant)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  border-radius:var(--radius);
  border:1px solid var(--gold-dim);
  background:transparent;
  color:var(--cream);
  transition:all .3s var(--ease);
  white-space:nowrap;
  text-decoration:none;
}
.btn:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,162,75,0.15); }
.btn:active{ transform:translateY(0); }

.btn-solid{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#120E05; border-color:transparent; font-weight:600;
  box-shadow:0 4px 18px rgba(201,162,75,0.3);
}
.btn-solid:hover{ color:#120E05; filter:brightness(1.08); box-shadow:0 6px 24px rgba(201,162,75,0.45); }

.btn-ghost{ border-color:transparent; padding-left:0; padding-right:0; }
.btn-ghost:hover{ transform:none; box-shadow:none; }
.btn-sm{ padding:8px 18px; font-size:.68rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); transition:gap .25s; }
.link-arrow span{ transition:transform .3s var(--ease); }
.link-arrow:hover span{ transform:translateX(4px); }

/* ==========================================================================
   HEADER (Fixed Sleek Luxury Nav)
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 var(--edge);
  height:70px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(4, 6, 18, 0.88);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(201,162,75,0.18);
  transition:background .35s ease, height .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  height:62px;
  background:rgba(4, 6, 18, 0.96);
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  border-bottom-color:rgba(201,162,75,0.28);
}

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:12px; z-index:2; text-decoration:none; }
.brand img{
  height:48px !important; width:auto !important;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(201,162,75,0.35));
  transition:transform .3s var(--ease);
}
.brand:hover img{ transform:scale(1.04); }
.brand-word{
  font-family:var(--f-display); font-size:1.35rem; font-weight:600;
  letter-spacing:.02em; color:var(--cream); line-height:1.05;
}
.brand-word small{
  display:block; font-family:var(--f-body); font-size:.56rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:500;
  margin-top:2px;
}

/* Desktop Nav */
.nav-desktop{ display:flex; align-items:center; gap:32px; }
.nav-desktop a{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
  position:relative; padding:6px 0; transition:color .25s ease; font-weight:400;
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-desktop a:hover, .nav-desktop a.active{ color:var(--cream); }
.nav-desktop a:hover::after, .nav-desktop a.active::after{ transform:scaleX(1); }

/* Header Actions */
.header-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{
  position:relative; width:36px; height:36px; border-radius:50%;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:var(--cream); background:rgba(201,162,75,0.06); border:1px solid rgba(201,162,75,0.16);
  transition:all .25s var(--ease);
  box-sizing:border-box; padding:0; margin:0; flex-shrink:0; line-height:0; text-decoration:none;
}
.icon-btn.only-desktop{ display:inline-flex !important; }
@media (max-width:960px){
  .icon-btn.only-desktop{ display:none !important; }
}
.icon-btn:hover{ color:var(--gold-bright); border-color:var(--gold); background:rgba(201,162,75,0.14); }
.icon-btn svg{ width:18px; height:18px; display:block; margin:auto; stroke:currentColor; }
.badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  background:var(--gold); color:#120E05; border-radius:10px;
  font-size:.58rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-body);
}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; width:32px; height:32px;
  background:none; border:none; padding:6px 4px; cursor:pointer; z-index:2;
}
.menu-toggle span{ height:1.5px; width:100%; background:var(--cream); transition:transform .3s var(--ease), opacity .3s; }
.menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0; z-index:90;
  background:rgba(4, 6, 18, 0.97);
  backdrop-filter:blur(24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.nav-mobile.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.nav-mobile a{ font-family:var(--f-display); font-size:1.75rem; padding:10px 0; color:var(--cream); }
.nav-mobile a.active{ color:var(--gold); }
.nav-mobile-sep{ width:48px; height:1px; background:var(--line-strong); margin:12px 0; }
.nav-mobile-sub{ display:flex; gap:20px; }
.nav-mobile-sub a{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-family:var(--f-body); color:var(--ash); padding:6px 0; }

@media (max-width:960px){
  .nav-desktop{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ==========================================================================
   FOOTER (Clean & Compact)
   ========================================================================== */
.site-footer{
  background:rgba(8, 12, 32, 0.85);
  border-top:1px solid var(--line);
  padding:clamp(40px, 5vw, 64px) 0 24px;
}
.footer-top{
  display:grid; grid-template-columns:1.8fr repeat(3, 1fr) 1.5fr; gap:clamp(20px, 3vw, 44px);
  margin-bottom:36px;
}
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:.82rem; color:var(--ash); line-height:1.55; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:30px; height:30px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ash);
  transition:all .25s;
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,75,0.1); }
.footer-social svg{ width:14px; height:14px; }

.footer-col h4{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col a{ font-size:.8rem; color:var(--ash); transition:color .25s; }
.footer-col a:hover{ color:var(--gold-bright); }

.footer-newsletter h4{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.footer-newsletter p{ font-size:.8rem; margin-bottom:12px; }
.footer-newsletter form{ display:flex; border-bottom:1px solid var(--line-strong); padding-bottom:6px; margin-top:10px; }
.footer-newsletter input{ flex:1; background:none; border:none; color:var(--cream); font-size:.82rem; padding:4px 0; outline:none; }
.footer-newsletter input::placeholder{ color:var(--ash-dim); }
.footer-newsletter button{ background:none; border:none; color:var(--gold); font-size:1.1rem; cursor:pointer; }
.footer-note{ font-size:.68rem; color:var(--ash-dim); margin-top:8px; }

.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.72rem; color:var(--ash-dim);
}
.footer-bottom a{ color:var(--ash-dim); transition:color .25s; }
.footer-bottom a:hover{ color:var(--gold); }
.footer-legal{ display:flex; gap:18px; }

@media (max-width:960px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:540px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   CARDS & GRIDS (Compact & Premium)
   ========================================================================== */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  text-decoration:none; display:flex; flex-direction:column;
}
.card:hover{
  border-color:var(--accent, var(--gold-dim));
  transform:translateY(-4px);
  box-shadow:0 14px 34px -10px rgba(0,0,0,0.6), 0 0 20px -6px var(--accent, rgba(201,162,75,0.2));
}
.card-media{ position:relative; aspect-ratio:1; overflow:hidden; background:rgba(0,0,0,0.3); }
.card-media img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }
.card-media .tag{
  position:absolute; top:10px; left:10px; padding:3px 10px;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  background:rgba(4,6,18,0.85); border:1px solid var(--line-strong); border-radius:20px; color:var(--gold-bright);
  backdrop-filter:blur(6px);
}
.card-body{ padding:14px 14px 16px; flex:1; display:flex; flex-direction:column; }
.card-eyebrow{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent, var(--gold)); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.card-title{ font-family:var(--f-display); font-size:1.15rem; font-weight:600; margin-bottom:4px; }
.card-desc{ font-size:.78rem; line-height:1.45; color:var(--ash); margin-bottom:12px; flex:1; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px; border-top:1px solid rgba(201,162,75,0.08); }
.price{ font-family:var(--f-display); font-size:1.15rem; color:var(--cream); font-weight:600; }
.price small{ font-family:var(--f-body); font-size:.65rem; color:var(--ash-dim); text-decoration:line-through; margin-left:6px; font-weight:400; }

/* ---- Chips & Pills ---- */
.sign-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 5px 8px; border:1px solid rgba(201,162,75,0.25); border-radius:30px;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ash);
  transition:all .25s var(--ease); background:rgba(10,14,36,0.8);
}
.sign-chip:hover, .sign-chip.active{
  border-color:var(--accent-c, var(--gold)); color:var(--cream); background:var(--accent-soft-c, var(--accent-soft));
  box-shadow:0 0 12px rgba(201,162,75,0.2); transform:translateY(-1px);
}
.sign-chip .glyph{ color:var(--accent-c, var(--gold-bright)); font-size:1.05rem; }

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(201,162,75,0.35); color:var(--gold-bright);
  background:rgba(201,162,75,0.08);
}

/* ---- Stat Strip ---- */
.stat-strip{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(201,162,75,0.02); }
.stat{ flex:1; min-width:130px; text-align:center; padding:16px 12px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat-num{ font-family:var(--f-display); font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--gold); font-weight:600; }
.stat-label{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash-dim); margin-top:4px; }
@media (max-width:600px){ .stat{ border-left:none; border-bottom:1px solid var(--line); } .stat:last-child{ border-bottom:none; } }

/* ---- Toast ---- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); border:1px solid var(--gold-dim); color:var(--cream);
  padding:10px 20px; border-radius:6px; font-size:.78rem; letter-spacing:.04em;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:300; display:flex; align-items:center; gap:8px; box-shadow:0 14px 40px rgba(0,0,0,0.7);
  max-width:90vw; white-space:nowrap;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
#toast .glyph{ color:var(--gold); font-size:1rem; }

/* ---- Breadcrumb ---- */
.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ash-dim); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ color:var(--ash-dim); }

/* ---- Page Hero ---- */
.page-hero{ padding:78px 0 24px; position:relative; z-index:1; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero p{ max-width:540px; margin-top:14px; font-size:.95rem; }

/* ---- Form Elements ---- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line-strong); color:var(--cream);
  padding:10px 14px; border-radius:4px; font-size:.86rem; transition:border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field-hint{ font-size:.68rem; color:var(--ash-dim); margin-top:6px; }
.otp-boxes{ display:flex; gap:8px; }
.otp-boxes input{ text-align:center; font-size:1.15rem; letter-spacing:0; padding:10px 0; font-family:var(--f-display); }

/* ---- Section Heading ---- */
.section-head{ max-width:580px; margin-bottom:32px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:10px; font-size:.92rem; }

/* ---- Utilities ---- */
.mt-0{margin-top:0;} .center-text{text-align:center;}
.only-mobile{ display:none; } .only-desktop{ display:block; }
@media (max-width:768px){ .only-mobile{ display:block !important; } .only-desktop{ display:none !important; } }