/*
Theme Name: Meridian
Theme URI: https://meridianos.dev
Description: Dark mystical sales theme for MeridianOS digital products
Author: MeridianOS
Version: 1.0
Text Domain: meridian
*/

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#c2a96a;
  --gold-light:#d4be8a;
  --dark:#0f0f0f;
  --card:#1a1a1a;
  --border:#2a2a2a;
  --text:#eaeaea;
  --text-dim:#9a9a9a;
  --font-display:'Playfair Display',serif;
  --font-body:'Inter',sans-serif;
}

body{
  background:var(--dark);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
}

a{
  color:var(--gold);
  text-decoration:none;
  transition:color 0.3s;
}
a:hover{color:var(--gold-light)}

img{max-width:100%;height:auto}

/* ===== NAVIGATION ===== */
.site-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(15,15,15,0.95);
  backdrop-filter:blur(10px);
}

.site-logo{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--gold);
  font-weight:600;
  letter-spacing:1px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
}

.nav-links a{
  color:var(--text-dim);
  font-size:0.9rem;
  font-weight:400;
  transition:color 0.3s;
}
.nav-links a:hover{color:var(--gold)}

.btn{
  display:inline-block;
  padding:10px 24px;
  border-radius:8px;
  font-weight:500;
  font-size:0.9rem;
  transition:all 0.3s ease;
  cursor:pointer;
  border:none;
}

.btn-gold{
  background:var(--gold);
  color:#000;
}
.btn-gold:hover{
  background:var(--gold-light);
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(194,169,106,0.3);
}

.btn-outline{
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
}
.btn-outline:hover{
  background:var(--gold);
  color:#000;
}

.btn-dark{
  background:#2a2a2a;
  color:var(--text);
}
.btn-dark:hover{
  background:#333;
  transform:translateY(-2px);
}

/* ===== HERO ===== */
.hero{
  text-align:center;
  padding:100px 20px 80px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:600px;
  background:radial-gradient(circle,rgba(194,169,106,0.08) 0%,transparent 70%);
  pointer-events:none;
}

.hero-badge{
  display:inline-block;
  padding:6px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  font-size:0.8rem;
  color:var(--text-dim);
  margin-bottom:24px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(2.5rem,6vw,4.5rem);
  color:var(--gold);
  margin-bottom:20px;
  line-height:1.1;
}

.hero p{
  font-size:1.15rem;
  color:var(--text-dim);
  max-width:560px;
  margin:0 auto 40px;
}

.hero-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ===== FEATURES / STATS ===== */
.stats-bar{
  display:flex;
  justify-content:center;
  gap:60px;
  padding:40px 20px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

.stat{text-align:center}
.stat-num{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--gold);
}
.stat-label{
  font-size:0.8rem;
  color:var(--text-dim);
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ===== SECTION COMMON ===== */
.section{
  padding:80px 20px;
  max-width:1200px;
  margin:0 auto;
}

.section-title{
  text-align:center;
  font-size:2.2rem;
  color:var(--gold);
  margin-bottom:12px;
}

.section-sub{
  text-align:center;
  color:var(--text-dim);
  margin-bottom:50px;
  font-size:1rem;
}

/* ===== PRODUCT CARDS ===== */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}

.product-card{
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  padding:32px;
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.product-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity 0.4s;
}

.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 8px 40px rgba(194,169,106,0.15);
  border-color:rgba(194,169,106,0.3);
}

.product-card:hover::before{opacity:1}

.product-icon{
  font-size:2.5rem;
  margin-bottom:16px;
  display:block;
}

.product-card h3{
  font-size:1.4rem;
  color:var(--gold);
  margin-bottom:8px;
}

.product-card .desc{
  color:var(--text-dim);
  font-size:0.9rem;
  margin-bottom:20px;
  line-height:1.7;
}

.product-card .price{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--text);
  margin-bottom:16px;
}

.product-card .price span{
  font-size:0.85rem;
  color:var(--text-dim);
  font-family:var(--font-body);
}

