/* ==========================================================================
   Полина Вылижанина — КПТ-психолог
   Стили сайта. Собраны по макету из Claude Design.
   Цвета, отступы и размеры шрифтов — в блоке «Токены» ниже.
   ========================================================================== */

/* --- Токены: цвета ------------------------------------------------------ */
:root{
  --sand-50:#FFFFFF;
  --sand-100:#FFFFFF;   /* карточки */
  --sand-200:#F2F3F1;   /* фон страницы */
  --sand-300:#E9EBE9;
  --sand-400:#DEE1DF;   /* границы */
  --sand-500:#C6CBC8;

  --clay-600:#7E878D;
  --clay-700:#616B72;   /* вторичный текст */
  --clay-800:#333A41;
  --clay-900:#20242A;   /* основной текст */
  --clay-950:#20242A;   /* тёмная секция */

  --accent-50:#EAF0F2;
  --accent-100:#D3E0E4;
  --accent-300:#8AA7B2;
  --accent-500:#4C6B78;  /* акцент */
  --accent-600:#3F5A65;
  --accent-700:#334A53;

  --warm-500:#B5966F;
  --warm-100:#EFE6D9;

  --bg-page:var(--sand-200);
  --bg-inverse:var(--clay-950);
  --surface-card:var(--sand-100);
  --surface-inverse:var(--clay-900);
  --surface-accent-soft:var(--accent-50);

  --text-body:var(--clay-900);
  --text-muted:var(--clay-700);
  --text-subtle:var(--clay-600);
  --text-accent:var(--accent-600);
  --text-on-accent:#FFFFFF;
  --text-on-inverse:#F2F3F1;
  --text-on-inverse-muted:#A9B2B7;

  --border-default:var(--sand-400);
  --border-strong:var(--sand-500);
  --border-inverse:#3A4148;

  --accent:var(--accent-500);
  --accent-hover:var(--accent-600);
  --focus-ring:var(--accent-300);

  --status-info-fg:#334A53;
  --status-info-bg:#EAF0F2;
  --status-info-solid:#4C6B78;
}

/* --- Токены: шрифты и размеры ------------------------------------------- */
:root{
  --font-display:"Spectral",Georgia,"Times New Roman",serif;
  --font-body:"Golos Text","Helvetica Neue",Arial,sans-serif;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --text-h1:clamp(32px,4vw,44px);
  --text-h2:34px;
  --text-h3:26px;
  --text-h4:21px;
  --text-lead:20px;
  --text-body-lg:19px;
  --text-body-md:17px;
  --text-body-sm:15px;
  --text-caption:13px;
  --text-overline:12px;

  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:-0.02em;
  --tracking-overline:0.14em;

  --measure-prose:64ch;
  --measure-narrow:46ch;
}

/* --- Токены: отступы, скругления, тени, анимация ------------------------ */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --section-y:var(--space-9);
  --container-max:1160px;
  --container-narrow:720px;
  --control-height:44px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-photo:var(--radius-md);

  --shadow-1:0 1px 2px rgba(58,46,38,.05);
  --shadow-2:0 2px 6px rgba(58,46,38,.06),0 1px 2px rgba(58,46,38,.04);
  --shadow-3:0 6px 18px rgba(58,46,38,.08),0 1px 3px rgba(58,46,38,.04);

  --dur-fast:140ms;
  --dur-base:220ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out-soft:cubic-bezier(.16,.84,.44,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms}
}

/* --- База --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  color:var(--text-body);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
}
h1{font-size:var(--text-h1);font-weight:var(--weight-light);line-height:var(--leading-tight)}
h2{font-size:var(--text-h2)}

p{margin:0}
ul{margin:0}

::selection{background:var(--accent-100);color:var(--clay-900)}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}

img{max-width:100%}

.icon{
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Заголовок только для скринридеров */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Раскладка ---------------------------------------------------------- */
.wrap{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--space-6);
}
.wrap--narrow{max-width:var(--container-narrow)}

