/* Стили страницы «О сервисе» (/about) — 1:1 по PRIMER-9-7 */
===================================================================== */
@font-face {
  font-family: "Manrope";
  src: local("Manrope"), url("/static/fonts/manrope-cyrillic-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --brand: #2563EB; --brand-2: #4F46E5; --brand-ink: #FFFFFF;
  --c-blue: #2563EB; --c-blue-ink: #1D4ED8; --c-green: #10B981; --c-green-ink: #047857;
  --c-orange: #F59E0B; --c-orange-ink: #B45309; --c-purple: #8B5CF6; --c-purple-ink: #6D28D9;
  --c-pink: #EC4899; --c-pink-ink: #BE185D; --c-sky: #0EA5E9; --c-sky-ink: #0369A1; --c-indigo: #6366F1; --c-indigo-ink: #4338CA;

  --bg: #F3F5FA; --surface: #FFFFFF; --surface-2: #EEF1F7;
  --text: #0F172A; --text-2: #5B6478; --text-3: #98A1B3;
  --line: rgb(15 23 42 / .08);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .75rem; --fs-s: .8125rem; --fs-m: .9375rem; --fs-input: 1rem;
  --fs-l: 1.0625rem; --fs-xl: 1.1875rem;
  --fw-medium: 600; --fw-bold: 700; --fw-heavy: 800;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;

  --r-s: 14px; --r-m: 16px; --r-l: 20px; --r-xl: 28px; --r-full: 999px;
  --tap: 44px; --btn-h: 52px;

  --sh-1: 0 1px 2px rgb(15 23 42 / .04), 0 6px 18px -8px rgb(15 23 42 / .12);
  --sh-2: 0 2px 6px rgb(15 23 42 / .06), 0 22px 44px -14px rgb(15 23 42 / .28);
  --sh-brand: 0 10px 24px -10px color-mix(in srgb, var(--brand) 85%, transparent);
  --sh-green: 0 10px 24px -10px color-mix(in srgb, var(--c-green) 85%, transparent);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s; --t-base: .25s; --t-slow: .45s;

  --z-overlay: 90; --z-toast: 200;
  --page: 720px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0E16; --surface: #141925; --surface-2: #1E2432;
  --text: #EEF2F8; --text-2: #A1AABC; --text-3: #6B7487;
  --line: rgb(255 255 255 / .08);
  --c-blue-ink: #93B4FF; --c-green-ink: #34D399; --c-orange-ink: #FBBF24;
  --c-purple-ink: #C4B5FD; --c-pink-ink: #F9A8D4; --c-sky-ink: #7DD3FC; --c-indigo-ink: #A5B4FC;
  --brand-soft: color-mix(in srgb, var(--brand) 24%, transparent);
  --sh-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 8px 20px -10px rgb(0 0 0 / .7);
  --sh-2: 0 24px 50px -14px rgb(0 0 0 / .8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font); font-size: var(--fs-m); line-height: 1.55;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
  overflow-wrap: break-word;
}
h1, h2, p, ol, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-soft); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico, .ico-s { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 22px; height: 22px; } .ico-s { width: 16px; height: 16px; }

