/* Лендинг «Тілек мульт»: раскладка и страничные блоки поверх дизайн-системы Тимура
   (ds/tokens.css → ds/components.css → ds/dark.css). Структура, стекло, радиусы, типошкала и
   геометрия компонентов — из ДС. Цвета переопределены в блоке «Палитра» ниже: это единственное
   место с литеральными цветами на лендинге, дальше только токены и color-mix от них. */

/* ===== Палитра «Тілек мульт» =====
   Выведена из наших кадров (закатный янтарь и коралл 3D-кадров, мята и небо пластилина, пастель
   рисованной сказки) и из рекламы конкурентов (тёплый закат, розово-золотая гамма love story).
   Имена токенов ДС сохранены, чтобы компоненты перекрасились сами:
   --blue-1/--blue-2 — пара основного градиента (здесь коралл → закат), --accent — плоский акцент,
   --violet — лаванда, --emerald — мята, --amber — солнечный жёлтый. */
:root{
  --blue-1:#ff6f33; --blue-2:#e23f17;
  --violet-1:#b48cff; --violet-2:#7a5ae6;
  --emerald-1:#4fd6a8; --emerald-2:#159a74;
  --amber-1:#ffd23f; --amber-2:#ff9a1f;
  --pink:#ff5c8a;
  --accent:#d9430f;
  --info:#3aa7e8; --success:#159a74; --warn:#e07f00; --danger:#e8417a;
  --bg:#fff5e8;
  --surface:#ffffff;
  --line:rgba(70,35,10,.09); --line-strong:rgba(70,35,10,.16);
  --glass:rgba(255,251,245,.62); --glass-2:rgba(255,251,245,.45);
  --el-3:0 24px 60px -30px rgba(226,63,23,.40);
  /* glossy «капля»: блик приглушён до .28, чтобы белый текст на кнопке не тонул */
  --gloss-blue:radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 100%),radial-gradient(114.65% 114.65% at 9.73% 17.27%, var(--blue-1) 0%, var(--blue-2) 100%);
  --gloss-shadow:rgba(255,160,110,.45) 20px 20px 24px 0,rgba(255,228,205,.5) -3px -3px 4px 0 inset,rgba(170,40,0,.14) 4px 4px 4px 0 inset;
}
:root.theme-dark{
  --blue-1:#f26a38; --blue-2:#c4391a;
  --violet-1:#9d7ff0; --violet-2:#6b4fd0;
  --emerald-1:#3fc497; --emerald-2:#1d8a66;
  --amber-1:#f3b83a; --amber-2:#d4780f; --pink:#e85684;
  --gloss-blue:radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%),radial-gradient(114.65% 114.65% at 9.73% 17.27%, var(--blue-1) 0%, var(--blue-2) 100%);
  --ink:#f7ecdf; --ink2:#cfbba8; --ink3:#a08b7a; --ink-inv:#ffffff;
  --bg:#1d1411; --surface:#2a1e19;
  --line:rgba(255,225,190,.11); --line-strong:rgba(255,225,190,.22);
  --glass:rgba(42,30,25,.66); --glass-2:rgba(42,30,25,.45);
  --accent:#ffa36b; --info:#7fc4f0; --success:#6fd1ac; --warn:#f0b35b; --danger:#f08fb4;
  --el-1:0 4px 16px rgba(0,0,0,.2); --el-2:0 12px 40px rgba(0,0,0,.24); --el-3:0 24px 60px -30px rgba(0,0,0,.45);
  --gloss-shadow:rgba(0,0,0,.28) 20px 20px 24px 0,rgba(255,200,160,.14) -3px -3px 4px 0 inset,rgba(120,30,0,.12) 4px 4px 4px 0 inset;
}
/* Места, где components.css держит синий литералами, — переводим на токены палитры */
.badge.subtle{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.badge.solid{box-shadow:color-mix(in srgb,var(--blue-1) 40%,transparent) 4px 6px 12px 0,rgba(255,235,220,.5) -1px -1px 2px 0 inset}
.plate{background-image:radial-gradient(101% 101% at 66% 82%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%),radial-gradient(115% 115% at 10% 17%, var(--blue-1) 0%, var(--blue-2) 100%);box-shadow:var(--gloss-shadow)}
.pcard.featured{box-shadow:var(--el-3),0 0 0 1.5px color-mix(in srgb,var(--accent) 40%,transparent)}
.promo{background:radial-gradient(120% 140% at 85% 10%, color-mix(in srgb,var(--amber-1) 24%,transparent), transparent 55%),radial-gradient(120% 140% at 0% 100%, color-mix(in srgb,var(--pink) 16%,transparent), transparent 55%),var(--glass)}
.promo-h em{background:linear-gradient(90deg,var(--blue-2),var(--amber-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.o-herosplit{background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--amber-1) 22%,transparent),transparent 55%),radial-gradient(90% 90% at 0% 100%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 50%),var(--surface)}
.btn:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),var(--gloss-shadow)}
.btn.primary{text-shadow:0 1px 1px color-mix(in srgb,var(--ink) 28%,transparent)}
a.btn,a.btn:hover{text-decoration:none}
.btn.glass{color:var(--ink)}
.chip.active{box-shadow:color-mix(in srgb,var(--blue-1) 40%,transparent) 3px 4px 10px 0}
.menu a:hover,.navbar nav a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.tabs-pill,.seg{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.o-herostats .st b{background-image:linear-gradient(120deg,var(--blue-1),var(--blue-2))}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-base);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* mesh-фон (эффект E из гайдбука): три размытых пятна за контентом */
.bgmesh{position:fixed;inset:-20%;z-index:-1;filter:blur(72px) saturate(1.15);opacity:.55;pointer-events:none}
.bgmesh span{position:absolute;border-radius:50%}
.bgmesh .b1{width:50%;height:50%;left:-6%;top:-8%;background:color-mix(in srgb,var(--amber-1) 55%,var(--surface))}
.bgmesh .b2{width:46%;height:46%;right:-8%;top:12%;background:color-mix(in srgb,var(--pink) 38%,var(--surface))}
.bgmesh .b3{width:48%;height:48%;left:28%;bottom:-12%;background:color-mix(in srgb,var(--emerald-1) 38%,var(--surface))}
:root.theme-dark .bgmesh{opacity:.22}