.section{padding:var(--space-7) 0;scroll-margin-top:96px}
.section--dark{padding:var(--section-y) 0;background:var(--bg-inverse)}
#about{padding-top:var(--space-8)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:start}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-8)}
.cards-4{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

.stack{display:flex;flex-direction:column}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.gap-5{gap:var(--space-5)}
.gap-7{gap:var(--space-7)}
.mt-5{margin-top:var(--space-5)}
.mt-7{margin-top:var(--space-7)}
.row-gap-4{row-gap:var(--space-4)}

/* --- Шапка -------------------------------------------------------------- */
.header-sticky{position:sticky;top:0;z-index:20}

.header{
  display:flex;
  align-items:center;
  gap:var(--space-6);
  height:76px;
  padding:0 var(--space-6);
  background:rgba(242,243,241,.88);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border-default);
}
.brand{
  font-family:"Manrope",var(--font-body);
  font-weight:500;
  font-size:24px;
  color:var(--accent-600);
  white-space:nowrap;
  margin-right:auto;
}
.nav{display:flex;align-items:center;gap:var(--space-5)}
.nav a{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  text-decoration:none;
  padding-bottom:2px;
  color:var(--text-muted);
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.nav a:hover{color:var(--text-body)}
.nav a.is-active{color:var(--text-body);border-bottom-color:var(--accent-500)}

/* --- Кнопка ------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  height:var(--control-height);
  padding:0 22px;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  font-weight:var(--weight-medium);
  line-height:1;
  color:var(--text-on-accent);
  background:var(--accent);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-2);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform 80ms var(--ease-standard);
}
.btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-3);color:var(--text-on-accent)}
.btn:active{transform:scale(.985)}
.btn--sm{height:36px;padding:0 16px;font-size:var(--text-body-sm)}

/* --- Карточка ----------------------------------------------------------- */
.card{
  background:var(--surface-card);
  color:var(--text-body);
  border:1px solid var(--border-default);
  border-radius:var(--radius-card);
  padding:var(--space-6);
  box-shadow:var(--shadow-1);
}

/* --- Заголовок секции --------------------------------------------------- */
.heading{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure-prose)}
.heading--center{text-align:center;margin-left:auto;margin-right:auto;align-items:center}
.overline{
  font-family:var(--font-body);
  font-size:var(--text-overline);
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--accent-600);
}
.heading__desc{font-size:var(--text-lead);line-height:var(--leading-relaxed);color:var(--text-muted)}

.section--dark .overline{color:var(--accent-300)}
.section--dark h2{color:var(--text-on-inverse)}
.section--dark .heading__desc{color:var(--text-on-inverse-muted)}

/* --- Текст -------------------------------------------------------------- */
.prose{
  max-width:var(--measure-prose);
  font-size:var(--text-body-md);
  line-height:var(--leading-relaxed);
  color:var(--text-muted);
}
.prose strong{font-weight:var(--weight-medium);color:var(--text-body)}

.h3{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--text-h4);
  line-height:var(--leading-snug);
  letter-spacing:0;
  color:var(--text-body);
}

/* Реплика клиента — курсивная цитата */
.voice{
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--text-lead);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text-body);
  max-width:var(--measure-narrow);
}

/* --- Первый экран ------------------------------------------------------- */
.hero-label{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--accent-600);
  text-wrap:balance;
}
.hero-sub{
  font-size:18px;
  line-height:var(--leading-relaxed);
  color:var(--text-muted);
  max-width:var(--measure-prose);
}
.hero-note{font-size:var(--text-body-sm);width:280px;color:var(--text-muted);line-height:var(--leading-relaxed)}
.hero-cta{margin-top:var(--space-2)}

.portrait{margin:0}
.portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-photo);
}

/* --- Строка «иконка + текст» -------------------------------------------- */
.row{display:grid;grid-template-columns:var(--space-5) 1fr;gap:var(--space-4);align-items:start}
.row .icon{margin-top:var(--space-1);color:var(--text-subtle)}
.row__title{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--text-body-md);
  color:var(--text-body);
}
.row__text{font-size:var(--text-body-md);line-height:var(--leading-relaxed);color:var(--text-muted)}

/* --- Образование -------------------------------------------------------- */
.edu-group__label{
  font-family:var(--font-body);
  font-size:var(--text-caption);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--accent-600);
}
.edu-item{
  display:grid;
  grid-template-columns:var(--space-9) 1fr;
  gap:var(--space-5);
  padding:var(--space-5) 0;
  border-bottom:1px solid var(--border-default);
}
.edu-item:first-child{border-top:1px solid var(--border-default)}
.edu-item__year{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-overline);
  text-transform:uppercase;
  color:var(--text-subtle);
}

