/* ═══════════════════════════════════════════════════════════════
   About page — Truecaller-like story scroll (no hash nav)
   ═══════════════════════════════════════════════════════════════ */

.about-section{
  --about-wide: min(920px, calc(100% - 2rem));
  --about-line: var(--clr-border, color-mix(in srgb, var(--clr-txt) 12%, transparent));
  --about-text: var(--clr-txt, #0f172a);
  --about-muted: var(--clr-txt2, #334155);
  --about-faint: var(--clr-txt3, #64748b);
  --about-accent: var(--carrier-sf, #3b82f6);
  --about-warm: #0f766e;
  --about-ink: color-mix(in srgb, var(--about-text) 92%, #020617);
  position:relative;
  z-index:1;
  isolation:isolate;
  margin:0 !important;
  padding:0;
  border-radius:0 !important;
  background:var(--clr-bg, #f6f7fb);
  color:var(--about-text);
  overflow:clip;
}

/* ── Hero ── */
.about-hero{
  position:relative;
  min-height:min(72vh, 40rem);
  display:grid;
  place-items:center;
  padding:clamp(4rem, 10vh, 6.5rem) 1.25rem 3.25rem;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, color-mix(in srgb, var(--about-accent) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 40% at 100% 80%, color-mix(in srgb, var(--about-warm) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--clr-bg) 70%, #dbeafe) 0%, var(--clr-bg) 100%);
}
.about-hero::before{
  content:none !important;
  display:none !important;
}
.about-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:5.5rem;
  background:linear-gradient(180deg, transparent, var(--clr-bg));
  pointer-events:none;
}
@keyframes about-grid-drift{
  from{transform:translateY(0)}
  to{transform:translateY(48px)}
}
.about-hero__inner{
  position:relative;
  z-index:1;
  max-width:40rem;
  margin:0 auto;
  animation:none;
}
@keyframes about-rise{
  from{opacity:0; transform:translateY(1.1rem)}
  to{opacity:1; transform:none}
}
.about-brand{
  margin:0 0 0.75rem;
  font-size:clamp(1.65rem, 4.5vw, 2.45rem);
  font-weight:900;
  letter-spacing:-0.035em;
  line-height:1;
  color:var(--about-accent);
}
.about-title{
  margin:0 0 1.15rem;
  font-family:"Tajawal", system-ui, sans-serif;
  font-size:clamp(2.75rem, 10vw, 5.25rem);
  font-weight:900;
  letter-spacing:-0.045em;
  line-height:0.98;
  color:var(--about-ink);
}
.about-lede{
  margin:0 auto;
  max-width:34rem;
  font-size:clamp(1.05rem, 2.2vw, 1.2rem);
  line-height:1.85;
  color:var(--about-muted);
}

/* ── Body ── */
.about-body{
  padding:0.25rem 0 4.5rem;
}
.about-body__inner{
  max-width:var(--about-wide);
  margin:0 auto;
  padding:0 1rem;
}
.about-prose{
  color:var(--about-muted);
  font-size:1.06rem;
  line-height:1.95;
}
.about-prose h1{display:none}
.about-prose h2{
  margin:2.75rem 0 1rem;
  font-size:clamp(1.65rem, 3.6vw, 2.35rem);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.2;
  color:var(--about-ink);
}
.about-prose h2:first-child{margin-top:0.5rem}
.about-prose h3{
  margin:1.35rem 0 0.5rem;
  font-size:1.12rem;
  font-weight:800;
  color:var(--about-ink);
}
.about-prose p{margin:0 0 1.05rem}
.about-prose .about-lead-para,
.about-prose > p:first-of-type{
  font-size:1.12rem;
  color:color-mix(in srgb, var(--about-text) 88%, var(--about-muted));
}
.about-prose ul,
.about-prose ol{
  margin:0 0 1.15rem;
  padding-inline-start:1.2rem;
}
.about-prose li{margin:0.4rem 0}
.about-prose li + li{margin-top:0.5rem}
.about-prose a{color:var(--about-accent); text-underline-offset:0.18em}
.about-prose strong{color:var(--about-ink); font-weight:800}

.about-block{
  margin:0 0 1.75rem;
  padding:clamp(1.4rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.65rem);
  border-radius:1.25rem;
  border:1px solid color-mix(in srgb, var(--about-line) 75%, transparent);
  background:color-mix(in srgb, var(--clr-surface, #fff) 60%, transparent);
}
.about-block--why{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--about-accent) 9%, transparent), transparent 55%),
    color-mix(in srgb, var(--clr-surface, #fff) 70%, transparent);
}

/* ── Our story timeline (1, 2, 3…) ── */
.about-story{
  margin:1.25rem 0 2.25rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
  position:relative;
}
.about-story::before{
  content:"";
  position:absolute;
  inset-block:0.6rem 0.6rem;
  inset-inline-start:1.35rem;
  width:2px;
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--about-accent) 55%, transparent),
    color-mix(in srgb, var(--about-warm) 35%, transparent)
  );
  border-radius:99px;
}
.about-story__step{
  position:relative;
  display:grid;
  grid-template-columns:4.2rem minmax(0, 1fr);
  gap:0.85rem 1.1rem;
  padding:1.15rem 0 1.55rem;
  margin:0;
}
.about-story__num{
  margin:0;
  font-size:clamp(2rem, 5vw, 2.75rem);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1;
  color:var(--about-accent);
  text-align:center;
  position:relative;
  z-index:1;
}
.about-story__body{min-width:0}
.about-story__body h3{
  margin:0.15rem 0 0.45rem;
  font-size:clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--about-ink);
}
.about-story__body p{
  margin:0;
  color:var(--about-muted);
  line-height:1.85;
}
.about-story__body p + p{margin-top:0.7rem}

.is-reveal{
  opacity:1;
  transform:none;
  transition:none;
}
.is-reveal.is-inview{
  opacity:1;
  transform:none;
}

.about-empty{
  max-width:40rem;
  margin:2rem auto;
  padding:1.2rem;
  border:1px dashed var(--about-line);
  border-radius:0.85rem;
  text-align:center;
  color:var(--about-muted);
}

@media (max-width:640px){
  .about-story::before{inset-inline-start:1.05rem}
  .about-story__step{grid-template-columns:3.4rem minmax(0, 1fr); gap:0.55rem 0.75rem}
  .about-hero{min-height:min(64vh, 34rem)}
}
@media (prefers-reduced-motion: reduce){
  .about-hero::before,
  .about-hero__inner{animation:none !important}
  .is-reveal{opacity:1; transform:none; transition:none}
}

html[data-bs-theme="dark"] .about-section,
body[data-bs-theme="dark"] .about-section{
  --about-warm:#2dd4bf;
}
html[data-bs-theme="dark"] .about-block,
body[data-bs-theme="dark"] .about-block{
  background:color-mix(in srgb, var(--clr-surface) 72%, transparent);
}