/* ============================================================
   Valentin Testov · v2 «Свет · Стекло · Пространство»
   Общие стили всех страниц. Правила системы — в DESIGN.md.
   ============================================================ */

/* ============ токены ============ */
:root{
  color-scheme:dark;
  --bg:#05070B;--bg-2:#0A0D13;--bg-3:#10141C;
  --ink:#F3F6FB;--ink-2:#BCC5D3;--ink-3:#8791A4;--ink-4:#5C6678;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);--line-3:rgba(255,255,255,.06);
  /* свет: --lamp меняет регулятор температуры (core.js), --lamp-2 — встречный оттенок */
  --lamp:255 190 128;--lamp-2:128 186 255;--lamp-ink:#0B0D12;
  --ok:128 232 186;--bad:255 140 110;
  --f-disp:'Unbounded','Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-text:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Martian Mono','Onest',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r-s:12px;--r-m:18px;--r-l:28px;--r-xl:40px;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1200px;--gut:clamp(16px,4vw,40px);
  --dock-h:0px;--nav-h:86px;
  --blur:22px;
}

/* ============ база ============ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-text);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));
}
main{flex:1 0 auto;width:100%;position:relative;z-index:2}
a{color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
::selection{background:rgb(var(--lamp)/.32);color:#fff}
:focus-visible{outline:2px solid rgb(var(--lamp));outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1C222D;border:2px solid var(--bg);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#2A3240}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#000;padding:10px 16px;border-radius:999px;text-decoration:none;font-size:14px}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* ============ фон: свет в пространстве ============ */
.amb{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 80% at 50% -10%,#0B1018 0%,var(--bg) 60%)}
.amb i{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform}
.amb .a{width:62vmax;height:62vmax;right:-22vmax;top:-26vmax;background:radial-gradient(closest-side,rgb(var(--lamp)/.34),transparent);animation:drift-a 26s ease-in-out infinite alternate}
.amb .b{width:56vmax;height:56vmax;left:-24vmax;bottom:-28vmax;background:radial-gradient(closest-side,rgb(var(--lamp-2)/.26),transparent);animation:drift-b 32s ease-in-out infinite alternate}
.amb .c{width:34vmax;height:34vmax;left:38%;top:42%;background:radial-gradient(closest-side,rgb(var(--lamp)/.10),transparent);animation:drift-a 38s ease-in-out infinite alternate-reverse}
/* сетка чертежа: едва заметные линии, гаснут к краям */
.amb .grid{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000 0%,transparent 78%);mask-image:radial-gradient(90% 70% at 50% 30%,#000 0%,transparent 78%)}
/* зерно — против полос на градиентах */
.amb .grain{inset:-50%;width:auto;height:auto;border-radius:0;filter:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift-a{to{transform:translate3d(-9vmax,7vmax,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(8vmax,-6vmax,0) scale(1.1)}}
/* на главной фон рисует WebGL-сцена */
.has-gl .amb i:not(.grain){display:none}
/* пятно света за указателем (только мышь) */
.spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--lamp)/.10),transparent);opacity:0;transition:opacity .6s ease;will-change:transform}
.spot.on{opacity:1}

