/* ============================================================================
   КОНСТРУКТ · ШАБЛОН СТРАНИЦЫ ПРОДУКТА
   ----------------------------------------------------------------------------
   Один файл на все приложения. Страница конкретного продукта не приносит своих
   цветов и своей вёрстки — она приносит только данные (products/*.data.js).

   Токены здесь те же, что в карте вселенной и в самом DRIFT: белый и почти
   чёрный, иерархия строится непрозрачностью и воздухом, три уровня тени.
   Имена даны в обоих словарях, которые уже живут в проекте:
   --fg/--border/--surface (сайт) и --ink/--line/--bg-card (приложения).
   ========================================================================== */

/* --- палитра: светлая --------------------------------------------------- */
:root{
  --bg:        #ffffff;
  --bg-alt:    #f6f6f7;
  --surface:   #ffffff;
  --border:    rgba(0,0,0,.10);
  --border-strong: rgba(0,0,0,.20);
  --fill:      rgba(0,0,0,.04);
  --fill-2:    rgba(0,0,0,.07);
  --fg:        #0b0b0c;
  --muted:     #6c6c72;
  --faint:     #a6a6ad;
  --invert-fg: #ffffff;
  --sheen:     rgba(0,0,0,.05);
  --shadow:       0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  --shadow-hover: 0 2px 8px rgba(0,0,0,.07), 0 20px 48px rgba(0,0,0,.12);
  --shadow-soft:  0 1px 2px rgba(0,0,0,.04);

  /* словарь приложений — те же значения под другими именами */
  --ink: var(--fg);
  --ink-dim: var(--muted);
  --ink-faint: var(--faint);
  --line: var(--border);
  --line-bright: var(--border-strong);
  --bg-card: var(--surface);

  --font-display: "Poppins", "Century Gothic", "URW Gothic", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shell: min(1120px, 100% - 3rem);
  --nav-h: 60px;
  --ease: cubic-bezier(.16,1,.3,1);

  --grain-opacity: .10;
  --grain-size: 320px 320px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='1' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.7' intercept='-1.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- палитра: тёмная (системная, если тему не выбрали руками) ------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme='light']){
    --bg:        #1a1a1a;
    --bg-alt:    #202021;
    --surface:   #232325;
    --border:    rgba(255,255,255,.12);
    --border-strong: rgba(255,255,255,.26);
    --fill:      rgba(255,255,255,.05);
    --fill-2:    rgba(255,255,255,.09);
    --fg:        #f4f4f5;
    --muted:     #a2a2a8;
    --faint:     #6b6b71;
    --invert-fg: #0b0b0c;
    --sheen:     rgba(255,255,255,.07);
    --shadow:       0 1px 2px rgba(0,0,0,.40), 0 10px 30px rgba(0,0,0,.35);
    --shadow-hover: 0 2px 8px rgba(0,0,0,.50), 0 20px 48px rgba(0,0,0,.55);
    --shadow-soft:  0 1px 2px rgba(0,0,0,.40);
    --grain-opacity: .14;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='1' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.7' intercept='-1.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

/* --- палитра: тёмная выбрана руками -------------------------------------- */
:root[data-theme='dark']{
  --bg:        #1a1a1a;
  --bg-alt:    #202021;
  --surface:   #232325;
  --border:    rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.26);
  --fill:      rgba(255,255,255,.05);
  --fill-2:    rgba(255,255,255,.09);
  --fg:        #f4f4f5;
  --muted:     #a2a2a8;
  --faint:     #6b6b71;
  --invert-fg: #0b0b0c;
  --sheen:     rgba(255,255,255,.07);
  --shadow:       0 1px 2px rgba(0,0,0,.40), 0 10px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 2px 8px rgba(0,0,0,.50), 0 20px 48px rgba(0,0,0,.55);
  --shadow-soft:  0 1px 2px rgba(0,0,0,.40);
  --grain-opacity: .14;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='1' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.7' intercept='-1.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- основа --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden }
body{
  position:relative;
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:4px }
/* якорь не должен уезжать под липкую шапку */
[id]{ scroll-margin-top:calc(var(--nav-h) + 18px) }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* Зерно ровное, без облачной маски: на карте вселенной маска даёт «проявление»
   в разделе справочника, здесь же она только просаживала отрисовку на каждой
   прокрутке — фильтр turbulence пересчитывался целым экраном. Продуктовой
   странице нужна ровная бумага, а не пятна. */
.kp-grain{
  position:absolute; inset:0; height:100%; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:var(--grain-size); background-repeat:repeat;
  opacity:var(--grain-opacity);
}
.kp-shell{ width:var(--shell); margin:0 auto }
.kp-eyebrow{
  font-family:var(--font-display); font-size:.62rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}

/* --- шапка ---------------------------------------------------------------- */
.kp-nav{
  position:sticky; top:0; z-index:40; height:var(--nav-h);
  /* Сплошной фон, а не размытие: blur на всю ширину шапки — самый дорогой слой
     на странице, а на белом полотне разницы почти не видно. */
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.kp-nav-in{ height:100%; display:flex; align-items:center; gap:.85rem }
.kp-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-inline-end:auto }
/* Знак — проволочная кассета, нарисованная линиями по цвету текста: никакой
   плашки под ней, ничего не обрезано в квадрат. Одна и та же графика в шапке,
   призыве и подвале, меняется только размер. */
.kp-mark{ width:28px; height:28px; flex:none; color:var(--fg) }
.kp-mark-lg{ width:64px; height:64px; display:block; margin:0 auto 1.3rem; stroke-width:2.6 }
.kp-brand-name{ font-family:var(--font-display); font-weight:500; font-size:1rem; letter-spacing:.01em }
.kp-brand-by{
  font-family:var(--font-display); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); padding-inline-start:.55rem;
  border-inline-start:1px solid var(--border); margin-inline-start:.15rem;
}

/* Утилиты шапки — как в Образе: голый значок без рамки и без заливки,
   подложка появляется только под курсором, варианты раскрываются панелью. */
.kp-utils{ display:flex; align-items:center; gap:.15rem }
.kp-pop{ position:relative }
.kp-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.85rem; height:1.85rem; padding:0;
  border:0; background:transparent; border-radius:.5rem;
  color:var(--muted); cursor:pointer;
  transition:color .16s ease, background .16s ease;
}
.kp-icon-btn svg{ width:17px; height:17px; stroke-width:1.6 }
.kp-pop:hover .kp-icon-btn,
.kp-pop:focus-within .kp-icon-btn,
.kp-pop[data-open='true'] .kp-icon-btn{ color:var(--fg); background:var(--fill-2) }

