/* $OLOMONEY — доработки под сайт: новые блоки (Почему трафик, Для кого, Как попасть, FAQ, финал, футер),
   реальные скрины в кейсах, лайтбокс, мобильное меню. Только переменные из tokens.css. */

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
[id]{scroll-margin-top:16px}
.sm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm-link:focus-visible,.sm-logo:focus-visible,.sm-burger:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Заголовки секций: длинные тексты из финального копирайта */
.sm-sec__head .sm-h-display{max-width:1000px}

/* ---------- Почему трафик ---------- */
.sm-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1}
.sm-reason{background:var(--ink-900);border:1.5px solid var(--text);padding:32px;display:flex;flex-direction:column;gap:16px}
.sm-reason__n{font:700 56px/1 var(--font-display);letter-spacing:-.03em;color:var(--signal-text)}
.sm-reason .sm-h3{font-size:30px;line-height:1.06}
.sm-reason p{margin:0;color:var(--text-muted);font-size:16px;line-height:25px}

/* ---------- Для кого ---------- */
.sm-fit{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:start}
.sm-notfor{background:var(--ink-950);color:var(--text);padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;transform:rotate(-1.5deg)}
.sm-notfor p{margin:0;font:600 24px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:-.01em}

/* ---------- Сравнение ---------- */
.sm-compare .sm-val{display:block}
.sm-compare .sm-mark+.sm-val{margin-top:6px}
.sm-compare-note{margin:24px 0 0;font:500 18px/26px var(--font-sans);color:var(--paper-ink);max-width:640px}

/* ---------- Кейсы ---------- */
.sm-cases__head .sm-h-display{max-width:none}
.sm-case-row{grid-template-columns:repeat(3,1fr);margin-top:20px}
.sm-case--compact .sm-case__text{display:block;-webkit-line-clamp:unset;overflow:visible}
.sm-case--compact .sm-case__result{font-size:48px}
.sm-case--compact .sm-gallery{margin:auto 0 0;padding:0}
.sm-case--compact .sm-shot{width:calc((100% - 30px)/4);min-width:72px}
.sm-avatar{font-size:16px}
.sm-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sm-shot span{z-index:2;padding:4px 6px;background:var(--ink-950);color:var(--text);text-transform:uppercase}
.sm-shot--video{background:var(--ink-800)}
.sm-shot--video img{object-fit:contain;object-position:50% 50%;opacity:.75}
.sm-play{position:absolute;z-index:2;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:var(--radius-pill);background:var(--signal);box-shadow:0 0 0 3px var(--ink-950)}
.sm-play::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--on-signal)}

/* ---------- Лайтбокс ---------- */
.sm-lightbox{touch-action:none;padding:64px 16px}
.sm-lightbox__stage{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%}
.sm-lightbox__stage img,.sm-lightbox__stage video{display:block;max-width:min(92vw,760px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;background:var(--ink-900);user-select:none;-webkit-user-drag:none}
.sm-lightbox__stage video{width:min(92vw,760px)}
.sm-lightbox__close{z-index:2;background:var(--ink-950)}
.sm-lightbox__count{color:var(--text-muted)}
body.sm-lock{overflow:hidden}

/* ---------- Как попасть ---------- */
.sm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:none}
.sm-step{position:relative;background:var(--paper-white);border:1.5px solid var(--paper-ink);padding:32px;display:flex;flex-direction:column;gap:12px}
.sm-step__n{font:700 72px/1 var(--font-display);letter-spacing:-.03em;color:var(--signal)}
.sm-step__t{margin:0;font:700 30px/1.06 var(--font-display);text-transform:uppercase;letter-spacing:-.02em;color:var(--paper-ink)}
.sm-step p{margin:0;font-size:16px;line-height:25px;color:var(--paper-muted)}
.sm-step:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:44px;z-index:2;width:34px;height:34px;display:grid;place-items:center;background:var(--signal);color:var(--on-signal);font:700 18px/1 var(--font-sans)}

/* ---------- FAQ ---------- */
.sm-faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.sm-faq-grid .sm-sec__head{position:sticky;top:32px;margin:0}
.sm-faq-grid .sm-h-display{font-size:96px}