/* ============ типографика ============ */
h1,h2,h3,h4{margin:0;font-weight:300;text-wrap:balance}
h1,.h1{font-family:var(--f-disp);font-weight:300;font-size:clamp(38px,10.4vw,88px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
h2,.h2{font-family:var(--f-disp);font-weight:300;font-size:clamp(25px,4.6vw,50px);line-height:1.06;letter-spacing:-.035em;color:var(--ink)}
h3{font-family:var(--f-disp);font-weight:400;font-size:17px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
p{margin:0}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-3);font-size:14px;line-height:1.6}
.muted a,.txtlink{color:rgb(var(--lamp));text-decoration:none;border-bottom:1px solid rgb(var(--lamp)/.35);transition:border-color .2s}
.muted a:hover,.txtlink:hover{border-bottom-color:rgb(var(--lamp))}
/* подпись моноширинным: индексы, единицы, служебные метки */
.lab{font-family:var(--f-mono);font-weight:400;font-size:10.5px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px}
.lab b{font-weight:500;color:rgb(var(--lamp))}
.lab.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--lamp));box-shadow:0 0 12px 2px rgb(var(--lamp)/.7);flex:none}
em.lit{font-style:normal;color:transparent;background:linear-gradient(100deg,rgb(var(--lamp)) 0%,#fff 46%,rgb(var(--lamp-2)) 100%);-webkit-background-clip:text;background-clip:text}

/* ============ каркас ============ */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:calc(860px + var(--gut)*2)}
.page{padding-top:calc(var(--nav-h) + clamp(28px,6vw,72px));padding-bottom:clamp(60px,9vw,120px)}
.sec{padding-top:clamp(72px,11vw,150px)}
.sec.tight{padding-top:clamp(44px,6vw,80px)}
.sh{display:grid;gap:16px;margin-bottom:clamp(26px,4vw,48px);max-width:760px}
.sh .lede{margin-top:4px}
.sh.row{max-width:none;grid-template-columns:1fr auto;align-items:end}
.phead{display:grid;gap:18px;max-width:820px}
.phead h1{font-size:clamp(34px,8.6vw,76px)}

/* ============ жидкое стекло ============ */
.glass{
  position:relative;isolation:isolate;
  /* дымчатое стекло: тёмная подложка держит контраст текста над любой картинкой, блик идёт поверх */
  background:linear-gradient(135deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.025) 46%,rgba(255,255,255,.05) 100%),rgba(9,12,18,.5);
  border:1px solid var(--line);border-radius:var(--r-l);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);backdrop-filter:blur(var(--blur)) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 28px rgba(255,255,255,.022),0 30px 70px -34px rgba(0,0,0,.75);
}
/* кромка: свет ловится на верхнем левом ребре, лампа — на нижнем правом */
.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.06) 28%,rgba(255,255,255,0) 58%,rgb(var(--lamp)/.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* блик, который идёт за указателем: --mx/--my выставляет core.js */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.13),transparent 62%)}
.glass.lit::after{opacity:1}
.glass.flat{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.glass.deep{background:linear-gradient(135deg,rgba(14,18,26,.72),rgba(8,10,15,.62));}
/* режим без размытия: слабые устройства и «уменьшить прозрачность» */
.lite .glass,.lite .btn,.lite .dock,.lite .nav-in{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite .glass{background:linear-gradient(135deg,rgba(26,31,42,.94),rgba(13,16,23,.94))}

/* плита с ячейками: одно стекло, разделённое гравированными линиями */
.cells{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.cells.two{grid-template-columns:repeat(2,1fr)}
.cells.four{grid-template-columns:repeat(4,1fr)}
.cell{position:relative;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line-3);min-width:0}
.cell:first-child{border-left:0}
.cell p{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.cell .ix{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:rgb(var(--lamp));text-transform:uppercase}
.cell .go{margin-top:auto;padding-top:14px}
.cell.hover{transition:background .35s ease}
.cell.hover:hover{background:rgba(255,255,255,.035)}

/* ============ кнопки ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--f-text);font-weight:500;font-size:14.5px;line-height:1;letter-spacing:.005em;color:var(--ink);
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 28px -16px rgba(0,0,0,.8);
  transition:transform .35s var(--spring),background .25s ease,border-color .25s ease,box-shadow .3s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{border-color:rgba(255,255,255,.36);background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));transform:translateY(-1px)}
.btn:active{transform:scale(.955)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
/* главная кнопка светится цветом лампы */
.btn.lamp{color:var(--lamp-ink);border-color:transparent;font-weight:600;background:rgb(var(--lamp));
  background:linear-gradient(180deg,rgb(var(--lamp)) 0%,color-mix(in srgb,rgb(var(--lamp)) 78%,#201408) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 14px -8px rgba(0,0,0,.28),0 0 0 1px rgb(var(--lamp)/.35),0 14px 38px -10px rgb(var(--lamp)/.6)}
.btn.lamp:hover{background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--lamp)) 86%,#fff) 0%,rgb(var(--lamp)) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgb(var(--lamp)/.5),0 18px 46px -8px rgb(var(--lamp)/.75)}
.btn.sm{min-height:42px;padding:0 18px;font-size:13.5px}
.btn.wide{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:10px}
/* вторичные действия инструментов */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(255,255,255,.045);border:1px solid var(--line);transition:all .25s ease}
.ghost:hover{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.09)}
.ghost:active{transform:scale(.97)}
.ghost.gold{color:var(--lamp-ink);background:rgb(var(--lamp));border-color:transparent;font-weight:500;box-shadow:0 10px 26px -12px rgb(var(--lamp)/.7)}
.ghost.gold:hover{background:color-mix(in srgb,rgb(var(--lamp)) 86%,#fff)}
/* переключатели-таблетки */
.pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:999px;cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  background:rgba(255,255,255,.035);border:1px solid var(--line);transition:all .25s ease}
.pill:hover{color:var(--ink);border-color:var(--line-2)}
.pill[aria-pressed="true"]{color:rgb(var(--lamp));border-color:rgb(var(--lamp)/.55);background:rgb(var(--lamp)/.10);box-shadow:0 0 22px -8px rgb(var(--lamp)/.6)}
/* сегменты: стеклянная капсула с ползунком-подсветкой */
.seg{display:inline-flex;max-width:100%;padding:4px;gap:2px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.seg button{flex:1 1 auto;min-height:40px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;background:none;white-space:nowrap;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);transition:color .2s ease,background .3s ease,box-shadow .3s ease}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{color:var(--lamp-ink);background:rgb(var(--lamp));font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px -10px rgb(var(--lamp)/.8)}
/* чипы выбора */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.chip{font-family:var(--f-text);font-size:14px;line-height:1.3;text-align:left;cursor:pointer;color:var(--ink-2);
  padding:13px 14px;border-radius:var(--r-s);background:rgba(255,255,255,.035);border:1px solid var(--line);transition:all .25s ease}
.chip:hover{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.06)}
.chip[aria-pressed="true"]{color:var(--ink);border-color:rgb(var(--lamp)/.6);background:rgb(var(--lamp)/.11);box-shadow:inset 0 0 0 1px rgb(var(--lamp)/.2),0 0 26px -10px rgb(var(--lamp)/.55)}
.chips.small{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.chips.small .chip{text-align:center;font-size:13px;padding:11px 8px}
.plab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--lamp));margin-bottom:12px}
.plab.sub{color:var(--ink-3);margin-top:22px}
.panel{padding:clamp(18px,2.4vw,28px)}

/* ============ шапка ============ */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;padding:0 var(--gut);pointer-events:none}
.nav-in{pointer-events:auto;max-width:var(--wrap);margin:0 auto;height:58px;border-radius:999px;display:flex;align-items:center;gap:6px;padding:0 8px 0 18px;--blur:26px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:8px;flex:none}
.brand .mark{width:26px;height:26px;flex:none;color:rgb(var(--lamp));filter:drop-shadow(0 0 8px rgb(var(--lamp)/.55))}
.brand b{font-family:var(--f-disp);font-weight:400;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.nav-links{position:relative;display:flex;align-items:center;margin:0 auto;gap:0}
.nav-links a{position:relative;z-index:1;display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;text-decoration:none;
  font-size:13.5px;font-weight:450;color:var(--ink-2);white-space:nowrap;transition:color .2s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
/* жидкий «пузырь» под пунктом меню: ездит за указателем */
.nav-bubble{position:absolute;z-index:0;left:0;top:50%;height:38px;width:60px;margin-top:-19px;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .5s var(--spring),width .5s var(--spring),opacity .25s ease}
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;min-width:42px;padding:0 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--ink-2);transition:all .25s ease;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em}
.tool:hover{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.09)}
.tool svg{width:18px;height:18px;flex:none}
.tool .bulb{width:9px;height:9px;border-radius:50%;background:rgb(var(--lamp));box-shadow:0 0 12px 3px rgb(var(--lamp)/.75)}
/* эквалайзер звука */
.eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px}
.eq i{display:block;width:2.5px;height:4px;border-radius:2px;background:currentColor;opacity:.55;transition:height .3s ease}
[aria-pressed="true"]>.eq i{opacity:1;animation:eq 1s ease-in-out infinite}
[aria-pressed="true"]>.eq i:nth-child(1){animation-delay:-.2s}
[aria-pressed="true"]>.eq i:nth-child(2){animation-delay:-.55s}
[aria-pressed="true"]>.eq i:nth-child(3){animation-delay:-.05s}
[aria-pressed="true"]>.eq i:nth-child(4){animation-delay:-.4s}
.tool[aria-pressed="true"]{color:rgb(var(--lamp));border-color:rgb(var(--lamp)/.45)}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.nav .btn{min-height:42px;padding:0 20px;font-size:13.5px}

