/* Layout: элементы — настоящие компоненты веб-приложения (UI-кит main + разметка визарда w12 / монтажного стола),
   лендинг только раскладывает их: hero со стеной роликов, флоу из трёх карточек с живыми фрагментами,
   примеры, преимущества бенто, CTA на ролике. Токены — из :root приложения. */
:root{
  color-scheme:dark;
  --lp-bg:#05010f;
  --lp-gutter:clamp(16px,4.5vw,72px);
  --lp-maxw:1320px;
  --lp-ease:cubic-bezier(0.23,1,0.32,1);
  --grad:linear-gradient(142deg,#8b6fe6 0%,#5f42b9 100%);
  --shadow-3:0 4px 10px rgba(5,1,15,.6),0 40px 100px -42px rgba(5,1,15,.8);
}
html{scrollbar-color:var(--field) var(--lp-bg);-webkit-text-size-adjust:100%}
body{background:var(--lp-bg);color:var(--text);font-family:var(--font);font-weight:350;font-size:16px;line-height:1.5;overflow-x:clip;margin:0}
::selection{background:var(--accent-light);color:var(--lp-bg)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.lp-wrap{max-width:var(--lp-maxw);margin-inline:auto;padding-inline:var(--lp-gutter)}
section{position:relative;scroll-margin-top:24px}
video{display:block}
.lp-ic{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

/* ── Хедер: та же полоса, что шапка приложения (rounded-r15, border, bg-nav), ширина = контейнер ── */
/* хедер стоит на своём месте вверху страницы и уходит со скроллом */
.lp-hdr{position:relative;z-index:60;padding-top:calc(env(safe-area-inset-top,0px) + 16px)}
.lp-bar{display:flex;align-items:center;gap:12px;height:64px;padding:0 10px 0 16px;background:rgba(21,15,37,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lp-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:400;letter-spacing:-.02em;margin-right:auto}
.lp-brand img{width:26px;height:26px;display:block}
.lp-nav{display:flex;gap:4px}
.lp-right{display:flex;align-items:center;gap:8px}
.lp-lang{flex:none}
.lp-burger{display:none}
.lp-hdr > .lp-wrap{position:relative}
.lp-menu{position:absolute;left:var(--lp-gutter);right:var(--lp-gutter);top:calc(100% + 8px);padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 24px 60px -20px rgba(5,1,15,.9)}
.lp-menu a.lp-mi{display:flex;align-items:center;height:52px;padding:0 14px;border-radius:10px;font-size:18px;color:var(--text-80)}
.lp-menu a.lp-mi:active{background:var(--field)}
.lp-menu .lp-mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 4px}
.lp-menu .lp-mfoot a{flex:1}

/* ── HERO ── */
/* hero = экран минус хедер (16 + 64), равные поля сверху и снизу; колонка текста по центру */
.lp-hero{--hero-pad:clamp(24px,3vw,40px);padding-block:var(--hero-pad)}
@media (min-width:1101px){
  .lp-hero-grid{height:calc(100svh - 80px - var(--hero-pad) * 2);min-height:560px;max-height:920px}
  .lp-hero .lp-wall-wrap{height:100%}
}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:clamp(24px,3vw,56px);align-items:center}
.lp-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.lp-copy h1{font-size:clamp(42px,5.2vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:400;text-wrap:balance}
.lp-copy h1 em{font-style:italic;font-weight:500;color:var(--accent-light);padding-right:.04em}
.lp-sub{max-width:32ch;font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--text-60)}
.lp-sub b{font-weight:350;color:var(--text)}
.lp-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lp-free{display:flex;flex-direction:column;font-size:14px;line-height:20px;color:var(--text-60)}
.lp-free b{font-weight:400;font-size:16px;line-height:24px;color:var(--text)}
.lp-badge img{width:14px;height:14px;display:block}

.lp-wall-wrap{position:relative;height:clamp(520px,62vw,760px);min-width:0}
.lp-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:perspective(1400px) rotateX(9deg) rotateY(-13deg) rotateZ(4deg) scale(1.04);transform-origin:60% 50%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent)}
.lp-col{position:relative;overflow:hidden}
.lp-col-in{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:12px;will-change:transform}
.lp-tile{position:relative;border-radius:15px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.lp-tile video{width:100%;height:100%;object-fit:cover}
.lp-tile .psb-chips{top:10px}
.lp-tile .psb-chips .rail{padding:0 10px;overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .lp-rise{animation:lpRise .8s var(--lp-ease) both}
  .d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.22s}.d4{animation-delay:.32s}.d5{animation-delay:.16s}
  @keyframes lpRise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── SOCIAL ── */
.lp-social{padding-block:clamp(56px,7vw,110px)}
.lp-lyric{font-size:clamp(28px,4.2vw,68px);line-height:1.1;letter-spacing:-.04em;max-width:24ch;font-weight:400}
.lp-lyric .lp-w{transition:color .18s linear}
.lp-lyric.armed .lp-w{color:rgba(246,245,253,.26)}
.lp-lyric.armed .lp-w.on{color:var(--text)}
.lp-lyric em{font-style:italic;font-weight:500;color:var(--accent-light)}
.lp-stack{display:inline-flex;vertical-align:-.1em;margin-right:.22em}
.lp-stack img{width:.86em;height:.86em;border-radius:50%;object-fit:cover;border:.06em solid var(--lp-bg);margin-left:-.28em;background:var(--field)}
.lp-stack img:first-child{margin-left:0}
.lp-lyric.armed .lp-w{transition:color .18s linear,opacity .18s linear}
.lp-lyric.armed .lp-w.lp-pics{opacity:.28}
.lp-lyric.armed .lp-w.lp-pics.on{opacity:1}

/* ── FLOW ── */
.lp-flow{padding-top:clamp(70px,8vw,130px)}
.lp-flow-h{text-align:center;font-size:clamp(34px,4.3vw,66px);line-height:1.1;letter-spacing:-.04em;font-weight:400;margin-bottom:clamp(36px,4vw,56px)}
.lp-flow-h .dim{color:var(--text-60)}
.lp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-fc{display:flex;flex-direction:column;overflow:hidden;min-height:clamp(480px,38vw,540px)}
.lp-fc-head{padding:28px 28px 0;display:flex;flex-direction:column;gap:10px}
.lp-fc-head h3{display:flex;align-items:center;gap:10px;font-size:24px;line-height:32px;font-weight:400}
.lp-fc-head h3 .lp-ic{color:var(--accent-light)}
.lp-fc-head p{font-size:16px;line-height:24px;color:var(--text-60)}
.lp-stage{position:relative;flex:1;min-height:300px;margin-top:22px;overflow:hidden}
.lp-frag{position:absolute;transform-origin:top left;transition:transform .7s var(--lp-ease),opacity .7s var(--lp-ease)}
.lp-fc .lp-frag{opacity:0;transform:translate3d(24px,14px,0) scale(var(--s,1)) rotate(var(--r,0deg))}
.lp-fc.in .lp-frag{opacity:1;transform:translate3d(0,0,0) scale(var(--s,1)) rotate(var(--r,0deg))}
.lp-fc.in .lp-frag:nth-child(2){transition-delay:.08s}.lp-fc.in .lp-frag:nth-child(3){transition-delay:.16s}.lp-fc.in .lp-frag:nth-child(4){transition-delay:.24s}.lp-fc.in .lp-frag:nth-child(5){transition-delay:.32s}
@media (hover:hover){.lp-fc.in:hover .lp-frag{transform:translate3d(var(--hx,-5px),0,0) scale(var(--s,1)) rotate(var(--r,0deg))}}
/* мягкие фейды в цвет карточки — разделяют слои и дают глубину */
.lp-fade{position:absolute;pointer-events:none;z-index:6}
.lp-fade.b{left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(13,8,32,0),var(--card) 88%)}
.lp-fade.r{top:0;bottom:0;right:0;width:22%;background:linear-gradient(90deg,rgba(13,8,32,0),var(--card) 90%)}
.lp-fade.mid{left:0;right:0;height:56px;background:linear-gradient(180deg,rgba(13,8,32,0),rgba(13,8,32,.92) 60%,rgba(13,8,32,0))}
.lp-frag .w12-card,.lp-frag .w12-cut{box-shadow:none}
.lp-clip{position:absolute;overflow:hidden;border-radius:15px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.lp-clip video{width:100%;height:100%;object-fit:cover}

/* ── EXAMPLES ── */
.lp-ex{padding-top:clamp(90px,10vw,160px)}
.lp-ex-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:end;padding-bottom:clamp(28px,3vw,44px)}
.lp-h2{font-size:clamp(38px,5vw,84px);line-height:1;letter-spacing:-.045em;font-weight:400}
.lp-h2 em{font-style:italic;font-weight:500;color:var(--accent-light)}
.lp-ex-intro p{color:var(--text-60);max-width:36ch;font-size:16px;line-height:24px}
.lp-pan-sticky{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.lp-pan-track{display:flex;gap:clamp(14px,1.6vw,24px);align-items:flex-start;padding-inline:var(--lp-gutter);width:max-content}
.lp-exi{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;width:min-content}
.lp-exi .lp-exclip{width:auto}
.lp-exi .lp-exmeta:has(.lp-same){flex-direction:column;align-items:flex-start;gap:10px}
.lp-exi .lp-exclip{position:relative;overflow:hidden;border-radius:20px;background:var(--panel);height:clamp(300px,58vh,560px);cursor:pointer}
.lp-exi video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--lp-ease)}
.lp-exi .psb-chips .rail{overflow:hidden}
.lp-exmeta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.lp-exmeta b{font-weight:400;font-size:20px;line-height:28px}
.lp-exmeta span{color:var(--text-60);font-size:14px}
.lp-snd{position:absolute;right:12px;bottom:12px;z-index:6}
@media (hover:hover){.lp-exi .lp-exclip:hover video{transform:scale(1.03)}}
/* горизонтальная лента на десктопе: высоту секции и сдвиг считает main.js (класс .lp-pan-on) — ровно от первого ролика до последнего */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .lp-pan.lp-pan-on .lp-pan-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;scroll-snap-type:none}
  .lp-pan.lp-pan-on .lp-pan-track{will-change:transform}
  .lp-pan.lp-pan-on .lp-exi .lp-exclip{height:min(62svh,600px)}
}

