:root {
  --about-cyan: #2fc2ff;
  --about-ink: #f7fbff;
  --about-muted: rgba(222, 233, 248, .68);
  --about-line: rgba(211, 230, 248, .16);
}

.about-page {
  width: 100vw;
  min-height: 100vh;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  color: var(--about-ink);
  background:
    radial-gradient(circle at 12% 17%, rgba(47, 194, 255, .14), transparent 30rem),
    radial-gradient(circle at 87% 38%, rgba(109, 92, 255, .13), transparent 34rem),
    linear-gradient(135deg, #061829, #050914 72%);
}

.about-container { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }

.about-hero { padding: 174px 0 114px; }
.about-eyebrow { margin: 0 0 16px; color: var(--about-cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.about-page h1, .about-page h2 { margin: 0; color: #fff; font-weight: 650; letter-spacing: -.045em; }
.about-hero h1 { font-size: clamp(4rem, 7vw, 7rem); line-height: .92; }
.about-hero__content > p:not(.about-eyebrow) { max-width: 745px; margin: 29px 0 0; color: var(--about-muted); font-size: 19px; line-height: 1.58; }

.about-founder { padding: 64px 0 116px; }
.about-founder__grid { display: grid; grid-template-columns: minmax(330px, .75fr) minmax(0, 1fr); gap: clamp(60px, 9vw, 154px); align-items: center; }
.about-founder__portrait { min-height: 490px; margin: 0; overflow: hidden; border: 1px solid var(--about-line); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: 0 26px 70px rgba(0, 0, 0, .24); }
.about-founder__portrait img { display: block; width: 100%; height: 100%; min-height: 490px; object-fit: cover; }
.about-founder__placeholder { display: grid; min-height: 490px; place-items: end start; padding: 28px; box-sizing: border-box; color: rgba(222, 233, 248, .48); font-size: 13px; line-height: 1.4; background: radial-gradient(circle at 25% 20%, rgba(47, 194, 255, .12), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.about-page h2 { font-size: clamp(2.5rem, 4vw, 4.8rem); line-height: .98; }
.about-founder__role { margin: 18px 0 28px; color: #bceeff; font-size: 18px; font-weight: 620; }
.about-founder__content > p:last-child, .about-expertise__content > p { margin: 0; color: var(--about-muted); font-size: 17px; line-height: 1.65; }

.about-expertise { padding: 106px 0 142px; border-top: 1px solid var(--about-line); }
.about-expertise__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(60px, 10vw, 180px); }
.about-expertise__content { display: grid; gap: 30px; padding-top: 6px; }
.about-expertise__list { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--about-line); list-style: none; }
.about-expertise__list li { padding: 15px 0; border-bottom: 1px solid var(--about-line); color: #d9f7ff; font-size: 16px; }
.about-expertise__list li::before { content: '—'; margin-right: 12px; color: var(--about-cyan); }

@media (max-width: 1080px) {
  .about-container { width: min(100% - 56px, 840px); }
  .about-founder__grid, .about-expertise__grid { grid-template-columns: 1fr; gap: 48px; }
  .about-founder__portrait { max-width: 500px; }
}

@media (max-width: 640px) {
  .about-container { width: min(100% - 28px, 640px); }
  .about-hero { padding: 128px 0 76px; }
  .about-hero h1 { font-size: 54px; }
  .about-hero__content > p:not(.about-eyebrow) { font-size: 16px; }
  .about-founder { padding: 44px 0 72px; }
  .about-expertise { padding: 72px 0 92px; }
  .about-founder__portrait, .about-founder__portrait img, .about-founder__placeholder { min-height: 390px; }
  .about-page h2 { font-size: 39px; }
  .about-founder__role, .about-founder__content > p:last-child, .about-expertise__content > p { font-size: 16px; }
}