/* =====================================================================
   LofAC — страница по макету Figma «LofAC — Website» (node 51:2, 1440 px).
   Значения — из макета; адаптив ниже 1440 — моя разметка (в макете его нет).

   Обводки в макете рисуются ВНУТРЬ блока. CSS-border добавляет размер
   наружу, поэтому там, где рядом с border есть padding, он меньше на
   толщину линии — иначе каждый пункт списка вырастал бы на 1 px.
   ===================================================================== */

:root{
  --ink:#111111;
  --sand:#C9BBA5;
  --sand-line:rgba(201,187,165,.4);
  --muted:#8A7B68;
  --nav:#5C4F40;
  --foot-muted:#736B63;
  --foot-line:#594F47;
  --paper:#FAF9F6;

  --serif:'Besley', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --pad-x:64px;
  --ease:cubic-bezier(.22,.8,.26,1);

  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font:400 18px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--pad-x);
}

/* ---------- типографика ---------- */
.h2{
  margin:0;
  font:400 40px/1.2 var(--serif);
  letter-spacing:-.02em;
}
.h3{
  margin:0;
  font:400 22px/1.5 var(--sans);
}
.lead{max-width:672px}
.lead-680{max-width:680px}
.lead p + p{margin-top:27px}   /* пустая строка между абзацами в макете */

/* «— 01  THE PROBLEM» */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  margin:0;
  font-size:12px;line-height:14px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);
}
.eyebrow::before{content:'';flex:0 0 22px;height:1px;background:var(--sand)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;
  border:0;border-radius:3px;
  font:400 14px/16px var(--sans);
  letter-spacing:.03em;
  text-decoration:none;white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2D3337}
/* обводка в макете внутрь — рисуем тенью, чтобы размер совпал с тёмной кнопкой */
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.header{position:relative;background:#fff}
.menu-btn{
  display:none;
  padding:0;border:0;background:none;
  font:400 22px/26px var(--sans);
  color:var(--nav);
  cursor:pointer;
}
.mnav{
  position:absolute;left:0;right:0;top:100%;z-index:20;
  display:flex;flex-direction:column;gap:4px;
  padding:4px var(--pad-x) 20px;
  background:#fff;
  border-bottom:1px solid var(--sand-line);
}
.mnav[hidden]{display:none}
.mnav a:not(.btn){padding:8px 0;font-size:18px;line-height:1.5;text-decoration:none;color:var(--ink)}
.mnav .btn{margin-top:12px;padding:12px 16px;font-size:18px;line-height:21px}
@media (min-width:761px){ .mnav{display:none !important} }
.header-inner{
  height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo img{width:120px;height:36px}
.nav{display:flex;gap:30px}
.nav a{
  font-size:14px;line-height:16px;
  color:var(--nav);text-decoration:none;
  transition:color .2s ease;
}
.nav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
/* Hero и Problem — общий контейнер; сетка hero — слой под ними. Залипает
   сразу под шапкой (top 64 = её естественное место), поэтому с первого
   пикселя прокрутки стоит неподвижно, а текст проезжает поверх. Отлипает,
   когда низ Problem доходит до низа экрана.
   overflow-x:clip, а не hidden: не создаёт контейнер прокрутки и не ломает sticky. */
.hero-stack{position:relative;overflow-x:clip}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-sticky{
  position:sticky;top:64px;
  height:calc(100vh - 64px);
  height:calc(100svh - 64px);
  min-height:600px;
}
.hero,
#problem{position:relative;z-index:1}
/* пустые места секций пропускают ховер и клики к плиткам под ними */
.hero,#problem{pointer-events:none}
.hero a,
#problem .eyebrow,#problem .h2,#problem .problem-body{pointer-events:auto}
#problem .eyebrow,#problem .h2{width:fit-content}

.hero{overflow:clip}
.hero-inner{
  position:relative;
  /* шапка 64 px + hero = ровно экран; в макете hero 723 px (экран 787) */
  height:calc(100vh - 64px);
  height:calc(100svh - 64px);
  min-height:600px;
  padding-top:60px;
  padding-bottom:96px;
}
/* Сетка — от 608 px страницы и до края экрана, прижата к низу залипающего
   кадра; число рядов и колонок подбирает tiles.js (heroFit). */
.hero-tiles{
  position:absolute;
  left:calc(var(--pad-x) + 544px);
  bottom:0;
  perspective-origin:42% 50%;
  pointer-events:auto;
}
.hero-copy{
  height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-right:300px;
}
.hero-text{display:flex;flex-direction:column;gap:40px}
.hero h1{
  margin:0;
  font:400 90px/1.04 var(--serif);
  letter-spacing:-.02em;
}
.hero-sub{font-size:22px;line-height:1.5}
/* перенос только между предложениями — как в мобильном макете */
.hero-sub span{display:inline-block}
.hero-cta{display:flex;align-items:center;gap:20px}
.hero-note{
  font-size:13px;line-height:1.2;
  color:rgba(17,17,17,.4);
}

/* ---------- общие секции ---------- */
.section{padding:120px 0}
.section > .wrap{display:flex;flex-direction:column;gap:40px}
.section-60 > .wrap{gap:60px}
.section.clip{overflow:clip}
.sec-head{display:flex;flex-direction:column;gap:40px}
.sec-head-672{max-width:672px}
.sec-head-640{max-width:640px}
.sec-head-18{gap:18px}

/* ---------- 01 problem ---------- */
.problem-body{
  max-width:644px;
  display:flex;flex-direction:column;gap:16px;
}
.problem-body strong{font-weight:700}

/* ---------- 02 seal ---------- */
.seal-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}
.seal-card{
  display:flex;flex-direction:column;gap:24px;
  padding-left:39px;
  border-left:1px solid var(--sand-line);
}
.seal-card p{margin-top:4px}

/* ---------- 03 benefits ---------- */
/* История при прокрутке: строка «список + сетка» залипает по центру экрана,
   дорожка под ней длиннее строки на 3 отрезка — по отрезку на пункт.
   Высоту строки и отступ сверху считает main.js; класс .pinned — только
   на широких экранах, где строка целиком помещается в экран. */
.benefits-runway{position:relative}
.benefits-runway.pinned{height:calc(var(--row-h) + var(--steps-len))}
.benefits-runway.pinned .benefits-row{position:sticky;top:var(--pin-top)}
.benefits-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:60px;
}
.acc-list{flex:0 1 672px;min-width:0}
.acc{
  padding:28px 60px 27px 0;
  border-bottom:1px solid var(--sand-line);
}
.acc:last-child{padding-bottom:28px;border-bottom:0}
.acc-head{
  all:unset;
  display:flex;flex-direction:column;gap:24px;
  cursor:pointer;
}
.acc-head:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.acc-label{
  font-size:12px;line-height:12px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);
}
.acc-title{font:400 22px/1.5 var(--sans);color:var(--ink);transition:opacity .2s ease}
.acc:not(.open) .acc-head:hover .acc-title{opacity:.6}
/* раскрытие высотой без JS-замеров: grid-rows 0fr → 1fr */
.acc-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.acc-body > div{overflow:hidden}
.acc-body p{padding-top:4px;max-width:612px}
.acc.open .acc-body{grid-template-rows:1fr}
.benefits-stage{flex:0 0 auto}