.tone-blue   { --c: var(--c-blue); --c-ink: var(--c-blue-ink); }
.tone-green  { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.tone-orange { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
.tone-purple { --c: var(--c-purple); --c-ink: var(--c-purple-ink); }
.tone-pink   { --c: var(--c-pink); --c-ink: var(--c-pink-ink); }
.tone-sky    { --c: var(--c-sky); --c-ink: var(--c-sky-ink); }
.tone-indigo { --c: var(--c-indigo); --c-ink: var(--c-indigo-ink); }

.about-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--safe-t) + 14px) max(var(--sp-4), var(--safe-r)) 84px max(var(--sp-4), var(--safe-l));
  color: #fff;
  background:
    radial-gradient(80% 120% at 0% 0%, #3B82F6 0%, transparent 60%),
    radial-gradient(70% 110% at 100% 0%, #6366F1 0%, transparent 55%),
    radial-gradient(60% 90% at 85% 100%, #0EA5E9 0%, transparent 60%),
    #1D4ED8;
  border-radius: 0 0 32px 32px;
}
[data-theme="dark"] .about-hero {
  background:
    radial-gradient(80% 120% at 0% 0%, #1E40AF 0%, transparent 60%),
    radial-gradient(70% 110% at 100% 0%, #3730A3 0%, transparent 55%),
    radial-gradient(60% 90% at 85% 100%, #075985 0%, transparent 60%),
    #172554;
}
.about-hero::before, .about-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  border: 40px solid rgb(255 255 255 / .07);
}
.about-hero::before { width: 360px; height: 360px; right: -140px; top: -160px; }
.about-hero::after  { width: 220px; height: 220px; left: -110px; bottom: -120px; border-width: 28px; }
.about-hero > * { max-width: var(--page); margin-inline: auto; }

.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-weight: var(--fw-heavy); font-size: var(--fs-input); letter-spacing: -.01em;
  white-space: nowrap;
}
.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .22);
}
.hero-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.h-btn {
  height: var(--tap); min-width: var(--tap); padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgb(255 255 255 / .24); border-radius: var(--r-full);
  background: rgb(255 255 255 / .14);
  color: #fff; font-size: var(--fs-s); font-weight: var(--fw-bold);
  cursor: pointer;
  transition: transform var(--t-fast) var(--spring), background var(--t-base);
}
.h-btn.has-text { padding: 0 16px; }
.h-btn:active { transform: scale(.92); }
/* На узких экранах подпись в кнопке шапки не помещается — остаётся иконка
   (название доступно через aria-label). */
@media (max-width: 359px) {
  .hero-actions .h-btn.has-text { padding: 0 12px; }
  .hero-actions .h-btn.has-text span { display: none; }
}
@media (hover: hover) { .h-btn:hover { background: rgb(255 255 255 / .24); } }

.about-head { margin-top: 40px; }
@media (min-width: 640px) { .about-head { margin-top: 56px; } }
.about-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .16);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em;
}
.about-title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: var(--fw-heavy); letter-spacing: -.035em; line-height: 1.05;
  text-wrap: balance;
}
.about-sub {
  margin-top: 10px; max-width: 34ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  opacity: .88; text-wrap: pretty;
}

.content, .about-content {
  position: relative; z-index: 1;
  max-width: calc(var(--page) + 32px);
  margin: -56px auto 0;
  padding: 0 max(var(--sp-4), var(--safe-r)) calc(40px + var(--safe-b)) max(var(--sp-4), var(--safe-l));
  display: grid; gap: var(--sp-3);
}
@media (min-width: 640px) { .content { gap: var(--sp-4); } }

.about-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}
@media (min-width: 640px) { .about-card { padding: var(--sp-7); } }
.about-card:first-child { box-shadow: var(--sh-2); }

.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-4); }
.card-ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  color: var(--c-ink, var(--c-blue-ink));
  background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent);
}
.sec-title {
  font-size: var(--fs-xl); font-weight: var(--fw-heavy);
  letter-spacing: -.02em; line-height: 1.25; text-wrap: balance;
}
.about-text { color: var(--text-2); text-wrap: pretty; }
.about-text + .about-text { margin-top: var(--sp-3); }
.about-text b { color: var(--text); font-weight: var(--fw-bold); }

.about-note {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: 14px var(--sp-4);
  border-radius: var(--r-m);
  background: var(--brand-soft);
  color: var(--text); font-size: var(--fs-s); font-weight: var(--fw-medium);
}
.about-note .ico-s { margin-top: 2px; color: var(--c-blue-ink); }

.about-steps { list-style: none; padding: 0; display: grid; counter-reset: step; }
.about-steps > li {
  position: relative;
  display: grid; grid-template-columns: 36px 1fr; column-gap: 14px;
  padding-bottom: var(--sp-5);
  color: var(--text-2);
  counter-increment: step;
}
.about-steps > li:last-child { padding-bottom: 0; }
.about-steps > li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #3B82F6, var(--brand) 55%, var(--brand-2));
  color: #fff; font-weight: var(--fw-heavy); font-size: var(--fs-m);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-brand);
}
.about-steps > li:not(:last-child)::after {
  content: ""; position: absolute;
  left: 17px; top: 44px; bottom: 6px;
  width: 2px; border-radius: 1px;
  background: linear-gradient(var(--brand-soft), transparent);
}
.about-steps.is-client > li::before {
  background: linear-gradient(145deg, #34D399, var(--c-green) 55%, #059669);
  box-shadow: var(--sh-green);
}
.about-steps.is-client > li:not(:last-child)::after {
  background: linear-gradient(color-mix(in srgb, var(--c-green) 22%, transparent), transparent);
}
.about-steps b {
  display: block; padding-top: 6px; margin-bottom: 2px;
  color: var(--text); font-weight: var(--fw-bold); line-height: 1.35;
}

.about-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 640px) { .about-list { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }
.about-list > li {
  display: grid; align-content: start; gap: 4px;
  padding: var(--sp-4);
  border-radius: var(--r-l);
  background: var(--surface-2);
  color: var(--text-2); font-size: var(--fs-s); line-height: 1.5;
  transition: transform var(--t-base) var(--ease), background var(--t-base);
}
@media (hover: hover) { .about-list > li:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c, var(--brand)) 7%, var(--surface-2)); } }
.about-list > li::before {
  content: ""; width: 28px; height: 28px; margin-bottom: 6px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat,
    var(--c, var(--brand));
}
.about-list b { color: var(--text); font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: 1.35; }

