/* CSS controls how the HTML looks. Each rule below targets an element or class. */

/* Google Fonts: Poppins for headings (bold, modern), Inter for body text
   (clean and easy to read). Loaded here so every page that links style.css
   automatically gets the fonts, without editing every HTML file. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

* {
  /* Removes default browser spacing so layouts are predictable */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── LIGHT THEME (default) ──────────────────────────────────────
   Warm parchment cream body — matches Isha's theme-color #e4ded4.
   Pure white looked flat; this reads warmer and more spiritual.  */
:root {
  --paper:       #faf7f3;   /* warm parchment cream — Isha uses #e4ded4 */
  --paper-alt:   #f0ebe3;   /* deeper cream for cards / alt sections */
  --ink:         #1a1410;   /* warm near-black (not cold grey-black) */
  --ink-2:       #4a3f35;   /* warm mid-tone for secondary text */
  --line-soft:   #ddd5c8;   /* warm divider lines */
  --muted:       #7a6e64;   /* warm muted text */
  --accent:      #cc2828;   /* Drida red */
  --accent-dark: #991e1e;
  /* Gradient: Drida red → warm orange → golden-yellow.
     Used on buttons, overlays, CTA bands, accents, borders.   */
  --grad: linear-gradient(135deg, #cc2828 0%, #e05c1e 40%, #e89020 100%);
  --grad-h: linear-gradient(90deg, #cc2828 0%, #e05c1e 40%, #e89020 100%);
  --grad-v: linear-gradient(180deg, #cc2828 0%, #e05c1e 40%, #e89020 100%);
  --shadow:      0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-hover:0 10px 24px rgba(0, 0, 0, 0.13);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  line-height: 1.65;
  color: var(--ink);
  /* Subtle red-to-transparent bloom at the top — mirrors dark mode's glow.
     Gives visual warmth and depth without being distracting on light bg. */
  background:
    radial-gradient(ellipse 80% 35% at 50% 0%, rgba(204, 40, 40, 0.07) 0%, transparent 65%),
    var(--paper);
}

/* ── Floating logo aura bubble ──────────────────────────────────
   Big translucent logo fixed in the centre of the viewport.
   pointer-events: none so it never blocks clicks or text.
   Acts as a large branded watermark / aura in the background. */
.logo-float-bubble {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Boosted radial gradient — cream bg needs much higher alpha to look visible */
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    rgba(255, 110, 30,  0.58) 0%,
    rgba(230, 60,  20,  0.44) 20%,
    rgba(204, 40,  30,  0.28) 42%,
    rgba(160, 20,  20,  0.12) 62%,
    transparent 82%);
  /* Boosted corona rings */
  box-shadow:
    0 0  70px 28px  rgba(255, 110, 30,  0.48),
    0 0 150px 65px  rgba(230, 60,  20,  0.36),
    0 0 260px 110px rgba(200, 40,  20,  0.24),
    0 0 400px 150px rgba(160, 20,  20,  0.10);
  /* gentle breathe / pulse */
  animation: solarPulse 5s ease-in-out infinite;
}

@keyframes solarPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%       { transform: translate(-50%, -50%) scale(1.10); opacity: 0.80; }
}

.logo-float-bubble img {
  width: 280px;
  height: 280px;
  object-fit: contain;
  display: block;
  opacity: 0.22;
  /* Light mode: show regular logo as a faint watermark over the orange halo */
  filter:
    drop-shadow(0 0  18px rgba(255, 160,  80, 0.80))
    drop-shadow(0 0  45px rgba(240,  90,  30, 0.70))
    drop-shadow(0 0  90px rgba(200,  40,  20, 0.50));
}


h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Secondary topstrip ────────────────────────────────────
   Thin strip above the main topbar: social icons + quick links.
   Mirrors Isha Foundation's secondary nav strip pattern.            */

.topstrip {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 11; /* above sticky topbar */
}

.topstrip-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: 0.1rem;
}

.topstrip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  opacity: 0.75;
  transition: opacity 0.18s, color 0.18s;
  flex-shrink: 0;
  padding: 2px;
}

.topstrip-icon:hover {
  opacity: 1;
  color: var(--accent);
}

/* Flexible spacer pushes the text links to the right */
.topstrip-sep {
  flex: 1;
  min-width: 1rem;
}

.topstrip-link {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  transition: color 0.18s, background 0.18s;
}

.topstrip-link:hover {
  color: var(--ink);
  background: var(--line-soft);
}

.topstrip-donate {
  background: var(--grad);
  color: #fff !important;
  font-weight: 600;
}

.topstrip-donate:hover {
  opacity: 0.88;
  background: var(--grad);
}

/* Dark mode topstrip */
[data-theme="dark"] .topstrip {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .topstrip-icon {
  color: rgba(255,255,255,0.65);
}

[data-theme="dark"] .topstrip-icon:hover {
  color: rgba(255, 180, 100, 0.95);
}

[data-theme="dark"] .topstrip-link {
  color: rgba(255,255,255,0.55);
}

[data-theme="dark"] .topstrip-link:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}

/* Hide topstrip label on narrow screens to save space */
@media (max-width: 480px) {
  .topstrip-label { display: none; }
  .topstrip { gap: 0.4rem; padding: 0.3rem 1rem; }
}

/* ---------- Header / nav ---------- */

.topbar {
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  /* gradient hairline at bottom: 2px gradient stripe instead of flat border */
  border-bottom: none;
  box-shadow:
    0 1px 0 0 transparent,
    inset 0 -1px 0 0 rgba(204, 40, 40, 0.20),
    0 2px 12px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* Shrinks + gains a stronger shadow once you scroll past the top of the
   page - a small "dynamic" touch most modern sites use (set in script.js). */
.topbar.scrolled {
  padding: 0.55rem 2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-name {
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: 0.3px;
}



.logo-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7px;
  /* Gradient ring + faint warm glow behind the logo */
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px 3px rgba(204, 40, 40, 0.15), 0 4px 14px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.logo {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto; /* push nav + controls to right side of topbar */
}

nav a {
  color: var(--ink);
  margin: 0 0.4rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.2rem;
  position: relative;
  transition: color 0.2s ease;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--grad);
  transition: width 0.2s ease;
}

nav a:hover {
  color: var(--accent);
  text-decoration: none;
}

nav a:hover::after {
  width: 100%;
}

/* The "Login" link stands out a little as a call-to-action */
nav a[href$="login.html"] {
  background: var(--grad);
  color: #fff;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
}

nav a[href$="login.html"]:hover {
  opacity: 0.85;
  color: #fff;
}

nav a[href$="login.html"]::after {
  display: none;
}

nav a.active {
  color: var(--accent);
}

nav a.active::after {
  width: 100%;
}

/* Pillar cards are now <a> links — strip default link decoration */
a.pillar-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---------- Hero ---------- */

.hero {
  min-height: 88vh;
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  position: relative;
}

/* Hero left panel: editorial text on warm paper */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 90% 55% at 88% 8%, rgba(204,80,40,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 5% 92%, rgba(180,60,20,0.07) 0%, transparent 55%),
    linear-gradient(155deg, #fdf8f2 0%, #f5ede0 50%, #efe4d4 100%);
  position: relative;
  z-index: 1;
  border-right: 1px solid rgba(204,80,40,0.12);
}

/* Subtle decorative accent line at top of hero text */
.hero-text::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}