/* ---------- 04 process ---------- */
.process-body{display:flex;flex-direction:column;gap:40px}
/* сетка шире контента (16 колонок) — по центру, края обрезает секция */
.process-stage{display:flex;justify-content:center}
.process-tiles{--base:.6;--code-lift:44px;flex:0 0 auto}

.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tab{
  all:unset;
  position:relative;
  display:flex;flex-direction:column;gap:4px;
  padding:30px 28px 32px;
  border-top:2px solid transparent;
  cursor:pointer;
  transition:background-color .3s ease, border-color .3s ease;
}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tab.on{background:rgba(250,249,246,.6);border-top-color:var(--sand-line)}
.tab-text{font-size:18px;line-height:1.5}
/* полоска прогресса текущего шага: 3 px, чёрная, поверх верхней линии */
.tab-bar{
  position:absolute;left:0;top:-2px;
  width:100%;height:3px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left;
}
.tab.on .tab-bar{animation:tab-progress var(--dur,4000ms) linear forwards}
@keyframes tab-progress{to{transform:scaleX(1)}}
.tab:not(.on):hover .h3{opacity:.6}

/* ---------- 05 proof ---------- */
.proof-row{
  display:flex;align-items:flex-end;gap:60px;
}
.stats{flex:0 1 626px;min-width:0;margin:0}
.stat{
  padding:28px 160px 27px 0;
  border-bottom:1px solid var(--sand-line);
}
.stat:last-child{padding-bottom:28px;border-bottom:0}
.stat dt{font-size:22px;line-height:1.5}
.stat dd{margin:4px 0 0;font-size:18px;line-height:1.5}

