/* Yelumio — страница «Креатив» (макет). Поверх base/nav/landing.css сайта: те же токены, шрифты и кнопки. */
.cr{--rh:clamp(300px,34vw,460px);--ease-out:cubic-bezier(.23,1,.32,1)}
.cr main{overflow-x:clip}

/* ---------- HERO: стена из ИИ-роликов ---------- */
.cr-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 0;isolation:isolate}
.cr-wall{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--deep)}
.cr-wall video{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;animation:crDrift 26s var(--ease) infinite alternate;opacity:0;transition:opacity 1.2s var(--ease)}
.cr-wall video.on{opacity:1}
@keyframes crDrift{from{transform:scale(1.04) translateY(-1.5%)}to{transform:scale(1.1) translateY(1.5%)}}
.cr-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(23,26,63,.94) 0%,rgba(23,26,63,.78) 38%,rgba(23,26,63,.28) 72%,rgba(23,26,63,.18) 100%),
             linear-gradient(0deg,var(--deep) 0%,rgba(23,26,63,.0) 42%),
             linear-gradient(180deg,rgba(23,26,63,.75) 0%,rgba(23,26,63,0) 22%)}
.cr-hero-in{position:relative;z-index:1;max-width:var(--wrap);padding-bottom:clamp(48px,8vh,96px)}
.cr-crumbs{display:flex;flex-wrap:wrap;gap:10px;font:500 13px/1 var(--sans);color:var(--muted);margin-bottom:26px}
.cr-crumbs a{text-decoration:none}.cr-crumbs a:hover{color:var(--ink)}
.cr-crumbs em{font-style:normal;color:var(--ink)}
.cr-hero h1{font-size:clamp(54px,11.4vw,176px);line-height:.9;margin:22px 0 26px;letter-spacing:-.005em}
.cr-hero h1 .ln{display:block;animation:rise 1s var(--ease) both}
.cr-hero h1 .ln+.ln{animation-delay:.08s}
.cr-hero h1 mark{background:none;color:var(--coral);padding:0}
.cr-hero .hero-sub{color:#D5D9EF;max-width:560px}
.cr-meta{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(48px,7vw,88px) 0 0;border-top:1px solid var(--line)}
.cr-meta>div{padding:24px 20px 32px 0}
.cr-meta>div+div{padding-left:20px;border-left:1px solid var(--line-2)}
.cr-meta dt{font:720 clamp(30px,3.6vw,52px)/1 var(--display);font-stretch:125%;color:var(--fog)}
.cr-meta>div:first-child dt{color:var(--apricot)}
.cr-meta dd{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--mutedD);max-width:220px}