/* ── FEATURES ── */
.lp-feats{padding-top:clamp(90px,10vw,160px)}
.lp-feats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,3.4vw,48px)}
.lp-feats-head p{color:var(--text-60);max-width:32ch;font-size:16px;line-height:24px}
.lp-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.lp-cell{position:relative;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,32px);isolation:isolate}
.lp-cell h3{font-size:24px;line-height:32px;font-weight:400;max-width:20ch}
.lp-cell p,.lp-cell .vs{color:var(--text-60);font-size:16px;line-height:24px;max-width:36ch}
.lp-cell .vs s{text-decoration-color:rgba(246,245,253,.4)}
.c-time{grid-column:span 7}
.c-time.bg-grad{background:linear-gradient(160deg,rgba(139,111,230,.26) 0%,rgba(95,66,185,.12) 45%,var(--card) 100%)}
.c-cost{grid-column:span 5}
.c-formats{grid-column:span 5;min-height:460px}
.c-flow{grid-column:span 7;min-height:460px}
.lp-particles{position:absolute;inset:0;z-index:-1;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
/* подсказка — под заголовком, в потоке */
.lp-cell-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lp-hint{position:static}
.lp-orbit{position:relative;flex:1;min-height:280px;margin:10px 0}
.lp-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid var(--line-strong);transform:translate(-50%,-50%)}
.lp-core{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px}
/* transform пишется каждый кадр — transition из кита давал рывки */
.lp-orbit .lp-op{position:absolute;left:50%;top:50%;will-change:transform;transition:none!important;backface-visibility:hidden}
/* шаги: слева список, справа инфографика шага */
.lp-steps-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;flex:1;margin-top:20px;min-height:0}
.lp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lp-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:15px;border:1px solid transparent;cursor:pointer;color:var(--text-60);background:transparent;font:inherit;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.lp-step .lp-ic{grid-row:1;align-self:center;height:18px;width:var(--iw,18px)}
.lp-step small{grid-column:2}
.lp-step b{font-weight:400;font-size:20px;line-height:28px}
.lp-step small{font-size:14px;line-height:20px;color:var(--text-40)}
.lp-step[aria-selected="true"]{background:var(--panel);border-color:var(--line);color:var(--text)}
.lp-step[aria-selected="true"] .lp-ic{color:var(--accent-light)}
.lp-step[aria-selected="true"] small{color:var(--text-60)}
@media (hover:hover){.lp-step:not([aria-selected="true"]):hover{color:var(--text-80)}}
.lp-info{position:relative;min-height:300px;border-radius:15px;overflow:hidden}
.lp-info-pane{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.lp-info-pane.on{opacity:1;transform:none;transition:opacity .25s ease .1s,transform .35s var(--lp-ease) .1s}
.lp-res{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:center}
.lp-res .lp-rc{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--field)}
.lp-res .lp-rc video{width:100%;height:100%;object-fit:cover}
.lp-res .lp-rc .lp-tag{position:absolute;left:8px;bottom:8px}

