/* About page (/alexandr-kochetkov/) in the new homepage design language:
   deep navy and light grid sections, heavy sans headings, glass facts, blue accents. */
.page-about main { overflow: hidden; }
.page-about h1, .page-about h2, .page-about h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em; }

.ab-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #315fba; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.ab-eyebrow::before { content: ''; width: 30px; height: 2px; background: currentColor; }
.ab-dark .ab-eyebrow, .ab-hero .ab-eyebrow { color: #8eb4ff; }

.ab-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: 10px; color: #071020; background: linear-gradient(135deg, #fff, #c8d4ff); box-shadow: 0 10px 28px rgba(55, 93, 160, .25); font-size: 15px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.ab-btn:hover, .ab-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(80, 130, 230, .35); }
.ab-btn:focus-visible { outline: 2px solid #b5caff; outline-offset: 3px; }
.ab-btn-ghost { color: #dbe7ff; background: transparent; border: 1px solid rgba(142, 180, 255, .45); box-shadow: none; }
.ab-btn-ghost:hover, .ab-btn-ghost:focus-visible { background: rgba(142, 180, 255, .1); box-shadow: none; }

/* Hero */
.ab-hero {
  position: relative;
  padding: 130px 0 46px;
  color: #eef4ff;
  background:
    radial-gradient(circle at 72% 38%, rgba(64, 128, 255, .26), transparent 38%),
    radial-gradient(circle at 12% 90%, rgba(40, 90, 200, .16), transparent 34%),
    linear-gradient(120deg, #020711, #06142a 58%, #030a15);
}
.ab-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(127, 168, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 168, 255, .045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, #000 30%, transparent); }
.ab-hero-grid { position: relative; display: grid; grid-template-columns: 1.35fr .9fr; gap: 40px; align-items: end; }
.ab-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; color: #8fa3c2; font-size: 13px; }
.ab-crumbs a { color: #b9cbec; text-decoration: none; }
.ab-crumbs a:hover { color: #fff; text-decoration: underline; }
.ab-hero h1 { max-width: 760px; color: #f4f8ff; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; }
.ab-lead { max-width: 720px; margin: 22px 0 28px; color: #c4d2e8; font-size: 17px; line-height: 1.6; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 30px; }
.ab-hero-photo { position: relative; margin: 0; align-self: end; }
.ab-hero-photo::before { content: ''; position: absolute; inset: 12% 4% 0; border-radius: 50%; background: radial-gradient(circle, rgba(95, 150, 255, .35), transparent 65%); filter: blur(10px); }
.ab-hero-photo img { position: relative; width: 100%; max-width: 440px; height: auto; margin-left: auto; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .5)); }

.ab-facts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; }
.ab-facts > div { padding: 18px 20px; border: 1px solid rgba(142, 180, 255, .22); border-radius: 14px; background: rgba(12, 30, 60, .55); backdrop-filter: blur(8px); }
.ab-facts dt { color: #f4f8ff; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ab-facts dd { margin: 6px 0 0; color: #9fb2d0; font-size: 13px; line-height: 1.4; }

/* Sections */
.ab-section { position: relative; padding: 84px 0; }
.ab-light { color: #0c1b35; background: linear-gradient(rgba(33, 72, 130, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 72, 130, .035) 1px, transparent 1px), #edf3fc; background-size: 64px 64px; }
.ab-dark { color: #eef4ff; background: linear-gradient(120deg, #030a14, #071526 60%, #030b15); }
.ab-section h2 { max-width: 760px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; }
.ab-dark h2 { color: #f2f6ff; }
.ab-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ab-sub { max-width: 720px; margin: 18px 0 0; color: #aab8ca; font-size: 17px; line-height: 1.6; }
.ab-sub-dark { color: #4a5c78; }
.ab-prose p { margin: 0 0 16px; color: #33435e; font-size: 17px; line-height: 1.65; }
.ab-prose strong { color: #0c1b35; }
.ab-prose-dark p { color: #b8c6dc; }

.ab-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.ab-steps li { padding: 24px; border: 1px solid #d3deef; border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 30px rgba(32, 66, 120, .07); }
.ab-steps b { color: #315fba; font-size: 13px; letter-spacing: .12em; }
.ab-steps h3 { margin: 10px 0 8px; font-size: 20px; }
.ab-steps p { margin: 0; color: #4a5c78; font-size: 15px; line-height: 1.55; }

/* Timeline */
.ab-timeline { position: relative; display: grid; gap: 0; margin: 46px 0 0; padding: 0 0 0 28px; list-style: none; border-left: 1px solid rgba(142, 180, 255, .3); }
.ab-timeline li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 6px 28px; padding: 0 0 30px; }
.ab-timeline li::before { content: ''; position: absolute; left: -34px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #8eb4ff; box-shadow: 0 0 0 4px rgba(142, 180, 255, .18), 0 0 18px rgba(95, 150, 255, .7); }
.ab-timeline time { grid-row: span 2; color: #8eb4ff; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.ab-timeline h3 { color: #f2f6ff; font-size: 20px; line-height: 1.25; }
.ab-timeline p { margin: 0; max-width: 760px; color: #aab8ca; font-size: 16px; line-height: 1.6; }

/* Sport */
.ab-sport { align-items: center; }
.ab-sport-photo { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 20px 50px rgba(20, 45, 90, .2); }
.ab-sport-photo img { width: 100%; height: auto; }
.ab-awards { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.ab-awards li { position: relative; padding: 12px 16px 12px 42px; border: 1px solid #d3deef; border-radius: 10px; background: rgba(255, 255, 255, .8); color: #1a2b48; font-size: 15px; font-weight: 600; }
.ab-awards li::before { content: '◆'; position: absolute; left: 16px; color: #315fba; font-size: 12px; top: 50%; transform: translateY(-50%); }

/* Clients */
.ab-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ab-checks li { position: relative; padding: 16px 18px 16px 48px; border: 1px solid rgba(142, 180, 255, .22); border-radius: 12px; background: rgba(12, 30, 60, .5); color: #dbe6f7; font-size: 16px; line-height: 1.45; }
.ab-checks li::before { content: '✓'; position: absolute; left: 18px; top: 15px; color: #7fe0a8; font-weight: 900; }

/* Products */
.ab-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.ab-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #d3deef; border-radius: 14px; background: rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(32, 66, 120, .07); }
.ab-card h3 { font-size: 20px; }
.ab-price { margin: 8px 0 12px; color: #315fba; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ab-card p:not(.ab-price) { flex: 1; margin: 0 0 18px; color: #4a5c78; font-size: 15px; line-height: 1.55; }
.ab-card a { color: #12386f; font-weight: 800; text-decoration: none; }
.ab-card a:hover { text-decoration: underline; }
.ab-card-accent { color: #eef4ff; border-color: #1c3a6e; background: linear-gradient(150deg, #0a1d3c, #051022); }
.ab-card-accent h3 { color: #f4f8ff; }
.ab-card-accent .ab-price { color: #9fc1ff; }
.ab-card-accent p:not(.ab-price) { color: #b8c6dc; }
.ab-card-accent a { color: #cfe0ff; }

/* FAQ */
.ab-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.ab-faq { display: grid; gap: 10px; }
.ab-faq details { border: 1px solid #d3deef; border-radius: 12px; background: rgba(255, 255, 255, .85); }
.ab-faq summary { position: relative; padding: 18px 52px 18px 20px; color: #0c1b35; font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #315fba; font-size: 22px; font-weight: 400; }
.ab-faq details[open] summary::after { content: '−'; }
.ab-faq summary:focus-visible { outline: 2px solid #315fba; outline-offset: -2px; border-radius: 12px; }
.ab-faq details p { margin: 0; padding: 0 20px 20px; color: #3e4f6b; font-size: 16px; line-height: 1.6; }

/* Profiles and final call */
.ab-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.ab-links a { display: inline-block; padding: 10px 16px; border: 1px solid rgba(142, 180, 255, .35); border-radius: 999px; color: #dbe7ff; font-size: 14px; font-weight: 600; text-decoration: none; }
.ab-links a:hover, .ab-links a:focus-visible { border-color: #b5caff; background: rgba(142, 180, 255, .1); color: #fff; }
.ab-final { margin-top: 64px; padding: 40px; border: 1px solid rgba(142, 180, 255, .28); border-radius: 18px; background: radial-gradient(circle at 85% 20%, rgba(64, 128, 255, .28), transparent 45%), rgba(10, 26, 52, .7); }
.ab-final h2 { font-size: clamp(26px, 2.6vw, 38px); }
.ab-final p { margin: 12px 0 22px; color: #b8c6dc; font-size: 17px; }

.page-about .nav-links a[aria-current="page"] { color: #fff; }

@media (max-width: 1080px) {
  .ab-cards { grid-template-columns: repeat(2, 1fr); }
  .ab-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ab-hero { padding: 108px 0 34px; }
  .ab-hero-grid, .ab-two, .ab-faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .ab-hero-photo { order: -1; max-width: 300px; margin: 0 auto -10px; }
  .ab-hero-photo img { max-width: 300px; margin: 0 auto; }
  .ab-section { padding: 60px 0; }
  .ab-steps { grid-template-columns: 1fr; }
  .ab-timeline li { grid-template-columns: 1fr; }
  .ab-timeline time { grid-row: auto; }
  .ab-sport-photo { order: 2; }
}
@media (max-width: 560px) {
  .ab-facts, .ab-cards { grid-template-columns: 1fr; }
  .ab-lead { font-size: 16px; }
  .ab-final { padding: 26px 20px; }
  .ab-actions .ab-btn { width: 100%; justify-content: center; }
}