.about-cta {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1.5px solid color-mix(in srgb, var(--brand) 22%, transparent);
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--c-green) 9%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--sh-2);
}
.cta-options { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .cta-options { grid-template-columns: 1fr 1fr; } }
.cta-option {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
}
.cta-option .about-text { flex: 1; font-size: var(--fs-s); }
.cta-option .about-text b { display: block; margin-bottom: 2px; font-size: var(--fs-m); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-h); padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-full);
  font-size: var(--fs-m); font-weight: var(--fw-bold); text-align: center;
  cursor: pointer; user-select: none;
  transition: transform var(--t-fast) var(--spring), box-shadow var(--t-base), filter var(--t-base);
}
.btn:active { transform: scale(.96); }
.btn-block { width: 100%; }
.btn .ico-s { transition: transform var(--t-base) var(--ease); }
@media (hover: hover) { .btn:hover { filter: brightness(1.07); } .btn:hover .ico-s { transform: translateX(3px); } }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 80%, #fff), var(--brand));
  color: var(--brand-ink);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgb(255 255 255 / .25);
}
.btn-success {
  background: linear-gradient(180deg, #059669, #047857);
  color: #fff;
  box-shadow: var(--sh-green), inset 0 1px 0 rgb(255 255 255 / .2);
}

.about-foot {
  padding: var(--sp-4) 0 0;
  text-align: center; color: var(--text-2); font-size: var(--fs-m);
}
.about-foot a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px;
  color: var(--c-blue-ink); font-weight: var(--fw-bold);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
  transition: text-decoration-color var(--t-base);
}
@media (hover: hover) { .about-foot a:hover { text-decoration-color: currentColor; } }

/* --- Выбор роли (/public): карточки-окна по образцу CTA --- */
.role-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .role-grid { grid-template-columns: 1fr 1fr; } }
.role-card { display: flex; flex-direction: column; }
.role-card .about-text { flex: 1 1 auto; }
.role-card .btn-row { margin-top: var(--sp-4); }

/* --- Карточка формы: вход и регистрация мастера/клиента --- */
.login-card, .reg-card { width: 100%; max-width: 460px; justify-self: center; }

/* --- Страница ошибки доступа (401/403) и подтверждения почты --- */
.error-card { width: 100%; max-width: 460px; justify-self: center; }
.error-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.about-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.about-field { display: grid; gap: 6px; min-width: 0; }
.about-field__label { margin-left: 4px; font-size: var(--fs-s); font-weight: var(--fw-bold); color: var(--text-2); }
.about-field__control {
  width: 100%; min-width: 0; min-height: var(--btn-h);
  padding: 12px 16px;
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid transparent; border-radius: var(--r-s);
  font: inherit; font-size: var(--fs-input); line-height: 1.4; outline: none;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.about-field__control::placeholder { color: var(--text-3); }
.about-field__control:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.about-alert {
  margin-bottom: var(--sp-3); padding: 12px 16px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, #DC2626 12%, transparent);
  color: #B91C1C; font-size: var(--fs-s); font-weight: var(--fw-bold);
}
[data-theme="dark"] .about-alert { background: color-mix(in srgb, #F87171 20%, transparent); color: #FCA5A5; }
.about-hint { margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-s); line-height: 1.5; }
.is-hidden { display: none; }

.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgb(6 10 20 / .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.overlay:is(.is-open, .show) { opacity: 1; pointer-events: auto; }
.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: var(--z-toast);
  translate: -50% calc(100% + 40px); max-width: calc(100% - 32px);
  padding: 12px 20px; border-radius: var(--r-full);
  background: var(--text); color: var(--bg);
  font-size: var(--fs-s); font-weight: var(--fw-bold); box-shadow: var(--sh-2);
  transition: translate .5s var(--spring);
}
.toast:is(.is-open, .show) { translate: -50% 0; }

/* --- Появление при прокрутке ---
   Без JS контент виден сразу (класс .js ставит theme-init). */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.about-head > * { animation: fadeUp .6s var(--ease) both; }
.about-head > :nth-child(2) { animation-delay: .06s; }
.about-head > :nth-child(3) { animation-delay: .12s; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}