.lp-info{background:var(--card)}
.lp-mw{position:absolute;left:14px;top:14px;width:calc((100% - 28px) / .72);transform:scale(.72);transform-origin:top left}
.lp-mw-tabs{margin-bottom:12px}
/* полоса этапов во всю ширину: пять равных колонок, как в визарде на десктопе */
.lp-mw .w12-tabs,.lp-frag .w12-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
.lp-mw .w12-tab,.lp-frag .w12-tab{min-width:0;justify-content:center}
.lp-mw-p{display:none}
.lp-mw-p.on{display:block;animation:lpMw .3s var(--lp-ease)}
@keyframes lpMw{from{opacity:0;transform:translateY(6px)}}
.lp-mw .w12-tab,.lp-fc .w12-tab{cursor:pointer}
.lp-mw .w12-cards{flex-wrap:nowrap;overflow:hidden}
.lp-proc{position:absolute;left:14px;top:14px;width:calc((100% - 28px) / .72);transform:scale(.72);transform-origin:top left;display:flex;flex-direction:column;gap:16px}
.lp-proc > div:first-child{margin-top:0!important}
.lp-proc-rows{display:flex;flex-direction:column;gap:12px}
.lp-tt{display:block!important;height:auto;border-radius:0;background:none;border:0;grid-template-columns:none}
.lp-tt .ttp-media{height:100%!important;border-radius:16px;border:1px solid var(--line);grid-column:auto;grid-row:auto}
.lp-tt .ttp-media video{width:100%;height:100%;object-fit:cover}
.lp-tt .ttp-field{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.lp-ttcol{display:flex!important;flex-direction:column;gap:16px}
.lp-tt .ttp-time{white-space:nowrap}
.lp-tt .ttp-cover-btn{display:none}
.w12-win{cursor:grab;touch-action:none}
.w12-win.drag{cursor:grabbing}
.w12-handle{cursor:ew-resize;touch-action:none}
.lp-frag .w12-cut-row{flex-wrap:nowrap;white-space:nowrap}
.lp-frag .w12-cut,.lp-mw .w12-cut{flex:none}
.lp-solid{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--card)!important}
.lp-pan-sticky{scroll-padding-inline:var(--lp-gutter)}
.lp-soc{display:inline-flex;align-items:center;gap:10px}
.lp-soc img{width:18px;height:18px;display:block;opacity:.8}
.lp-foot a:hover .lp-soc img{opacity:1}