.page{max-width:1160px;margin:0 auto;padding:0 var(--sp-4) var(--sp-16)}
.topbar{position:sticky;top:var(--sp-3);z-index:var(--z-sticky);padding:var(--sp-3) 0 var(--sp-6)}
.navbar nav{display:none}
.navbar .ctl{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.navbar .lg{text-decoration:none;color:var(--ink)}
.navbar .mk{display:grid;place-items:center;color:var(--ink-inv);font-size:14px}
@media (min-width:960px){.navbar nav{display:flex}.navbar .ctl{margin-left:0}}
.lang.seg button{padding:7px 12px}
.btn.icon-only svg{width:18px;height:18px}
.theme-sun{display:none}
:root.theme-dark .theme-sun{display:block}
:root.theme-dark .theme-moon{display:none}
.navbar .btn.cta{display:none}
@media (min-width:600px){.navbar .btn.cta{display:inline-flex}}

/* ритм секций: между организмами --sp-12 на телефоне, --sp-24 на десктопе */
.org{background:var(--surface)}
.org+.org{margin-top:var(--sp-12)}
@media (min-width:960px){.org+.org{margin-top:var(--sp-16)}}
.org.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line)}
.head{text-align:center;margin-bottom:var(--sp-8)}
.head .ov,.ov{display:inline-block;font-size:var(--fs-overline);letter-spacing:var(--tr-overline);text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:var(--sp-3)}
.head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:var(--tr-head);line-height:var(--lh-snug);text-wrap:balance}
.head p{color:var(--ink2);max-width:56ch;margin:var(--sp-3) auto 0;font-size:var(--fs-body-lg)}
.head.left{text-align:left}
.head.left p{margin-left:0}
.em{font-style:normal;background:linear-gradient(90deg,var(--blue-1),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* hero */
.o-herosplit{position:relative}
.o-herosplit .hs-l h2{max-width:19ch}
.o-herosplit .hs-l .lede{font-size:var(--fs-body-lg);color:var(--ink2);margin:var(--sp-4) 0 var(--sp-6);max-width:46ch}
.o-herosplit .trust{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.o-herosplit .hs-r{width:min(440px,100%);margin:0 auto}
@media (min-width:960px){.o-herosplit .hs-r{width:min(460px,44vw)}}
/* кадр-эмоция в герое */
.hero-art{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--el-3),0 0 0 1px var(--line);filter:drop-shadow(0 24px 40px color-mix(in srgb,var(--blue-2) 26%,transparent));aspect-ratio:3/4;background:var(--surface)}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art .cap{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line-strong),var(--el-1);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25}
.hero-art .cap .ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background-image:var(--gloss-blue);color:var(--ink-inv);font-size:14px}
/* «как это работает»: шаги + переехавший сюда ползунок «фото → персонаж» */
.how-grid{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:960px){.how-grid{grid-template-columns:1.25fr .75fr}}
.how-grid .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.how-grid .ba-wrap{width:min(360px,100%);margin:0 auto}
.statline .st b{display:block}
.statline .st span{font-size:var(--fs-caption);color:var(--ink2);font-weight:500}