.hero-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.6rem;
  display: block;
}

.hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.2rem, 5vw, 5.5rem);
  font-weight: 600;
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 1.6rem;
  letter-spacing: -0.01em;
}

.hero p {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  max-width: 400px;
  line-height: 1.8;
  margin-bottom: 2.6rem;
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-terra {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 0.72rem 1.9rem;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.18s, box-shadow 0.18s;
}
.btn-terra:hover {
  opacity: 0.88;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204, 40, 40, 0.32);
}

.btn-outline {
  background: transparent;
  color: var(--ink-2);
  border: 2px solid var(--line-soft);
  padding: 0.72rem 1.9rem;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero right panel: full-bleed photo */
.hero-photo {
  position: relative;
  overflow: hidden;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
/* Subtle warm vignette at left edge of photo */
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--paper) 0%, transparent 12%);
  z-index: 1;
  pointer-events: none;
}

/* Terracotta accent stripe at very bottom of hero */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-h);
  z-index: 2;
}

/* Mobile: stack photo above text */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 56vw auto;
    min-height: auto;
  }
  .hero-photo {
    grid-row: 1;
    height: 56vw;
    min-height: 260px;
  }
  .hero-photo img { position: absolute; }
  .hero-photo::before {
    background: linear-gradient(to bottom, transparent 60%, var(--paper) 100%);
  }
  .hero-text {
    grid-row: 2;
    padding: 2rem 1.5rem 2.5rem;
  }
}

/* ---------- Pillar row: overlapping zoom cards ----------
   Inspired by isha.sadhguru.org's Man/Mystic/Mission cards. Three
   portrait cards overlap slightly; the middle one sits raised by
   default, and whichever one you hover/tap/focus zooms forward while
   the other two ease back - set via .is-active/.is-dimmed in script.js. */

.pillar-row {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 980px;
  margin: -2.25rem auto 3rem;
  padding: 0 1rem;
  position: relative;
  z-index: 3;
}

.pillar-card {
  position: relative;
  flex: 0 1 260px;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.pillar-card:nth-child(1) {
  background: #1e1414;
  margin-right: -2rem;
  animation: pillarIn1 0.7s ease both 0.05s;
}
.pillar-card:nth-child(2) {
  background: #111111;
  z-index: 2;
  animation: pillarIn2 0.7s ease both 0.18s;
}
.pillar-card:nth-child(3) {
  background: #1e1414;
  margin-left: -2rem;
  animation: pillarIn3 0.7s ease both 0.3s;
}

@keyframes pillarIn1 {
  from { opacity: 0; transform: translateY(40px) scale(0.96) rotate(-1.5deg); }
  to   { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes pillarIn2 {
  from { opacity: 0; transform: translateY(60px) scale(0.9); }
  to   { opacity: 1; transform: translateY(-18px) scale(1.05); }
}
@keyframes pillarIn3 {
  from { opacity: 0; transform: translateY(40px) scale(0.96) rotate(1.5deg); }
  to   { opacity: 1; transform: rotate(1.5deg); }
}

.pillar-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* anchor to top so subjects aren't cut off */
}

.pillar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(150, 18, 12, 0.82) 0%,
    rgba(100, 20, 10, 0.35) 40%,
    transparent 70%
  );
}

.pillar-label {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  color: #fff;
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* The zoom: whichever card is active comes forward and grows, the
   other two ease back and dim slightly - the effect Sara asked for. */
.pillar-card.is-active {
  transform: translateY(-26px) scale(1.12) !important;
  z-index: 5;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}
.pillar-card.is-dimmed {
  transform: scale(0.93) !important;
  opacity: 0.78;
}

@media (max-width: 700px) {
  /* ── Swipe carousel ── */
  .pillar-row {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-top: 1rem;
    align-items: stretch;
    padding: 0 10% 0 10%;
  }
  .pillar-row::-webkit-scrollbar { display: none; }

  .pillar-card {
    flex: 0 0 80%;
    min-width: 0;
    width: 80%;
    margin: 0 8px !important;
    height: 260px;
    border-radius: 12px;
    scroll-snap-align: center;
    /* Reset all desktop tilts/offsets */
    animation: none !important;
    transform: none !important;
  }
  /* Kill the zoom JS effect on touch screens */
  .pillar-card.is-active,
  .pillar-card.is-dimmed {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  /* Dot indicators (injected by JS) */
  .pillar-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 0.65rem;
  }
  .pillar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-soft);
    transition: background 0.25s, transform 0.25s;
    flex-shrink: 0;
  }
  .pillar-dot.is-active {
    background: var(--accent);
    transform: scale(1.4);
  }
}

/* Hide dots on desktop */
@media (min-width: 701px) {
  .pillar-dots { display: none; }
}

/* ---------- Main layout ---------- */

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}

section {
  margin-bottom: 5rem;
}

section h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 0.5rem;
  line-height: 1.15;
}

section h2::after {
  content: '';
  display: block;
  width: 42px;
  height: 4px;
  background: var(--grad);
  margin-top: 0.5rem;
  border-radius: 2px;
  /* subtle warm glow under the gradient bar */
  box-shadow: 0 2px 10px rgba(204, 40, 40, 0.30);
}

section > p {
  color: var(--muted);
  max-width: 700px;
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 2px solid transparent;                    /* gradient top border */
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(90deg, #cc2828 0%, #e05c1e 50%, #e89020 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  z-index: 1;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover), 0 0 0 1px rgba(204, 40, 40, 0.12), 0 12px 32px rgba(204, 40, 40, 0.09);
}

.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.card {
  display: flex;
  flex-direction: column;
}

.card p {
  flex: 1;                   /* pushes button to bottom, shows all text */
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;      /* square — matches card width, shows full square poster */
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  transition: transform 0.45s ease;
  display: block;
}

/* Product/course images zoom in slightly on hover - the same small
   motion kasarnaturals.com uses on its product photos. */
.card:hover img {
  transform: scale(1.06);
}

/* ---------- About: community photo + founder highlight ---------- */

.about-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1rem;
}

.about-layout p {
  flex: 1 1 320px;
  margin: 0;
}

.about-photo {
  flex: 1 1 280px;
  max-width: 380px;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.founder-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow);
  max-width: 420px;
}

.founder-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line-soft);
}

.founder-highlight h3 {
  margin-bottom: 0.15rem;
  font-size: 1.05rem;
}

.founder-highlight p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.about-journey {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
}

.card .price {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.product-placeholder {
  width: 100%;
  height: 140px;
  background: var(--paper-alt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--muted);
  overflow: hidden;
}

.card .badge {
  display: inline-block;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

/* Course price shown as gradient text */
.price {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* UPI pay block on a public course card - QR code, the "open my UPI
   app" button (works on phones), and a small note reminding the payer
   to identify themselves so Sara can match the payment. */
.upi-pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.upi-qr {
  width: 130px;
  height: 130px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
}

.upi-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.upi-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 0.45rem;
  transition: border-color 0.2s ease;
}

.upi-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Trip date / location chips */
.trip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}

.trip-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--paper-alt);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* The per-course video playlist on My Courses - a simple numbered
   list, each session a clickable link. */
.playlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.playlist li {
  margin-bottom: 0.5rem;
}

.playlist a {
  display: block;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.playlist a:hover {
  border-color: var(--accent);
  background: var(--line-soft);
}

/* ---------- Impact panels (Conscious-Planet-style triplet) ---------- */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.impact-panel {
  position: relative;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: #111111;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.impact-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.impact-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(140, 18, 12, 0.80) 0%,
    rgba(90, 20, 10, 0.30) 45%,
    transparent 72%
  );
}

.impact-panel:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-hover);
}

.impact-label {
  position: absolute;
  left: 0.9rem;
  bottom: 0.8rem;
  z-index: 2;
  color: #fff;
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  max-width: 85%;
}

/* ---------- Full-bleed image+text bands (Volunteer/Support, Follow us) ----------
   .band-dark breaks out of main's centered column to span the full
   browser width, like the dark strip on isha.sadhguru.org. */

.band-dark {
  /* Light theme: warm parchment / cream separator (Isha-style) */
  background: #faf5ef;
  color: var(--ink);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3rem calc(50vw - 50% + 1.5rem);
  border-top: 1px solid #e8ddd0;
  border-bottom: 1px solid #e8ddd0;
}

.band-dark h3 { color: var(--ink); }
.band-dark p  { color: var(--ink-2); }

.band-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  max-width: 960px;
  margin: 0 auto 2.5rem;
}

.band-row:last-child {
  margin-bottom: 0;
}

/* ── Isha-style full-width section backgrounds ───────────────────
   .section-warm  : warm parchment cream — alternating sections
   .section-deep  : deep maroon — "Impact" / special sections
   Both use the same negative-margin trick as .band-dark to break
   out of main's 960px max-width and span the full viewport.      */

.section-warm {
  background: #f0ebe3;
  border-top: 1px solid #ddd5c8;
  border-bottom: 1px solid #ddd5c8;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 5rem calc(50vw - 50% + 1.5rem);
}

.section-deep {
  background: #2d0d08;
  color: #f0e8e0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 5rem calc(50vw - 50% + 1.5rem);
}