/* панель «свет сайта» */
.lightpop{position:fixed;z-index:60;top:84px;right:max(var(--gut),calc((100vw - var(--wrap))/2));width:min(340px,calc(100vw - 24px));padding:20px 20px 18px;border-radius:var(--r-l);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .25s ease,transform .45s var(--spring),visibility 0s linear .3s;--blur:30px}
.lightpop.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.lightpop h4{font-family:var(--f-disp);font-weight:400;font-size:15px;letter-spacing:-.01em;margin-bottom:6px}
.lightpop p{font-size:13px;line-height:1.5;color:var(--ink-3)}
.kval{display:flex;align-items:baseline;gap:8px;margin:16px 0 10px;font-family:var(--f-disp);font-weight:300;font-size:34px;letter-spacing:-.04em;line-height:1}
.kval small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
/* ползунок температуры: дорожка — сам спектр ламп */
.krange{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;margin:0;cursor:pointer;touch-action:pan-y}
.krange::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#FFB068 0%,#FFD3A6 28%,#F2EEEA 52%,#C2DBFF 76%,#96C6FF 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 18px -4px rgb(var(--lamp)/.7)}
.krange::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#FFB068 0%,#FFD3A6 28%,#F2EEEA 52%,#C2DBFF 76%,#96C6FF 100%)}
.krange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--lamp)) 70%);box-shadow:0 0 0 6px rgb(var(--lamp)/.18),0 6px 16px rgba(0,0,0,.5),0 0 24px rgb(var(--lamp)/.8);transition:transform .2s var(--spring)}
.krange::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:radial-gradient(circle at 35% 30%,#fff,rgb(var(--lamp)) 70%);box-shadow:0 0 0 6px rgb(var(--lamp)/.18),0 0 24px rgb(var(--lamp)/.8)}
.krange:active::-webkit-slider-thumb{transform:scale(1.14)}
.kpre{display:flex;gap:6px;margin-top:12px}
.kpre button{flex:1;min-height:38px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.045);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);transition:all .2s ease}
.kpre button:hover{color:var(--ink);border-color:var(--line-2)}
.kpre button[aria-pressed="true"]{color:rgb(var(--lamp));border-color:rgb(var(--lamp)/.55);background:rgb(var(--lamp)/.1)}

