/* GenZ Aawaj Pro — Frontend CSS (based on your full HTML) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+Devanagari:wght@300;400;500;700&display=swap');

:root {
  --primary: #6a11cb;
  --secondary: #2575fc;
  --muted: #9ca3af;
  --danger: #ef4444;
  --radius-xl: 18px;
  --shadow-soft: 0 18px 35px rgba(15, 23, 42, 0.16);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{scroll-behavior:smooth;}

body{
  font-family:"Poppins","Noto Sans Devanagari",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#ffffff;
  color:#111827;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* ===================== TOP BAR ===================== */
.top-bar{
  background:linear-gradient(90deg,#4f46e5,#ec4899,#f97316);
  border-bottom:1px solid rgba(148,163,184,0.25);
  font-size:13px;
  color:#f9fafb;
}
.top-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}
.top-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  padding:5px 12px;
  border-radius:999px;
  background:rgba(15,23,42,0.75);
  border:1px solid rgba(191,219,254,0.8);
  display:inline-flex;
  align-items:center;
  gap:6px;
  backdrop-filter:blur(10px);
}
.pill i{font-size:11px;}

.top-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.top-links a{font-size:13px;opacity:0.98;}
.top-links a:hover{opacity:1;}

.social-icons{display:flex;gap:8px;}
.social-icons a{
  width:26px;height:26px;border-radius:999px;
  border:1px solid rgba(190,242,100,0.8);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#bbf7d0;
  background:rgba(15,118,110,0.4);
}

/* ===================== HEADER ===================== */
header.genz-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  background:linear-gradient(90deg,#6a11cb,#2575fc);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  color:#e5e7eb;
}
.logo-group{display:flex;align-items:center;gap:12px;}
.logo-circle{
  width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from 140deg,#f97316,#ec4899,#6366f1,#22c55e,#f97316);
  padding:2px;
}
.logo-inner{
  width:100%;height:100%;border-radius:inherit;
  background:#020617;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;letter-spacing:0.05em;color:#e5e7eb;
}
.logo-text span{display:block;line-height:1.1;}
.logo-title{font-weight:700;font-size:20px;text-transform:uppercase;}
.logo-subtitle{font-size:12px;color:#cbd5f5;}

.header-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.header-actions{display:flex;align-items:center;gap:10px;}
.header-social-mobile{display:none;gap:8px;}
.header-social-mobile a{
  width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.75);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#e5e7eb;background:rgba(15,23,42,0.9);
}

.btn{
  border-radius:999px;border:none;
  padding:8px 18px;font-size:13px;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:radial-gradient(circle at 0 0,#f97316,transparent 55%),
    linear-gradient(120deg,var(--primary),var(--secondary));
  color:#f9fafb;
  box-shadow:0 14px 30px rgba(37,99,235,0.8);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(37,99,235,1);}
.btn-outline{
  background:transparent;color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.6);
}
.btn-outline:hover{background:rgba(15,23,42,0.96);}
.btn i{font-size:13px;}

/* NAV */
.navbar{margin-top:2px;}
.nav-inner{
  display:flex;align-items:center;justify-content:flex-start;
  gap:16px;padding-bottom:10px;
}
.nav-links{
  display:flex;align-items:center;gap:18px;
  font-size:14px;flex-wrap:wrap;color:#e5e7eb;
}
.nav-links a{
  position:relative;padding-bottom:4px;color:#e5e7eb;opacity:0.86;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  border-radius:999px;background:linear-gradient(90deg,#f97316,#facc15);
  transition:width .18s ease;
}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after,
.nav-links a.active::after{width:100%;}

.nav-tag{
  font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(37,99,235,0.24);
  border:1px solid rgba(96,165,250,0.8);
  color:#bfdbfe;
}
.nav-toggle{
  display:none;border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,0.96);
  padding:6px 9px;cursor:pointer;color:#e5e7eb;
}
.nav-toggle i{font-size:16px;}