/* --- Метод -------------------------------------------------------------- */
.method-card .icon{color:var(--text-subtle)}
.method-card--wide{grid-column:1 / -1}

/* --- Процесс (аккордеон) ------------------------------------------------ */
.accordion{border-top:1px solid var(--border-default)}
.accordion details{border-bottom:1px solid var(--border-default)}
.accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-5) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:var(--text-h4);
  color:var(--text-body);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion__q{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.accordion__num{
  font-family:var(--font-display);
  font-weight:var(--weight-light);
  font-size:var(--text-lead);
  color:var(--warm-500);
}
.accordion__sign{
  color:var(--accent-500);
  font-size:15px;
  line-height:1;
  transition:transform var(--dur-base) var(--ease-out-soft);
}
.accordion details[open] .accordion__sign{transform:rotate(45deg)}
.accordion__a{
  padding:0 0 var(--space-5);
  max-width:var(--measure-prose);
  font-size:var(--text-body-md);
  line-height:var(--leading-relaxed);
  color:var(--text-muted);
}

.badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:var(--text-caption);
  font-weight:var(--weight-medium);
  line-height:1;
  background:var(--sand-300);
  color:var(--text-muted);
}

/* --- Границы ------------------------------------------------------------ */
.limits-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:0 0 0 var(--space-5);
  list-style:disc;
}
.limits-list li{
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-relaxed);
  color:var(--text-muted);
}

.alert{
  display:flex;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  background:var(--status-info-bg);
  border-radius:var(--radius-md);
  color:var(--status-info-fg);
}
.alert__bar{width:3px;border-radius:2px;background:var(--status-info-solid);flex-shrink:0}
.alert__title{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--text-body-md);
  margin-bottom:2px;
}
.alert__text{font-size:var(--text-body-sm);line-height:var(--leading-normal);color:var(--text-muted)}

/* --- Стоимость и контакты ----------------------------------------------- */
.price{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.price__value{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--text-h2);
  color:var(--text-body);
}
.price__note{font-size:var(--text-body-md);color:var(--text-muted)}

.contact{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  font-size:var(--text-body-md);
  color:var(--text-body);
  text-decoration:none;
  border-bottom:1px solid var(--border-default);
  padding-bottom:var(--space-3);
  transition:color var(--dur-base) var(--ease-out-soft),border-color var(--dur-base) var(--ease-out-soft);
}
a.contact:hover{color:var(--accent-600);border-color:var(--accent-500)}
.contact--static{color:var(--text-muted)}

.tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.tag{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--text-muted);
  border:1px solid var(--border-default);
}

/* --- Подвал ------------------------------------------------------------- */
.footer{border-top:1px solid var(--border-default);padding:var(--space-7) 0}
.footer .wrap{display:flex;flex-direction:column;gap:var(--space-3);text-align:center;align-items:center}

/* --- Планшет ------------------------------------------------------------ */
@media(max-width:900px){
  .hero,.two-col,.cards-2,.cards-4{grid-template-columns:1fr;gap:var(--space-6)}
  .method-card--wide{grid-column:auto}
}

/* --- Телефон ------------------------------------------------------------ */
@media(max-width:600px){
  :root{
    --text-h2:27px;
    --text-h3:22px;
    --text-h4:19px;
    --text-lead:18px;
    --section-y:var(--space-7);
  }
  .section{scroll-margin-top:112px}
  .edu-item{grid-template-columns:1fr;gap:var(--space-2)}

  .header{height:auto;flex-wrap:wrap;padding:var(--space-3) var(--space-5);gap:var(--space-2) var(--space-3)}
  .brand{font-size:19px}
  .nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:var(--space-4);
    order:3;
    flex-basis:100%;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}

  .hero{gap:var(--space-5)}
  .hero-label{font-size:14px;letter-spacing:.1em}
  .hero-sub{font-size:17px}
  .hero-note{width:auto}
  .contact{padding-bottom:var(--space-2)}
  .limits-list{padding-left:var(--space-4)}
}