/* фото → персонаж */
.ba{position:relative;aspect-ratio:2/3;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--el-3),0 0 0 1px var(--line);filter:drop-shadow(0 24px 40px color-mix(in srgb,var(--blue-2) 28%,transparent));touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--ink-inv);transform:translateX(-50%);pointer-events:none}
.ba .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--glass);backdrop-filter:blur(10px);color:var(--ink);display:grid;place-items:center;font-size:18px;font-weight:800;box-shadow:var(--el-1),inset 0 0 0 1px var(--line-strong)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba .tag{position:absolute;top:var(--sp-3);pointer-events:none}
.ba .tag.l{left:var(--sp-3)}.ba .tag.r{right:var(--sp-3)}
.ba-tabs{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.ba-tabs button{width:48px;height:48px;border-radius:50%;padding:0;border:0;overflow:hidden;cursor:pointer;background:var(--surface);box-shadow:0 0 0 2px var(--line);transition:box-shadow var(--dur-fast)}
.ba-tabs button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent)}
.ba-tabs img{width:100%;height:100%;object-fit:cover}
.ba-cap{text-align:center;font-size:var(--fs-caption);color:var(--ink3);margin-top:var(--sp-3)}

/* «Кому поздравление?»: входы в версии по аудиториям */
.aud{display:grid;gap:var(--sp-4)}
@media (min-width:760px){.aud{grid-template-columns:repeat(3,1fr)}}
.aud a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--el-2);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}
.aud a:hover{transform:translateY(-3px);box-shadow:var(--el-3)}
.aud img{aspect-ratio:4/3;width:100%;object-fit:cover}
.aud .b{padding:var(--sp-4) var(--sp-6) var(--sp-6)}
.aud h4{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.aud p{font-size:14px;color:var(--ink2);margin-top:var(--sp-1)}
.aud .go{display:inline-block;margin-top:var(--sp-3);font-family:var(--font-display);font-weight:700;color:var(--accent)}
/* отзывы (примеры формулировок до первых клиентов) */
.tcards .tcard{display:flex}
/* видео (временные примеры) */
.vgrid{display:grid;gap:var(--sp-4)}
@media (min-width:760px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4)}
.vcard .frame{border-radius:var(--r-md);overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.vcard .frame iframe,.vcard .frame blockquote{margin:0!important;width:100%!important;min-width:0!important;max-width:100%!important;border-radius:var(--r-md)}
.poster{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;text-decoration:none;color:var(--ink-inv)}
.poster{background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--blue-2) 35%,var(--ink)),var(--ink))}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(1.05)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--ink) 55%,transparent))}
.poster .play{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:22px;padding-left:4px;background-image:var(--gloss-blue);box-shadow:var(--gloss-shadow);transition:transform var(--dur-fast)}
.poster:hover .play{transform:scale(1.06)}
.poster .lbl{position:absolute;z-index:1;left:var(--sp-3);bottom:var(--sp-3)}
.vcard h4{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.vcard p{font-size:14px;color:var(--ink2)}
.note{font-size:var(--fs-caption);color:var(--ink3);text-align:center;margin-top:var(--sp-6)}

/* карточки с картинками */
.cards.wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fcard{display:flex;flex-direction:column}
.fcard .cover{margin:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-4);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
.fcard .cover img{width:100%;height:100%;object-fit:cover}
.fcard .pairrow{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.fcard .pairrow img{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.fcard .pairrow .arrow{color:var(--ink3);font-weight:700}
.fcard .pairrow .badge{margin-left:auto}
.fcard .plate.num{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink-inv)}
.fcard .plate.num b{position:relative;z-index:1}
.fcard .tags{font-size:var(--fs-overline);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:var(--sp-2)}
.fcard blockquote{margin:var(--sp-3) 0 0;padding-left:var(--sp-3);border-left:2px solid var(--accent);font-size:14px;color:var(--ink);font-style:italic}

/* поводы */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}
.chips .chip{height:38px;padding:0 var(--sp-4);font-size:14px;font-weight:600;cursor:default}

/* тарифы */
.pricing{display:grid;gap:var(--sp-4);align-items:start}
@media (min-width:900px){.pricing{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column}
.pcard .list-check{flex:1}
.list-check li .ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background-image:var(--gloss-blue);color:var(--ink-inv);margin-top:2px}
.list-check li .ic svg{width:11px;height:11px}
.addons{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
@media (min-width:760px){.addons{grid-template-columns:repeat(3,1fr)}}
.gcard .gp{font-family:var(--font-display);font-weight:800;font-size:18px;margin-top:var(--sp-2);color:var(--ink)}
.fine{font-size:var(--fs-caption);color:var(--ink3);text-align:center;margin-top:var(--sp-4)}

/* сравнение */
table.cmp th,table.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
table.cmp thead th{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
table.cmp thead th.us{color:var(--accent)}
table.cmp tbody th{font-weight:600;color:var(--ink);font-size:14.5px;width:28%}
table.cmp td{color:var(--ink2);font-size:14.5px}
table.cmp td.us{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--accent) 5%,transparent)}
table.cmp{min-width:600px}
@media (max-width:700px){
  /* на телефоне таблица складывается в карточки: строка = повод, две подписи — кто как */
  table.cmp{min-width:0;display:block}
  table.cmp thead{display:none}
  table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:auto}
  table.cmp tr{padding:var(--sp-3) 0}
  table.cmp tr:last-child{border-bottom:0}
  table.cmp tbody th{border:0;padding:0 18px 4px;font-family:var(--font-display);font-size:13px;color:var(--ink)}
  table.cmp td{border:0;padding:4px 18px;background:transparent}
  table.cmp td::before{content:attr(data-col);display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
  table.cmp td.us::before{color:var(--accent)}
  table.cmp td.us{background:transparent}
}
.pcard .list-check li{text-align:left}

/* FAQ */
.acc-item.open .acc-body{max-height:420px}
.acc{max-width:760px;margin:0 auto}

/* промо / финальный призыв */
.promo .promo-r img{border-radius:var(--r-xl)}
.promo .promo-r{width:min(240px,60vw);margin:0 auto}
@media (min-width:760px){.promo .promo-r{width:min(280px,32vw);margin:0}}

/* подвал: тёмная плашка из DS; .org выше задаёт surface, поэтому возвращаем ink */
.org.o-foot{background:var(--ink)}
.o-foot .pad{grid-template-columns:1fr}
@media (min-width:760px){.o-foot .pad{grid-template-columns:1.5fr 1fr 1fr}}
.o-foot .mk{display:grid;place-items:center;font-size:16px}
.o-foot .bottom{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);border-top:1px solid color-mix(in srgb,var(--ink-inv) 10%,transparent);margin-top:var(--sp-2);padding-top:var(--sp-6);color:color-mix(in srgb,var(--ink-inv) 45%,transparent);font-size:var(--fs-caption)}

/* липкая кнопка на телефоне */
.sticky{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-strong);box-shadow:var(--el-2);transform:translateY(140%);transition:transform var(--dur-base) var(--ease)}
.sticky.on{transform:none}
.sticky .p{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.15}
.sticky .p small{display:block;font-family:var(--font-body);font-weight:500;color:var(--ink2);font-size:12px}
.sticky .btn{margin-left:auto}
@media (min-width:960px){.sticky{display:none}}
body.has-sticky{padding-bottom:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.sticky{transition:none}}