/* ════════════════════════════════════════
   ABOUT PAGE — Kallol Entertainment
════════════════════════════════════════ */

/* ── Page hero ────────────────────────────────────────────────────────────── */
.about-hero {
  margin-top: var(--hh);
  background: radial-gradient(ellipse 120% 100% at 60% 0%, #2d1008 0%, #1a0803 40%, #0d0a08 100%);
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.about-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(117,34,28,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(254,193,8,.05) 0%, transparent 55%);
  pointer-events: none;
}
[data-theme="light"] .about-hero {
  background: radial-gradient(ellipse 120% 100% at 60% 0%, #e6dfd5 0%, #f0ebe2 50%, #faf7f2 100%);
}
[data-theme="light"] .about-hero::before {
  background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(117,34,28,.06) 0%, transparent 60%);
}
.about-hero-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 720px; margin: 0 auto;
}
.about-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem;
}
.about-hero-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(254,193,8,.2);
  animation: dotPulse 2.4s ease infinite; flex-shrink: 0;
}
.about-hero-eyebrow-txt {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.about-page-title { color: var(--text-primary); margin-bottom: .55rem; }
.about-lead {
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
  color: var(--text-secondary); line-height: 1.82; max-width: 660px; margin: 0 auto;
}

/* ── PVM cards ────────────────────────────────────────────────────────────── */
.about-pvm-section {
  background: var(--bg); padding: clamp(4rem, 9vw, 7.5rem) 0;
}
.pvm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.pvm-card {
  background: var(--surface-1);
  border: 1px solid var(--border); border-top: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  text-align: center; position: relative; overflow: hidden;
  transition: var(--theme-transition), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.pvm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(254,193,8,.07) 0%, transparent 70%);
  pointer-events: none;
}
.pvm-card:hover {
  transform: translateY(-4px); background: var(--surface-2);
  border-top-color: var(--gold);
  box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(254,193,8,.1);
}
.pvm-icon { width: 48px; height: 48px; margin: 0 auto 1.25rem; color: var(--gold); position: relative; z-index: 1; }
.pvm-icon svg { width: 100%; height: 100%; }
.pvm-title {
  font-family: var(--font-d); font-size: 1.65rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-primary); margin-bottom: .85rem; position: relative; z-index: 1;
}
.pvm-text { font-size: .875rem; color: var(--text-secondary); line-height: 1.78; position: relative; z-index: 1; }

/* ── What We Do ───────────────────────────────────────────────────────────── */
.about-what-section {
  background: var(--surface-1); padding: clamp(4rem, 9vw, 7.5rem) 0;
  border-top: 1px solid var(--border);
}
.about-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 920px; margin: 0 auto; }
.about-pillar {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
  transition: var(--theme-transition), border-color 280ms, transform 280ms var(--ease);
}
.about-pillar:hover { border-color: rgba(254,193,8,.22); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.28); }
.about-pillar-icon  { font-size: 2rem; margin-bottom: .9rem; line-height: 1; }
.about-pillar-title { font-family: var(--font-d); font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: .55rem; }
.about-pillar-text  { font-size: .875rem; color: var(--text-secondary); line-height: 1.74; }

/* ── Show Partners marquee ────────────────────────────────────────────────── */
.about-partners-section {
  background: var(--bg); padding: clamp(4rem, 9vw, 7.5rem) 0;
  border-top: 1px solid var(--border);
}

/* Outer wrapper — clips overflow and holds the edge fades */
.partner-marquee-wrap {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.partner-marquee-wrap::before,
.partner-marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: clamp(3rem, 8vw, 7rem); z-index: 2; pointer-events: none;
}
.partner-marquee-wrap::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.partner-marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

/*
 * Inner track — contains Set A + Set B (identical duplicates).
 * Animation scrolls exactly -50% of total width = one full set,
 * then snaps back to 0 for a seamless infinite loop.
 */
.partner-marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;                  /* shrink-wraps all cards */
  padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
  animation: partnerMarquee 22s linear infinite;
  will-change: transform;
}
.partner-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes partnerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Logo card */
.partner-logo-card {
  flex: 0 0 clamp(180px, 24vw, 280px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
  transition: var(--theme-transition), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.partner-logo-card:hover {
  border-color: rgba(254,193,8,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.32);
}

.partner-logo-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

.partner-logo-img {
  max-width: 100%; max-height: 80px;
  width: auto; height: auto;
  object-fit: contain; display: block;
  filter: saturate(.85) brightness(1.05);
  transition: filter 280ms;
}
.partner-logo-card:hover .partner-logo-img { filter: saturate(1) brightness(1.1); }
[data-theme="light"] .partner-logo-img { filter: saturate(.9) brightness(.95); }

/* ── CTA banner ───────────────────────────────────────────────────────────── */
.about-cta { background: var(--nl-bg); position: relative; overflow: hidden; }
.about-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 50% 110%, rgba(254,193,8,.07) 0%, transparent 65%),
    repeating-linear-gradient(45deg, transparent 0, transparent 24px, rgba(0,0,0,.04) 24px, rgba(0,0,0,.04) 25px);
  pointer-events: none;
}
.about-cta-inner   { position: relative; z-index: 1; text-align: center; }
.about-cta-title   { color: #f4ede3; margin-bottom: .75rem; }
.about-cta-desc    { font-size: .95rem; color: rgba(244,237,227,.65); max-width: 480px; margin: 0 auto 2rem; line-height: 1.75; }
.about-cta-btns    { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.about-cta .btn-outline { color: #f4ede3; border-color: rgba(244,237,227,.32); }
.about-cta .btn-outline:hover { border-color: rgba(244,237,227,.7); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pvm-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .about-pillars  { grid-template-columns: 1fr; }
  .partner-logo-card { flex: 0 0 72vw; }
  .about-cta-btns { flex-direction: column; align-items: center; }
  .about-cta-btns .btn { width: 100%; max-width: 360px; }
}