/* Static — фирменный слой поверх общих стилей. Подключается последним.
   Стекло в духе Frutiger Aero: полупрозрачные глянцевые поверхности без рамок, мягкие свечения, капли-кнопки.
   Шрифт — Century Gothic (где установлен) или его бесплатная копия Didact Gothic; моноширинный — только экран камкордера.
   Первый экран — видео с плёнки 2000-х, экран камкордера. */

/* ---------- Фактура: едва заметное плёночное зерно ---------- */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Типографика: Century Gothic, воздух между буквами в заголовках ---------- */
body{font-weight:400;letter-spacing:0.06em}
h1,h2,h3{font-weight:500;letter-spacing:0.05em}
h1{font-weight:500}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;font:400 12px/1 var(--font);letter-spacing:0.176em;
  text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.display{margin:0;font:400 clamp(44px,7.2vw,104px)/1 var(--font);letter-spacing:0.075em;text-transform:uppercase}
.title-xl{margin:0;font:400 clamp(30px,4.6vw,54px)/1.05 var(--font);letter-spacing:0.075em;text-transform:uppercase}
.mono{font-family:var(--mono)}

/* ---------- Знак ---------- */
.wordmark{display:inline-flex;align-items:center;gap:10px;font:400 19px/1 var(--font);letter-spacing:0.242em;text-transform:none;color:var(--text)}
.wordmark i{width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  background:currentColor;opacity:.85}
/* Название везде пишется как в шапке: «Static» со знаком-точкой и широким разрядом */
.wm{text-transform:none;letter-spacing:0.22em;font-weight:400}
.wm.dot{display:inline-flex;align-items:center;gap:.45em}
.wm.dot::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;opacity:.85;flex:0 0 auto}
.brand small{font:400 11px/1 var(--font);letter-spacing:0.132em;text-transform:uppercase}

/* ---------- Стекло вместо рамок ---------- */
.card,.block,.att,.release-row,.item,.callout,.msg,.cab-tabs,.chips,details.acc,.dropzone,.empty,.person,.demo-role,
.sheet,.palette,.drawer,.cookie,dialog.alert,dialog.steps-dialog,.toast,.actionbar,.wizard>*{border-color:transparent!important}
.card,.block,.att,.release-row,.item,.callout,.msg,.cab-tabs,.chips,details.acc,.person,.demo-role{
  background-image:var(--glass);box-shadow:var(--glass-shadow)}
.card,.block{border-radius:var(--r-lg)}
.dropzone,.empty{border:0!important;background:var(--card);background-image:var(--glass);box-shadow:var(--glass-shadow)}
.msg.error,.att.error{box-shadow:var(--glass-shadow)}

/* Всплывающие слои: плотное стекло с размытием, чтобы текст читался поверх страницы */
.drawer,.sheet,.palette,.cookie,dialog.alert,dialog.steps-dialog,.toast{background-color:var(--overlay)!important;
  background-image:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);box-shadow:var(--glass-shadow)}
