/* ========================================================
   Sanjay's Drishti — shared stylesheet (all pages)
   ======================================================== */
:root{
  --bg-0:#081a13;
  --bg-1:#0e2a1f;
  --bg-2:#123527;
  --bg-card:#153a2b;
  --border:rgba(243,239,230,0.12);
  --border-strong:rgba(243,239,230,0.22);
  --cream:#f4efe4;
  --muted:#9fb5a8;
  --muted-dim:#7c9186;
  --accent:#dd9155;
  --accent-light:#f0b083;
  --accent-dark:#b06a35;
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --radius: 2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-1);
  color:var(--cream);
  font-family:'Jost', system-ui, -apple-system, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  margin:0;
  letter-spacing:0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin-bottom:18px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--accent);}
.container{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}
.divider-orn{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:56px 0; background:var(--bg-1);
}
.divider-orn::before, .divider-orn::after{content:""; height:1px; width:120px; background:linear-gradient(90deg, transparent, var(--border-strong));}
.divider-orn::after{background:linear-gradient(270deg, transparent, var(--border-strong));}
.divider-orn svg{width:22px; height:22px; opacity:0.55;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,26,19,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:1180px; margin:0 auto;
}
.brand{display:flex; flex-direction:column; gap:2px;}
.brand .name{font-size:1.5rem; color:var(--cream); font-style:italic; font-weight:500;}
.brand .tag{font-size:0.62rem; letter-spacing:0.24em; color:var(--muted-dim); text-transform:uppercase;}
nav.links{display:flex; align-items:center; gap:38px;}
nav.links a{
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); transition:color .2s; padding-bottom:4px; border-bottom:1px solid transparent;
}
nav.links a:hover{color:var(--cream);}
nav.links a.active{color:var(--accent-light); border-bottom-color:var(--accent-light);}
.nav-right{display:flex; align-items:center; gap:20px;}
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); border:1px solid var(--border);
  transition:all .2s;
}
.icon-btn:hover{color:var(--cream); border-color:var(--border-strong);}
.icon-btn svg{width:16px; height:16px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; border-radius:var(--radius); border:1px solid transparent;
  transition:all .2s; white-space:nowrap;
}
.btn-solid{background:var(--accent); color:#1c1006;}
.btn-solid:hover{background:var(--accent-light);}
.btn-outline{border-color:var(--accent-dark); color:var(--accent-light);}
.btn-outline:hover{border-color:var(--accent); background:rgba(221,145,85,0.08);}
.btn-ghost{border-color:var(--border-strong); color:var(--cream);}
.btn-ghost:hover{border-color:var(--accent);}
.hamburger{display:none; background:none; border:1px solid var(--border-strong); width:40px; height:40px; border-radius:2px; align-items:center; justify-content:center; color:var(--cream);}

/* ---------- Auth (Sign In / Sign Up) ---------- */
.auth-group{display:flex; align-items:center; gap:10px;}
.auth-link{font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); transition:color .2s; cursor:pointer;}
.auth-link:hover{color:var(--cream);}
.user-chip{
  display:none; align-items:center; gap:8px; padding:8px 16px; border-radius:20px;
  border:1px solid var(--accent-dark); color:var(--accent-light); font-size:0.76rem;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; background:rgba(221,145,85,0.08);
}
.icon-row{display:flex; align-items:center; gap:10px;}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  padding:80px 0 60px;
  background:
    radial-gradient(ellipse 800px 400px at 15% 10%, rgba(221,145,85,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 90%);
  border-bottom:1px solid var(--border);
}
.page-hero h1{font-size:clamp(2.6rem, 5.5vw, 4rem); color:var(--cream);}
.page-hero p{color:var(--muted); max-width:560px; margin-top:16px; font-size:1.05rem;}