.kp-menu{
  position:absolute; inset-inline-end:0; top:100%; z-index:50; padding-top:10px;
  opacity:0; pointer-events:none;
  transform:scale(.96) translateY(-4px); transform-origin:top right;
  transition:opacity .18s ease, transform .22s var(--ease);
}
.kp-pop:hover .kp-menu,
.kp-pop:focus-within .kp-menu,
.kp-pop[data-open='true'] .kp-menu{ opacity:1; pointer-events:auto; transform:none }
.kp-menu-panel{
  min-width:150px; max-height:min(60vh,400px); overflow-y:auto;
  display:grid; gap:1px; padding:5px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface); box-shadow:var(--shadow-hover);
}
.kp-menu-panel button{
  width:100%; display:flex; align-items:center; gap:.55rem;
  padding:.48rem .62rem; border:0; border-radius:8px; background:transparent;
  color:var(--muted); font-size:.84rem; text-align:start; cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.kp-menu-panel button svg{ width:15px; height:15px; flex:none; stroke-width:1.6 }
.kp-menu-panel button:hover{ color:var(--fg); background:var(--fill) }
.kp-menu-panel button[aria-current='true']{ color:var(--fg) }
.kp-menu-check{ margin-inline-start:auto; opacity:.65; width:12px; height:12px }
.kp-menu-check[hidden]{ visibility:hidden; display:block }

.kp-divider{ width:1px; height:18px; background:var(--border); margin:0 .5rem }

/* --- кнопки --------------------------------------------------------------- */
.kp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:44px; padding:0 1.15rem; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-size:.86rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid transparent;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .18s, border-color .18s, opacity .18s;
}
.kp-btn svg{ width:17px; height:17px; flex:none }
.kp-btn-primary{ background:var(--fg); color:var(--invert-fg); box-shadow:var(--shadow) }
.kp-btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover) }
.kp-btn-ghost{ background:var(--surface); color:var(--fg); border-color:var(--border); box-shadow:var(--shadow-soft) }
.kp-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow) }
.kp-btn-sm{ height:34px; padding:0 .9rem; font-size:.78rem }
.kp-btn[aria-disabled='true']{ opacity:.5; cursor:not-allowed; transform:none !important }
.kp-btn-soon{
  font-family:var(--font-display); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.1rem .4rem; border:1px solid currentColor; border-radius:var(--radius-pill); opacity:.7;
}

/* --- герой ---------------------------------------------------------------- */
.kp-hero{
  position:relative; z-index:1; min-height:clamp(660px,92svh,1040px);
  display:flex; align-items:center; overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) 0; text-align:center;
}
.kp-hero > .kp-shell{ position:relative; z-index:2 }
.kp-h1{
  margin:0 auto 1.3rem; max-width:18ch;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4.35rem); line-height:1.06; letter-spacing:-.03em;
}
.kp-lead{
  margin:0 auto; max-width:52ch; font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.66; color:var(--muted);
}
.kp-actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.1rem }
.kp-avail{ margin-top:.95rem; font-size:.78rem; color:var(--faint) }

/* --- волна ---------------------------------------------------------------- */
/* Волна занимает всю ширину и всю высоту героя: она — не картинка внутри
   вёрстки, а полотно, по которому идёт звук. Гребни на размахе уходят за верх
   и низ секции и срезаются здесь, overflow'ом. */
.kp-wave-wrap{
  position:absolute; z-index:0; inset:0;
  width:100%; height:100%; margin:0; overflow:hidden; pointer-events:none;
  /* Маска, а не вырез: под текстом линия слабеет до пятой доли и уходит
     дальше целой. Заголовок читается, волна не разрезана. */
  -webkit-mask-image:radial-gradient(ellipse 48% 40% at 50% 47%,
    rgba(0,0,0,.18) 0%, rgba(0,0,0,.46) 46%, rgba(0,0,0,1) 78%);
  mask-image:radial-gradient(ellipse 48% 40% at 50% 47%,
    rgba(0,0,0,.18) 0%, rgba(0,0,0,.46) 46%, rgba(0,0,0,1) 78%);
}
.kp-wave{ display:block; width:100%; height:100% }

/* --- кадры ---------------------------------------------------------------- */
/* Три кадра по центру, без рамок-телефонов и подписей. На узком экране —
   лента с прокруткой и прилипанием, как в магазине. */
.kp-shots{
  position:relative; z-index:1;
  display:flex; gap:1.25rem; justify-content:center;
  padding:clamp(2.5rem,6vw,4rem) 1.5rem 1.4rem;
}
.kp-shots img{
  flex:none; width:clamp(190px,19vw,240px); height:auto;
  border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow);
  background:var(--surface);
}
@media (max-width:760px){
  .kp-shots{
    justify-content:flex-start; overflow-x:auto;
    scroll-snap-type:x proximity; scrollbar-width:none;
    padding-inline:1rem;
  }
  .kp-shots::-webkit-scrollbar{ display:none }
  .kp-shots img{ width:62vw; scroll-snap-align:center }
}