/* MAIN LAYOUT */
main.genz-main{padding:18px 0 40px;}
.section-title{
  font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.12em;color:#4b5563;margin-bottom:8px;
}
.section-title span{color:#111827;}

.grid-main{
  display:grid;
  grid-template-columns:2.1fr 1.1fr;
  gap:20px;align-items:flex-start;
}

/* HERO */
.hero-card{
  background:#ffffff;
  border-radius:26px;
  padding:18px;
  border:1px solid rgba(209,213,219,0.9);
  box-shadow:var(--shadow-soft);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr);
  gap:16px;overflow:hidden;position:relative;color:#111827;
}
.hero-tag-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.pill-live{
  background:rgba(239,68,68,0.09);
  border-color:rgba(248,113,113,0.9);
  color:#b91c1c;
}
.hero-time{font-size:12px;color:#6b7280;}
.hero-title{font-size:23px;font-weight:700;line-height:1.25;margin-bottom:10px;}
.hero-title span{
  background:linear-gradient(120deg,#f97316,#22c55e,#38bdf8);
  -webkit-background-clip:text;color:transparent;
}
.hero-meta{
  display:flex;gap:10px;align-items:center;
  font-size:12px;color:#4b5563;margin-bottom:10px;flex-wrap:wrap;
}
.hero-excerpt{font-size:14px;color:#111827;opacity:0.9;margin-bottom:12px;}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.hero-image{
  position:relative;border-radius:22px;overflow:hidden;
  background:#000;min-height:210px;
}
.hero-image img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(0.98);
}
.hero-badge{
  position:absolute;top:10px;left:10px;
  padding:4px 10px;border-radius:999px;
  background:rgba(15,23,42,0.94);
  border:1px solid rgba(148,163,184,0.7);
  font-size:11px;display:inline-flex;align-items:center;gap:6px;color:#e5e7eb;
}
.hero-badge i{font-size:11px;color:#facc15;}
.hero-play{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:999px;
  background:rgba(15,23,42,0.94);
  border:1px solid rgba(248,250,252,0.8);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#f9fafb;box-shadow:0 16px 32px rgba(15,23,42,0.95);
}
.hero-stat-chip{
  position:absolute;bottom:15px;right:12px;
  padding:4px 8px;border-radius:999px;
  background:rgba(15,23,42,0.94);
  border:1px solid rgba(148,163,184,0.7);
  font-size:11px;display:flex;align-items:center;gap:6px;color:#e5e7eb;
}

/* RIGHT COLUMN */
.side-column{display:flex;flex-direction:column;gap:16px;}
.card{
  background:#ffffff;border-radius:var(--radius-xl);
  border:1px solid rgba(209,213,219,0.9);
  padding:14px;box-shadow:0 10px 26px rgba(15,23,42,0.06);
}
.card-heading-row{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.card-heading-row h3{
  font-size:14px;text-transform:uppercase;letter-spacing:0.12em;color:#6b7280;
}
.card-heading-row h3 span{color:#111827;}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.tag-chip{
  font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);background:#ffffff;
}
.mini-list{display:flex;flex-direction:column;gap:10px;margin-top:5px;}
.mini-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:8px;font-size:13px;align-items:center;
}
.mini-title{font-weight:500;}
.badge-cat{
  font-size:11px;padding:3px 8px;border-radius:999px;
  background:#111827;color:#f9fafb;
}
.mini-meta{font-size:11px;color:#6b7280;margin-top:3px;}

/* LATEST GRID */
.grid-latest{
  margin-top:14px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.news-card{
  background:#ffffff;border-radius:18px;
  border:1px solid rgba(209,213,219,0.9);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 24px rgba(15,23,42,0.05);
}
.news-thumb{position:relative;height:150px;overflow:hidden;}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.news-card:hover .news-thumb img{transform:scale(1.05);}
.news-cat{
  position:absolute;top:8px;left:8px;
  padding:3px 9px;border-radius:999px;
  background:rgba(15,23,42,0.9);font-size:11px;color:#f9fafb;
}
.news-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;}
.news-title{font-size:14px;font-weight:600;}
.news-excerpt{font-size:13px;color:#4b5563;}
.news-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;margin-top:4px;color:#6b7280;
}

/* Make cards clickable (plugin adds data-href) */
.genz-tts-card { cursor:pointer; }
.genz-tts-card:active { transform: translateY(1px); }
.genz-tts-card .news-title { cursor:pointer; }

/* YOUTH VOICE + PODCAST */
.dual-section{
  margin-top:26px;display:grid;
  grid-template-columns:1.4fr 1fr;gap:16px;
}

.voice-list{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.voice-item{
  border-radius:16px;padding:10px 12px;
  border:1px solid rgba(209,213,219,1);
  background:#ffffff;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  box-shadow:0 8px 18px rgba(15,23,42,0.05);
}
.voice-avatar{
  width:40px;height:40px;border-radius:999px;
  background:radial-gradient(circle at top,#22d3ee,#1d4ed8);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;color:#f9fafb;
}
.voice-name{font-size:13px;font-weight:600;}
.voice-tag{font-size:11px;color:#2563eb;}
.voice-text{font-size:13px;margin-top:3px;}

.podcast-card{
  margin-top:8px;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:10px;
}
.podcast-main{
  border-radius:16px;padding:11px;
  border:1px solid rgba(209,213,219,1);
  background:#ffffff;
  box-shadow:0 10px 22px rgba(15,23,42,0.05);
}
.podcast-main h4{font-size:15px;margin-bottom:4px;}
.pod-meta{font-size:11px;color:#4b5563;margin-bottom:8px;}
.pod-controls{display:flex;align-items:center;gap:8px;margin-top:6px;}
.pod-play-btn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(15,23,42,0.7);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;background:#020617;color:#f9fafb;
}
.pod-wave{
  flex:1;height:4px;border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#93c5fd);
}
.pod-list{display:flex;flex-direction:column;gap:7px;}
.pod-item{
  font-size:12px;padding:6px 8px;border-radius:10px;
  background:#ffffff;border:1px solid rgba(209,213,219,1);
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;box-shadow:0 6px 14px rgba(15,23,42,0.04);
  cursor:pointer;
}

/* ===================== GENZ STUDIO (WHITE) ===================== */
.studio-section{
  margin-top:32px;
  background:#ffffff;
  border-radius:24px;
  border:1px solid rgba(209,213,219,0.9);
  box-shadow:0 16px 32px rgba(15,23,42,0.08);
  padding:18px 18px 22px;
}
.studio-header{
  font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.16em;
  color:#4b5563;margin-bottom:14px;
}
.studio-header span{color:#111827;}

.studio-grid{
  display:grid;
  grid-template-columns:1.3fr 1.1fr;
  gap:16px;
}

.studio-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(209,213,219,0.9);
  padding:12px;
}
.studio-card-title{
  font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.14em;
  color:#4b5563;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}

.studio-video{
  position:relative;
  border-radius:16px;overflow:hidden;
  background:#000;
}
.studio-video::before{
  content:"";display:block;padding-bottom:56.25%;
}
.studio-video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

.studio-audio-top{margin-bottom:10px;}
.audio-bar{
  width:100%;height:42px;border-radius:999px;
  background:#f3f4f6;border:1px solid rgba(209,213,219,1);
  display:flex;align-items:center;padding:0 14px;gap:10px;
  font-size:13px;color:#4b5563;
}
.audio-bar button{
  border:none;background:#111827;color:#f9fafb;
  width:26px;height:26px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;
}
.audio-chips{
  margin-top:10px;
  font-size:12px;
}
.audio-chip-row{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;
}
.audio-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:#f3f4f6;border:1px solid rgba(209,213,219,1);
  cursor:pointer;
}

.studio-submit-bar{
  margin-top:14px;
  display:flex;justify-content:flex-end;
}
.studio-submit-btn{
  width:100%;
  border-radius:999px;
  padding:9px 16px;
  border:none;
  background:linear-gradient(90deg,#6a11cb,#2575fc);
  color:#f9fafb;font-size:14px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}

/* MODAL */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.70);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:16px;
}
.modal-overlay.show{display:flex;}
.modal-card{
  width:100%;
  max-width:640px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(15,23,42,0.6);
  padding:18px 18px 20px;
  max-height:90vh;
  overflow-y:auto;
}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.modal-header h3{font-size:16px;font-weight:600;}
.modal-close{
  border:none;background:none;font-size:20px;cursor:pointer;color:#6b7280;
}
.modal-body{font-size:13px;color:#4b5563;}
.modal-grid{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;
}
.modal-grid label{font-size:13px;font-weight:500;}
.modal-grid input,
.modal-grid textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(209,213,219,1);
  padding:7px 10px;
  font-size:13px;
  font-family:inherit;
}
.modal-grid textarea{min-height:80px;resize:vertical;}
.modal-footnote{font-size:12px;color:#6b7280;margin-top:6px;}
.modal-submit{
  margin-top:12px;
  border:none;
  border-radius:999px;
  padding:9px 16px;
  background:linear-gradient(90deg,#6a11cb,#2575fc);
  color:#f9fafb;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
}

/* FOOTER */
footer.genz-footer{
  border-top:1px solid rgba(148,163,184,0.4);
  background:#020617;
  padding:18px 0 14px;
  margin-top:32px;
  color:#e5e7eb;
}
.footer-grid{
  display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
  gap:18px;margin-bottom:14px;
}
.footer-logo-text{font-size:13px;color:#9ca3af;margin-top:6px;}
.footer-col h4{font-size:13px;font-weight:600;margin-bottom:7px;}
.footer-list{list-style:none;font-size:13px;color:#9ca3af;}
.footer-list li{margin-bottom:4px;}
.footer-bottom{
  border-top:1px solid rgba(31,41,55,0.95);
  padding-top:8px;font-size:12px;color:#6b7280;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

/* BACK TO TOP */
.back-to-top{
  position:fixed;right:14px;bottom:16px;
  width:36px;height:36px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#f9fafb;border:none;display:none;
  align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;
  box-shadow:0 18px 35px rgba(30,64,175,0.9);
  z-index:40;
}
.back-to-top.show{display:flex;}

/* Single pages (simple) */
.genz-single{
  background:#fff;border:1px solid rgba(209,213,219,0.9);
  border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,0.05);
  padding:16px;
}
.genz-single h1{font-size:24px;line-height:1.25;margin-bottom:10px;}
.genz-single .meta{font-size:12px;color:#6b7280;margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap;}
.genz-single .img{border-radius:16px;overflow:hidden;margin:12px 0;background:#000;}
.genz-single .img img{width:100%;height:auto;display:block;}
.genz-listen-btn{
  margin-left:auto;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(15,23,42,0.96);
  color:#e5e7eb;
  padding:7px 12px;border-radius:999px;cursor:pointer;
}
.genz-audio-player{width:100%;margin-top:10px;}

/* RESPONSIVE */
@media(max-width:1100px){
  .grid-main{grid-template-columns:1.6fr 1fr;}
  .dual-section{grid-template-columns:1.3fr 1fr;}
  .studio-grid{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .grid-main{grid-template-columns:minmax(0,1fr);}
  .hero-card{grid-template-columns:minmax(0,1fr);}
  .grid-latest{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dual-section{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  .container{padding:0 16px;}
  .top-bar{display:none;}
  .header-actions{display:none;}
  .header-main{padding:10px 0;}
  .header-social-mobile{display:flex;}
  .nav-inner{padding:0;position:relative;}
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:rgba(15,23,42,0.98);
    border-bottom:1px solid rgba(55,65,81,0.96);
    padding:0 16px;
    flex-direction:column;align-items:flex-start;gap:10px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .2s ease,opacity .2s ease,padding .2s ease;
  }
  .nav-links.open{
    padding:10px 16px 12px;
    max-height:260px;opacity:1;pointer-events:auto;
  }
  .side-column{flex-direction:row;overflow-x:auto;}
  .side-column .card{min-width:260px;}
  .grid-latest{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:480px){
  .logo-title{font-size:18px;}
  .hero-title{font-size:20px;}
  .hero-card{border-radius:22px;}
}