/* ============ док: нижняя навигация на телефоне ============ */
.dock{display:none}
.sheet{display:none}
@media (max-width:1099px){
  :root{--dock-h:78px;--nav-h:74px}
  .nav{position:absolute;top:10px}
  .nav-in{height:52px;padding:0 6px 0 14px}
  .nav-links,.nav .btn{display:none}
  .tool{height:40px;min-width:40px}
  .lightpop{top:auto;right:12px;left:12px;width:auto;bottom:calc(var(--dock-h) + 8px + env(safe-area-inset-bottom,0px));transform-origin:bottom center;transform:translateY(10px) scale(.97)}
  .dock{position:fixed;z-index:55;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:62px;max-width:520px;margin:0 auto;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;padding:5px;border-radius:999px;--blur:28px;
    background:linear-gradient(180deg,rgba(40,46,58,.55),rgba(14,17,24,.62))}
  .dock a,.dock button{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;
    border:0;background:none;cursor:pointer;text-decoration:none;border-radius:999px;color:var(--ink-3);
    font-family:var(--f-text);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.01em;transition:color .25s ease}
  .dock svg{width:21px;height:21px;transition:transform .4s var(--spring)}
  .dock a[aria-current="page"],.dock button[aria-expanded="true"]{color:var(--ink)}
  .dock a:active svg,.dock button:active svg{transform:scale(.84)}
  .dock .dcta{color:rgb(var(--lamp))}
  .dock-bubble{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/5);border-radius:999px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.08),0 0 26px -6px rgb(var(--lamp)/.5);
    transform:translateX(calc(var(--i,0)*100%));transition:transform .55s var(--spring),opacity .3s ease}
  .dock-bubble.off{opacity:0}
  .sheet{display:block;position:fixed;z-index:54;left:10px;right:10px;max-width:520px;margin:0 auto;bottom:calc(var(--dock-h) + 6px + env(safe-area-inset-bottom,0px));
    padding:10px;border-radius:30px;opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transform-origin:bottom center;pointer-events:none;
    transition:opacity .25s ease,transform .5s var(--spring),visibility 0s linear .3s;--blur:30px;background:linear-gradient(180deg,rgba(40,46,58,.6),rgba(12,15,22,.72))}
  .sheet.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .sheet a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:13px 14px;border-radius:20px;text-decoration:none;color:var(--ink);transition:background .2s ease}
  .sheet a:active,.sheet a:hover{background:rgba(255,255,255,.08)}
  .sheet a i{grid-row:1/3;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
    color:rgb(var(--lamp));background:rgb(var(--lamp)/.1);border:1px solid rgb(var(--lamp)/.28)}
  .sheet a b{font-family:var(--f-disp);font-weight:400;font-size:14.5px;letter-spacing:-.01em}
  .sheet a span{font-size:12.5px;color:var(--ink-3);line-height:1.35}
  .sheet-set{display:flex;gap:8px;margin-top:6px;padding:10px 4px 2px;border-top:1px solid var(--line-3)}
  .sheet-set .tool{flex:1;height:46px;text-transform:uppercase}
  .scrim{position:fixed;inset:0;z-index:53;background:rgba(3,5,8,.5);opacity:0;pointer-events:none;transition:opacity .3s ease}
  .scrim.on{opacity:1;pointer-events:auto}
}
@media (max-width:380px){.dock a,.dock button{font-size:9.5px}.brand b{font-size:12.5px}}
/* самые узкие телефоны (320px): шапка должна помещаться целиком, иначе страница становится шире экрана и съезжает док */
@media (max-width:340px){
  .nav-in{padding:0 5px 0 11px;gap:4px}
  .brand{gap:8px;margin-right:2px}
  .brand b{font-size:11.5px}
  .tool{padding:0 9px;gap:6px}
}
/* узкий ноутбук: имя в шапке прячется, остаётся знак */
@media (min-width:1100px) and (max-width:1250px){.nav .brand b{display:none}.nav-links a{padding:0 11px}}

