/* Onest (SIL Open Font License) — свой хостинг, без обращений к Google */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────
   ttg.ai — лендинг. Mobile-first, от 375px.
   Один акцент: --accent (кнопки, бейджи, детали).
   ───────────────────────────────────────────── */

:root{
  --bg:        #faf7f1;   /* тёплый светлый фон, не белый */
  --bg-band:   #f4eee2;   /* полоса под лентой услуг */
  --bg-raise:  #fffdf9;   /* карточки */
  --bg-panel:  #f2ece0;   /* подложка под скрины */
  --ink:       #1b1813;
  --ink-soft:  #5c554a;
  --ink-faint: #6e6858;
  --line:      #e7dfd0;
  --line-soft: #efe8db;
  --accent:    #b4441f;
  --accent-dk: #8f3517;
  --accent-sk: rgba(180, 68, 31, .10);
  --dark:      #17140f;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;

  --wrap: 1160px;
  --pad: 20px;
  --gutter: calc((100vw - var(--wrap)) / 2 + var(--pad));

  --shadow-s: 0 1px 2px rgba(27,24,19,.04), 0 6px 16px rgba(27,24,19,.05);
  --shadow-m: 0 2px 8px rgba(27,24,19,.06), 0 22px 50px rgba(27,24,19,.10);
  --shadow-l: 0 30px 70px rgba(27,24,19,.16);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* ───── Кнопки ───── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:14px 26px;
  border:1px solid transparent; border-radius:999px;
  font:inherit; font-weight:600; font-size:16px; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
}
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(180,68,31,.22); }
.btn--accent:hover{ background:var(--accent-dk); transform:translateY(-2px); box-shadow:0 12px 26px rgba(180,68,31,.28); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(27,24,19,.04); transform:translateY(-2px); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.09); transform:translateY(-2px); }
.btn--quiet{
  background:transparent; color:var(--accent); border-color:rgba(180,68,31,.32);
  min-height:48px; font-size:15px; padding:12px 20px; box-shadow:none;
}
.btn--quiet:hover{ background:var(--accent-sk); border-color:var(--accent); transform:translateY(-2px); }
.btn--sm{ min-height:44px; padding:11px 20px; font-size:15px; }
.btn--lg{ min-height:58px; padding:17px 30px; font-size:17px; }
.btn--full{ width:100%; }
.btn:active{ transform:translateY(0) scale(.985); }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; }

.link{ color:var(--accent); text-underline-offset:3px; }

/* ───── Шапка ───── */
.header{ padding:20px 0; }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:21px; letter-spacing:-.025em; text-decoration:none;
}
.logo__mark{ width:36px; height:36px; flex-shrink:0; }
.logo__dot{ color:var(--accent); }

/* ───── Первый экран ───── */
.hero{ position:relative; padding:34px 0 44px; overflow:hidden; }
.hero__glow{
  position:absolute; top:-260px; right:-180px;
  width:760px; height:620px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(180,68,31,.10) 0%, rgba(180,68,31,0) 72%);
  pointer-events:none;
}
.hero__in{ position:relative; }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}

.hero__title{
  font-size:clamp(33px, 6.2vw, 56px);
  line-height:1.06;
  letter-spacing:-.032em;
  font-weight:700;
  text-wrap:balance;
  max-width:15ch;
}
@media (min-width:1000px){ .hero__title{ max-width:860px; } }
.mark{ position:relative; white-space:nowrap; }
.mark::after{
  content:''; position:absolute; left:-.03em; right:-.03em; bottom:.02em; height:.14em;
  background:var(--accent); opacity:.34; border-radius:.1em;
  transform:scaleX(0); transform-origin:left;
  animation:markIn .7s var(--ease) .5s forwards;
}

.hero__sub{
  margin-top:22px;
  font-size:clamp(17px, 4.2vw, 21px);
  color:var(--ink-soft);
  max-width:46ch;
}
.hero__actions{ display:grid; gap:12px; margin-top:30px; }
.hero__note{ margin-top:16px; font-size:14px; color:var(--ink-faint); max-width:42ch; }

/* Витрина: лента реальных интерфейсов */
.showcase{
  --tile-h:190px;
  --gap:16px;
  margin-top:40px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.showcase__track{
  --run:42s;
  display:flex; gap:var(--gap);
  width:max-content;
  padding-inline:var(--pad);
  animation:marquee var(--run) linear infinite;
}
.showcase:hover .showcase__track{ animation-play-state:paused; }
.showcase__track.is-static{
  animation:none; width:auto; overflow-x:auto;
  scrollbar-width:none;
}
.showcase__track.is-static::-webkit-scrollbar{ display:none; }

.tile{ flex:0 0 auto; margin:0; }
.tile__frame{
  height:var(--tile-h);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 22px rgba(27,24,19,.10);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tile__frame img{ width:100%; height:100%; object-fit:cover; }
.tile:hover .tile__frame{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(27,24,19,.16); }
.tile__cap{
  margin-top:10px;
  font-size:13px; color:var(--ink-faint);
  white-space:nowrap;
}

@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - var(--gap) / 2)); }
}