/* карусель цитат: следующая карточка выглядывает справа до края экрана */
.quotes{
  flex:0 0 626px;min-width:0;
  clip-path:inset(-40px -100vw -40px 0);   /* слева обрезаем, справа — край секции */
  touch-action:pan-y;
}
.quotes:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.quotes-track{
  display:flex;gap:24px;
  transition:transform .8s var(--ease);
}
.quote{
  flex:0 0 100%;
  height:441px;
  margin:0;
  padding:60px 80px 60px 79px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  background:var(--paper);
  border-left:1px solid var(--sand-line);
  border-radius:3px;
  cursor:pointer;
}
.quote blockquote{
  margin:0;
  font:400 40px/1.2 var(--sans);
}
.quote figcaption{
  font-size:12px;line-height:14px;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 06 volunteers ---------- */
.volunteers-row{display:flex;align-items:flex-start;justify-content:space-between;gap:60px}
.volunteers-text{flex:0 1 672px;min-width:0;display:flex;flex-direction:column;gap:40px}
.stack-16{display:flex;flex-direction:column;gap:16px}
.roles{display:flex;gap:40px}
.role{
  flex:0 1 316px;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.role p{margin-top:4px}
.volunteers-tiles{flex:0 0 auto}

/* ---------- 07 faq ---------- */
.faq-item{border-bottom:1px solid var(--sand-line);padding:24px 0 23px}
.faq-item summary{
  display:flex;justify-content:space-between;gap:24px;
  list-style:none;
  font:400 22px/1.5 var(--sans);
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
/* «+» в макете у закрытого пункта — показываем при наведении */
.faq-item summary::after{
  content:'+';
  flex:0 0 auto;
  opacity:0;
  transition:opacity .2s ease;
}
.faq-item:not([open]) summary:hover::after,
.faq-item:not([open]) summary:focus-visible::after{opacity:1}
.faq-a p{padding-top:4px;max-width:880px}
/* плавное раскрытие там, где браузер умеет (Chrome 131+), иначе мгновенно */
.faq-item::details-content{
  block-size:0;
  overflow:hidden;
  transition:block-size .45s var(--ease), content-visibility .45s allow-discrete;
}
.faq-item[open]::details-content{block-size:auto}

/* ---------- 08 apply ---------- */
.cta{background:var(--ink);color:#fff;padding:96px 0}
.cta-row{display:flex;gap:64px}
.cta-left{
  flex:0 1 688px;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.cta-points{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:22px;
}
.cta-points li{display:flex;gap:14px}
.cta-points span{flex:0 0 26px;color:var(--sand)}

.form{
  flex:0 0 560px;
  display:flex;flex-direction:column;gap:24px;
  padding:32px;
  background:var(--paper);
  border-radius:3px;
  color:var(--ink);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field span{
  font:700 12px/14px var(--sans);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.field input{
  width:100%;height:40px;
  padding:12px 13px;
  font:400 14px/16px var(--sans);
  color:var(--ink);
  background:#fff;
  border:1.4px solid var(--sand);
  border-radius:2px;
  transition:border-color .2s ease;
}
.field input::placeholder{color:var(--muted);opacity:1}
.field input:focus{outline:none;border-color:var(--ink)}
.field input[aria-invalid="true"]{border-color:#C8464F}
.form-note{
  font-size:11.5px;line-height:14px;
  color:var(--muted);
  text-align:center;
}
.form-note.ok{color:var(--ink)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff}
.footer-top{display:flex;gap:40px;padding-top:56px;padding-bottom:56px}
.footer-brand{flex:0 0 340px;display:flex;flex-direction:column;gap:24px}
.footer-brand img{width:120px;height:36px}
.footer-brand p{font-size:13.5px;line-height:1.5}
.footer-col{flex:1 1 284px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-h{
  font:700 12px/14px var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--foot-muted);
}
.footer-col a{font-size:14px;line-height:16px;text-decoration:none;transition:opacity .2s ease}
.footer-col a:hover{opacity:.7}
.footer-bottom{
  border-top:1px solid var(--foot-line);
  padding:21px var(--pad-x) 22px;
  text-align:center;
  font-size:12px;line-height:14px;
  color:var(--foot-muted);
}

/* =====================================================================
   Адаптив (в макете только 1440 — дальше моя раскладка)
   ===================================================================== */
@media (max-width:1320px){
  :root{--pad-x:48px}
  .hero h1{font-size:80px}
  .hero-copy{padding-right:160px}
  .tiles{--size:78px;--gap:7px;--lift:50px;--radius:7px}
  .process-tiles{--code-lift:40px}
  .quote blockquote{font-size:34px}
  .stat{padding-right:80px}
}

@media (max-width:1080px){
  :root{--pad-x:40px}
  .hero h1{font-size:66px}
  .hero-copy{padding-right:0}
  .hero-tiles{left:auto;right:-160px}
  .benefits-row,.volunteers-row{flex-direction:column;align-items:stretch}
  .volunteers-tiles{align-self:center}
  /* История бенефитов на узких экранах: сетка наверху залипает на белой
     подложке, список прокручивается под ней, пункт раскрывается на линии
     чтения прямо под сеткой (main.js). */
  .benefits-stage{
    order:-1;
    position:sticky;top:0;z-index:2;
    display:flex;justify-content:center;
    padding:16px 0;
    background:var(--bg, #fff);
  }
  .benefits-tiles{--size:56px;--gap:6px;--lift:36px;--radius:6px;--thick:8px}
  .proof-row{flex-direction:column;align-items:stretch}
  /* flex-basis задавал ширину колонки; в столбце он стал бы высотой
     (список бенефитов вытягивался до 672 px с пустотой под пунктами) */
  .acc-list,.volunteers-text,.cta-left,.stats{flex-basis:auto}
  .quotes{flex:0 0 auto;width:min(626px,100%)}
  .cta-row{flex-direction:column}
  .form{flex-basis:auto}
  .footer-top{flex-wrap:wrap}
  .footer-brand{flex-basis:100%}
}

/* Телефон — по фрейму Figma «iPhone 16 - 1» (73:111, 393 px): шапка, hero,
   Problem, Seal. Остальные секции — по тем же правилам: поля 12, секции 40,
   заголовки 28, шапка секции 24. */
@media (max-width:760px){
  :root{--pad-x:12px}

  /* шапка 60 px: логотип и меню «═»; кнопка — внутри меню */
  .header-inner{height:60px}
  .nav,.header-inner > .btn{display:none}
  .menu-btn{display:block}

  /* hero: плитки сверху, текст под ними с 360 px. Сетка не залипает —
     пустой половины экрана, как у Problem на десктопе, тут нет */
  .hero-sticky{position:relative;top:auto;height:auto;min-height:0}
  .hero-tiles{
    --size:90px;--gap:8px;--radius:8px;--thick:12px;--lift:56px;
    left:calc(50% - 415px);right:auto;   /* в макете x = −219 при ширине 393 */
    top:0;bottom:auto;
    perspective-origin:50% 40%;
  }
  .hero-inner{height:auto;min-height:0;padding-top:360px;padding-bottom:40px}
  .hero-copy{height:auto;justify-content:flex-start;gap:60px}
  .hero h1{font-size:63px}
  .hero-sub{font-size:22px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:20px}
  .hero-cta .btn{font-size:18px;line-height:21px}
  .hero-note{font-size:16px}

  /* секции */
  .section{padding:40px 0}
  .section > .wrap{gap:24px}
  .section-60 > .wrap{gap:40px}
  .sec-head{gap:24px}
  .h2{font-size:28px}
  .seal-cards{grid-template-columns:1fr;gap:26px}
  .seal-card{padding-left:15px}

  /* остальные сетки мельче, чтобы влезли в экран (в мобильном макете их нет) */
  .benefits-tiles,.volunteers-tiles{--size:52px;--gap:6px;--lift:34px;--radius:6px;--thick:8px}
  .benefits-row{gap:24px}
  /* Процесс: сцена — синяя плитка, три пластины и код — это колонки 4–12,
     девять клеток. При 36 px они занимают 364 px и влезают в экран целиком;
     сетка сдвинута на полклетки, чтобы центр сцены был по центру экрана. */
  .process-tiles{
    --size:36px;--gap:5px;--lift:24px;--radius:5px;--thick:6px;--code-lift:20px;
    left:calc((var(--size) + var(--gap)) / -2);
  }

  .acc{padding-right:0}
  .tabs{grid-template-columns:1fr}
  .tab{padding:22px 16px 24px}
  .stat{padding-right:0}
  .quote{height:auto;min-height:320px;padding:32px 24px 32px 23px}
  .quote blockquote{font-size:28px}
  .roles{flex-direction:column}
  .role{flex-basis:auto}
  .volunteers-row,.proof-row,.cta-row{gap:40px}   /* у бенефитов 24 + поля подложки 16 */
  .faq-item summary{font-size:19px}
  .cta{padding:40px 0}
  .form{padding:20px}
  .form-row{grid-template-columns:1fr}
  .footer-top{padding-top:40px;padding-bottom:40px}
  .footer-col{flex-basis:40%}
}