/* ============ шаги ============ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:st}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{position:relative;padding:22px 22px 24px;border-left:1px solid var(--line-3);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.steps li:first-child{border-left:0}
.num{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:rgb(var(--lamp));margin-bottom:12px}

/* ============ работы ============ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.filters button{min-height:42px;padding:0 18px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:all .25s ease}
.filters button:hover{color:var(--ink);border-color:var(--line-2)}
.filters button[aria-pressed="true"]{color:var(--lamp-ink);background:rgb(var(--lamp));border-color:transparent;font-weight:500;box-shadow:0 10px 26px -12px rgb(var(--lamp)/.8)}
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);perspective:1400px}
.work{position:relative;display:block;text-decoration:none;color:var(--ink);border-radius:var(--r-l);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .3s ease,box-shadow .4s ease,opacity .35s ease;will-change:transform}
.work:hover{border-color:var(--line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -30px rgb(var(--lamp)/.5)}
.work img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--bg-3);transition:transform .9s var(--ease),filter .5s ease}
.work:hover img{transform:scale(1.045)}
/* блик на обложке при наведении */
.work::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%)}
.work:hover::after{opacity:1}
.wmeta{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:14px 16px 15px;border-radius:20px;display:grid;gap:5px;
  background:linear-gradient(180deg,rgba(18,22,30,.5),rgba(8,10,15,.66));border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.wmeta b{font-family:var(--f-disp);font-weight:400;font-size:clamp(14px,1.5vw,17px);letter-spacing:-.015em;line-height:1.2}
.wmeta span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.work.gone{display:none}
.work .open{position:absolute;z-index:2;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,13,19,.5);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:scale(.8) rotate(-20deg);transition:opacity .3s ease,transform .5s var(--spring)}
.work .open svg{width:16px;height:16px}
.work:hover .open,.work:focus-visible .open{opacity:1;transform:none}

/* ============ вопросы ============ */
.faq{overflow:hidden}
.faq details{border-top:1px solid var(--line-3);padding:0 clamp(18px,2.4vw,30px)}
.faq details:first-child{border-top:0}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:21px 44px 21px 0;font-family:var(--f-disp);font-weight:400;font-size:clamp(14.5px,1.5vw,17px);letter-spacing:-.015em;line-height:1.3;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;border-radius:2px;background:rgb(var(--lamp));transition:transform .4s var(--spring)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg)}
.faq summary:hover{color:rgb(var(--lamp))}
.faq details p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:66ch;padding:0 0 22px}