/* --- секции --------------------------------------------------------------- */
.kp-section{ position:relative; z-index:1; padding:clamp(4rem,9vw,7.5rem) 0 }
.kp-section-head{ text-align:center; margin-bottom:clamp(2.2rem,4vw,3.4rem) }
.kp-h2{
  margin:.9rem 0 .7rem;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.1; letter-spacing:-.02em;
}
.kp-section-lead{ margin:0 auto; max-width:48ch; color:var(--muted); font-size:.98rem }

/* --- бенто ---------------------------------------------------------------- */
.kp-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem }
.kp-card{
  grid-column:span 3; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.6rem 1.6rem 1.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease), border-color .22s, box-shadow .3s var(--ease);
}
.kp-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow) }
.kp-card-wide{ grid-column:span 6 }
.kp-card-third{ grid-column:span 2 }
.kp-card h3{ margin:0; font-family:var(--font-display); font-weight:500; font-size:1.1rem; letter-spacing:-.01em }
.kp-card p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.62 }
.kp-card-demo{ margin-top:1.1rem }
.kp-card-demo-top{ margin:0 0 1.3rem }

/* --- живая проба: настоящий звук прямо на странице ----------------------- */
.kp-lab-stage{
  position:relative; margin:1.4rem -.4rem 1.5rem;
  height:clamp(120px,17vw,176px);
}
.kp-lab-stage canvas{ display:block; width:100%; height:100% }
/* Питч — главный орган этой карточки, поэтому линия идёт во всю ширину и
   ничем не ужимается. Кнопка и ручки стоят под ней одной строкой транспорта. */
.kp-pitch{ width:100% }
.kp-pitch-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.15rem;
}
.kp-pitch-name{
  font-family:var(--font-display); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.kp-pitch-val{
  font-family:var(--font-display); font-size:.8rem; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.kp-range{ -webkit-appearance:none; appearance:none; width:100%; height:22px; background:none; cursor:pointer }
.kp-range::-webkit-slider-runnable-track{ height:2px; background:var(--border-strong); border-radius:2px }
.kp-range::-moz-range-track{ height:2px; background:var(--border-strong); border-radius:2px }
.kp-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-7px;
  border-radius:50%; background:var(--fg); box-shadow:var(--shadow-soft);
}
.kp-range::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:var(--fg) }
.kp-pitch-scale{
  display:flex; justify-content:space-between;
  font-size:.6rem; color:var(--faint); font-variant-numeric:tabular-nums;
}

