/* ===== ABOUT PAGE — Linear system ===== */

.section-title    { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 590; font-feature-settings: "cv01","ss03"; line-height: 1.1; letter-spacing: var(--ls-display); color: var(--color-text); margin-top: var(--space-4); margin-bottom: var(--space-6); }
.section-subtitle { font-size: var(--text-base); color: var(--color-text-muted); max-width: 60ch; line-height: 1.75; margin-top: var(--space-4); }
.section-header   { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section-header .badge { margin-bottom: var(--space-4); }

/* Shared CTA */
.cta-inner { background: linear-gradient(135deg, #0f1011 0%, #191a1b 100%); border: 1px solid rgba(94,106,210,0.25); border-radius: var(--radius-xl); padding: clamp(var(--space-12), 6vw, var(--space-20)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); position: relative; overflow: hidden; }
.cta-inner::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse at 50% 0%, rgba(94,106,210,0.18) 0%, transparent 60%); pointer-events: none; }
.cta-badge    { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-4); background: rgba(94,106,210,0.15); border: 1px solid rgba(94,106,210,0.35); border-radius: var(--radius-full); color: #828fff; font-size: var(--text-xs); font-weight: 590; letter-spacing: var(--ls-label); text-transform: uppercase; }
.cta-title    { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 590; font-feature-settings: "cv01","ss03"; color: #fff; max-width: 20ch; line-height: 1.1; letter-spacing: var(--ls-display); }
.cta-body     { font-size: var(--text-base); color: rgba(255,255,255,0.55); max-width: 56ch; line-height: 1.75; }
.cta-actions  { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.cta-footnote { font-size: var(--text-xs); color: rgba(255,255,255,0.25); max-width: none; }
.cta-section  { background: var(--color-bg); padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }

/* ── ABOUT HERO ── */
.about-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(var(--space-24), 12vw, var(--space-32));
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,9,10,0.75) 0%, rgba(8,9,10,0.58) 50%, rgba(8,9,10,0.96) 100%);
}

.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.about-hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 590;
  font-feature-settings: "cv01","ss03";
  color: #fff;
  line-height: 1.05;
  letter-spacing: var(--ls-hero);
  margin-block: var(--space-5);
}

.about-hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.62);
  line-height: 1.7;
  max-width: 56ch;
}

/* ── STORY ── */
.story-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-bg);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-16);
  align-items: start;
}

.story-text p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.story-stat-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(72px + var(--space-8));
}

/* Linear stat card — subtle surface with precise border */
.story-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    box-shadow var(--transition-interactive),
    transform  var(--transition-interactive),
    border-color var(--transition-fast);
}

.story-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

.story-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.story-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 590;
  font-feature-settings: "cv01","ss03";
  color: var(--color-text);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.story-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── VALUES ── */
.values-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-surface-2);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-interactive),
    transform  var(--transition-interactive),
    border-color var(--transition-fast);
}

.value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

.value-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 590;
  color: var(--color-primary);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.value-card h3 {
  font-size: var(--text-lg);
  font-weight: 590;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls-heading);
}

.value-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ── TEAM ── */
.team-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-bg);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  transition:
    box-shadow var(--transition-interactive),
    transform  var(--transition-interactive),
    border-color var(--transition-fast);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 590;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.team-name {
  font-size: var(--text-lg);
  font-weight: 590;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  letter-spacing: var(--ls-heading);
}

.team-role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 590;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-3);
}

.team-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .about-hero-headline { font-size: var(--text-2xl); }
  .story-grid  { grid-template-columns: 1fr; }
  .story-stat-stack { position: static; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid   { grid-template-columns: 1fr; }
}