/* ===== TAROT DEMO ===== */
.tarot-section{
  text-align:center;
  padding:80px 20px;
  background:linear-gradient(180deg,transparent,rgba(194,169,106,0.03),transparent);
}

.tarot-deck{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:40px;
}

.tarot-card{
  width:120px;
  height:180px;
  perspective:1000px;
  cursor:pointer;
}

.tarot-inner{
  width:100%;
  height:100%;
  transition:transform 0.8s cubic-bezier(0.4,0,0.2,1);
  transform-style:preserve-3d;
  position:relative;
}

.tarot-card.flipped .tarot-inner{
  transform:rotateY(180deg);
}

.tarot-front,.tarot-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--border);
}

.tarot-front{
  background:linear-gradient(145deg,#1a1a1a,#111);
  color:var(--gold);
  font-size:2.5rem;
}

.tarot-front::after{
  content:'Tap to reveal';
  font-size:0.7rem;
  color:var(--text-dim);
  margin-top:10px;
  font-family:var(--font-body);
}

.tarot-back{
  background:linear-gradient(145deg,#111,#0a0a0a);
  transform:rotateY(180deg);
  padding:16px;
  text-align:center;
}

.tarot-back .card-name{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:1rem;
  margin-bottom:6px;
}

.tarot-back .card-meaning{
  font-size:0.75rem;
  color:var(--text-dim);
  line-height:1.5;
}

.tarot-back .card-icon{
  font-size:1.8rem;
  margin-bottom:8px;
}

/* ===== FEATURES LIST ===== */
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}

.feature-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px;
  transition:border-color 0.3s;
}

.feature-item:hover{
  border-color:rgba(194,169,106,0.3);
}

.feature-item .icon{
  font-size:1.6rem;
  margin-bottom:12px;
  display:block;
}

.feature-item h4{
  color:var(--text);
  font-family:var(--font-body);
  font-weight:500;
  margin-bottom:8px;
}

.feature-item p{
  color:var(--text-dim);
  font-size:0.85rem;
}

/* ===== BUNDLE / CTA ===== */
.cta-section{
  text-align:center;
  padding:100px 20px;
  position:relative;
}

.cta-section::before{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(194,169,106,0.06) 0%,transparent 70%);
  pointer-events:none;
}

.cta-section h2{
  font-size:2.5rem;
  color:var(--gold);
  margin-bottom:16px;
}

.cta-section p{
  color:var(--text-dim);
  margin-bottom:40px;
  font-size:1.05rem;
}

.cta-price{
  font-family:var(--font-display);
  font-size:3rem;
  color:var(--text);
  margin-bottom:8px;
}

.cta-price-old{
  text-decoration:line-through;
  color:var(--text-dim);
  font-size:1rem;
  margin-bottom:24px;
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}

.testimonial{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px;
}

.testimonial .quote{
  color:var(--text-dim);
  font-size:0.9rem;
  font-style:italic;
  margin-bottom:16px;
  line-height:1.7;
}

.testimonial .author{
  color:var(--gold);
  font-weight:500;
  font-size:0.85rem;
}

/* ===== FOOTER ===== */
.site-footer{
  text-align:center;
  padding:40px 20px;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-size:0.8rem;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:16px;
  list-style:none;
}

.footer-links a{
  color:var(--text-dim);
  font-size:0.8rem;
}
.footer-links a:hover{color:var(--gold)}

/* ===== SCROLL ANIMATION ===== */
.fade-up{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}

.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .site-nav{padding:16px 20px}
  .nav-links{gap:16px}
  .hero{padding:60px 20px 50px}
  .stats-bar{gap:30px}
  .section{padding:60px 16px}
  .tarot-card{width:100px;height:150px}
  .cta-price{font-size:2.2rem}
}

@media(max-width:480px){
  .nav-links .nav-text{display:none}
  .hero h1{font-size:2rem}
  .products-grid{grid-template-columns:1fr}
  .tarot-deck{gap:12px}
  .tarot-card{width:85px;height:130px}
}