/* ============ призыв ============ */
.cta{position:relative;margin-top:clamp(72px,11vw,150px);padding:clamp(34px,6vw,76px) clamp(22px,5vw,70px);border-radius:var(--r-xl);overflow:hidden;display:grid;gap:18px;justify-items:start}
.cta h2{max-width:16ch}
.cta p{font-size:clamp(15px,1.4vw,18px);color:var(--ink-2);max-width:54ch;line-height:1.6}
.cta .btns{margin-top:10px}
/* световое пятно внутри стекла */
.cta .glow{position:absolute;z-index:-1;right:-12%;top:-60%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--lamp)/.5),transparent);filter:blur(50px);animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.18) translate(-4%,6%);opacity:.75}}

/* ============ подвал ============ */
.foot{position:relative;z-index:2;margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line-3);flex-shrink:0}
/* затемнение снизу вверх — от самого края страницы до конца разделов: подвал читается над любой картинкой.
   Начинается в отступе над подвалом (содержимое не задевает) и уходит под док на телефоне. */
.foot::before{content:"";position:absolute;z-index:-1;left:0;right:0;pointer-events:none;
  top:calc(-1*clamp(40px,6vw,80px));bottom:calc(-1*(var(--dock-h) + env(safe-area-inset-bottom,0px)));
  background:linear-gradient(180deg,rgba(5,7,11,0) 0%,rgba(5,7,11,.46) 22%,rgba(5,7,11,.78) 55%,rgba(5,7,11,.95) 100%)}
.footin{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px 40px;padding-top:clamp(34px,5vw,56px);padding-bottom:clamp(30px,4vw,44px)}
.foot .fb{display:grid;gap:14px;align-content:start}
.foot .fb .brand b{font-size:15px}
.foot .fb p{font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:34ch}
.foot nav,.foot .fcol{display:grid;gap:10px;align-content:start}
.foot .lab{margin-bottom:6px}
.foot nav a,.foot .fcol a{font-size:14px;color:var(--ink-2);text-decoration:none;width:fit-content;transition:color .2s ease}
.foot nav a:hover,.foot .fcol a:hover{color:rgb(var(--lamp))}
.foot .cp{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--line-3);padding-top:20px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
/* неброский переход на прежнюю версию сайта: тише остального подвала, проявляется при наведении */
.foot .cp .oldv{color:var(--ink-4);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.foot .cp .oldv:hover,.foot .cp .oldv:focus-visible{color:var(--ink-2);border-bottom-color:var(--line-2)}

/* ============ плашка cookie ============ */
.ck{position:fixed;z-index:65;left:12px;right:12px;bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom,0px));max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:14px 20px;padding:16px 16px 16px 22px;border-radius:26px;
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .5s var(--spring),opacity .3s ease;--blur:30px;
  background:linear-gradient(180deg,rgba(40,46,58,.62),rgba(12,15,22,.76))}
.ck.on{transform:none;opacity:1}
.ck p{flex:1;font-size:13px;line-height:1.55;color:var(--ink-2)}
.ck p a{color:rgb(var(--lamp));text-decoration:none;border-bottom:1px solid rgb(var(--lamp)/.35)}
.ck .ckb{display:flex;gap:8px;flex-shrink:0}
.ck .btn{min-height:42px;padding:0 18px;font-size:13px}

/* на широком экране плашка уходит в угол и не закрывает содержимое */
@media (min-width:1100px){.ck{left:auto;right:24px;bottom:24px;margin:0;max-width:372px;flex-direction:column;align-items:stretch;padding:20px}.ck .ckb .btn{flex:1}}

/* ============ уведомление и окно ============ */
.toast{position:fixed;z-index:90;left:50%;bottom:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px) scale(.96);
  padding:13px 22px;border-radius:999px;max-width:calc(100vw - 28px);text-align:center;pointer-events:none;opacity:0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(180deg,rgba(46,52,66,.78),rgba(16,19,27,.86));border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px -18px rgba(0,0,0,.9),0 0 34px -12px rgb(var(--lamp)/.55);
  transition:opacity .25s ease,transform .5s var(--spring)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,5,8,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}
.modal.on{opacity:1}
.mbox{position:relative;width:100%;max-width:440px;padding:34px 28px 26px;border-radius:var(--r-xl);transform:translateY(16px) scale(.96);transition:transform .55s var(--spring);--blur:34px;
  background:linear-gradient(160deg,rgba(46,52,66,.66),rgba(12,15,22,.8))}