.section-deep h2 { color: #f0e8e0; }
.section-deep h2::after { background: var(--grad); box-shadow: none; }
.section-deep > p { color: #c8b8a8; }

/* ── CTA band — full-width gradient (mirrors Isha's Inner Engineering banner) ── */
.band-cta {
  background: var(--grad);
  color: #fff;
  text-align: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 5rem calc(50vw - 50% + 1.5rem);
}
.band-cta h2 {
  color: #fff;
  margin-bottom: 0.5rem;
}
.band-cta h2::after {
  background: rgba(255,255,255,0.4);
  box-shadow: none;
}
.band-cta > p {
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin: 0 auto 1.75rem;
}

/* White button — for use on coloured/dark backgrounds.
   MUST use double-class (.btn.btn-white) so specificity (0,2,0)
   beats the later "button, .btn" rule at (0,1,0) that applies the gradient. */
.btn.btn-white,
a.btn-white {
  background: #ffffff !important;
  color: var(--accent) !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.btn.btn-white:hover,
a.btn-white:hover {
  background: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
  color: var(--accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

/* Dark mode: warm sections go darker, deep stays deep */
:root[data-theme="dark"] .section-warm,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-warm {}
}
:root[data-theme="dark"] .section-warm {
  background: linear-gradient(160deg, #271f15 0%, #1a1410 100%);
  border-top-color: rgba(232, 90, 32, 0.28);
  border-bottom-color: rgba(232, 90, 32, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-warm {
    background: linear-gradient(160deg, #271f15 0%, #1a1410 100%);
    border-top-color: rgba(232, 90, 32, 0.28);
    border-bottom-color: rgba(232, 90, 32, 0.18);
  }
}

.band-row.reverse {
  flex-direction: row-reverse;
}

.band-photo {
  flex: 1 1 320px;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-alt);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}

#follow .band-photo {
  background: var(--paper-alt);
}

.band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.band-photo:hover img {
  transform: scale(1.06);
}

.band-text {
  flex: 1 1 320px;
}

.band-text h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.band-text p {
  margin-bottom: 1rem;
  max-width: 480px;
}

.follow-icons {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

@media (max-width: 700px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }
  .band-row,
  .band-row.reverse {
    flex-direction: column;
  }
  .band-photo {
    width: 100%;
  }
}

/* ---------- "What We Offer" tile grid ----------
   Mirrors the "Technologies for Wellbeing" row on isha.sadhguru.org:
   a photo tile, a one-line label, and a small CTA underneath. */

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.offering-tile {
  text-align: center;
}

.offering-photo {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-alt);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.offering-tile:nth-child(2) .offering-photo,
.offering-tile:nth-child(3) .offering-photo,
.offering-tile:nth-child(4) .offering-photo {
  background: var(--paper-alt);
}

.offering-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* show full graphic — no cropping */
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.offering-photo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.offering-photo:hover img {
  transform: scale(1.06);
}

.offering-tile p {
  margin: 0.85rem 0 0.6rem;
  font-weight: 600;
}

.btn-small {
  display: inline-block;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-small:hover {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 700px) {
  .offerings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Mission pull-quote ----------
   A founder-photo + statement band, like the Sadhguru quote section
   on isha.sadhguru.org. */

.quote-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: left;
}

.quote-photo {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  box-shadow: var(--shadow);
}

.quote-text {
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-size: 1.3rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.quote-attribution {
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 700px) {
  .quote-block {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Links & buttons ---------- */

a {
  color: var(--ink);
}

a:hover {
  color: var(--accent);
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn {
  display: inline-block;
  background: var(--grad);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.38) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

.btn-terra {
  position: relative;
  overflow: hidden;
}
.btn-terra::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

button:hover,
.btn:hover {
  opacity: 0.88;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- Forms (login page) ---------- */

.auth-card {
  max-width: 420px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.form-group input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 84, 46, 0.15);
}

#status-msg {
  color: var(--muted);
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* ---------- Footer ----------
   Rich multi-column footer, always dark (ignores page theme).
   Inspired by Isha Foundation's footer layout.               */

.site-footer {
  background: #0d0c0a;
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  line-height: 1.6;
  position: relative;
  /* gradient accent line at very top */
  border-top: 2px solid transparent;
  background-clip: padding-box;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--grad-h);
}

/* ── Footer top: logo + subscribe ── */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
  padding: 6px;
}

.footer-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand-name {
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  display: block;
  letter-spacing: 0.3px;
}

.footer-tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
  margin: 0.1rem 0 0;
  letter-spacing: 0.02em;
}

.footer-newsletter {
  text-align: right;
}

.footer-newsletter p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}

.footer-subscribe-btn {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  padding: 0.55rem 1.4rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.18s;
}

.footer-subscribe-btn:hover { opacity: 0.85; }

/* ── Footer columns ── */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2.5rem 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-col h4 {
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-col ul li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.18s;
  display: inline-block;
}

.footer-col ul li a:hover {
  color: rgba(255, 200, 110, 0.95);
}

/* ── Footer bottom bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 3rem;
  flex-wrap: wrap;
}

.footer-copy {
  color: rgba(255,255,255,0.3);
  font-size: 0.78rem;
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}

.footer-social a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.footer-legal {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  margin: 0;
}

.footer-legal a {
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.18s;
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.7);
}

/* ── Footer mobile responsive ── */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .footer-newsletter { text-align: left; }
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    gap: 0.9rem;
  }
}

@media (max-width: 400px) {
  .footer-cols { grid-template-columns: 1fr; }
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grad); /* default for non-social chips; social ones override via inline style */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

footer .social a:hover .icon-chip,
.follow-icons a:hover .icon-chip {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(176, 48, 48, 0.25);
}

.follow-icons a {
  display: inline-flex;
  text-decoration: none;
}


/* band-dark: slightly lighter than page so it reads as a separate zone */


/* Let body gradient show through regular sections */

/* band-dark still needs its own background to read as a different zone */


/* ---------- Scroll-triggered reveal (set in script.js) ----------
   Sections and cards fade + slide up as they enter the viewport, instead
   of just appearing instantly - the "dynamic, not static" feel from
   isha.sadhguru.org / kasarnaturals.com. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect people who've asked their OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .topbar,
  .card img,
  .hero-text,
  .pillar-card,
  .logo-badge {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* ── Scale the logo bubble down so it doesn't overflow on phones ── */
@media (max-width: 768px) {
  .logo-float-bubble {
    width: 220px;
    height: 220px;
  }
  .logo-float-bubble img {
    width: 90px;
    height: 90px;
  }
}

/* ── Hamburger nav for phones & small tablets ─────────────────── */
@media (max-width: 768px) {
  /* Topbar: single row, no wrapping */
  .topbar {
    flex-wrap: nowrap;
    padding: 0.65rem 1rem;
    position: relative;   /* anchor for the dropdown */
    align-items: center;
  }

  /* Shrink brand slightly so everything fits */
  .logo-badge { width: 44px; height: 44px; padding: 5px; }
  .brand-name { font-size: 1.05rem; }

  /* Hide nav by default; it becomes a dropdown */
  .topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    z-index: 100;
    padding: 0.3rem 0 0.5rem;
    gap: 0;
  }

  .topbar nav.nav-open { display: flex; }

  /* Nav links: full-width, easy tap targets */
  .topbar nav a {
    padding: 0.9rem 1.5rem;
    margin: 0;
    border-radius: 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .topbar nav a:last-child { border-bottom: none; }

  /* No underline animation in dropdown */
  .topbar nav a::after { display: none; }

  /* Login pill gets a bit of space to breathe */
  .topbar nav a[href$="login.html"] {
    margin: 0.6rem 1.25rem 0;
    border-radius: 999px;
    text-align: center;
    border-bottom: none;
  }

  /* ── Hamburger button ── */
  #nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    margin-left: 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
  }

  #nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
  }

  /* Animate to × when open */
  #nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Give theme toggle breathing room next to hamburger */
  #theme-toggle { margin-left: 0.5rem; }

  /* Main content: tighter on phones */
  main { padding: 1.75rem 1rem; }

  section h2 { font-size: 1.3rem; }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  #nav-toggle { display: none; }
}

/* ── Landscape phone: tighten hero text panel ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-text { padding: 1.25rem 1.5rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p  { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — clean charcoal-black, vivid red bloom
   Replaces the muddy warm-brown that was hard to distinguish.
   Base: near-neutral charcoal (#0c0c0f). Accent glow: vivid red.
   Sections use strongly contrasting maroon/deep-red gradients.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PASTEL THEME — exact colours sampled from reference document
   Linen body: #e5e3dd  |  Terracotta hero: #cb9981
   Accent/buttons: #bc8b67  |  Gradient: terracotta family only
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="pastel"] {
  --paper:       #e5e3dd;   /* warm linen — exact from doc */
  --paper-alt:   #dbd8d1;   /* deeper linen for cards/alt */
  --ink:         #282420;   /* warm dark charcoal */
  --ink-2:       #5a5248;   /* warm mid-tone */
  --line-soft:   #ccc8c0;   /* warm divider */
  --muted:       #8a8278;
  --accent:      #bc8b67;   /* terracotta accent — exact from doc */
  --accent-dark: #a87555;
  /* Gradient stays within terracotta family as requested */
  --grad:        linear-gradient(135deg, #cb9981 0%, #bc8b67 60%, #b07858 100%);
  --grad-h:      linear-gradient(90deg,  #cb9981 0%, #bc8b67 60%, #b07858 100%);
  --grad-v:      linear-gradient(180deg, #cb9981 0%, #bc8b67 60%, #b07858 100%);
  --shadow:      0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover:0 10px 24px rgba(0,0,0,0.10);
}

/* Pastel body — flat linen, no red bloom */
:root[data-theme="pastel"] body {
  background: var(--paper);
}

/* Pastel topbar — linen */
:root[data-theme="pastel"] .topbar {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line-soft), 0 2px 12px rgba(0,0,0,0.04);
}

/* Pastel hero — left panel is the terracotta from the reference (image 1) */
:root[data-theme="pastel"] .hero-text {
  background: #cb9981;
  border-right: 1px solid rgba(0,0,0,0.06);
}
:root[data-theme="pastel"] .hero-text::before {
  background: rgba(255,255,255,0.15);
}
:root[data-theme="pastel"] .hero h1         { color: #fff; }
:root[data-theme="pastel"] .hero p          { color: rgba(255,255,255,0.90); }
:root[data-theme="pastel"] .hero-kicker     { color: rgba(255,255,255,0.75); }
:root[data-theme="pastel"] .hero-photo::before {
  background: linear-gradient(to right, #cb9981 0%, transparent 14%);
}
/* Outline button on terracotta panel — white */
:root[data-theme="pastel"] .hero-ctas .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
:root[data-theme="pastel"] .hero-ctas .btn-outline:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.12);
}

/* Pastel toggle icon: 🌙 (next = dark) */
:root[data-theme="pastel"] #theme-toggle::before { content: "🌙"; font-size: 15px; }

/* Light mode toggle: 🎨 (next = pastel) */
#theme-toggle::before { content: "🎨"; font-size: 15px; line-height: 1; color: var(--accent); }

:root[data-theme="dark"] {
  --paper:        #111114;   /* clean neutral charcoal — no brown */
  --paper-alt:    #1c1c22;   /* slightly lighter charcoal for cards */
  --ink:          #f0ede8;   /* warm cream text */
  --ink-2:        #b0aaa4;   /* muted cream */
  --muted:        #706a64;
  --line-soft:    #2a2830;   /* cool dark divider */
  --accent:       #f04838;   /* brighter red — pops on dark bg */
  --accent-dark:  #cc2828;
  --grad:         linear-gradient(135deg, #f04838 0%, #e86820 40%, #e89a20 100%);
  --grad-h:       linear-gradient(90deg,  #f04838 0%, #e86820 40%, #e89a20 100%);
  --grad-v:       linear-gradient(180deg, #f04838 0%, #e86820 40%, #e89a20 100%);
  --shadow:       0 4px 20px rgba(0, 0, 0, 0.70);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #111114;
    --paper-alt:    #1c1c22;
    --ink:          #f0ede8;
    --ink-2:        #b0aaa4;
    --muted:        #706a64;
    --line-soft:    #2a2830;
    --accent:       #f04838;
    --accent-dark:  #cc2828;
    --grad:         linear-gradient(135deg, #f04838 0%, #e86820 40%, #e89a20 100%);
    --grad-h:       linear-gradient(90deg,  #f04838 0%, #e86820 40%, #e89a20 100%);
    --grad-v:       linear-gradient(180deg, #f04838 0%, #e86820 40%, #e89a20 100%);
    --shadow:       0 4px 20px rgba(0, 0, 0, 0.70);
    --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.85);
  }
}

/* Body — charcoal base + vivid red bloom at top-centre (not faint anymore) */
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 75% 42% at 50% 0%, rgba(220, 30, 15, 0.38) 0%, rgba(160, 15, 8, 0.14) 55%, transparent 78%),
    #0c0c0f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(ellipse 75% 42% at 50% 0%, rgba(220, 30, 15, 0.38) 0%, rgba(160, 15, 8, 0.14) 55%, transparent 78%),
      #0c0c0f;
  }
}

/* Topbar — clean very dark, orange hairline glow at bottom */
:root[data-theme="dark"] .topbar {
  background: #18181c;
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(240, 100, 40, 0.32), 0 2px 20px rgba(0,0,0,0.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar {
    background: #18181c;
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 rgba(240, 100, 40, 0.32), 0 2px 20px rgba(0,0,0,0.60);
  }
}

/* Hero — dramatic deep red core on charcoal */
/* Hero dark mode — text panel uses dark paper, photo stays unchanged */
:root[data-theme="dark"] .hero-text {
  background:
    radial-gradient(ellipse 95% 60% at 12% 18%, rgba(210,55,20,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 90% 88%, rgba(180,40,15,0.10) 0%, transparent 55%),
    linear-gradient(155deg, #1e1420 0%, #18141c 55%, #14121a 100%);
  box-shadow: inset -1px 0 0 rgba(204,40,40,0.22);
}
:root[data-theme="dark"] .hero h1 {
  color: #f5f0ea;
}
:root[data-theme="dark"] .hero p {
  color: #c8bfb8;
}
:root[data-theme="dark"] .hero-photo::before {
  background: linear-gradient(to right, #1a1218 0%, transparent 15%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-text {
    background:
      radial-gradient(ellipse 95% 60% at 12% 18%, rgba(210,55,20,0.18) 0%, transparent 65%),
      radial-gradient(ellipse 60% 40% at 90% 88%, rgba(180,40,15,0.10) 0%, transparent 55%),
      linear-gradient(155deg, #1e1420 0%, #18141c 55%, #14121a 100%);
    box-shadow: inset -1px 0 0 rgba(204,40,40,0.22);
  }
  :root:not([data-theme="light"]) .hero h1 { color: #f5f0ea; }
  :root:not([data-theme="light"]) .hero p  { color: #c8bfb8; }
  :root:not([data-theme="light"]) .hero-photo::before {
    background: linear-gradient(to right, #1a1218 0%, transparent 15%);
  }
}

/* Section-warm in dark — clearly different from body (#0c0c0f → #1e1828) */
:root[data-theme="dark"] .section-warm {
  background: linear-gradient(155deg, #201828 0%, #181420 100%);
  border-top-color: rgba(240, 100, 40, 0.30);
  border-bottom-color: rgba(240, 100, 40, 0.20);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-warm {
    background: linear-gradient(155deg, #201828 0%, #181420 100%);
    border-top-color: rgba(240, 100, 40, 0.30);
    border-bottom-color: rgba(240, 100, 40, 0.20);
  }
}

/* Section-deep in dark — rich crimson-maroon, very distinct from body */
:root[data-theme="dark"] .section-deep {
  background: linear-gradient(145deg, #3a0c08 0%, #260806 50%, #180403 100%);
  box-shadow: inset 0 1.5px 0 rgba(240, 80, 30, 0.40),
              inset 0 -1.5px 0 rgba(240, 80, 30, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-deep {
    background: linear-gradient(145deg, #3a0c08 0%, #260806 50%, #180403 100%);
    box-shadow: inset 0 1.5px 0 rgba(240, 80, 30, 0.40),
                inset 0 -1.5px 0 rgba(240, 80, 30, 0.25);
  }
}

/* Band-dark in dark — deep purple-maroon, very distinct from body */
:root[data-theme="dark"] .band-dark {
  background: linear-gradient(145deg, #28103a 0%, #1c0a28 50%, #120618 100%);
  color: #f0ede8;
  border-top: 1px solid rgba(240, 100, 40, 0.32);
  border-bottom: 1px solid rgba(240, 100, 40, 0.22);
}
:root[data-theme="dark"] .band-dark h3 { color: #fff; }
:root[data-theme="dark"] .band-dark p  { color: #c8c0d8; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-dark {
    background: linear-gradient(145deg, #28103a 0%, #1c0a28 50%, #120618 100%);
    color: #f0ede8;
    border-top: 1px solid rgba(240, 100, 40, 0.32);
    border-bottom: 1px solid rgba(240, 100, 40, 0.22);
  }
  :root:not([data-theme="light"]) .band-dark h3 { color: #fff; }
  :root:not([data-theme="light"]) .band-dark p  { color: #c8c0d8; }
}

/* Cards in dark — warm gradient instead of flat dark */
:root[data-theme="dark"] .card {
  background: linear-gradient(145deg, #201a14 0%, #18120c 100%);
  border-color: #302418;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    background: linear-gradient(145deg, #201a14 0%, #18120c 100%);
    border-color: #302418;
  }
}

/* Input fields dark */
:root[data-theme="dark"] input,
:root[data-theme="dark"] .upi-input {
  background: #201a14;
  color: #f2e8de;
  border-color: #302418;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) .upi-input {
    background: #201a14;
    color: #f2e8de;
    border-color: #302418;
  }
}

/* ── Theme toggle icon — Unicode characters ─────────────────────
   Using CSS content with a text character: no file, no URL,
   no encoding, no image loading. This is the simplest possible
   approach and cannot fail.
   Light mode → ☾ crescent moon (click to go dark)
   Dark mode  → ☀ sun           (click to go light)            */
/* theme-toggle icons: 🎨 light→pastel / 🌙 pastel→dark / ☀ dark→light */
[data-theme="dark"] #theme-toggle::before { content: "☀"; font-size: 15px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="pastel"]) #theme-toggle::before { content: "☀"; font-size: 15px; }
}

/* Ensure no leftover SVG children (from any cached HTML) interfere */
#theme-toggle .icon-sun,
#theme-toggle .icon-moon { display: none !important; }

/* ── Dark-mode logo badge: dark background so white SVG is visible ── */
[data-theme="dark"] .logo-badge {
  background: #1e1820;
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px 4px rgba(200,55,40,0.40);
}

/* ── Dark-mode logo: use the actual white SVG (preserves red leaf) ── */
[data-theme="dark"] .logo-badge img,
[data-theme="dark"] .logo-float-bubble img {
  content: url("drida_logo_white.svg");
  filter: none;
}

/* Dark mode: white logo more visible + vivid warm glow halo */
[data-theme="dark"] .logo-float-bubble img {
  opacity: 0.30;
}

/* Also boost the bubble's corona ring brightness in dark */
[data-theme="dark"] .logo-float-bubble {
  box-shadow:
    0 0  70px 28px  rgba(255, 110, 30,  0.28),
    0 0 150px 65px  rgba(230, 60,  20,  0.20),
    0 0 260px 110px rgba(200, 40,  20,  0.14),
    0 0 400px 150px rgba(160, 20,  20,  0.07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-badge {
    background: #1e1820;
    box-shadow: 0 0 0 2px var(--accent), 0 0 16px 4px rgba(200,55,40,0.40);
  }
  :root:not([data-theme="light"]) .logo-badge img,
  :root:not([data-theme="light"]) .logo-float-bubble img {
    content: url("drida_logo_white.svg");
    filter: none;
  }
  :root:not([data-theme="light"]) .logo-float-bubble img {
    opacity: 0.30;
  }
  :root:not([data-theme="light"]) .logo-float-bubble {
    box-shadow:
      0 0  70px 28px  rgba(255, 110, 30,  0.28),
      0 0 150px 65px  rgba(230, 60,  20,  0.20),
      0 0 260px 110px rgba(200, 40,  20,  0.14),
      0 0 400px 150px rgba(160, 20,  20,  0.07);
  }
}

/* ── Dark theme heading glow + card polish ───────────────────────────────
   In dark mode, headings pick up a warm glow that echoes the red bloom
   at the top of the page. Cards get a dark gradient and vivid gradient
   top border instead of the flat border from light mode.               */

[data-theme="dark"] section h2 {
  text-shadow:
    0 0 28px rgba(240, 100, 40, 0.45),
    0 0 60px rgba(200, 40,  20, 0.25);
}

[data-theme="dark"] .card {
  background-image:
    linear-gradient(145deg, #1c1c22 0%, #141418 100%),
    linear-gradient(90deg, #f04838 0%, #e86820 50%, #e89a20 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.50), 0 1px 0 rgba(240,80,30,0.20);
}

[data-theme="dark"] .card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.65), 0 1px 0 rgba(240,80,30,0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) section h2 {
    text-shadow: 0 0 28px rgba(240,100,40,0.45), 0 0 60px rgba(200,40,20,0.25);
  }
  :root:not([data-theme="light"]) .card {
    background-image:
      linear-gradient(145deg, #1c1c22 0%, #141418 100%),
      linear-gradient(90deg, #f04838 0%, #e86820 50%, #e89a20 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-color: transparent;
    box-shadow: 0 4px 24px rgba(0,0,0,0.50), 0 1px 0 rgba(240,80,30,0.20);
  }
}

/* ── Isha-style diagonal section transitions ─────────────────────────────
   clip-path creates angled cuts so sections flow into each other rather
   than meeting at a straight horizontal line.
   - band-cta : diagonal bottom (bottom-left higher than bottom-right)
   - section-deep: matching diagonal top, so they nest into each other
   The extra padding compensates for content hidden by the angle.        */

.band-cta {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
  padding-bottom: calc(5rem + 2.5rem);
}

.section-deep {
  clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(5rem + 2.5rem);
}

/* Band-dark (volunteer section) also gets an angled top */
.band-dark {
  clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(5rem + 2.5rem);
}

/* On mobile the angle is smaller so it doesn't eat too much space */
@media (max-width: 700px) {
  .band-cta {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.25rem));
    padding-bottom: calc(2.5rem + 1.25rem);
  }
  .section-deep,
  .band-dark {
    clip-path: polygon(0 1.25rem, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(2.5rem + 1.25rem);
  }
}

/* ── Theme toggle button ─────────────────────────────────────── */
#theme-toggle {
  background: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 0.5rem;
  color: var(--accent);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

#theme-toggle:hover {
  background: var(--paper-alt);
  border-color: var(--accent);
}

#theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Section divider — gradient hairline ────────────────────────── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Community video embed ───────────────────────────────────────
   Responsive 16:9 iframe that stays within the content column.   */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
  margin: 1.5rem auto 0;
  max-width: 800px;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}

/* ── Dark mode: fix low-contrast elements ────────────────────────────────
   The body is near-black (#0c0c0f). Elements that rely on --line-soft or
   --paper-alt as backgrounds become invisible against dark card/section
   backgrounds. Each rule below adds a visible "lift" in dark mode only.  */

/* Badge pills ("Free · Live") — currently near-invisible on dark cards */
[data-theme="dark"] .card .badge {
  background: rgba(240, 120, 55, 0.16);
  color: rgba(245, 205, 155, 0.92);
  border: 1px solid rgba(240, 90, 40, 0.30);
}

/* Founder highlight — needs a lifted background so it reads against
   the section-warm dark background */
[data-theme="dark"] .founder-highlight {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(240, 90, 40, 0.22);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}

/* Offering photo tiles — border barely visible on dark section bg */
[data-theme="dark"] .offering-photo {
  background: rgba(255,255,255,0.06);
  border-color: rgba(240, 90, 40, 0.22);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

/* Section-warm in dark: slightly lighter to be more distinct from body */
[data-theme="dark"] .section-warm {
  background: linear-gradient(155deg, #28203a 0%, #1e1830 100%);
  border-top-color: rgba(240, 100, 40, 0.35);
  border-bottom-color: rgba(240, 100, 40, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card .badge {
    background: rgba(240, 120, 55, 0.16);
    color: rgba(245, 205, 155, 0.92);
    border: 1px solid rgba(240, 90, 40, 0.30);
  }
  :root:not([data-theme="light"]) .founder-highlight {
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(240, 90, 40, 0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  }
  :root:not([data-theme="light"]) .offering-photo {
    background: rgba(255,255,255,0.06);
    border-color: rgba(240, 90, 40, 0.22);
  }
  :root:not([data-theme="light"]) .section-warm {
    background: linear-gradient(155deg, #28203a 0%, #1e1830 100%);
    border-top-color: rgba(240, 100, 40, 0.35);
    border-bottom-color: rgba(240, 100, 40, 0.22);
  }
}


/* ══════════════════════════════════════════════════
   HOMEPAGE v2 — Editorial layout  (style.css v17)
   ══════════════════════════════════════════════════ */

/* Fix: create stacking context so logo-float-bubble
   doesn't bleed through the hero-photo panel        */
.hero { isolation: isolate; }

/* Remove vignette overlay on hero photo — was the
   translucent layer visible on the foreground       */
.hero-photo::before { display: none; }

/* ── Generic section label / tag ─────────────────── */
.section-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

/* ── Program alternating split blocks ────────────── */
.program-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  overflow: visible;
}
.program-block.prog-rev .program-img { order: 2; }
.program-block.prog-rev .program-body { order: 1; }
.program-img {
  position: relative;
  overflow: hidden;
}
.program-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s ease;
}
.program-block:hover .program-img img { transform: scale(1.04); }
.program-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5.5vw, 5rem);
  background: var(--paper);
}
.program-body h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  margin-bottom: 1.1rem;
  line-height: 1.1;
}
.program-body > p {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.8rem;
  max-width: 480px;
}
.program-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.prog-pill {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.28rem 0.8rem;
  border-radius: 99px;
  background: var(--paper-alt);
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.prog-pill.free {
  background: rgba(204, 40, 40, 0.08);
  color: var(--accent);
  border-color: rgba(204, 40, 40, 0.25);
}
.program-body .btn-terra { align-self: flex-start; }

@media (max-width: 768px) {
  .program-block,
  .program-block.prog-rev { grid-template-columns: 1fr; }
  .program-block .program-img,
  .program-block.prog-rev .program-img { order: 0; height: 58vw; min-height: 240px; position: relative; }
  .program-block .program-img img { position: absolute; }
  .program-block .program-body,
  .program-block.prog-rev .program-body { order: 1; padding: 2.5rem 1.5rem; }
  .program-block.prog-rev .program-img { order: 0; }
}

/* ── About editorial section ─────────────────────── */
.about-editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 500px;
  overflow: hidden;
}
.about-photo-wrap {
  position: relative;
  overflow: hidden;
}
.about-photo-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5.5vw, 5rem);
  background: var(--paper-alt);
}
.about-content h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 1.2rem; }
.about-content p {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  max-width: 560px;
}
.rebrand-note {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  line-height: 1.6;
}

/* Charity note — very understated, just a quiet mention */
.charity-note {
  margin-top: 1rem;
  font-size: 0.83rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.65;
  max-width: 480px;
}

@media (max-width: 768px) {
  .about-editorial { grid-template-columns: 1fr; }
  .about-photo-wrap { height: 60vw; min-height: 260px; position: relative; }
  .about-photo-wrap img { position: absolute; }
  .about-content { padding: 2.5rem 1.5rem; }
}

/* ── How It Works ────────────────────────────────── */
.how-it-works {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
  background: var(--paper);
}
.how-it-works > .section-tag { display: block; }
.how-it-works h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 3.5rem; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 860px;
  margin: 0 auto;
}
.step { text-align: center; }
.step-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.22;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.6rem; color: var(--ink); }
.step > p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.72; }

@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .step-num { font-size: 3.5rem; }
}

/* ── FAQ ─────────────────────────────────────────── */
.faq-section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  background: var(--paper-alt);
}
.faq-section > .section-tag,
.faq-section h2 { display: block; text-align: center; }
.faq-section h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 3rem; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item summary {
  padding: 1.4rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  gap: 1rem;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-ans {
  padding: 0 2rem 1.5rem 0;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.78;
}

/* ── Impact Stats bar ────────────────────────────── */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0d2218;  /* deep forest green */
  color: #f0ede8;
}
.stat-block {
  padding: 3.5rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-block:last-child { border-right: none; }
.stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  font-weight: 600;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 0.6rem;
}
[data-theme="dark"] .stat-num { color: #f04838; }
.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 640px) {
  .impact-stats { grid-template-columns: repeat(2, 1fr); }
  .stat-block { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .stat-block:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
  .stat-block:nth-child(even) { border-right: none; }
}

/* ── Band CTA v2 (cleaner) ───────────────────────── */
.band-cta-clean {
  background: var(--grad);
  color: #fff;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.band-cta-clean h2 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin-bottom: 0.8rem;
  color: #fff;
}
.band-cta-clean h2::after { display: none; }
.band-cta-clean p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 2rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.btn-white-pill {
  background: #fff;
  color: var(--accent);
  border: none;
  padding: 0.85rem 2.4rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.18s, transform 0.18s;
}
.btn-white-pill:hover { opacity: 0.9; transform: translateY(-2px); }

/* ── Contact section ─────────────────────────────── */
.contact-section {
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 5rem);
  background: var(--paper);
  text-align: center;
}
.contact-section h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 0.8rem; }
.contact-section > p { color: var(--ink-2); margin-bottom: 2rem; }
.contact-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.contact-card {
  background: var(--paper-alt);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 1.5rem 2.5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  transition: border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 160px;
}
.contact-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(204,40,40,0.12);
}
.contact-card span { font-size: 0.82rem; color: var(--muted); font-weight: 400; }

/* ── Contact pill links (replaces big cards on homepage) ── */
.contact-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.contact-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.contact-link-pill:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.contact-link-pill:hover svg { color: #fff; stroke: #fff; }

/* ── Nav dropdown (About Us) ────────────────────────── */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-parent {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.2rem;
  position: relative;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  margin: 0 0.4rem;
}
.nav-parent::after { content: ' ▾'; font-size: 0.65rem; opacity: 0.7; }
.nav-parent:hover { color: var(--accent); }
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 14px; /* invisible bridge — prevents submenu from closing when moving mouse down */
  z-index: 199;
}
.nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 0.4rem;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  z-index: 200;
  flex-direction: column;
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu { display: flex; }
.nav-submenu a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  margin: 0;
}
.nav-submenu a:hover { background: var(--paper-alt); color: var(--accent); }
.nav-submenu a::after { display: none !important; }
[data-theme="dark"] .nav-submenu {
  background: #1c1c22;
  border-color: rgba(255,255,255,0.1);
}

/* Mobile: submenu items show inline (nav is full overlay anyway) */
@media (max-width: 768px) {
  .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-parent { width: 100%; padding: 0.85rem 1.5rem; margin: 0; border-bottom: 1px solid var(--line-soft); }
  .nav-parent::after { display: none; }
  .nav-submenu {
    display: flex !important;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    min-width: unset;
    width: 100%;
  }
  .nav-submenu a {
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    border-radius: 0;
    font-size: 0.88rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-submenu a:hover { background: var(--paper-alt); color: var(--accent); }
}

/* ── Team / River Section ──────────────────────────────── */
.team-section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5rem);
  text-align: center;
  background: var(--paper-alt);
}
.team-intro {
  max-width: 640px;
  margin: 1rem auto 3rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.founder-row {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.founder-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.founder-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(204,40,40,0.12);
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.founder-info h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.founder-info p  { margin: 0; font-size: 0.88rem; color: var(--muted); }
.team-river-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}
.river-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 1.75rem 1.4rem;
  text-align: left;
  border-top: 5px solid transparent;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.river-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
.river-ganga   { border-top-color: #cc2828; }
.river-yamuna  { border-top-color: #2d7a3a; }
.river-narmada { border-top-color: #c9991a; }
.river-godavari{ border-top-color: #1a5fa8; }
.river-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.river-ganga .river-name    { color: #cc2828; }
.river-yamuna .river-name   { color: #2d7a3a; }
.river-narmada .river-name  { color: #c9991a; }
.river-godavari .river-name { color: #1a5fa8; }
.river-lead {
  font-size: 0.88rem;
  color: var(--muted);
  font-style: italic;
}
.river-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0.25rem 0;
  flex: 1;
}
.river-count {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}
@media (max-width: 900px) {
  .team-river-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .team-river-grid { grid-template-columns: 1fr; }
}

/* ── Inner-page hero: text-forward, gradient background ── */
.hero-page {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(5rem, 10vw, 7rem) clamp(2rem, 7vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
  background: var(--grad);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("drida_logo.svg") no-repeat center / 38% auto;
  opacity: 0.06;
  pointer-events: none;
}
.hero-page .hero-kicker {
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  display: block;
}
.hero-page h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.hero-page p {
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}
.hero-page .hero-ctas .btn-terra {
  background: #fff;
  color: var(--accent);
}
.hero-page .hero-ctas .btn-terra:hover { background: rgba(255,255,255,0.88); }
.hero-page .hero-ctas .btn-outline {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.hero-page .hero-ctas .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* Existing inner-page plain hero (courses/trips): style it too */
.hero:not(:has(.hero-text)) {
  min-height: unset;
  padding: clamp(4rem, 8vw, 6rem) clamp(2rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
  background: var(--grad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-template-columns: unset;
}
.hero:not(:has(.hero-text)) h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 0.75rem; }
.hero:not(:has(.hero-text)) p  { color: rgba(255,255,255,0.82); max-width: 540px; font-size: 1.05rem; margin: 0; }

/* ── Logo bubble fix: all main content sits above the fixed bubble ── */
main {
  position: relative;
  z-index: 1;
}
.about-editorial,
.program-block,
.how-it-works,
.band-cta-clean,
.faq-section,
.impact-stats,
.team-section,
.contact-section,
.band-dark,
.trips-section,
footer.site-footer {
  position: relative;
  z-index: 1;
}

/* ── Course cards (shared: courses.html + meditation.html) ────────── */
.courses-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.course-card {
  background: var(--paper-alt);
  border: 1px solid var(--line-soft);
  border-left: 4px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-left-color 0.22s;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1;
  align-items: stretch;
}
.course-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-left-color: var(--accent);
}
.course-poster {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  height: 200px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--paper);
  border-right: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.course-poster.portrait { width: 200px; min-width: 200px; max-width: 200px; }
.course-body {
  padding: 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
}
.course-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.1rem; }
.tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.tag-free   { background: #e8f8f0; color: #1a7a47; }
.tag-live   { background: linear-gradient(135deg, #cc2828, #e06020); color: #fff; }
.tag-active { background: #fff3e0; color: #b85c00; }
.tag-soon   { background: var(--line-soft); color: var(--muted); }
.tag-online { background: #e8f0fe; color: #3a5fc4; }
.course-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.course-card p  { margin: 0; font-size: 0.84rem; color: var(--muted); flex: 1; }
.course-price   { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.course-badge   { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: 0.5px; padding: 0.15rem 0.6rem; border-radius: 999px; }
.course-badge.free { background: #e8f8f0; color: #1a7a47; }
.course-badge.paid { background: #fff3e0; color: #b85c00; }
.course-header  { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.course-meta    { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem;
                  color: var(--muted); margin: 0.35rem 0; }
@media (max-width: 600px) {
  .course-card  { flex-direction: column; }
  .course-poster, .course-poster.portrait {
    width: 100%; max-width: 100%; height: 220px; object-fit: cover;
  }
}

/* ── Dark mode river card color overrides ── */
[data-theme="dark"] .river-godavari { border-top-color: #5b9fd9; }
[data-theme="dark"] .river-godavari .river-name { color: #5b9fd9; }
[data-theme="dark"] .river-ganga    { border-top-color: #e05555; }
[data-theme="dark"] .river-yamuna   { border-top-color: #4aaa5e; }
[data-theme="dark"] .river-narmada  { border-top-color: #d9a82a; }

/* ── About editorial: button auto-width ── */
.about-content .btn-terra {
  width: fit-content;
  display: inline-block;
}

/* ── 4-col contact cards (no orphan 4th card) ── */
.contact-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: unset;
}
@media (max-width: 800px) {
  .contact-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .contact-cards-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   DRIDA EFFECTS — scroll reveal, counter, parallax, etc.
   ═══════════════════════════════════════════════════════ */

/* ── Scroll Progress Bar ── */
#drida-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), #e07070);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── Back to Top Button ── */
#back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(153,30,30,0.35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
#back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(153,30,30,0.45);
}

/* ── Sticky Header ── */
header.header-scrolled .topbar {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  background: rgba(250,247,243,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] header.header-scrolled .topbar {
  background: rgba(20,15,12,0.97);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Button Ripple ── */
.btn-terra,
.btn-white-pill,
.btn,
.btn-outline,
.footer-subscribe-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim 0.55s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* ── Image Lazy Fade ── */
.card img,
.program-img img,
.about-photo-wrap img,
.band-photo img {
  opacity: 0;
  transition: opacity 0.55s ease;
}
.card img.img-loaded,
.program-img img.img-loaded,
.about-photo-wrap img.img-loaded,
.band-photo img.img-loaded {
  opacity: 1;
}

/* ── Stat counter gradient text ── */
.stat-num {
  background: linear-gradient(135deg, var(--accent), #c47a50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ── Section-tag reveal tweak — slight slide from left ── */
.section-tag {
  display: inline-block;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
section.revealed .section-tag,
.impact-stats.revealed .section-tag {
  opacity: 1;
  transform: translateX(0);
}

/* ── Program blocks reveal ── */
.program-block {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.program-block.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── About editorial reveal ── */
.about-editorial {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-editorial.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Impact stats section ── */
.impact-stats {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.impact-stats.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── How it works section ── */
.how-it-works {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.how-it-works.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── FAQ section ── */
.faq-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.faq-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Pillar cards — reset base transform to allow tilt JS ── */
.pillar-card {
  will-change: transform;
}

/* ── Hero parallax — image must overflow clip ── */
.hero-photo {
  overflow: hidden;
}
.hero-photo img {
  will-change: transform;
  transition: none;
}

/* ══════════════════════════════════════════════════════
   CHAT SUPPORT WIDGET — floating bubble, bottom-right
   ══════════════════════════════════════════════════════ */
#drida-chat-btn {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad);
  border: none;
  cursor: pointer;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(204,40,40,0.40);
  transition: transform 0.2s, box-shadow 0.2s;
}
#drida-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(204,40,40,0.55);
}
#drida-chat-btn svg { display: block; }

#drida-chat-popup {
  position: fixed;
  bottom: 9rem;
  right: 1.5rem;
  width: 280px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px var(--line-soft);
  z-index: 8999;
  overflow: hidden;
  transform-origin: bottom right;
  animation: chat-pop-in 0.22s ease;
}
#drida-chat-popup[hidden] { display: none; }

@keyframes chat-pop-in {
  from { opacity: 0; transform: scale(0.88) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.chat-popup-header {
  background: var(--grad);
  color: #fff;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
#drida-chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.2rem;
  opacity: 0.8;
  transition: opacity 0.15s;
}
#drida-chat-close:hover { opacity: 1; }

.chat-popup-body { padding: 1.1rem; }

.chat-soon-badge {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  margin-bottom: 0.75rem;
}

.chat-popup-body > p {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 0.9rem;
}

.chat-contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 0.35rem;
}
.chat-contact-link:hover {
  background: var(--paper-alt);
  color: var(--accent);
}
.chat-wa-link {
  background: #25d366;
  color: #fff !important;
  border-radius: 8px;
  margin-top: 0.2rem;
}
.chat-wa-link:hover {
  background: #1fba59 !important;
  color: #fff !important;
}

/* Dark mode */
[data-theme="dark"] #drida-chat-popup {
  background: #1c1c22;
  box-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 0 0 1px #2a2830;
}
[data-theme="dark"] .chat-contact-link { color: var(--ink); }
[data-theme="dark"] .chat-contact-link:hover { background: #28282e; }