/* About Section */
.about-shell {
  position: relative;
  padding: clamp(1.2rem, 3.2vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-ui) + 2px);
  background:
    radial-gradient(130% 150% at 5% -15%, rgba(66, 184, 228, 0.08), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(90, 196, 255, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.about-header {
  max-width: 66ch;
  margin-bottom: clamp(0.85rem, 2vw, 1.35rem);
}

.about-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.9;
}

.about-headline {
  margin: 0.5rem 0 0;
  font-size: clamp(1.65rem, 2.45vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  max-width: 26ch;
}

.about-subheadline {
  margin: 0.45rem 0 0;
  color: var(--color-text-dim);
  font-size: 0.98rem;
  line-height: 1.48;
  max-width: 52ch;
}

.about-grid {
  display: grid;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  align-items: start;
}

.about-main {
  display: grid;
  gap: 0.9rem;
  max-width: 72ch;
}

.about-intro,
.about-example-copy,
.about-recent-proof {
  color: var(--color-text-dim);
}

.about-intro {
  margin: 0;
  max-width: 66ch;
  font-size: 0.99rem;
  line-height: 1.6;
}

.about-example-block,
.about-use-cases-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ui);
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.035));
  padding: clamp(0.8rem, 1.8vw, 1rem);
}

.about-example-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--color-accent);
}

.about-example-copy {
  margin: 0 0 0.7rem;
  max-width: 64ch;
  line-height: 1.54;
}

.about-example-block {
  color: var(--color-text-dim);
}

.about-flow-diagram {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.about-flow-diagram li {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-ui) - 2px);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
  line-height: 1.32;
  color: var(--color-text-dim) !important;
}

.about-subtitle {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(237, 241, 247, 0.95);
}

.about-use-cases {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.about-use-cases li {
  margin: 0;
  padding: 0.58rem 0.68rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-ui) - 2px);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-dim);
}

.about-side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ui);
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.035));
  padding: clamp(0.9rem, 2vw, 1.2rem);
  box-shadow: var(--shadow-sm);
}

.about-side-title {
  margin: 0 0 0.75rem;
  font-size: 1.08rem;
  line-height: 1.28;
}

.about-proof-grid {
  display: grid;
  gap: 0.55rem;
}

.about-proof-card {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-ui) - 2px);
  background: rgba(255, 255, 255, 0.03);
}

.about-proof-marker {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--color-accent);
  margin-top: 0.36rem;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(66, 184, 228, 0.12);
}

.about-proof-card p {
  margin: 0;
  color: var(--color-text-dim);
  font-size: 0.9rem;
  line-height: 1.36;
}

.about-cta {
  margin-top: 0.85rem;
}

/* ─── Profile card ─── */
.about-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ui);
  background: rgba(255,255,255,.025);
  margin-bottom: 1rem;
}
.about-profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  filter: saturate(.9);
}
.about-profile-info { display: flex; flex-direction: column; gap: .3rem; }
.about-profile-name {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.about-profile-bio {
  margin: 0;
  font-size: .78rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}
.about-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}
.about-profile-tag {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--color-text-dim);
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 8px;
  padding: .2rem .5rem;
  line-height: 1.2;
}


.about-cta-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding-block: 0.68rem;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}

.about-recent-proof {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  line-height: 1.42;
}

.about-recent-proof a {
  font-weight: 600;
}

@media (min-width: 760px) {
  .about-flow-diagram {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
  }

  .about-flow-diagram li {
    position: relative;
  }

  .about-flow-diagram li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 0.9rem;
  }

  .about-use-cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .about-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: clamp(1.2rem, 2.8vw, 2.2rem);
  }
}

/* Subtle inline callout for C++ teaser */
.cpp-teaser { margin-top: 2rem; background: rgba(255,255,255,.02); border: 1px solid var(--color-border); border-radius: var(--radius-ui); box-shadow: var(--shadow-sm); }
.cpp-teaser-inner { display:flex; align-items:center; justify-content:flex-start; gap:1rem; padding: .9rem 1rem; flex-wrap: wrap; }
.cpp-teaser-title { margin: .1rem 0 .25rem; font-size: .98rem; }
.cpp-teaser-desc { margin: 0; color: var(--color-text-dim); }
.cpp-teaser-cta { min-width: max-content; margin-top: .6rem; }