/* ---------- 01 Работы ---------- */
.cr-jump{display:flex;flex-wrap:wrap;gap:6px}
.cr-jump a{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:11px 14px;border:1px solid var(--line);border-radius:3px;color:var(--ink-2);transition:border-color .2s,color .2s,background .2s}
.cr-jump a:hover{border-color:var(--ink);color:var(--ink)}
.chs{display:flex;flex-direction:column}
.ch{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(28px,4vw,56px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.ch-aside{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:14px}
.ch-num{font:720 13px/1 var(--display);font-stretch:125%;color:var(--coral)}
.ch-tag{font:650 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ch h3{font-size:clamp(26px,2.6vw,38px);line-height:1}
.ch-aside>p{font-size:16px;line-height:1.55;color:var(--ink-2)}
.ch-tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ch-tags li{font:600 12px/1 var(--sans);padding:8px 10px;border-radius:2px;background:var(--paper-2);color:var(--ink-2)}
.ch-ig{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;font:650 13px/1 var(--sans);text-decoration:none;color:var(--ink);padding:10px 0;border-bottom:2px solid var(--coral)}
.ch-ig svg{width:16px;height:16px}
.ch-ig .arw{transition:transform .25s var(--ease)}
.ch-ig:hover .arw{transform:translate(2px,-2px)}
.ch-hl{margin:10px 0 0}
.ch-hl img{width:100%;height:auto;border-radius:var(--r)}
.ch-hl figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.ch-rail{position:relative;min-width:0}
.rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:0;padding-bottom:14px;margin-right:calc(var(--gut) * -1);padding-right:var(--gut);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail:focus-visible{outline-offset:6px}
.cm{flex:none;width:calc(var(--rh) * var(--ar));margin:0;scroll-snap-align:start;position:relative}
.cm img,.cm video{display:block;width:100%;height:auto;border-radius:var(--r-lg);background:var(--paper-2);box-shadow:0 1px 0 var(--line-2),0 24px 48px -36px rgba(18,20,46,.45)}
.cm figcaption{margin-top:10px;font-size:13px;line-height:1.35;color:var(--muted);padding-right:8px}
.cm-badge{position:absolute;top:12px;left:12px;font:650 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 9px;border-radius:2px;background:rgba(23,26,63,.72);color:var(--fog);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rail-nav{display:flex;gap:8px;margin-top:10px}
.rail-nav button{width:44px;height:44px;border-radius:3px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:17px;cursor:pointer;transition:border-color .2s,transform .16s var(--ease-out),opacity .2s}
.rail-nav button:hover{border-color:var(--ink)}
.rail-nav button:active{transform:scale(.96)}
.rail-nav button:disabled{opacity:.35;cursor:default}

/* ---------- 02 Ленты: телефоны ---------- */
.cr-feeds{overflow:hidden}
.phs-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.phs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ph{margin:0;display:flex;flex-direction:column;gap:16px}
.ph-body{padding:9px;border-radius:38px;background:linear-gradient(160deg,#2B2F6E,#12142E 60%);box-shadow:inset 0 1px 1px rgba(238,240,247,.18),0 40px 80px -40px rgba(0,0,0,.6);
  position:relative}
.ph-body>*{position:relative}
.ph-body::before{content:"";position:absolute;inset:9px;border-radius:30px;background:#fff}
.ph-bar{display:flex;align-items:center;justify-content:space-between;padding:22px 16px 10px;color:#12142E}
.ph-bar b{font:650 13px/1 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-bar svg{width:18px;height:18px;flex:none;color:#12142E}
.ph-prof{display:flex;gap:10px;align-items:center;padding:4px 14px 14px;color:#12142E}
.ph-ava{width:48px;height:48px;border-radius:50%;flex:none;border:1px solid rgba(18,20,46,.12);object-fit:cover}
.ph-prof b{display:block;font:650 13px/1.2 var(--sans)}
.ph-prof span{display:block;font-size:11.5px;line-height:1.3;color:#4A4F78;margin-top:3px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:0 0 30px 30px;overflow:hidden}
.ph-grid img{width:100%;height:auto;aspect-ratio:3/4;display:block;background:#E2E5F1}
.ph figcaption{text-align:center}
.ph-link{display:inline-flex;gap:8px;align-items:center;font:650 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fog);padding:12px 4px;border-bottom:1px solid var(--line-night);transition:border-color .2s,color .2s}
a.ph-link:hover{color:var(--apricot);border-color:var(--apricot)}
.ph-link--off{border-color:transparent;color:var(--mutedD)}

/* ---------- 03 Галерея ИИ-видео ---------- */
.ht{display:none}
@media (hover:none),(pointer:coarse){.hm{display:none}.ht{display:inline}}
/* Слайдер: нативный scroll-snap (свайп на телефоне), стрелки + drag мышью на десктопе. Активный — центральный. */
.vs{--cw:clamp(232px,21vw,300px);--vg:clamp(12px,1.4vw,20px)}
.vs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px)}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px}
.vs-chip{display:inline-flex;align-items:baseline;gap:6px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--line);border-radius:3px;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s,transform .16s var(--ease-out)}
.vs-chip sup{font-size:10px;letter-spacing:0;color:var(--muted);top:0;transition:color .2s}
.vs-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vs-chip[aria-pressed="true"] sup{color:var(--apricot)}
.vs-chip:active{transform:scale(.97)}
.vs-nav{display:flex;align-items:center;gap:8px}
.vs-count{font:650 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);margin-right:10px;white-space:nowrap}
.vs-count b{color:var(--ink);font-weight:650}
.vs-nav button{width:44px;height:44px;border-radius:3px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:17px;cursor:pointer;
  transition:border-color .2s,transform .16s var(--ease-out),opacity .2s}
.vs-nav button:active{transform:scale(.96)}
.vs-nav button:disabled{opacity:.35;cursor:default}
.vs-chip,.vs-nav button,.vs-media{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (hover:hover) and (pointer:fine){
  .vs-chip:hover{border-color:var(--ink);color:var(--ink)}
  .vs-chip[aria-pressed="true"]:hover{color:var(--paper)}
  .vs-nav button:not(:disabled):hover{border-color:var(--ink)}
  .vs-it:not(.on) .vs-media:hover{opacity:.8}
}
/* дорожка на всю ширину экрана; боковые поля = (ширина − карточка)/2, чтобы крайние ролики вставали в центр (точное значение ставит JS) */
.vs-track{list-style:none;position:relative;display:flex;gap:var(--vg);margin:0 calc(50% - 50vw);padding:6px calc(50vw - var(--cw) / 2) 4px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline:none}
.vs-track::-webkit-scrollbar{display:none}
.vs-track.drag{cursor:grabbing;scroll-snap-type:none}
.vs-track:focus-visible .vs-it.on .vs-media{outline:2px solid var(--coral);outline-offset:4px}
.vs-it{flex:none;width:var(--cw);scroll-snap-align:start}
.vs-it[hidden]{display:none}
.vs-card{margin:0}
.vs-media{display:block;position:relative;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--deep);cursor:inherit;
  transform:scale(.9);transform-origin:50% 50%;opacity:.66;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.vs-it.on .vs-media{transform:none;opacity:1;box-shadow:0 44px 70px -44px rgba(18,20,46,.7)}
.vs-media img,.vs-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vs-media video{opacity:0;transition:opacity .35s var(--ease-out)}
.vs-it.playing .vs-media video{opacity:1}
.vs-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(23,26,63,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(238,240,247,.35);opacity:0;transform:scale(.9);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.vs-play::after{content:"";position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--fog)}
.vs-it.on.paused .vs-play{opacity:1;transform:none}
.vs-card figcaption{display:flex;flex-direction:column;gap:4px;padding:16px 2px 0;opacity:.55;transform:translateY(-6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.vs-it.on figcaption{opacity:1;transform:none}
.vs-card figcaption b{font:650 15px/1.3 var(--sans)}
.vs-card figcaption span{font-size:13px;color:var(--muted)}
.vs-prog{height:2px;margin-top:clamp(26px,3vw,40px);background:var(--line-2);border-radius:2px;overflow:hidden}
.vs-prog i{display:block;height:100%;background:var(--coral);transform-origin:0 50%;transform:scaleX(var(--p,.04));transition:transform .4s var(--ease-out)}

/* ---------- 04 Живая съёмка + ИИ ---------- */
.mix-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,96px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.mix-top .sec-head{margin-bottom:0}
.mix-hint{margin-top:18px!important;font-size:15px!important;color:var(--ink-2)!important;padding-left:14px;border-left:2px solid var(--coral)}
.ba{position:relative;margin:0;aspect-ratio:var(--ar);border-radius:var(--r-lg);overflow:hidden;background:var(--deep);user-select:none;-webkit-user-select:none;touch-action:pan-y;
  box-shadow:0 40px 80px -40px rgba(18,20,46,.55)}
.ba img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-tag{position:absolute;top:14px;font:650 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-radius:2px;background:rgba(23,26,63,.72);color:var(--fog);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ba-tag-l{left:14px}.ba-tag-r{right:14px;background:var(--coral);color:#12142E;backdrop-filter:none}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--fog);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--fog);box-shadow:0 8px 24px rgba(18,20,46,.35)}
.ba-handle i::before,.ba-handle i::after{content:"";position:absolute;top:50%;margin-top:-6px;border-style:solid;border-width:6px}
.ba-handle i::before{left:9px;border-color:transparent #171A3F transparent transparent}
.ba-handle i::after{right:9px;border-color:transparent transparent transparent #171A3F}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.ba-range:focus-visible+*{outline:none}
.ba:has(.ba-range:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.mxs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.mx{margin:0;display:flex;flex-direction:column;gap:16px}
.mx-media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--deep);aspect-ratio:9/16}
.mx-media video{display:block;width:100%;height:100%;object-fit:cover}
.mx-label{position:absolute;left:12px;bottom:12px;font:650 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-radius:2px;background:rgba(23,26,63,.72);color:var(--fog);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mx h3{font-size:clamp(16px,1.4vw,19px)}
.mx p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- 05 Процесс, пакет, инструменты ---------- */
.cr-steps{grid-template-columns:repeat(4,1fr)}
.pack{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);
  background:var(--sky);color:var(--fog);position:relative;overflow:hidden}
.pack .eyebrow{color:#D5D9EF}
.pack h3{font-size:clamp(20px,2.2vw,30px);margin:16px 0 12px;max-width:520px}
.pack-l p{color:#E2E5F1;font-size:16px}
.pack-n{display:flex;gap:clamp(18px,3vw,44px);margin:0}
.pack-n dt{font:720 clamp(44px,5.6vw,84px)/1 var(--display);font-stretch:125%}
.pack-n dd{margin:6px 0 0;font:650 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#F2F3FA}
.tools{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.tools-h p{margin-top:14px;color:var(--muted);font-size:15px}
.tls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tl{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:var(--deep);color:var(--fog)}
.tl svg,.tl-mono{grid-row:1/3;width:40px;height:40px;padding:9px;border-radius:50%;background:rgba(238,240,247,.08);color:var(--c);fill:currentColor}
.tl-mono{display:grid;place-items:center;padding:0;font:720 16px/1 var(--display);font-stretch:125%}
.tl b{font:650 14px/1.2 var(--sans)}
.tl span{font-size:12.5px;line-height:1.35;color:var(--mutedD)}

/* ---------- CTA ---------- */
.cr-cta{text-align:center;background:radial-gradient(120% 90% at 50% 120%,#8A5687 0%,#2B2F6E 45%,var(--deep) 75%)}
.cta-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.cta-in h2{font-size:clamp(30px,4.6vw,60px);margin:20px 0}
.cta-in h2 mark{background:none;color:var(--coral)}
.cta-in p{color:var(--mutedD);font-size:clamp(17px,1.5vw,19px);max-width:520px}
.cta-in .hero-cta{justify-content:center;animation:none}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .phs-wrap{padding:0}
  .phs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 18px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .phs::-webkit-scrollbar{display:none}
  .ph{flex:none;width:min(300px,74vw);scroll-snap-align:start}
  .tls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools{grid-template-columns:1fr}
}
@media (max-width:980px){
  .ch{grid-template-columns:1fr;gap:24px}
  .ch-aside{position:static}
  .mix-top{grid-template-columns:1fr}
  .ba{max-width:440px;width:100%;justify-self:center}
  .cr-steps{grid-template-columns:1fr 1fr}
  .cr-meta{grid-template-columns:1fr 1fr}
  .cr-meta>div:nth-child(3){padding-left:0;border-left:0}
  .cr-meta>div:nth-child(n+3){border-top:1px solid var(--line-2)}
}
@media (max-width:760px){
  .cr{--rh:380px}
  .cr-hero{padding-top:96px;min-height:100svh}
  .cr-veil{background:linear-gradient(0deg,var(--deep) 0%,rgba(23,26,63,.9) 38%,rgba(23,26,63,.35) 70%,rgba(23,26,63,.55) 100%)}
  .cr-hero h1{font-size:clamp(46px,15vw,72px);margin:16px 0 18px}
  .cr-crumbs{margin-bottom:18px}
  .cr-hero .hero-sub{font-size:16px}
  .cr-hero .hero-cta .btn{flex:1 1 auto}
  .cr-meta{margin-top:36px}
  .cr-meta>div{padding:18px 12px 20px 0}
  .cr-meta>div+div{padding-left:12px}
  .cr-meta>div:nth-child(3){padding-left:0}
  .cr-meta dd{font-size:13px}
  .cr-jump{gap:6px}
  .cr-jump a{padding:10px 12px;font-size:11px}
  .rail-nav{display:none}
  .rail{gap:10px}
  .vs{--cw:64vw;--vg:12px}
  .vs-bar{flex-direction:column;align-items:stretch;gap:14px}
  .vs-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 2px;scrollbar-width:none}
  .vs-chips::-webkit-scrollbar{display:none}
  .vs-chip{flex:none;padding:10px 12px;font-size:11px}
  .vs-nav button{display:none}
  .vs-play{width:52px;height:52px;margin:-26px 0 0 -26px}
  .vs-play::after{left:21px;top:17px;border-width:9px 0 9px 14px}
  .vs-card figcaption b{font-size:14px}
  .mxs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);gap:12px;scrollbar-width:none}
  .mxs::-webkit-scrollbar{display:none}
  .mx{flex:none;width:72vw;scroll-snap-align:start}
  .cr-steps{grid-template-columns:1fr}
  .pack{grid-template-columns:1fr}
  .pack-n{justify-content:space-between}
  .tls{grid-template-columns:1fr}
  .cta-in .hero-cta{width:100%}
  .cta-in .hero-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cr-wall video{animation:none}
  .vs-media,.vs-card figcaption{transition:opacity .2s}
  .vs-media,.vs-card figcaption{transform:none}
}