/* ====== About Page (same theme) ====== */
:root{
  --primary:#f06ec8; --secondary:#7c3aed; --sky:#38bdf8; --ink:#0f172a; --muted:#6b7280;
  --bg:#fff; --paper:#fff;
}
:root.dark{ --bg:#0b1020; --paper:#0e1426; --ink:#eef2ff; --muted:#97a0b3; }

body{ background:var(--bg) }

/* Reusable */
.reveal{ opacity:0; transform:translateY(12px); transition:.65s ease }
.reveal.in{ opacity:1; transform:translateY(0) }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #eee; font-weight:700 }
:root.dark .pill{ background:#141c34; border-color:#223159 }
.title{ font-size: clamp(36px,5.6vw,72px); line-height:1.05; letter-spacing:-.02em; margin:.3rem 0 .7rem }
.title-sparkle{ position:relative }
.title-sparkle::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(255,255,255,.6) 20%,transparent 45%); transform:translateX(-120%); animation:shine 3.2s linear infinite 1.2s; mix-blend-mode:overlay; pointer-events:none }
@keyframes shine{ to{ transform:translateX(120%) } }
.grad{ background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent }

.lead{ color:#475569; max-width:760px }
.big{ font-size:1.08rem; color:#374151; max-width:760px }
:root.dark .lead{ color:#aab4c7 } :root.dark .big{ color:#c6cfdf }

/* ===== Hero ===== */
.about-hero{ position:relative; overflow:hidden; min-height:68vh; display:grid; place-items:center; isolation:isolate }
.about-hero .bg{ position:absolute; inset:0; background:
  radial-gradient(1000px 500px at -10% -20%, #ffe3f3 0, transparent 60%),
  radial-gradient(900px 500px at 110% -10%, #fff2cf 0, transparent 55%),
  linear-gradient(var(--paper), var(--paper));
  z-index:-3
}
.blob{ position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(18px) saturate(120%); opacity:.46; z-index:-2; animation:floaty 14s ease-in-out infinite }
.b1{ background:var(--primary); top:-80px; left:-120px }
.b2{ background:var(--sky); top:14%; right:-120px; animation-duration:16s }
.b3{ background:#8de8c7; bottom:-140px; left:30%; animation-duration:18s }
@keyframes floaty{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-8px,0) scale(1.05)} }

.hero-grid{ width:100%; padding: clamp(36px,6vw,76px) 0; display:grid; gap:34px; grid-template-columns:1.15fr .85fr; align-items:center }
.hero-text .cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }

/* media card */
.hero-media{ position:relative }
.card-vid{ width:100%; height:360px; object-fit:cover; display:block; border-radius:20px; border:1px solid #eee; background:#000; box-shadow:0 16px 36px rgba(2,6,23,.10) }
.ring{ position:absolute; left:-14px; bottom:-14px; width:68px; height:68px; border-radius:50%; border:6px solid rgba(240,110,200,.28); box-shadow:0 8px 24px rgba(240,110,200,.35) }
.doodle{ position:absolute; right:-8px; top:-8px; width:140px; height:94px; pointer-events:none }
.doodle path{ fill:none; stroke:#9bb9ff; stroke-width:4; stroke-linecap:round; stroke-dasharray:380; stroke-dashoffset:380; animation:doodle 3s ease .6s forwards }
@keyframes doodle{ to{ stroke-dashoffset:0 } }

/* ===== Story ===== */
.section{ padding: clamp(36px, 5.8vw, 88px) 0 }
.section.alt{ background:#fafafa }
:root.dark .section.alt{ background:#0e1426 }

.container.narrow{ max-width: 960px }
.story{ font-size:1.06rem; line-height:1.9 }
.story p{ margin:.8rem 0 }
.story .last{ font-weight:700 }

.values{ margin-top:28px }
.values .card{ border:1px solid #eee; border-radius:16px; padding:18px; background:#fff }
.values h3{ margin:.2rem 0 .3rem }
:root.dark .values .card{ background:#10182e; border-color:#203156 }

.ribbon{ overflow:hidden; border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; background:#fafafa }
:root.dark .ribbon{ background:#0e1426; border-color:#1e2a4d }
.ribbon-track{
  display:flex; flex-wrap:nowrap; gap:10px; padding:10px 14px; width:max-content;
  animation: ribbon var(--ribbon-dur) linear infinite; will-change:transform;
}
@keyframes ribbon{ to{ transform: translateX(-50%) } }


/* ===== CTA Wide ===== */
.cta-wide{ text-align:center }
.cta-wide h3{ font-size: clamp(22px, 3.6vw, 36px); margin:0 0 .2rem }
.cta-wide .btn{ margin-top:10px }

/* Responsive */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr }
  .card-vid{ height:260px }
}