/* ── CTA ── */
.lp-final{position:relative;margin-top:clamp(110px,12vw,190px);min-height:min(92svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.lp-final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.lp-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--lp-bg) 0%,rgba(5,1,15,.35) 30%,rgba(5,1,15,.45) 60%,var(--lp-bg) 100%)}
.lp-final-in{width:100%;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;align-items:end;padding-block:clamp(48px,7vw,110px)}
.lp-final h2{font-size:clamp(48px,8.4vw,146px);line-height:.95;letter-spacing:-.055em;font-weight:400}
.lp-final h2 em{font-style:italic;font-weight:500;display:inline-block;padding-bottom:.06em}
.lp-final-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lp-final-act p{font-size:18px;line-height:28px;max-width:24ch}

/* ── FOOTER ── */
.lp-foot-wrap{padding-block:40px 56px;border-top:1px solid var(--line)}
/* четыре группы, равные промежутки между ними, один шаг строк */
.lp-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.lp-foot small{display:block;margin-top:10px;color:var(--text-60);font-size:14px}
.lp-foot-col{display:flex;flex-direction:column;gap:12px}
.lp-foot-col a,.lp-foot-col button{display:flex;align-items:center;min-height:20px}
.lp-foot a,.lp-foot button{text-align:left;font-size:14px;line-height:20px;color:var(--text-60);background:none;border:0;padding:0;cursor:pointer;font-family:inherit;transition:color .15s ease}
@media (hover:hover){.lp-foot a:hover,.lp-foot button:hover{color:var(--text)}}