.modal.on .mbox{transform:none}
.mx{position:absolute;z-index:3;top:12px;right:12px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1;transition:all .2s ease}
.mx:hover{color:var(--ink);border-color:var(--line-2)}
.mtitle{font-family:var(--f-disp);font-weight:300;font-size:26px;letter-spacing:-.035em;line-height:1.1;padding-right:36px}
.mtext{font-size:15px;line-height:1.6;color:var(--ink-2);margin:14px 0 22px}
.mless{display:block;width:100%;margin-top:8px;min-height:44px;background:none;border:0;cursor:pointer;color:var(--ink-3);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.mless:hover{color:var(--ink)}

/* ============ появление ============ */
.js [data-rv]{opacity:0;transform:translate3d(0,26px,0);filter:blur(10px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js [data-rv].in{opacity:1;transform:none;filter:none}
/* переход между страницами (где браузер умеет) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;filter:blur(8px)}}
@keyframes vt-in{from{opacity:0;filter:blur(10px);transform:scale(1.012)}}

/* ============ движение (GSAP, assets/js/motion.js) ============
   Всё ниже появляется, только когда motion.js включился (класс .motion на <html>):
   без GSAP и при «уменьшить движение» этих элементов на странице просто нет. */

/* размерная линия под заголовком (.dim, с числом в мм) и под ценой (.dimu) */
.dimhost{position:relative}
.dim,.dimu{position:absolute;left:0;top:calc(100% + 6px);height:9px;max-width:100%;display:flex;align-items:center;pointer-events:none;
  font-style:normal;font-weight:400;letter-spacing:0;line-height:1;white-space:nowrap;-webkit-text-fill-color:currentColor}
.dimu{top:calc(100% + 4px)}
.dim-l{flex:1 1 0;min-width:0;height:1px;background:var(--line-2);transform-origin:0 50%}
.dim-t{flex:none;width:1px;height:9px;background:rgb(var(--lamp));transform:rotate(45deg)}
.dim-n{flex:none;padding:0 9px;font-family:var(--f-mono);font-weight:400;font-size:9px;letter-spacing:.09em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pack.pick .dimu .dim-l,.tar.pick .dimu .dim-l{background:rgb(var(--lamp)/.5)}

/* рулетка прокрутки: лента со шкалой, 4 px = 10 мм страницы */
.ruler{display:none;position:fixed;z-index:3;right:12px;top:50%;width:46px;height:min(44vh,330px);transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity .8s ease}
.ruler.on{opacity:1}
@media (min-width:1320px) and (hover:hover) and (pointer:fine){.motion .ruler{display:block}}
.ruler-win{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%)}
.ruler-tape{position:absolute;right:0;top:0;width:100%;will-change:transform;background:
  repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0 1px,transparent 1px 40px) right top/13px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.36) 0 1px,transparent 1px 20px) right top/9px 100% no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px) right top/5px 100% no-repeat}
.ruler-tape i{position:absolute;right:18px;transform:translateY(-50%);font-style:normal;font-family:var(--f-mono);font-size:8px;line-height:1;letter-spacing:.04em;color:var(--ink-4);white-space:nowrap}
.ruler-ptr{position:absolute;right:0;top:50%;width:20px;height:1px;background:rgb(var(--lamp));box-shadow:0 0 8px rgb(var(--lamp)/.9)}
.ruler-ptr::before{content:"";position:absolute;left:-5px;top:-2px;width:5px;height:5px;border-radius:50%;background:rgb(var(--lamp));box-shadow:0 0 10px 2px rgb(var(--lamp)/.7)}
.ruler-val{position:absolute;right:0;top:calc(100% + 8px);white-space:nowrap;font-family:var(--f-mono);font-size:8.5px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.ruler-val b{font-weight:500;color:rgb(var(--lamp));font-variant-numeric:tabular-nums}

/* магнитная кнопка: положением управляет скрипт, поэтому transform из переходов убран */
.mag{transition:background .25s ease,border-color .25s ease,box-shadow .3s ease,color .2s ease;will-change:transform}

/* курсор: стеклянная капля над проектом (.drop) и подпись под указателем над макетом (.tag) */
.cur{position:fixed;left:0;top:0;z-index:95;width:0;height:0;pointer-events:none}
.cur-in{position:absolute;left:0;top:0;display:grid;place-items:center;opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity .25s ease,transform .5s var(--spring)}
.cur b{font-family:var(--f-mono);font-weight:400;font-size:9.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.cur.on .cur-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cur.drop .cur-in{width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.3),rgba(255,255,255,.05) 46%,rgba(8,10,15,.3) 100%);
  -webkit-backdrop-filter:blur(5px) saturate(190%);backdrop-filter:blur(5px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -12px 20px -12px rgb(var(--lamp)/.6),0 14px 34px -16px rgba(0,0,0,.85)}
.cur.drop.down .cur-in{transform:translate(-50%,-50%) scale(.8)}
.cur.tag .cur-in{padding:6px 9px;border-radius:999px;background:rgba(8,10,15,.62);border:1px solid rgba(255,255,255,.16);transform:translate(-50%,30px) scale(.6)}
.cur.tag.on .cur-in{transform:translate(-50%,30px) scale(1)}
.cur.tag.down .cur-in{opacity:0}
.lite .cur.drop .cur-in{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,24,33,.9)}
.has-cur .work,.has-cur .work *{cursor:none}
.has-cur .work .open{display:none}