/* ---------- Финальный экран ---------- */
.sm-final .sm-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;position:relative;z-index:1}
.sm-final .sm-lead{color:var(--paper-muted);max-width:520px}
.sm-final__ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ---------- Футер ---------- */
.sm-footer{position:relative;padding:56px 0 48px}
.sm-footer .sm-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sm-footer__brand{margin:0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:var(--text-muted);font-size:14px}
.sm-footer__links{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- Мобайл (тот же контейнер page, что и в макете) ---------- */
@container page (max-width:720px){
  .sm-sec__head .sm-h-display{font-size:56px}
  .sm-h-display{font-size:56px}
  .sm-hero__content .sm-h1{font-size:38px}

  .sm-topbar.is-open .sm-nav{display:grid;position:absolute;top:72px;left:var(--gutter-mobile);right:var(--gutter-mobile);margin:0;padding:20px;gap:18px;background:var(--ink-900);border:1.5px solid var(--text);z-index:5}
  .sm-topbar.is-open .sm-nav .sm-link{font-size:14px}

  .sm-reasons{grid-template-columns:1fr;gap:12px}
  .sm-reason{padding:24px}
  .sm-reason__n{font-size:44px}
  .sm-reason .sm-h3{font-size:26px}

  .sm-fit{grid-template-columns:1fr;gap:32px}
  .sm-notfor{padding:24px;transform:rotate(-1deg)}
  .sm-notfor p{font-size:20px}

  .sm-compare-note{font-size:16px;line-height:24px}

  .sm-case-row{display:grid;grid-template-columns:1fr;overflow:visible;margin:12px 0 0;padding:0;gap:12px}
  .sm-case-row .sm-case{width:auto}
  .sm-case--compact .sm-gallery{margin:4px -24px 0;padding:0 24px}
  .sm-case--compact .sm-shot{width:120px}
  .sm-case--compact .sm-case__result{font-size:44px}

  .sm-steps{grid-template-columns:1fr;gap:28px}
  .sm-step{padding:24px}
  .sm-step__n{font-size:56px}
  .sm-step__t{font-size:26px}
  .sm-step:not(:last-child)::after{content:"↓";right:auto;left:24px;top:auto;bottom:-31px}

  .sm-faq-grid{grid-template-columns:1fr;gap:24px}
  .sm-faq-grid .sm-sec__head{position:static}
  .sm-faq-grid .sm-h-display{font-size:56px}
  .sm-faq summary{font-size:21px;padding:18px 0;gap:16px}
  .sm-faq__icon{width:36px;height:36px}
  .sm-faq__a{padding-right:0}

  .sm-final__ctas{flex-direction:column;width:100%}
  .sm-final__ctas .sm-btn{width:100%}

  .sm-footer{padding:40px 0 32px}
  .sm-footer .sm-wrap{flex-direction:column;align-items:flex-start}
}
@container page (max-width:400px){
  .sm-sec__head .sm-h-display,.sm-h-display,.sm-faq-grid .sm-h-display{font-size:48px}
  .sm-hero__content .sm-h1{font-size:34px}
  .sm-case--wide .sm-case__result{font-size:48px}
}

/* Лайтбокс живёт вне .sm-page, поэтому тут обычный медиазапрос */
@media (max-width:720px){
  .sm-lightbox{padding:64px 12px 84px}
  .sm-lightbox__stage img,.sm-lightbox__stage video{max-width:calc(100vw - 24px);max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px)}
  .sm-lightbox__stage video{width:calc(100vw - 24px)}
  .sm-lightbox__prev,.sm-lightbox__next{position:absolute;bottom:16px}
  .sm-lightbox__prev{left:16px}.sm-lightbox__next{right:16px}
  .sm-lightbox__close{top:12px;right:12px}
  .sm-lightbox__count{bottom:32px}
}
.sm-case--wide .sm-case__result small{margin-top:20px}
.sm-shot img{object-position:0 0}
.sm-shot--video img{object-position:50% 50%}
.sm-gallery{scroll-padding-inline:24px}
.sm-case--wide .sm-gallery,.sm-case--compact .sm-gallery{scroll-padding-inline:0}
.sm-hero__content .sm-h1{line-height:1.04}
@container page (max-width:720px){
  .sm-case--wide .sm-gallery,.sm-case--compact .sm-gallery{scroll-padding-inline:24px}
  .sm-final .sm-splat{display:none}
}

/* ---------- Планшет (721–1100): в макете только 1440 и 390, промежуток собираем сами ---------- */
@container page (min-width:721px) and (max-width:1100px){
  .sm-h-display,.sm-sec__head .sm-h-display,.sm-faq-grid .sm-h-display{font-size:88px}
  .sm-sec__head{flex-direction:column;align-items:flex-start;gap:20px}
  .sm-hero__content .sm-h1{font-size:52px}
  .sm-hero__content{max-width:640px}
  .sm-hero__scribble{top:auto;bottom:300px;right:40px}
  .sm-hero__name{font-size:30cqw}
  .sm-about__grid{grid-template-columns:1fr;gap:32px}
  .sm-about__collage{max-width:600px}
  .sm-reasons,.sm-steps{grid-template-columns:1fr}
  .sm-step:not(:last-child)::after{content:"↓";right:auto;left:32px;top:auto;bottom:-31px}
  .sm-steps{gap:28px}
  .sm-fit{grid-template-columns:1fr;gap:40px}
  .sm-tickets{grid-template-columns:1fr;gap:96px;max-width:720px}
  .sm-tickets .sm-ticket--hero{margin-top:0}
  .sm-tickets .sm-pointer{top:auto;bottom:calc(100% + 14px);left:4px}
  .sm-case--wide .sm-case__body{grid-template-columns:1fr}
  .sm-case--wide .sm-gallery{max-width:560px}
  .sm-case-row{grid-template-columns:1fr}
  .sm-case--compact .sm-gallery{max-width:520px}
  .sm-faq-grid{grid-template-columns:1fr;gap:32px}
  .sm-faq-grid .sm-sec__head{position:static}
}
@container page (min-width:721px) and (max-width:1100px){
  .sm-hero__scribble{top:130px;bottom:auto;right:32px;font-size:52px}
  .sm-final .sm-splat{display:none}
}
.sm-hero__content .sm-h1{line-height:1.08}
.sm-topbar.is-open{z-index:10}
.sm-lightbox{z-index:100;background:var(--ink-950)}