/* ───── Рамки медиа ───── */
.phone{ margin:0; }
.phone__screen{
  --pw:576; --ph:1250;                    /* пропорции кадра, перебиваются из config.js */
  position:relative;
  border-radius:30px;
  border:8px solid #17140f;
  background:#17140f;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(27,24,19,.20);
  aspect-ratio:576 / 1250;
}
.phone__screen video,
.phone__screen img{ width:100%; height:100%; object-fit:cover; }
.phone__cap{ margin-top:12px; text-align:center; font-size:13px; color:var(--ink-faint); }

.browser{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(27,24,19,.12);
}
.browser__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  background:#f6f1e8;
  border-bottom:1px solid var(--line-soft);
}
.browser__dot{ width:9px; height:9px; border-radius:50%; background:#d5cbb9; }
.browser__body{ background:#fff; }
.browser__body img{ width:100%; height:auto; }

/* ───── Секции ───── */
.section{ padding:56px 0; }
.section__title{
  font-size:clamp(28px, 6.8vw, 44px);
  line-height:1.08; letter-spacing:-.028em; font-weight:700;
  text-wrap:balance;
}
.section__sub{ margin-top:14px; color:var(--ink-soft); max-width:52ch; }

/* ───── Лента услуг ───── */
.section--rail{
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-band) 10%, var(--bg-band) 90%, var(--bg) 100%);
}
.rail__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.rail__nav{ display:none; gap:10px; flex-shrink:0; }
.arrow{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-raise); color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.arrow svg{ width:22px; height:22px; }
.arrow:hover:not([disabled]){ background:var(--ink); border-color:var(--ink); color:#fff; transform:scale(1.06); }
.arrow[disabled]{ opacity:.3; cursor:default; }

.rail{
  display:flex; gap:18px;
  margin-top:30px;
  padding:8px var(--gutter) 22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail__hint{ margin-top:0; font-size:13px; color:var(--ink-faint); }

/* ───── Карточка услуги ───── */
.card{
  flex:0 0 min(304px, 81vw);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:#dccfb9; }

.card__pain{
  font-size:21px;
  line-height:1.22; letter-spacing:-.02em; font-weight:600;
  text-wrap:balance;
}
.card__solution{ margin-top:12px; color:var(--ink-soft); font-size:16px; }
.card__note{ margin-top:10px; font-size:14px; color:var(--ink-faint); }

.card__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.term{
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  background:var(--accent-sk); color:var(--accent-dk);
  font-size:13px; font-weight:600;
}
.badge{
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  font-size:13px; font-weight:600;
}
.badge--case{ background:var(--accent); color:#fff; }
.badge--dev{ background:rgba(27,24,19,.06); color:var(--ink-soft); }

/* Подложка: скрин виден целиком, ничего не обрезается */
.card__media{
  --media-h:318px;
  margin-top:20px;
  flex:1;                                /* подложка забирает всё свободное место карточки */
  min-height:calc(var(--media-h) + 36px);
  display:flex; align-items:center; justify-content:center;
  padding:15px;
  border-radius:var(--r);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(158deg, #f7f2e8 0%, #ece4d4 100%);
  box-shadow:inset 0 0 0 1px rgba(27,24,19,.045);
}
.card__media > *{ transition:transform .4s var(--ease); }
.card:hover .card__media > *{ transform:scale(1.025); }
/* Скрин виден целиком: высота задана в пикселях, ширина — по пропорциям кадра */
.card__media .phone__screen{
  height:var(--media-h);
  max-height:100%;
  width:calc((var(--media-h) - 16px) * var(--pw) / var(--ph) + 16px);
  max-width:100%;
  aspect-ratio:auto;
}
.card__media .browser{ width:100%; box-shadow:0 14px 34px rgba(27,24,19,.16); }
.card__media .browser__body img{ width:100%; height:auto; }


.card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.card__actions .btn{ flex:1 1 100%; }

/* Отзывы — сетка, не лента */
.cards{ display:grid; gap:18px; margin-top:32px; }
.cards .card{ flex:initial; }
.t__text{ font-size:16px; }
.t__who{ margin-top:12px; font-size:14px; color:var(--ink-soft); }
.t__audio-cap{ font-size:13px; color:var(--ink-faint); margin-bottom:8px; }

/* ───── Финальный блок ───── */
.final{ background:var(--dark); color:#fff; padding:58px 0; }
.final__in{ display:grid; gap:34px; }
.final__title{ font-size:clamp(28px, 7vw, 46px); line-height:1.08; letter-spacing:-.028em; font-weight:700; text-wrap:balance; }
.final__sub{ margin-top:16px; color:rgba(255,255,255,.72); max-width:44ch; }
.final__actions{ display:grid; gap:12px; margin-top:26px; }

.formbox{
  background:var(--bg-raise); color:var(--ink);
  border-radius:var(--r-lg); padding:26px 22px;
  box-shadow:var(--shadow-l);
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.opt{ font-weight:400; color:var(--ink-faint); }
.field input,
.field select,
.field textarea{
  width:100%;
  font:inherit; font-size:16px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:14px 15px;
  min-height:52px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:88px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-sk);
  outline:none;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-color:#c0392b; }
.err{ margin-top:6px; font-size:13px; color:#a03024; animation:shake .35s var(--ease); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__note{ margin-top:12px; font-size:13px; color:var(--ink-faint); text-align:center; }
.form__error{ margin-top:14px; font-size:14px; color:#a03024; }
.form__ok{ text-align:center; padding:22px 0; animation:riseIn .5s var(--ease) both; }
.form__ok-title{ font-size:21px; font-weight:600; line-height:1.3; }
.form__ok .btn{ margin-top:18px; }

/* ───── Футер ───── */
.footer{ padding:28px 0 96px; font-size:14px; color:var(--ink-soft); }
.footer__in{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.dot{ color:var(--ink-faint); }

/* ───── Липкая кнопка на мобильном ───── */
.sticky{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  display:flex; align-items:center; justify-content:center;
  min-height:56px; padding:15px 20px;
  background:var(--accent); color:#fff;
  border-radius:999px; text-decoration:none;
  font-weight:600; font-size:16px;
  box-shadow:0 12px 30px rgba(27,24,19,.30);
  transform:translateY(140%);
  transition:transform .4s var(--ease);
}
.sticky.is-on{ transform:translateY(0); }

/* ───── Анимации ───── */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes markIn{ to{ transform:scaleX(1); } }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

.anim{ animation:riseIn .65s var(--ease) both; }
.hero .eyebrow.anim{ animation-delay:.02s; }
.hero__title.anim{ animation-delay:.10s; }
.hero__sub.anim{ animation-delay:.18s; }
.hero__actions.anim{ animation-delay:.26s; }
.hero__note.anim{ animation-delay:.34s; }

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Лента появляется целиком, карточки — по очереди */
.reveal-group > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal-group.is-in > *{ opacity:1; transform:none; }
.reveal-group.is-in > *:nth-child(2){ transition-delay:.07s; }
.reveal-group.is-in > *:nth-child(3){ transition-delay:.14s; }
.reveal-group.is-in > *:nth-child(4){ transition-delay:.21s; }
.reveal-group.is-in > *:nth-child(5){ transition-delay:.26s; }
.reveal-group.is-in > *:nth-child(n+6){ transition-delay:.3s; }

/* ───── Планшет ───── */
@media (min-width:700px){
  .hero{ padding:48px 0 64px; }
  .hero__actions,
  .final__actions{ display:flex; flex-wrap:wrap; }
  .showcase{ --tile-h:215px; }
  .card{ flex-basis:344px; padding:28px 24px; }
  .card__media{ --media-h:326px; }
  .rail__hint{ display:none; }
  .cards{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  .final__in{ grid-template-columns:1fr 1fr; align-items:center; gap:44px; }
  .formbox{ padding:30px 28px; }
  .footer{ padding-bottom:30px; }
  .sticky{ display:none; }
}

/* ───── Десктоп ───── */
@media (min-width:1000px){
  body{ font-size:18px; }
  .header{ padding:26px 0; }
  .hero{ padding:56px 0 52px; }
  .showcase{ --tile-h:206px; --gap:20px; margin-top:48px; }
  .hero__note{ margin-top:20px; }
  .section{ padding:84px 0; }
  .card{ flex-basis:396px; }
  .card__media{ --media-h:344px; }
  .rail__nav{ display:flex; }
  .rail{ margin-top:40px; }
  .cards{ grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:42px; }
  .final{ padding:92px 0; }
}

/* ───── Меньше движения ───── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .reveal-group > *{ opacity:1; transform:none; }
  .showcase__track{ animation:none; }
  .mark::after{ transform:scaleX(1); }
  .card:hover{ transform:none; }
  .card:hover .card__media > *{ transform:none; }
}