/* ---------- Hero (home) ---------- */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 15% 20%, rgba(221,145,85,0.06), transparent 60%),
    radial-gradient(ellipse 700px 600px at 85% 80%, rgba(31,90,63,0.5), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 70%);
  overflow:hidden;
  padding:90px 0 40px;
}
.hero-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:center;}
.portrait-wrap{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.ring{position:absolute; border:1px solid var(--border-strong); border-radius:50%;}
.ring.r1{inset:0;}
.ring.r2{inset:28px; border-color:var(--border);}
.ring.r3{inset:56px; border-style:dashed; opacity:0.4;}
.portrait-core{
  position:relative; z-index:2; width:72%; height:72%; border-radius:50%;
  background:linear-gradient(160deg, #1c4a37, #0b2015 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.5);
  overflow:hidden;
}
.portrait-core svg{width:46%; opacity:0.85;}
.dot{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:0.6;}
.eyebrow-hero{font-size:0.74rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent-light); margin-bottom:22px; display:flex; align-items:center; gap:12px;}
.eyebrow-hero::before{content:""; width:32px; height:1px; background:var(--accent);}
.hero h1{font-size:clamp(3rem, 6.2vw, 5.4rem); line-height:0.98; color:var(--cream);}
.hero h1 em{color:var(--accent-light); font-style:italic;}
.hero .sub{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.5rem; color:var(--accent-light); margin-top:18px;}
.hero .desc{color:var(--muted); font-size:1.02rem; margin-top:16px; max-width:480px;}
.waveform{display:flex; align-items:flex-end; gap:3px; height:34px; margin:30px 0;}
.waveform span{width:3px; background:var(--accent); opacity:0.75; border-radius:2px; animation:wave 1.6s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:scaleY(0.3);} 50%{transform:scaleY(1);}}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:6px;}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap;}
.hero-stats .stat{display:flex; align-items:center; gap:9px; font-size:0.86rem; color:var(--muted);}
.hero-stats svg{width:16px; height:16px; color:var(--accent-light);}
.hero-stats b{color:var(--cream); font-weight:500;}
.scroll-cue{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:64px; font-size:0.66rem; letter-spacing:0.3em; color:var(--muted-dim);}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.3;} 50%{opacity:1;}}

/* ---------- Section titles ---------- */
.section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(2.1rem, 4vw, 2.9rem); color:var(--cream);}
.section-head.center{margin:0 auto 56px; text-align:center;}
.section-head.center p{color:var(--muted); max-width:560px; margin:16px auto 0;}