/* ===== Правки v2 ===== */
/* Меню в одну линию */
@container page (min-width:721px){
  .sm-topbar{align-items:center}
  .sm-topbar>div{display:flex;align-items:center;gap:48px}
  .sm-topbar .sm-nav{display:flex;gap:28px;margin:0}
  /* Фото Ромы: мягкая маска вместо жёсткого края */
  .sm-hero__photo{width:58%}
  .sm-hero__photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 14%,rgba(0,0,0,.7) 32%,#000 52%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 14%,rgba(0,0,0,.7) 32%,#000 52%)}
  .sm-hero__photo::after{background:linear-gradient(0deg,var(--ink-950) 2%,rgba(10,10,10,0) 42%),linear-gradient(180deg,rgba(10,10,10,.55) 0,rgba(10,10,10,0) 20%)}
  .sm-hero__scribble{top:auto;bottom:330px;right:80px}
}
@container page (min-width:721px) and (max-width:1100px){
  .sm-topbar>div{gap:24px}
  .sm-topbar .sm-nav{gap:16px}
  .sm-topbar .sm-link{font-size:11px}
  .sm-topbar .sm-link::before{content:none}
  .sm-topbar>.sm-btn{display:none}
  .sm-hero__scribble{top:auto;bottom:300px;right:32px}
}
/* На мобиле фото плавнее уходит в фон */
@container page (max-width:720px){
  .sm-hero__photo::after{background:linear-gradient(0deg,var(--ink-950) 2%,rgba(10,10,10,.6) 22%,rgba(10,10,10,0) 55%),linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,0) 24%)}
  .sm-hero__scribble{top:236px}
}

/* Лого YouTube в круглом стикере */
.sm-disc__yt{display:block;width:30px;height:21px;margin:0 auto 6px}
@container page (max-width:720px){.sm-disc__yt{width:24px;height:17px;margin-bottom:4px}}

/* «Первые 5 мест» крупнее */
.sm-offer{padding:18px 22px}
.sm-offer__label{font:700 30px/.95 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;max-width:140px;color:var(--lime)}

/* Кейсы: каждая история на всю ширину, крупные скрины */
.sm-stories{display:grid;gap:24px}
.sm-story .sm-case__body{padding:36px;gap:32px}
.sm-story__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:end}
.sm-story__head{display:flex;flex-direction:column;gap:20px}
.sm-story .sm-case__result{font-size:88px}
.sm-story .sm-case__result small{margin-top:20px;font-size:18px}
.sm-story .sm-case__text{font-size:17px;line-height:27px}
.sm-story__gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;overflow:visible}
.sm-story .sm-shot{width:auto;min-width:0;aspect-ratio:3/4;background:var(--ink-800)}
.sm-story .sm-shot img{object-fit:contain;object-position:50% 50%}
.sm-story .sm-shot--video img{opacity:.8}
.sm-story .sm-shot span{left:10px;bottom:10px;font-size:11px}
.sm-story .sm-play{width:56px;height:56px;margin:-28px 0 0 -28px}
.sm-story .sm-play::after{left:22px;top:17px;border-width:11px 0 11px 17px}
@container (max-width:900px){
  .sm-story__top{grid-template-columns:1fr;gap:20px;align-items:start}
  .sm-story .sm-case__result{font-size:64px}
}
@container (max-width:640px){
  .sm-story .sm-case__body{padding:24px;gap:20px}
  .sm-story .sm-case__result{font-size:52px}
  .sm-story .sm-case__result small{font-size:16px;margin-top:14px}
  .sm-story .sm-case__text{font-size:15px;line-height:23px}
  .sm-story__gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px;scroll-padding-inline:24px}
  .sm-story .sm-shot{flex:none;width:74%;scroll-snap-align:start}
}
/* Первый экран: крупнее заголовок, выравнивание с контентом на широких экранах */
@container page (min-width:1101px){
  .sm-hero__content .sm-h1{font-size:76px}
  .sm-topbar,.sm-hero__content{padding-left:max(var(--gutter-desktop),calc((100cqw - var(--container-max))/2 + var(--gutter-desktop)));padding-right:max(var(--gutter-desktop),calc((100cqw - var(--container-max))/2 + var(--gutter-desktop)))}
  .sm-hero__content{max-width:none}
  .sm-hero__content>*{max-width:780px}
  .sm-hero__notes{left:max(var(--gutter-desktop),calc((100cqw - var(--container-max))/2 + var(--gutter-desktop)));right:max(var(--gutter-desktop),calc((100cqw - var(--container-max))/2 + var(--gutter-desktop)))}
}
@container (min-width:641px) and (max-width:900px){.sm-story__gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}