/* самолётик Telegram: летит поверх страницы, за ним след */
.fly{position:fixed;left:0;top:0;width:100%;height:100%;z-index:96;pointer-events:none;overflow:visible}
.fly path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fly-trail{stroke:rgb(var(--lamp)/.55);stroke-width:1.2}
.fly-plane path{stroke:rgb(var(--lamp));stroke-width:1.7;filter:drop-shadow(0 0 6px rgb(var(--lamp)/.8))}

/* стекло гнётся от скорости прокрутки: угол в --bend ставит скрипт */
.bend{transform:skewY(calc(var(--bend,0)*1deg))}

/* текст загорается: слова тусклые, пока до них не дошла прокрутка (--l), на подходе вспыхивают цветом лампы (--g) */
.lit-on .lw{opacity:calc(.2 + .8*var(--l,1));color:color-mix(in srgb,rgb(var(--lamp)) calc(var(--g,0)*100%),var(--ink));
  text-shadow:0 0 calc(var(--g,0)*24px) rgb(var(--lamp)/calc(var(--g,0)*.7))}

/* искры света */
.sparks{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;border-radius:50%;background:rgb(var(--lamp));box-shadow:0 0 10px 2px rgb(var(--lamp)/.8)}
.sparks i.hot{background:#fff;box-shadow:0 0 12px 3px rgb(var(--lamp))}

/* ============ адаптив ============ */
@media (max-width:900px){
  .cells,.cells.four{grid-template-columns:1fr}
  .cells .cell{border-left:0;border-top:1px solid var(--line-3)}
  .cells .cell:first-child{border-top:0}
  .cells.four.keep2{grid-template-columns:1fr 1fr}
  .cells.four.keep2 .cell:nth-child(2){border-top:0}
  .cells.four.keep2 .cell:nth-child(even){border-left:1px solid var(--line-3)}
  .steps,.steps.three{grid-template-columns:1fr 1fr}
  .steps li:nth-child(odd){border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--line-3)}
  .footin{grid-template-columns:1fr 1fr}
  .foot .fb{grid-column:1/-1}
  .sh.row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .works{grid-template-columns:1fr}
  .steps,.steps.three{grid-template-columns:1fr}
  .steps li{border-left:0;border-top:1px solid var(--line-3);padding:18px 20px 20px}
  .steps li:first-child{border-top:0}
  .ck{flex-direction:column;align-items:stretch;padding:16px;border-radius:24px}
  .ck .ckb .btn{flex:1}
  .btns .btn{flex:1 1 auto}
  .cta{border-radius:30px}
  .chips{grid-template-columns:1fr 1fr}
  .chips.small{grid-template-columns:repeat(3,1fr)}
}
@media (hover:none){
  .work .open{opacity:1;transform:none}
  .btn:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-rv]{opacity:1;transform:none;filter:none}
  .amb i{animation:none}
}
@media print{
  .nav,.dock,.sheet,.scrim,.foot,.amb,.ck,.toast,.spot,.lightpop,#scene,#hud,.ruler,.cur,.fly,.sparks,.dim,.dimu{display:none!important}
  .bend{transform:none!important}
  body{padding-bottom:0}
}