.about-page {
      max-width: 1180px;
    }

    .about-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      gap: 18px;
      align-items: start;
      margin-bottom: 18px;
    }

    .about-hero-copy,
    .about-portrait-card,
    .about-panel {
      align-self: start;
      height: fit-content;
      border-radius: var(--radius);
      border: 1px solid rgba(160, 181, 228, 0.58);
      background: var(--glass-strong);
      box-shadow: 0 14px 30px rgba(18, 34, 71, 0.1);
    }

    .about-hero-copy {
      position: relative;
      overflow: hidden;
      padding: 24px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
    }

    .about-hero-copy::before {
      content: "";
      position: absolute;
      inset: -28% -18%;
      background: radial-gradient(circle at 18% 18%, rgba(111, 157, 255, 0.24), transparent 42%),
        radial-gradient(circle at 82% 22%, rgba(255, 159, 196, 0.18), transparent 40%),
        radial-gradient(circle at 52% 100%, rgba(106, 217, 210, 0.14), transparent 38%);
      pointer-events: none;
    }

    .about-hero-copy > * {
      position: relative;
      z-index: 1;
    }

    .about-kicker {
      display: inline-block;
      margin-bottom: 12px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .about-hero-copy h1 {
      margin-bottom: 10px;
    }

    .about-subtitle {
      margin: 0 0 16px;
      color: var(--ink-soft);
      font-size: 1.05rem;
      line-height: 1.75;
      max-width: 54ch;
    }

    .about-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0 0;
    }

    .about-stat {
      padding: 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.56);
      border: 1px solid rgba(183, 199, 235, 0.72);
    }

    .about-stat strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1rem;
      color: var(--ink);
    }

    .about-stat span {
      color: var(--ink-soft);
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .about-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
    }

    .about-btn {
      min-height: 42px;
      font-size: 0.92rem;
    }

    .about-btn::after,
    .about-btn:hover::after,
    .about-btn:focus-visible::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }

    .about-portrait-card {
      display: flex;
      flex-direction: column;
      margin-top: 28px;
      padding: 24px;
      gap: 14px;
      min-height: 0;
    }

    .about-portrait-card img {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: 16px;
      display: block;
      margin: 0 auto;
    }

    .about-portrait-card h2,
    .about-panel h2 {
      margin-top: 0;
      margin-bottom: 8px;
    }

    .about-portrait-card h2 {
      margin-bottom: 4px;
      text-align: center;
      color: #f6f9ff;
      background: none;
      -webkit-text-fill-color: currentColor;
    }

    .about-portrait-card p,
    .about-panel p,
    .about-panel li {
      color: var(--ink-soft);
      line-height: 1.7;
    }

    .about-portrait-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .about-portrait-meta div {
      padding: 14px 14px 13px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(183, 199, 235, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      text-align: center;
    }

    .about-portrait-meta strong {
      display: block;
      font-size: 0.72rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 12px;
    }

    .about-grid > section {
      padding: 0;
      margin: 0;
    }

    .about-panel {
      padding: 0;
      overflow: hidden;
      background: var(--glass-strong);
      border: 1px solid rgba(160, 181, 228, 0.58);
      box-shadow: 0 14px 30px rgba(18, 34, 71, 0.1);
    }

    .about-panel-inner {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 24px;
    }

    .about-panel-wide {
      grid-column: 1 / -1;
    }

    .about-panel h2 {
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      background-image: none;
      -webkit-text-fill-color: currentColor;
      color: var(--ink);
      font-size: 1.18rem;
      letter-spacing: -0.01em;
    }

    .about-panel p,
    .about-panel li {
      margin: 0;
      color: var(--ink-soft);
      line-height: 1.8;
    }

    .about-panel p,
    .about-panel ul,
    .about-links {
      max-width: 54ch;
    }

    .about-panel-wide p,
    .about-panel-wide ul,
    .about-panel-wide .about-links {
      max-width: 78ch;
    }

    .about-panel ul {
      margin: 0;
      padding: 2px 0 0;
      list-style: none;
      display: grid;
      gap: 14px;
      line-height: 1.8;
    }

    .about-panel li {
      position: relative;
      padding-left: 18px;
    }

    .about-panel li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.82em;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: rgba(126, 168, 255, 0.6);
      transform: translateY(-50%);
    }

    .about-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 0;
    }

    .about-links a {
      min-height: 38px;
    }

    .about-links a::after,
    .about-links a:hover::after,
    .about-links a:focus-visible::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }

    .about-links a:hover {
      text-decoration: none;
    }

    @media (max-width: 980px) {
      .about-hero {
        grid-template-columns: 1fr;
      }

      .about-portrait-card {
        margin-top: 0;
      }

      .about-summary {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .about-grid,
      .about-portrait-meta {
        grid-template-columns: 1fr;
      }
    }

    html[data-theme="dark"] .about-hero-copy,
    html.dark-mode .about-hero-copy,
    html[data-theme="dark"] .about-portrait-card,
    html.dark-mode .about-portrait-card,
    html[data-theme="dark"] .about-panel,
    html.dark-mode .about-panel {
      border-color: rgba(120, 147, 209, 0.46);
      box-shadow: 0 20px 38px rgba(4, 8, 18, 0.34);
    }

    html[data-theme="dark"] .about-panel,
    html.dark-mode .about-panel {
      background: var(--glass-strong);
      border-color: rgba(120, 147, 209, 0.46);
      box-shadow: 0 20px 38px rgba(4, 8, 18, 0.34);
    }

    html[data-theme="dark"] .about-panel h2,
    html.dark-mode .about-panel h2 {
      color: #f8fbff;
    }

    html[data-theme="light"] .about-panel h2 {
      color: var(--ink);
    }

    html[data-theme="light"] .about-panel p,
    html[data-theme="light"] .about-panel li {
      color: var(--ink-soft);
    }

    html[data-theme="dark"] .about-panel li::before,
    html.dark-mode .about-panel li::before {
      background: rgba(137,177,255,0.82);
    }

    html[data-theme="dark"] .about-hero-copy,
    html.dark-mode .about-hero-copy {
      background: linear-gradient(150deg, rgba(18, 29, 53, 0.88), rgba(15, 24, 43, 0.76));
    }

    html[data-theme="dark"] .about-portrait-card h2,
    html.dark-mode .about-portrait-card h2 {
      color: #f8fbff;
    }

    html[data-theme="dark"] .about-stat,
    html.dark-mode .about-stat,
    html[data-theme="dark"] .about-portrait-meta div,
    html.dark-mode .about-portrait-meta div {
      background: rgba(24, 36, 63, 0.44);
      border-color: rgba(101, 127, 184, 0.28);
      box-shadow: inset 0 1px 0 rgba(170, 194, 255, 0.06);
    }