/* Страница /about — подсказка по возможностям платформы. Дизайн-система CA
   (тёплая бумага, чернильный акцент). Все селекторы скоупятся под #about. */
.content:has(#about){
  background: var(--ca-bg);
}

#about{
  --line: var(--ca-line-soft); --line-hi: var(--ca-line);
  --text: var(--ca-text); --muted: var(--ca-muted); --faint: var(--ca-faint);
  --accent: var(--ca-accent); --accent-ink: var(--ca-accent-ink);
  --surface: var(--ca-surface); --surface-2: var(--ca-surface-2);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text);
  font-family:var(--ca-font);
  line-height:1.65;
  padding:0 22px 90px;
}
#about .ab-wrap{max-width:1080px; margin:0 auto}

#about .ab-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px;
}
#about .ab-eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--accent)}
#about h1,#about h2,#about h3{text-wrap:balance; margin:0; color:var(--text)}
#about .ab-grad{color:var(--accent); -webkit-text-fill-color:var(--accent)}

/* hero */
#about .ab-hero{padding:56px 0 26px}
#about .ab-hero h1{font-size:clamp(32px,5.4vw,54px); font-weight:800; letter-spacing:-.025em; line-height:1.06}
#about .ab-lead{font-size:clamp(16px,2.1vw,20px); color:var(--muted); max-width:60ch; margin:22px 0 0}
#about .ab-stats{display:flex; flex-wrap:wrap; gap:10px 26px; margin:30px 0 0; font-size:15px; color:var(--faint)}
#about .ab-stats b{color:var(--text); font-variant-numeric:tabular-nums; font-weight:700}

#about .ab-chips{display:flex; flex-wrap:wrap; gap:9px; margin:34px 0 0}
#about .ab-chip{
  font-size:13px; font-weight:600; color:var(--text); text-decoration:none;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line-hi);
  background:var(--surface); box-shadow:var(--ca-raise);
  transition:border-color .18s, background .18s, transform .18s;
}
#about .ab-chip:hover{border-color:var(--accent); background:var(--ca-accent-soft); transform:translateY(-1px)}
#about .ab-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

#about .ab-rule{height:1px; background:var(--line); margin:44px 0 0; border:0}

/* capability rows */
#about .ab-cap{display:grid; grid-template-columns:0.92fr 1.08fr; gap:46px; align-items:center; padding:60px 0}
#about .ab-cap--flip .ab-cap__text{order:2}
#about .ab-cap__text h2{font-size:clamp(23px,3.1vw,33px); font-weight:800; letter-spacing:-.02em; line-height:1.13}
#about .ab-cap__text .ab-desc{color:var(--muted); font-size:16.5px; margin:16px 0 22px; max-width:52ch}
#about .ab-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
#about .ab-points li{position:relative; padding-left:28px; font-size:15.5px; color:var(--muted)}
#about .ab-points li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:4px;
  background:var(--accent);
}
#about .ab-points li b{color:var(--text); font-weight:700}

/* screenshot frame — «окно браузера» на бумаге */
#about .ab-frame{
  border:1.5px solid var(--line-hi); border-radius:14px; overflow:hidden; background:var(--surface);
  box-shadow:var(--ca-board-shadow); margin:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
#about .ab-cap:hover .ab-frame{transform:translateY(-4px); box-shadow:var(--ca-raise-hi)}
#about .ab-frame__bar{display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
#about .ab-dots{display:flex; gap:7px}
#about .ab-dots i{width:11px; height:11px; border-radius:50%; display:block; background:#c9b98f}
#about .ab-dots i:nth-child(1){background:#d98b7a}
#about .ab-dots i:nth-child(2){background:#e0be6e}
#about .ab-dots i:nth-child(3){background:#8fae7d}
#about .ab-frame__cap{font-size:12.5px; color:var(--faint); font-weight:600; letter-spacing:.01em}
#about .ab-frame img{display:block; width:100%; height:auto}

/* text feature band */
#about .ab-band{background:var(--surface);
  border:1px solid var(--line); border-radius:22px; padding:44px clamp(24px,4vw,52px); margin:56px 0 0;
  box-shadow:var(--ca-raise)}
#about .ab-band h2{font-size:clamp(23px,3.1vw,31px); font-weight:800; letter-spacing:-.02em}
#about .ab-band>.ab-desc{color:var(--muted); font-size:16.5px; margin:14px 0 0; max-width:58ch}
#about .ab-grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0 0}
#about .ab-fcard{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:22px}
#about .ab-fcard h3{font-size:17px; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:10px; color:var(--text)}
#about .ab-fcard .ab-ic{width:30px; height:30px; border-radius:9px; background:var(--ca-accent-soft);
  border:1px solid var(--line-hi); display:grid; place-items:center; font-size:16px}
#about .ab-fcard p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}

/* footer note */
#about .ab-foot{margin:60px 0 0; padding-top:26px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; max-width:60ch}

/* reveal on scroll */
#about .ab-reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
#about .ab-reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){#about .ab-reveal{opacity:1; transform:none; transition:none}}

@media (max-width:768px){
  #about .ab-cap{grid-template-columns:1fr; gap:26px; padding:40px 0}
  #about .ab-cap--flip .ab-cap__text{order:0}
  #about .ab-grid2{grid-template-columns:1fr}
  #about .ab-hero{padding:40px 0 16px}
}