.site-header{border-bottom-color:transparent!important;background:color-mix(in srgb,var(--bg) 55%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:inset 0 -1px 0 var(--line)}
.site-footer{border-top-color:transparent}

/* Кнопки — глянцевые капли */
.btn{border:0!important;border-radius:999px;background:var(--gloss);color:var(--gloss-ink);font-weight:400;letter-spacing:0.085em;
  box-shadow:var(--gloss-glow);text-shadow:none}
.btn:hover{background:var(--gloss);filter:brightness(1.05)}
.btn.ghost,.mini,.chip,.icon-btn:hover{border-color:transparent!important}
.btn.ghost{background:var(--card);background-image:var(--glass);color:var(--text);box-shadow:var(--glass-shadow);text-shadow:none}
.btn.ghost:hover{background-color:var(--soft);filter:none}
.btn.destructive{background:var(--red);color:#fff}
.mini,.chip{border-radius:999px;background-image:var(--glass);box-shadow:var(--glass-shadow)}

/* Поля — мягкие углубления без рамки */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=search],input[type=tel],select,textarea{
  border-color:transparent!important;border-radius:var(--r)!important;background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
:root[data-theme="light"] input[type=text],:root[data-theme="light"] input[type=email],:root[data-theme="light"] input[type=password],
:root[data-theme="light"] input[type=number],:root[data-theme="light"] input[type=date],:root[data-theme="light"] input[type=url],
:root[data-theme="light"] input[type=search],:root[data-theme="light"] input[type=tel],:root[data-theme="light"] select,:root[data-theme="light"] textarea{
  background:rgba(255,255,255,.75);box-shadow:inset 0 1px 3px rgba(20,24,28,.12)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring)!important}
option{background:#131518;color:#f1f3f5}
:root[data-theme="light"] option{background:#fff;color:#13171b}

/* ---------- Главная ---------- */
body.landing main{max-width:none;margin:0;padding:0}
body.landing .site-header{position:fixed;left:0;right:0}
body.landing .site-header:not(.scrolled){color:#f1f3f5;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none}
body.landing .site-header:not(.scrolled) .wordmark,body.landing .site-header:not(.scrolled) .icon-btn{color:#f1f3f5}
.land-nav{display:flex;align-items:center;gap:4px}
.land-nav a{padding:8px 12px;font:400 12px/1 var(--font);letter-spacing:0.154em;text-transform:uppercase;color:inherit;text-decoration:none;opacity:.8}
.land-nav a:hover{opacity:1}
.land-nav .btn{opacity:1;color:var(--gloss-ink);padding:10px 18px;min-height:38px}
body.landing .site-header:not(.scrolled) .land-nav a:not(.btn){color:#f1f3f5}
body.landing .site-header:not(.scrolled) .land-nav .btn{background:rgba(246,248,250,.92);color:#0d0f12}
@media (max-width:860px){.land-nav a:not(.btn){display:none}}

/* Одна сетка для всей главной: первый экран, разделы и подвал начинаются от одного края */
.wrap{width:min(1240px,100%);margin:0 auto;padding-inline:max(24px,4vw)}

/* Первый экран: видео, мягкие полосы кинескопа, экран камкордера */
.hero{position:relative;min-height:100svh;overflow:hidden;color:#f1f3f5;isolation:isolate;background:#000;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:-3}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(0,0,0,.7) 100%),linear-gradient(to top,var(--fade) 0%,color-mix(in srgb,var(--fade) 55%,transparent) 28%,transparent 60%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:32px;align-items:end;padding-top:140px;padding-bottom:180px}
.hero .eyebrow{color:rgba(241,243,245,.75)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero-cta .btn{min-height:50px;padding:12px 26px;font-size:15px}
.btn.on-dark{background:rgba(255,255,255,.1);color:#f1f3f5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.cam-hud{position:absolute;top:92px;left:0;right:0;display:flex;justify-content:space-between;font:400 12px/1.5 var(--mono);
  letter-spacing:0.154em;color:rgba(241,243,245,.8);pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,.6)}
.cam-hud .rec{display:inline-flex;align-items:center;gap:8px;height:18px}
.cam-hud .rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:rec 1.4s steps(2) infinite}
@keyframes rec{50%{opacity:0}}
.cam-hud .tc{text-align:right}
@media (prefers-reduced-motion:reduce){.cam-hud .rec::before{animation:none}}

/* Вход и регистрация — стеклянная карточка на первом экране */
.auth-card{padding:22px;border-radius:var(--r-lg);background:rgba(14,16,19,.42);background-image:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 24px 60px rgba(0,0,0,.5);color:#f1f3f5}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 18px;padding:4px;border-radius:999px;background:rgba(0,0,0,.25);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.auth-tabs button{padding:10px 8px;border:0;border-radius:999px;background:none;color:rgba(241,243,245,.62);
  font:400 12px/1 var(--font);letter-spacing:0.154em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.auth-tabs button[aria-selected=true]{color:#0d0f12;background:none}
.auth-card label{color:rgba(241,243,245,.8);font-size:13px}
.auth-card .btn{width:100%;min-height:48px;margin-top:4px}
.auth-card .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:400}
.auth-card .small{margin:14px 0 0;font-size:13px;color:rgba(241,243,245,.66)}
.auth-card .small a{color:#f1f3f5}
.auth-card [role=tabpanel][hidden]{display:none}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;padding-top:150px;padding-bottom:120px}}

/* Плейлист — сразу под первым экраном, наплывает на видео, чтобы его было видно сразу */
.pl-section{position:relative;z-index:2;margin-top:-140px}
.pl-glass{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 48px;align-items:center;padding:clamp(22px,3vw,40px);
  border-radius:28px;background:rgba(14,16,19,.38);background-image:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
:root[data-theme="light"] .pl-glass{background:rgba(255,255,255,.5)}
.pl-glass .player{position:relative;border-radius:22px;overflow:hidden;
  /* ровные скруглённые углы; растворяется только низ списка треков */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,rgba(0,0,0,.55) 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 88%,rgba(0,0,0,.55) 95%,transparent 100%)}
.pl-glass iframe{display:block;width:100%;height:440px;border:0;border-radius:22px;opacity:1}
.pl-glass .facts{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.pl-glass .facts li{padding:8px 14px;border-radius:999px;font:400 12px/1 var(--font);letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);
  background:var(--card);background-image:var(--glass);box-shadow:var(--glass-shadow)}
@media (max-width:860px){.pl-section{margin-top:-90px}.pl-glass{grid-template-columns:1fr}.pl-glass iframe{height:380px}}

/* Бегущая строка */
.ticker{overflow:hidden;margin-top:clamp(48px,7vw,88px);background:transparent;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:48px;width:max-content;padding:14px 0;font:400 13px/1 var(--font);letter-spacing:0.22em;text-transform:uppercase;
  color:var(--muted);animation:ticker 48s linear infinite}
.ticker-track span::before{content:"●";margin-right:48px;color:var(--muted)}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* Разделы */
.l-section{padding-block:clamp(64px,9vw,120px)}
.l-cta .title-xl{max-width:900px;margin-bottom:28px}
.l-cta .btn{min-height:50px;padding:12px 26px}

/* Большой знак внизу — глянцевая надпись без контура */
.l-mark{overflow:hidden}
.l-mark span{display:block;font:400 clamp(70px,18vw,280px)/.8 var(--font);letter-spacing:0.22em;color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 50%,transparent 100%);-webkit-background-clip:text;background-clip:text;
  transform:translateY(10%);user-select:none}
:root[data-theme="light"] .l-mark span{background-image:linear-gradient(180deg,rgba(15,20,25,.42) 0%,rgba(15,20,25,.14) 55%,transparent 100%);-webkit-background-clip:text;background-clip:text}
body.landing .site-footer{max-width:1240px;padding-inline:max(24px,4vw)}
.l-section,#auth,.pl-section{scroll-margin-top:84px}

/* ---------- Вход и регистрация на отдельных страницах ---------- */
body.auth{background:#000 url("../landing/hero.3dfa6a61fd1e.jpg") center/cover no-repeat fixed}
body.auth main{position:relative}
body.auth::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.78));pointer-events:none}
body.auth main>.card{position:relative;background:rgba(14,16,19,.45);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
body.auth .site-header,body.auth .site-footer{position:relative}

/* Первый экран, плейлист на нём и страницы входа всегда в ночной теме — поверх видео светлая нечитаема */
.hero,body.auth{color-scheme:dark;--bg:#08090b;--card:rgba(255,255,255,.055);--soft:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.13);--text:#f1f3f5;--muted:rgba(226,230,234,.64);
  --accent:#eceef0;--accent-ink:#0d0f12;--link:#f1f3f5;--accent-soft:rgba(255,255,255,.10);
  --glass:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 42%,rgba(255,255,255,.025) 100%);
  --glass-shadow:0 16px 40px rgba(0,0,0,.38);
  --gloss:rgba(246,248,250,.92);--gloss-glow:0 10px 28px rgba(0,0,0,.28);--gloss-ink:#0d0f12;
  --ring:rgba(255,255,255,.4)}
:root{--fade:#08090b}
:root[data-theme="light"]{--fade:#e9ebee}
.side .logo{text-decoration:none}

/* ---------- Кабинет и форма: стекло, которому есть что преломлять ----------
   В тёмной теме под панелями — размытый чёрно-белый кадр из видео и мягкий свет; светлая тема остаётся чистой. */
body:not(.landing):not(.auth)::before{content:"";position:fixed;inset:-80px;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 380px at 16% 18%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(640px 460px at 88% 82%,rgba(255,255,255,.12),transparent 70%),
    url("../landing/hero.3dfa6a61fd1e.jpg") center/cover;filter:blur(56px) grayscale(1) brightness(.42)}
:root[data-theme="light"] body:not(.landing):not(.auth)::before{display:none}
:root:not([data-theme="light"]) body:not(.landing):not(.auth) :is(.card,.block,.cab-tabs,.stepper-rail){
  background-color:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
:root:not([data-theme="light"]) body:not(.landing):not(.auth) .card :is(.callout,.block,.att,.release-row,.item,details.acc){
  background-color:rgba(255,255,255,.035)}
/* Список шагов — тоже стеклянная колонка */
.stepper-rail{border-radius:var(--r-lg);padding:10px}

/* ---------- Переходы: стеклянный лист, как в старой iOS ----------
   Новый шаг выезжает справа из размытия, прошлый уходит влево и отступает вглубь; назад — наоборот. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  #step-form{view-transition-name:sheet}
  body:not(.landing):not(.auth) main:not(:has(#step-form)){view-transition-name:page}
  .stepper-rail{view-transition-name:rail}
  .site-header{view-transition-name:header}
  ::view-transition-group(sheet),::view-transition-group(page){animation-duration:.56s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(sheet),::view-transition-old(page){animation:glass-out .56s cubic-bezier(.22,1,.36,1) both}
  ::view-transition-new(sheet),::view-transition-new(page){animation:glass-in .56s cubic-bezier(.22,1,.36,1) both}
  html:active-view-transition-type(back)::view-transition-old(sheet),
  html:active-view-transition-type(back)::view-transition-old(page){animation-name:glass-out-back}
  html:active-view-transition-type(back)::view-transition-new(sheet),
  html:active-view-transition-type(back)::view-transition-new(page){animation-name:glass-in-back}
  ::view-transition-old(header),::view-transition-new(header),::view-transition-old(rail),::view-transition-new(rail){animation-duration:.3s}
}
@keyframes glass-in{from{opacity:0;transform:translateX(34%) scale(.97)}}
@keyframes glass-out{to{opacity:0;transform:translateX(-18%) scale(.95)}}
@keyframes glass-in-back{from{opacity:0;transform:translateX(-18%) scale(.95)}}
@keyframes glass-out-back{to{opacity:0;transform:translateX(34%) scale(.97)}}

/* Карточка входа и страницы входа лежат на тёмном видео и в светлой теме: поля остаются тёмным стеклом */
:root[data-theme="light"] :is(.auth-card,body.auth main) :is(input[type=text],input[type=email],input[type=password],select,textarea){
  background:rgba(255,255,255,.07);color:#f1f3f5;caret-color:#f1f3f5;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
:root[data-theme="light"] :is(.auth-card,body.auth main) :is(input,select,textarea):focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.22)!important}
:root[data-theme="light"] :is(.auth-card,body.auth main) input:-webkit-autofill{-webkit-text-fill-color:#f1f3f5;box-shadow:inset 0 0 0 40px #26292d}

/* ---------- Окно cookie: плавающая стеклянная панель ----------
   Всплывает снизу из размытия с лёгким пружинящим ходом, уходит обратно так же мягко. */
.cookie{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));
  max-width:1000px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  background-color:rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:translateY(20px) scale(.98);will-change:transform,opacity;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .6s}
.cookie.open{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.cookie-in{padding:18px 56px 18px 24px}
:root[data-theme="light"] .cookie{background-color:rgba(255,255,255,.55)!important;
  box-shadow:0 24px 60px rgba(20,24,28,.18)}
@media (prefers-reduced-motion:reduce){.cookie,.cookie.open{transition:opacity .2s;transform:none;filter:none}}

/* ---------- Толщина и плавность ----------
   Начертание Century Gothic одно, поэтому +15% к толщине штриха даёт тонкая обводка в цвет текста (≈ 0,012 em). */
body{-webkit-text-stroke:.012em currentColor;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.l-mark span,.cam-hud{-webkit-text-stroke:0}
html{scroll-behavior:smooth}
a,button,.btn,.item,.release-row,.card,.block,.att,.chip,.icon-btn,.stepper a,.cab-tabs a,.auth-tabs button,input,select,textarea{
  transition-property:background-color,color,box-shadow,transform,opacity,border-color;transition-duration:.32s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.btn:active,.icon-btn:active{transform:scale(.97)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main>.card,main>.block,main>.wizard,main>.split{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
dialog.alert[open]{animation-duration:.32s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
dialog.steps-dialog[open]{animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.hero-media video{transform:translateZ(0);backface-visibility:hidden}


/* ---------- Четыре шага: прозрачные кнопки в одну линию под плейлистом, пояснение всплывает ---------- */
.steps-row{position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,36px)}
.steps-row a{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:8px 14px;border-radius:999px;color:var(--text);text-decoration:none;
  background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:none;
  transition:background-color .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.steps-row a:hover,.steps-row a:focus-visible,.steps-row a.open{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.steps-row .n{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.steps-row b{font-weight:400;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.steps-row .tip{position:absolute;z-index:5;left:50%;bottom:calc(100% + 12px);width:min(280px,72vw);padding:14px 16px;border-radius:18px;
  font-size:14px;line-height:1.5;letter-spacing:.04em;text-transform:none;text-align:left;color:var(--text);
  background:var(--overlay);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
.steps-row a:hover .tip,.steps-row a:focus-visible .tip,.steps-row a.open .tip{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@media (max-width:640px){
  .steps-row{gap:6px}
  .steps-row a{flex-direction:column;gap:2px;min-height:56px;padding:6px 4px;border-radius:22px}
  .steps-row b{font-size:10px;letter-spacing:.08em}
  .steps-row .n{font-size:10px}
  .steps-row a:first-child .tip{left:0;transform:translate(0,8px)}
  .steps-row a:first-child:hover .tip,.steps-row a:first-child.open .tip{transform:none}
  .steps-row a:last-child .tip{left:auto;right:0;transform:translate(0,8px)}
  .steps-row a:last-child:hover .tip,.steps-row a:last-child.open .tip{transform:none}
}
@media (prefers-reduced-motion:reduce){.steps-row .tip,.steps-row a{transition:opacity .2s}}

/* ---------- Призыв на мозаике из кадров: без панели, текст прямо на кадрах ---------- */
.cta-mosaic{position:relative;isolation:isolate;margin-block:clamp(48px,8vw,110px);min-height:clamp(440px,50vw,560px);display:flex;align-items:center;color:#f1f3f5}
.mosaic{position:absolute;inset:0 max(24px,4vw);z-index:-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px}
.mosaic .tile{position:relative;min-height:0;min-width:0;border-radius:26px;overflow:hidden;background:#0b0c0e}
.mosaic video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.62)}
.mosaic .tile:first-child{grid-row:1/3}
.mosaic .tile:first-child::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,7,9,.82) 0%,rgba(6,7,9,.55) 50%,transparent 100%)}
@media (max-width:640px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .tile:last-child{display:none}.mosaic .tile:nth-child(2){grid-row:1/3}
  .mosaic .tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,9,.6),rgba(6,7,9,.78))}.cta-copy{padding-inline:calc(max(24px,4vw) + 20px)}}

:root[data-theme="light"] .steps-row a{background:rgba(255,255,255,.35);box-shadow:none}
:root[data-theme="light"] .steps-row a:hover,:root[data-theme="light"] .steps-row a.open{background:rgba(255,255,255,.7)}

/* ---------- Без граней ----------
   Рамки и тонкие контуры убраны везде: формы держатся на заливке, стекле и тени.
   Остаются только кольцо фокуса с клавиатуры и документ-образец. */
*:not(.doc-paper):not(.doc-paper *){border-color:transparent!important}
input[type=checkbox]:not(:checked),input[type=radio]:not(:checked),input.switch:not(:checked){background:rgba(255,255,255,.16)!important}
:root[data-theme="light"] input[type=checkbox]:not(:checked),:root[data-theme="light"] input[type=radio]:not(:checked),:root[data-theme="light"] input.switch:not(:checked){background:rgba(15,20,25,.14)!important}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring)!important}
#pl-title{text-transform:none}

/* Призыв: вся надпись — кнопка с тонким контуром и кружком со стрелкой */
.cta-card{position:relative;display:block;margin-left:calc(max(24px,4vw) + clamp(16px,3vw,40px));max-width:min(620px,calc(100% - 2 * max(24px,4vw)));
  padding:clamp(24px,3.4vw,40px) clamp(88px,9vw,120px) clamp(24px,3.4vw,40px) clamp(24px,3.4vw,40px);border-radius:32px;color:#f1f3f5;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:box-shadow .45s cubic-bezier(.22,1,.36,1),background-color .45s cubic-bezier(.22,1,.36,1)}
.cta-card .title-xl{display:block;font-size:clamp(36px,5.4vw,72px);line-height:1.02}
.cta-card .cta-sub{display:block;margin-top:14px;max-width:340px;font-size:clamp(15px,1.5vw,18px);color:rgba(241,243,245,.78)}
.cta-card i{position:absolute;right:clamp(20px,2.6vw,32px);bottom:clamp(20px,2.6vw,32px);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .45s cubic-bezier(.22,1,.36,1)}
.cta-card:hover{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cta-card:hover i{transform:translateX(5px);background:rgba(255,255,255,.22)}
@media (max-width:640px){.cta-card{margin-inline:calc(max(24px,4vw) + 12px);max-width:none;padding-right:84px}}

/* Переключатель «Вход / Регистрация»: светлая капсула плавно ездит влево-вправо */
.auth-tabs{position:relative}
.auth-tabs::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:999px;
  background:rgba(246,248,250,.92);box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.auth-tabs:has(#tab-signup[aria-selected=true])::before{transform:translateX(calc(100% + 4px))}
.auth-tabs button{position:relative;z-index:1;transition:color .35s cubic-bezier(.22,1,.36,1)}
#panel-login:not([hidden]),#panel-signup:not([hidden]){animation:auth-in .45s cubic-bezier(.22,1,.36,1) both}
@keyframes auth-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.auth-tabs::before{transition:none}#panel-login,#panel-signup{animation:none!important}}

/* Кнопки входа и регистрации — как призыв внизу: прозрачные, тонкий контур, кружок со стрелкой */
.btn.go{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:8px 8px 8px 26px;border-radius:999px;
  background:transparent;color:var(--text);font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-shadow:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 26%,transparent);
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),background-color .45s cubic-bezier(.22,1,.36,1)}
.btn.go i{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--text) 12%,transparent);
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .45s cubic-bezier(.22,1,.36,1)}
.btn.go:hover{background:color-mix(in srgb,var(--text) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 45%,transparent);filter:none}
.btn.go:hover i{transform:translateX(4px);background:color-mix(in srgb,var(--text) 22%,transparent)}

/* ---------- Шапка: плавное растворение вниз вместо резкой кромки ----------
   Фон и размытие вынесены в подложку, которая гаснет к нижнему краю; кнопки шапки остаются чёткими. */
.site-header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.site-header::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:-26px;pointer-events:none;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.22) 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 52%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.22) 86%,transparent 100%)}
body.landing .site-header:not(.scrolled)::before{opacity:0}

/* ---------- Мозаика в светлой теме: монохромная и сливается со страницей ---------- */
:root[data-theme="light"] .mosaic{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-composite:intersect}
:root[data-theme="light"] .mosaic .tile{background:#e4e6e9}
:root[data-theme="light"] .mosaic video{filter:grayscale(1) brightness(1.18) contrast(.78);opacity:.7}
:root[data-theme="light"] .mosaic .tile:first-child::after{background:linear-gradient(90deg,rgba(243,244,246,.96) 0%,rgba(243,244,246,.7) 55%,rgba(243,244,246,.15) 100%)}
:root[data-theme="light"] .cta-card{color:#13171b;box-shadow:inset 0 0 0 1px rgba(19,23,27,.22)}
:root[data-theme="light"] .cta-card .cta-sub{color:rgba(19,23,27,.7)}
:root[data-theme="light"] .cta-card i{background:rgba(19,23,27,.08)}
:root[data-theme="light"] .cta-card:hover{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(19,23,27,.4)}
:root[data-theme="light"] .cta-card:hover i{background:rgba(19,23,27,.14)}
@media (max-width:640px){:root[data-theme="light"] .mosaic .tile::after{background:linear-gradient(180deg,rgba(243,244,246,.82),rgba(243,244,246,.9))}}

/* Призыв: карточка по центру левой плитки, ровные отступы, кружок выровнен по нижней строке */
.cta-mosaic{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:10px;padding-inline:max(24px,4vw);align-items:center}
.cta-card{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;grid-column:1;justify-self:center;
  width:min(calc(100% - 56px),500px);max-width:none;margin:0;padding:clamp(26px,3vw,38px)}
.cta-card .cta-sub{max-width:none}
.cta-card i{position:static;flex:0 0 auto;width:54px;height:54px}
@media (max-width:640px){.cta-mosaic{grid-template-columns:1fr}.cta-card{grid-column:1;width:calc(100% - 40px)}}

/* Мозаика — цельное полотно: без зазоров и скруглений между кадрами, скруглён только внешний край */
.mosaic{gap:0;border-radius:26px;overflow:hidden}
.mosaic .tile{border-radius:0}
.cta-mosaic{column-gap:0}
.cta-card .title-xl{font-size:clamp(30px,4.6vw,64px);white-space:nowrap}
.cta-text{min-width:0}

/* Тёмная тема: мозаика монохромная, края мягко уходят в фон, но яркость кадров остаётся */
:root:not([data-theme="light"]) .mosaic{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-composite:intersect}
:root:not([data-theme="light"]) .mosaic video{filter:grayscale(1) brightness(.82) contrast(1.08)}
#pl-title{display:flex;align-items:center;flex-wrap:wrap;column-gap:.5em}
#pl-title{flex-wrap:nowrap;white-space:nowrap;font-size:clamp(20px,2.7vw,40px)}
@media (max-width:860px){#pl-title{font-size:clamp(22px,5.4vw,34px)}}

/* =====================================================================
   Единство и тишина: без капса, одна шкала размеров, спокойные кнопки
   (камкордер с таймкодом и логотип остаются как есть)
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent}
*{-webkit-tap-highlight-color:transparent}
*:not(.cam-hud):not(.cam-hud *){text-transform:none!important}
.steps-row a,.cta-card,.btn,.auth-tabs button,.land-nav a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Шкала: подписи и меню 14px, кнопки и подзаголовки 16px, широкий разряд только у логотипа */
.eyebrow,.land-nav a,.auth-tabs button,.steps-row b,.steps-row .n,.stepper .head,.site-footer{font-size:14px;letter-spacing:.05em}
.steps-row .n{font-size:12px}
.btn,.btn.go,.cta-card .cta-sub{font-size:16px;letter-spacing:.04em}
.land-nav .btn{font-size:14px}
.title-xl{letter-spacing:.03em}
.cta-card .title-xl,#pl-title{letter-spacing:.03em}
.wm{letter-spacing:.2em}

/* Кнопки: спокойные, полупрозрачные, одной высоты */
.btn{min-height:44px;background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text);box-shadow:none;text-shadow:none}
.btn:hover{background:color-mix(in srgb,var(--text) 17%,transparent);filter:none}
.btn.destructive{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.land-nav .btn{min-height:40px;padding:8px 18px}
body.landing .site-header:not(.scrolled) .land-nav .btn{background:rgba(255,255,255,.14);color:#f1f3f5}
body.landing .site-header.scrolled .land-nav .btn{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.auth-tabs button[aria-selected=true]{color:#f1f3f5}
.auth-tabs::before{background:rgba(255,255,255,.14);box-shadow:none}
.auth-tabs{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Карточка входа: почти прозрачная, пока с ней не взаимодействуют (как призыв внизу) */
.auth-card{background:transparent;background-image:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .5s,backdrop-filter .5s}
.auth-card:hover,.auth-card:focus-within{background:rgba(14,16,19,.42);box-shadow:0 24px 60px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password]{background:rgba(255,255,255,.07)}
.auth-card label,.auth-card .small,.auth-card .check{font-size:14px}
.auth-card .btn.go{margin-top:6px}
:root[data-theme="light"] .auth-card input[type=text],:root[data-theme="light"] .auth-card input[type=email],:root[data-theme="light"] .auth-card input[type=password]{background:rgba(255,255,255,.05)}
@media (max-width:640px){.steps-row b{font-size:13px;letter-spacing:.02em}.steps-row a{padding-inline:2px}.cta-card .cta-sub{font-size:15px}}

/* =====================================================================
   Личный кабинет без овалов и контуров: всё прозрачное, форму задают пробелы и тихая подсветка при наведении
   ===================================================================== */
body:not(.landing):not(.auth) :is(.card,.block,.att,.release-row,.item,.callout,.msg,.chips,details.acc,.person,.track,.empty,.stepbar,.stages,details.panel-acc,.table-wrap,.cab-tabs,.stepper-rail,.choice,.field>label.check:has(input[type=radio]),.profile-form .pf-group){
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
body:not(.landing):not(.auth) :is(.item,.release-row,.att,.choice,.person,.stepbar,.stepper a,.cab-tabs a,.chip,.mini,.btn,details.acc>summary){
  border-radius:10px!important}
body:not(.landing):not(.auth) :is(.item,.release-row,.att,.choice,.stepper a,.cab-tabs a,.chip,.mini,.btn.ghost,details.acc>summary):hover{
  background:color-mix(in srgb,var(--text) 6%,transparent)!important}
body:not(.landing):not(.auth) .callout,body:not(.landing):not(.auth) .msg{color:var(--muted);padding-inline:0}
body:not(.landing):not(.auth) .card,body:not(.landing):not(.auth) .block{padding-inline:0}
body:not(.landing):not(.auth) .stepper-rail{padding:0}

/* вкладки: просто текст, активная — ярче */
body:not(.landing):not(.auth) .cab-tabs{padding:0;gap:4px}
body:not(.landing):not(.auth) .cab-tabs a{background:transparent!important;color:var(--muted);box-shadow:none!important}
body:not(.landing):not(.auth) .cab-tabs a[aria-current]{color:var(--text)}

/* шаги формы: цифра без кружка, активный шаг — ярче и крупнее по весу */
body:not(.landing):not(.auth) .stepper a{background:transparent;color:var(--muted)}
body:not(.landing):not(.auth) .stepper a.on{background:transparent!important;color:var(--text);font-weight:500}
body:not(.landing):not(.auth) .stepper a .n{width:auto;height:auto;min-width:22px;border-radius:0!important;background:none!important;border:0;font-size:13px;color:inherit}
body:not(.landing):not(.auth) .stepper a.done .n{color:var(--ok)}
body:not(.landing):not(.auth) .stepper a .e{background:none;color:var(--red);padding:0;min-width:0;height:auto}
body:not(.landing):not(.auth) .stepper li:not(:last-child) a::after{display:none}
body:not(.landing):not(.auth) .progress span{border-radius:0}

/* статусы и теги: цветной текст, без плашек */
body:not(.landing):not(.auth) :is(.pill,.badge,.tag){background:none!important;padding:0;border-radius:0;box-shadow:none}

/* кнопки: основная — тихая подсветка, остальные — просто текст */
body:not(.landing):not(.auth) .btn{background:color-mix(in srgb,var(--text) 8%,transparent);box-shadow:none}
body:not(.landing):not(.auth) .btn.ghost,body:not(.landing):not(.auth) .chip,body:not(.landing):not(.auth) .mini{background:transparent;box-shadow:none}
body:not(.landing):not(.auth) .icon-btn{border-radius:10px}

/* поля: лёгкая заливка вместо контура, мягкие углы */
body:not(.landing):not(.auth) :is(input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=search],input[type=tel],select,textarea){
  background:color-mix(in srgb,var(--text) 6%,transparent)!important;border-radius:10px!important;box-shadow:none}
body:not(.landing):not(.auth) .dropzone{background:color-mix(in srgb,var(--text) 4%,transparent)!important;border-radius:14px!important;box-shadow:none!important}
body:not(.landing):not(.auth) .bar{background:transparent!important;border-radius:0!important}
body:not(.landing):not(.auth) dialog,body:not(.landing):not(.auth) .sheet,body:not(.landing):not(.auth) .palette{border-radius:18px}

/* Переключатель языка: тихая надпись, без плашки */
.lang-switch{display:inline-flex;align-items:center;min-height:38px;padding:0 8px;font-size:13px;letter-spacing:.08em;color:var(--muted);text-decoration:none;border-radius:10px;opacity:.75;transition:opacity .3s,color .3s}
.lang-switch:hover{opacity:1;color:var(--text)}
body.landing .site-header:not(.scrolled) .lang-switch{color:#f1f3f5}
dialog.alert p{font-size:15px}

/* Вкладки кабинета: «Релизы» — главная, остальные разделы второстепенные и тихие */
body:not(.landing):not(.auth) .cab-tabs{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin:0 0 20px;padding:0}
body:not(.landing):not(.auth) .cab-tabs a.main{font-size:22px;letter-spacing:.02em;padding:6px 10px;margin-left:-10px;color:var(--muted)}
body:not(.landing):not(.auth) .cab-tabs a.main[aria-current]{color:var(--text)}
.cab-tabs .minor{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
body:not(.landing):not(.auth) .cab-tabs .minor a{font-size:14px;padding:6px 10px;color:var(--muted);opacity:.8}
body:not(.landing):not(.auth) .cab-tabs .minor a:hover,body:not(.landing):not(.auth) .cab-tabs .minor a[aria-current]{opacity:1;color:var(--text)}
.cab-tabs .count{margin-left:6px;font-size:12px;color:var(--text)}
.fin-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 28px}
.fin-sum dt{font-size:14px;color:var(--muted)}
.fin-sum dd{margin:4px 0 0;font-size:clamp(20px,3vw,30px);letter-spacing:.02em}
.fin-sum .fin-bal dd{color:var(--text)}
.fin-amount{font-size:16px;letter-spacing:.02em;white-space:nowrap}
.fin-amount.payout{color:var(--muted)}
@media (max-width:560px){.fin-sum{grid-template-columns:1fr}}
body:not(.landing):not(.auth) .att-action{font-size:14px;color:var(--muted);padding:6px 10px;width:auto;height:auto}
body:not(.landing):not(.auth) .att-action:hover{color:var(--text)}
body:not(.landing):not(.auth) .icon-btn[data-confirm]{width:auto;padding:6px 10px;font-size:14px;color:var(--muted)}

/* Нижняя панель «Назад / Далее» на телефоне: прибита к экрану и не налезает на поля.
   Анимация появления не оставляет transform на обёртке — иначе fixed-панель прилипала бы к форме, а не к экрану. */
main>.card,main>.block,main>.wizard,main>.split{animation-fill-mode:backwards!important}
@media (max-width:700px){
  body:not(.landing):not(.auth) .bar{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 80%,transparent)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:none}
  body:not(.landing):not(.auth) main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}