/* ---------- Featured video embed ---------- */
.video-feature{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin-bottom:60px;
}
.video-feature .frame-wrap{position:relative; aspect-ratio:16/9; background:#000;}
.video-feature .frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-feature .cap{padding:22px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.video-feature .cap h3{font-size:1.4rem; color:var(--cream);}
.video-feature .cap p{color:var(--muted-dim); font-size:0.85rem; margin-top:4px;}

/* ---------- Music cards ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.music-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s, border-color .25s;
}
.music-card:hover{transform:translateY(-4px); border-color:var(--border-strong);}
.thumb{position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thumb .tag-badge{position:absolute; top:12px; left:12px; font-size:0.62rem; letter-spacing:0.18em; background:rgba(8,26,19,0.7); padding:5px 9px; color:var(--accent-light); text-transform:uppercase; z-index:2;}
.thumb-1{background:linear-gradient(135deg,#1f4a37,#0b2015 60%);}
.thumb-2{background:linear-gradient(135deg,#2a3d55,#101a2a 60%);}
.thumb-3{background:linear-gradient(135deg,#4a3220,#1a0f08 60%);}
.thumb::after{content:""; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(244,239,228,0.15) 1px, transparent 1px); background-size:16px 16px; opacity:0.5;}
.play-btn{position:relative; z-index:2; width:52px; height:52px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 8px 24px rgba(0,0,0,0.4); transition:transform .2s, background .2s;}
.play-btn:hover{transform:scale(1.08); background:var(--accent-light);}
.play-btn svg{width:18px; height:18px; color:#1c1006; margin-left:2px;}
.music-meta{padding:20px 22px 22px;}
.music-meta .row1{display:flex; justify-content:space-between; align-items:baseline;}
.music-meta h3{font-size:1.3rem; color:var(--cream);}
.music-meta .duration{font-size:0.78rem; color:var(--muted-dim);}
.music-meta .genre{font-size:0.78rem; color:var(--accent-light); margin-top:4px;}
.music-meta .row2{display:flex; justify-content:space-between; align-items:center; margin-top:14px;}
.music-meta .date{font-size:0.76rem; color:var(--muted-dim);}
.watch-link{font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-light); display:flex; align-items:center; gap:6px;}
.watch-link svg{width:13px; height:13px;}
.view-all{display:flex; justify-content:center; margin-top:48px; font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-light);}
.view-all span{display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid transparent; transition:border-color .2s;}
.view-all:hover span{border-color:var(--accent-light);}
.feed-status{text-align:center; color:var(--muted-dim); font-size:0.85rem; padding:30px 0;}
.lyrics-toggle{
  background:none; border:none; color:var(--accent-light); font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer; margin-top:12px; padding:0;
}
.lyrics-box{
  margin-top:10px; padding:14px 16px; background:rgba(0,0,0,0.2); border-radius:2px;
  color:var(--muted); font-size:0.86rem; line-height:1.7; white-space:pre-line;
}

/* ---------- Live shows ---------- */
.shows-list{display:flex; flex-direction:column; gap:18px;}
.show-row{display:flex; align-items:center; gap:28px; background:var(--bg-card); border:1px solid var(--border); padding:24px 30px; border-radius:var(--radius); flex-wrap:wrap; transition:border-color .2s;}
.show-row:hover{border-color:var(--border-strong);}
.date-box{width:76px; height:76px; flex-shrink:0; border:1px solid var(--border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.date-box .mon{font-size:0.65rem; letter-spacing:0.15em; color:var(--muted-dim);}
.date-box .day{font-family:'Cormorant Garamond', serif; font-size:1.9rem; color:var(--accent-light); line-height:1;}
.date-box .wd{font-size:0.6rem; letter-spacing:0.1em; color:var(--muted-dim);}
.show-info{flex:1; min-width:220px;}
.show-info h3{font-size:1.35rem; color:var(--cream); margin-bottom:6px;}
.show-info .meta{display:flex; gap:22px; flex-wrap:wrap; font-size:0.82rem; color:var(--muted);}
.show-info .meta span{display:flex; align-items:center; gap:6px;}
.show-info .meta svg{width:14px; height:14px; color:var(--accent-light);}
.show-actions{display:flex; align-items:center; gap:14px; margin-left:auto;}
.pill{padding:7px 16px; border:1px solid var(--border-strong); border-radius:20px; font-size:0.72rem; color:var(--muted); white-space:nowrap;}
.pill.soon{color:var(--accent-light); border-color:var(--accent-dark);}

/* ---------- Membership ---------- */
.membership-section{background:linear-gradient(180deg, #0a1d14, #0e2a1f);}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch;}
.price-card{background:var(--bg-card); border:1px solid var(--border); padding:34px 30px; border-radius:var(--radius); display:flex; flex-direction:column; position:relative; transition:transform .25s;}
.price-card.popular{border-color:var(--accent); background:linear-gradient(180deg, rgba(221,145,85,0.08), var(--bg-card) 40%); transform:scale(1.03);}
.price-card:hover{transform:translateY(-4px);}
.price-card.popular:hover{transform:scale(1.03) translateY(-4px);}
.most-popular-tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#1c1006; font-size:0.64rem; letter-spacing:0.16em; padding:5px 14px; text-transform:uppercase; border-radius:20px; font-weight:600;}
.tier-head{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.tier-icon{width:40px; height:40px; border-radius:50%; background:rgba(221,145,85,0.12); display:flex; align-items:center; justify-content:center; color:var(--accent-light);}
.tier-icon svg{width:18px; height:18px;}
.tier-head h3{font-size:1.25rem; color:var(--cream);}
.tier-head .lvl{font-size:0.65rem; letter-spacing:0.18em; color:var(--muted-dim); text-transform:uppercase;}
.price{font-family:'Cormorant Garamond', serif; font-size:2.6rem; color:var(--accent-light); margin-bottom:22px;}
.price span{font-family:'Jost', sans-serif; font-size:0.9rem; color:var(--muted); font-style:normal;}
.feat-list{list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:12px; flex:1;}
.feat-list li{display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--muted);}
.feat-list svg{width:14px; height:14px; margin-top:3px; color:var(--accent-light); flex-shrink:0;}
.price-card .btn{width:100%;}
.faq-list{max-width:760px; margin:70px auto 0; display:flex; flex-direction:column; gap:16px;}
.faq-item{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px;}
.faq-item h4{font-size:1.05rem; color:var(--cream); margin-bottom:8px; font-family:'Jost',sans-serif; font-weight:500;}
.faq-item p{color:var(--muted); font-size:0.9rem; margin:0;}

/* ---------- Billing toggle & payment panel ---------- */
.billing-toggle{display:inline-flex; border:1px solid var(--border-strong); border-radius:30px; padding:4px; gap:4px;}
.billing-toggle button{
  background:none; border:none; color:var(--muted); padding:10px 22px; border-radius:24px;
  font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:8px;
}
.billing-toggle button.toggle-active{background:var(--accent); color:#1c1006;}
.toggle-badge{
  font-size:0.62rem; background:rgba(8,26,19,0.25); padding:2px 8px; border-radius:10px; letter-spacing:0.05em;
}
.save-tag{font-size:0.78rem; color:var(--accent-light); margin:-14px 0 18px;}
.pay-panel{
  display:none; max-width:460px; margin:50px auto 0; background:var(--bg-card);
  border:1px solid var(--accent-dark); border-radius:var(--radius); padding:36px 30px; position:relative;
}
.pay-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color:var(--muted);
  font-size:1.4rem; cursor:pointer; line-height:1;
}
.pay-close:hover{color:var(--cream);}

/* ---------- About page ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.about-portrait{aspect-ratio:4/5; background:linear-gradient(160deg,#1c4a37,#0b2015 70%); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; position:relative;}
.about-portrait svg{width:36%; opacity:0.85; color:var(--accent);}
.about-copy p{color:var(--muted); font-size:1.02rem; margin-bottom:18px;}
.timeline{display:flex; flex-direction:column; gap:0; margin-top:20px;}
.timeline-item{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--border);}
.timeline-item:first-child{border-top:none;}
.timeline-item .yr{font-family:'Cormorant Garamond', serif; font-size:1.6rem; color:var(--accent-light);}
.timeline-item h4{font-size:1.15rem; color:var(--cream); margin-bottom:6px; font-family:'Jost',sans-serif; font-weight:500;}
.timeline-item p{color:var(--muted); font-size:0.92rem; margin:0;}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px;}
.value-card{background:var(--bg-card); border:1px solid var(--border); padding:28px 26px; border-radius:var(--radius);}
.value-card .tier-icon{margin-bottom:16px;}
.value-card h4{font-size:1.1rem; color:var(--cream); margin-bottom:8px; font-family:'Jost',sans-serif; font-weight:500;}
.value-card p{color:var(--muted); font-size:0.9rem; margin:0;}

/* ---------- Follow / gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:44px;}
.gallery-item{aspect-ratio:1/1; background:linear-gradient(145deg, var(--bg-card), var(--bg-0)); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:border-color .2s;}
.gallery-item:hover{border-color:var(--accent-dark);}
.gallery-item svg{width:20px; height:20px; color:var(--muted);}
.gallery-item span{font-size:0.62rem; letter-spacing:0.2em; color:var(--muted-dim); text-transform:uppercase;}
.follow-ctas{display:flex; justify-content:center; gap:18px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{background:var(--bg-0); border-top:1px solid var(--border); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:50px; margin-bottom:56px;}
.footer-brand .name{font-size:1.6rem; font-style:italic; color:var(--cream);}
.footer-brand .tag{font-size:0.62rem; letter-spacing:0.24em; color:var(--muted-dim); text-transform:uppercase; margin:6px 0 18px;}
.footer-brand p{color:var(--muted); font-size:0.9rem; max-width:340px;}
.footer-socials{display:flex; gap:12px; margin-top:22px;}
.footer-col h4{font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-light); margin-bottom:20px; font-family:'Jost', sans-serif; font-weight:500;}
.footer-col a{display:block; color:var(--muted); font-size:0.9rem; margin-bottom:13px; transition:color .2s;}
.footer-col a:hover{color:var(--cream);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-top:1px solid var(--border); padding-top:26px; font-size:0.78rem; color:var(--muted-dim);}
.footer-bottom .legal{display:flex; gap:24px;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav.links{display:none;}
  .icon-row{display:none;}
  .auth-group{display:none;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .portrait-wrap{max-width:340px; margin:0 auto;}
  .cards-grid{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .price-card.popular{transform:none;}
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .container{padding:0 20px;}
  .cards-grid{grid-template-columns:1fr;}
  .show-row{padding:20px;}
  .show-actions{margin-left:0; width:100%; justify-content:space-between;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .timeline-item{grid-template-columns:1fr;}
}