/* ручки эффектов — их можно крутить, и звук слушается */
.kp-lab-bar{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.6rem }
.kp-play{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:40px; padding:0 1.05rem; flex:none;
  border:0; border-radius:var(--radius-pill);
  background:var(--fg); color:var(--invert-fg); cursor:pointer;
  font-family:var(--font-display); font-size:.82rem; font-weight:500;
  box-shadow:var(--shadow-soft);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.kp-play:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.kp-play svg{ width:15px; height:15px }
/* Громкость стоит в строке транспорта: это не эффект, а удобство слушателя,
   поэтому она рядом с кнопкой, а не среди ручек. */
.kp-vol{ display:flex; align-items:center; gap:.6rem; flex:0 1 240px; min-width:150px }
.kp-vol-name{
  font-family:var(--font-display); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.kp-vol-val{
  font-family:var(--font-display); font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right;
}
.kp-range-sm{ height:18px }
.kp-range-sm::-webkit-slider-thumb{ width:13px; height:13px; margin-top:-5.5px }
.kp-range-sm::-moz-range-thumb{ width:13px; height:13px }
.kp-knobs{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-left:auto }
.kp-knob{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; width:58px;
  border:0; background:none; padding:0; cursor:ns-resize; touch-action:none;
}
.kp-knob svg{ width:52px; height:52px; overflow:visible }
.kp-knob-ring{ fill:none; stroke:var(--border); stroke-width:2 }
.kp-knob-arc{ fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round }
.kp-knob-ptr{ stroke:var(--fg); stroke-width:2; stroke-linecap:round; transform-origin:26px 26px }
.kp-knob-name{
  font-family:var(--font-display); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.kp-knob:hover .kp-knob-name{ color:var(--fg) }

/* демонстрация: волноформа */
.kp-bars{ display:flex; align-items:center; gap:2px; height:64px }
.kp-bars i{ flex:1; background:var(--fg); border-radius:1px; opacity:.68 }

/* чипы */
.kp-chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.kp-chip{
  padding:.28rem .62rem; border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--fill); font-size:.74rem; color:var(--muted); white-space:nowrap;
}
.kp-chip-strong{ color:var(--fg); border-color:var(--border-strong); background:var(--surface) }

/* демонстрация: приватность */
.kp-private{ display:flex; align-items:center; justify-content:center; padding:.4rem 0 }
.kp-private svg{ width:100%; max-width:280px; height:auto; color:var(--fg) }

/* --- полоса призыва ------------------------------------------------------- */
/* Без рамки и без подложки: призыв стоит на том же полотне, что и всё
   остальное — коробка вокруг него ничего не добавляла. */
.kp-cta{
  position:relative; z-index:1; text-align:center;
  padding:clamp(1rem,3vw,2rem) 0;
}
/* Знак без подложки и без тени — он и так знак, коробка ему не нужна. */

/* --- подвал --------------------------------------------------------------- */
.kp-foot{
  position:relative; z-index:1; margin-top:clamp(4rem,8vw,7rem);
  border-top:1px solid var(--border); background:var(--bg-alt);
  padding:4rem 0 2.6rem;
}
.kp-foot-in{ display:flex; align-items:flex-start; gap:3rem }
.kp-foot-mark{ flex:none; display:flex; flex-direction:column; gap:.7rem; max-width:220px }
.kp-foot-mark .kp-mark{ width:32px; height:32px }
.kp-foot-cols{ flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem }
.kp-foot-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.kp-foot-col{ display:flex; flex-direction:column; gap:.72rem; min-width:0 }
.kp-foot-title{ font-family:var(--font-display); font-weight:500; font-size:.88rem; color:var(--fg) }
.kp-foot-col a{ font-size:.86rem; color:var(--muted); text-decoration:none; transition:color .2s }
.kp-foot-col a:hover{ color:var(--fg) }
.kp-foot-bottom{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between;
  font-size:.76rem; color:var(--faint);
}

/* --- проявление при прокрутке -------------------------------------------- */
.kp-rise{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.kp-rise.kp-in{ opacity:1; transform:none }

/* --- адаптив -------------------------------------------------------------- */
@media (max-width:900px){
  .kp-bento{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .kp-card{ grid-column:span 2 }
  .kp-card-wide{ grid-column:span 4 }
  .kp-card-third{ grid-column:span 2 }
  .kp-foot-in{ flex-direction:column; gap:2.4rem }
  .kp-foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); width:100% }
}
@media (max-width:620px){
  :root{ --shell:min(1120px, 100% - 2rem) }
  .kp-knobs{ gap:.5rem; justify-content:space-between; margin-left:0; width:100% }
  .kp-play{ width:100% }
  .kp-vol{ flex:1 1 100%; order:3 }
  .kp-knob{ width:auto; flex:1 1 0 }
  .kp-brand-by{ display:none }
  .kp-bento{ grid-template-columns:1fr }
  .kp-card,.kp-card-wide,.kp-card-third{ grid-column:span 1 }
  .kp-actions .kp-btn{ width:100% }
  .kp-hero{ min-height:88svh; padding:5rem 0 }
  .kp-foot-cols{ grid-template-columns:1fr; gap:2rem }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .kp-rise{ opacity:1; transform:none }
}