/* ── Адаптив ── */
@media (max-width:1100px){
  .lp-nav{display:none}
  /* мобильный хедер: звезда · RU/EN · кнопка — равные промежутки */
  .lp-bar{justify-content:space-between}
  .lp-bar .lp-brand{margin-right:0}
  .lp-right{display:contents}
  .lp-hero-grid{grid-template-columns:minmax(0,1fr)}
  .lp-wall-wrap{height:clamp(440px,90vw,620px)}
  .lp-cards{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .lp-ex-intro{grid-template-columns:minmax(0,1fr)}
  .c-time,.c-cost,.c-formats,.c-flow{grid-column:span 12}
  .lp-final-in{grid-template-columns:minmax(0,1fr)}
  .lp-foot{justify-content:flex-start;column-gap:48px}
  .lp-foot > div:first-child{flex-basis:100%}
}
@media (max-width:640px){
  .lp-cta .lp-big{width:100%}
  .lp-wall{transform:perspective(1000px) rotateX(8deg) rotateZ(3deg)}
  .lp-steps-grid{grid-template-columns:minmax(0,1fr)}
  .lp-fc-head{padding:22px 22px 0}
  .lp-foot{flex-direction:column;gap:24px}
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.lp-fc .lp-frag{opacity:1;transform:scale(var(--s,1)) rotate(var(--r,0deg))}}

/* ── Cookie: баннер и настройки (перенесено из style.css) ── */
.footer-cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cookie-banner {
  position: fixed;
  z-index: 800;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(20,17,30,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(22px);
}
.cookie-banner[hidden], .cookie-dialog[hidden] { display: none !important; }
.cookie-banner__copy { flex: 1; min-width: 0; }
.cookie-banner__copy strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 16px; }
.cookie-banner__copy p { margin: 0; color: rgba(246,245,253,.68); font-size: 13px; line-height: 1.45; }
.cookie-banner__copy a { display: inline-block; margin-top: 5px; color: #a88cf6; font-size: 13px; }
.cookie-banner__actions, .cookie-dialog__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie-button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.cookie-button:hover { opacity: .84; }
.cookie-button:active { transform: translateY(1px); }
.cookie-button--secondary { background: rgba(255,255,255,.06); }
.cookie-button--primary { border-color: transparent; background: var(--grad); color: #120f1a; font-weight: 600; }

.cookie-dialog { position: fixed; z-index: 900; inset: 0; display: grid; place-items: center; padding: 20px; }
.cookie-dialog__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(5,4,9,.76); cursor: default; }
.cookie-dialog__panel { position: relative; width: min(100%, 560px); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: #17131f; box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.cookie-dialog__panel h2 { margin: 0 36px 8px 0; color: var(--text); font-size: 28px; }
.cookie-dialog__panel > p { margin: 0 0 20px; color: rgba(246,245,253,.66); font-size: 14px; line-height: 1.5; }
.cookie-dialog__close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; }
.cookie-preference { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.09); }
.cookie-preference strong, .cookie-preference span { display: block; }
.cookie-preference strong { margin-bottom: 4px; color: var(--text); font-size: 15px; }
.cookie-preference span span, .cookie-preference div span { color: rgba(246,245,253,.58); font-size: 12px; line-height: 1.4; }
.cookie-preference input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #9d7cf0; }
.cookie-dialog__actions { justify-content: flex-end; margin-top: 20px; }
.cookie-dialog-open { overflow: hidden; }

:where(a, button, input):focus-visible { outline: 2px solid #b99cff; outline-offset: 3px; }

@media (max-width: 768px) {
  .cookie-banner { right: 12px; bottom: 12px; left: 12px; align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner__actions .cookie-button--primary { grid-column: 1 / -1; grid-row: 1; }
  .cookie-dialog__panel { padding: 24px 18px 20px; border-radius: 16px; }
  .cookie-dialog__panel h2 { font-size: 23px; }
  .cookie-dialog__actions { align-items: stretch; flex-direction: column-reverse; }
  .cookie-dialog__actions .cookie-button { width: 100%; }
}
.cookie-button { transition: transform var(--dur-fast) var(--ease), filter var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cookie-button:active { transform: scale(.98); }
/* Диалог cookie — та же лестница поверхностей и тонированные тени */
.cookie-banner { box-shadow: var(--shadow-3); border-color: var(--line); }

/* узкий телефон: звезда без надписи, чтобы влезли RU/EN и кнопка */
@media (max-width:420px){
  .lp-bar .lp-brand{font-size:0;gap:0;padding-right:0}
  .lp-bar{gap:8px;padding:0 8px 0 12px}
  .lp-right{gap:6px}
  .lp-bar .lp-lang{flex:none}
  .lp-bar .lp-cta-top{padding:0 14px}
}
