:root {
  --bg-color: #050505;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --glass-surface: rgba(20, 20, 20, 0.4);
  --glass-border: rgba(255, 255, 255, 0.08);
  --accent-glow: 150px;
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  padding-top: 2rem; 
}

.aurora-container {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6;
  animation: drift 20s infinite alternate, rainbow-shift 4s infinite linear;
}

.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #ff0040; }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #00d2ff; animation-delay: -5s; }
.blob-3 { top: 60%; left: 40%; width: 40vw; height: 40vw; transform: translate(-50%, -50%); background: #59069E; animation-duration: 25s; }
.blob-4 {
  top: 35vh; left: 50vw; width: 80vw; height: 80vw; 
  transform: translate(-50%, -50%); background: #ff00cc; opacity: 0.7; filter: blur(100px); animation-delay: -2s;
  animation: drift-center 15s infinite alternate, rainbow-shift 4s infinite linear;
}
.blob-5 {
  top: 90vh; left: 20vw; width: 60vw; height: 60vw; 
  transform: translate(-50%, -50%); background: #ff00cc; opacity: 0.7; filter: blur(100px); animation-delay: -2s;
  animation: drift-center 15s infinite alternate, rainbow-shift 4s infinite linear;
}

@keyframes rainbow-shift {
  0% { filter: blur(var(--accent-glow)) hue-rotate(0deg); }
  100% { filter: blur(var(--accent-glow)) hue-rotate(360deg); }
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -40px) scale(1.1); }
}
@keyframes drift-center {
  0% { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -55%) scale(1.2); }
}

.noise-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%; 
  z-index: 9000; 
  pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.hero {
  min-height: auto; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  position: relative;
  z-index: 1; 
}

.glass-card {
  position: relative;
  background: var(--glass-surface);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 4rem);
  width: 100%;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  transition: all 0.5s ease; /* Smooth resize of card */
}
.glass-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; /* Changed from center to start for expansion */
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 35% 60%; gap: 5%; }
}

.logo-wrapper { display: flex; justify-content: center; position: sticky; top: 2rem; }

.hero-logo {
  width: 75%; max-width: 240px; height: auto;
  will-change: transform;
  animation: breathe 6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
}
@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

h1 {
  font-family: 'Tiro Gurmukhi', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1; margin-bottom: 1.5rem;
  background: linear-gradient(to right, #ffffff, #b0b0b0);
  -webkit-background-clip: text; color: transparent;
}

.subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-secondary);
  font-weight: 300; margin-bottom: 2.5rem; min-height: 4em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0; }
.btn {
  padding: 1rem 2.5rem; border-radius: 100px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem;
  text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden;
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.btn-primary { background: #59069e; color: #fff; border: 1px solid #fff; }
.btn-primary:hover { background: #32005c; color: #fff; box-shadow: 0 0 30px rgba(255,255,255,0.3); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.2); box-shadow: 0 0 30px rgba(255,255,255,0.2); }

.modal {
  position:fixed; inset:0; background:rgba(255,255,255,0.3);
  font-family: 'Tiro Gurmukhi', serif;
  backdrop-filter:blur(12px); display:flex;
  align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.4s;
  z-index:10000; padding:1rem;
}
.modal.open { opacity:1; visibility:visible; }
.modal-inner {
  background:var(--glass-surface); backdrop-filter:blur(24px);
  border:1px solid var(--glass-border); border-radius:24px;
  padding:2vw; max-width:60vw; width:100%;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transform:scale(.9); transition:.4s;
}
.modal-inner h2 { color:#59069E; text-decoration: underline;font-size: 150%;}
.modal-inner p { margin:2rem 0; line-height:1.7;color:#fff;}
.modal-inner em {
  color: #59069E; font-weight: bolder; font-size: 105%; font-style: normal;
}

.modal.open .modal-inner { transform:scale(1); }
.modal-close {
  position:absolute; top:1rem; right:1.5rem;
  background:none; border:none; font-size:2rem;
  color:#fff; cursor:pointer; width:44px; height:44px;
  border-radius:50%; transition:.3s;
}
.modal-close:hover { background:rgba(255,255,255,.1); }

.carousel-section { 
  padding: 1rem 0; 
  position: relative; 
  z-index: 10000;
}

.scroller {
  max-width: 100%; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.scroller_inner {
  display: flex; gap: 2rem; padding-block: 1rem; width: max-content;
  animation: scroll 15s linear infinite;
}
.scroller:hover .scroller_inner { animation-play-state: paused; }

.podcast-card {
  width: 600px; aspect-ratio: 16/9;
  border-radius: 16px; overflow: hidden;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(0,0,0,0.5);
  background: #000; 
  position: relative; 
  transition: all 0.3s ease;
}
.podcast-card:hover { 
  transform: translateY(-15px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.8);
}
.podcast-card img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
@keyframes scroll { to { transform: translate(calc(-50% - 1rem)); } }

.contact { 
  text-align: center; 
  padding: 1rem 1rem; 
  position: relative;
  z-index: 1;
}
.contact-glass {
  display: inline-block; padding: 2.5rem;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
}
.contact-glass p { font-family: 'Tiro Gurmukhi', serif; }
.contact a {
  font-size: 1.5rem; color: #fff; text-decoration: underline;
  text-decoration-color: #59069e; text-underline-offset: 6px; font-weight: bolder;
}
.contact a:hover { text-decoration-color: #32005c; color: #32005c; font-weight: bolder; }

footer {
  text-align: center; padding: 1rem; font-size: 0.85rem; color: var(--text-secondary);
  border-top: 1px solid var(--glass-border); background: #020202; position: relative; z-index: 1;
}
footer span {
  opacity:0.5; margin-top:0.5rem; display:block;
}
footer a { color: #fff; text-decoration-color: #59069e; }
footer a:hover { text-decoration-color: #32005c; color: #32005c; font-weight: bolder; }

@media (max-width: 600px) {
  .glass-card { padding: 2rem 1.5rem; }
  .aurora-blob { opacity: 1; }
  .contact-glass a {
    font-size: 125%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-blob, .hero-logo, .scroller_inner {
    animation: none !important; transform: none !important; filter: blur(80px);
  }
  .scroller { overflow-x: scroll; }
  .expandable-wrapper { transition: none; }
}