/* =========================================================
   ЛАБА — зуботехническая мастерская
   Mobile-first. Все анимации — transform/opacity (композитор).
   ========================================================= */

:root{
  color-scheme: dark;
  /* палитра */
  --bg:#020609; --bg-2:#060D11; --surface:#0A151B; --surface-2:#0E1C23;
  --ink:#EAF0F2; --ink-2:#C5D1D7; --muted:#93A4AE;           /* muted на bg ≈ 7.4:1 */
  --line:rgba(160,200,220,.16); --line-2:rgba(160,200,220,.28);
  --ice:#9FD8FF; --ice-2:#5AA9E6; --ice-glow:rgba(159,216,255,.45);
  --heat:#FF6A3D; --heat-2:#FFB547;
  /* шрифты */
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Golos Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* fluid-типографика */
  --fs-xs:12px;
  --fs-sm:clamp(13px,.78rem + .15vw,14px);
  --fs-base:clamp(15px,.9rem + .2vw,17px);
  --fs-lg:clamp(16px,.95rem + .45vw,20px);
  --fs-h3:clamp(18px,1rem + .6vw,24px);
  --fs-h2:clamp(28px,1rem + 3.6vw,68px);
  --fs-h1:clamp(32px,.9rem + 5.4vw,92px);
  --fs-num:clamp(28px,1rem + 3vw,56px);
  /* сетка отступов 8px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gutter:clamp(16px,4vw,56px);
  --section:clamp(64px,10vw,160px);
  --radius:16px; --radius-lg:22px;
  --header-h:64px;
  --tap:48px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs-base);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--ice);color:var(--bg)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- фон: только CSS, без canvas ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.bg-cold,.bg-heat{position:absolute;inset:-15%;will-change:transform,opacity}
.bg-cold{
  background:
    radial-gradient(38% 32% at 80% 18%,rgba(46,120,180,.30),transparent 70%),
    radial-gradient(34% 38% at 12% 72%,rgba(20,72,122,.28),transparent 70%),
    radial-gradient(30% 28% at 60% 98%,rgba(66,44,128,.22),transparent 70%);
  animation:drift 38s ease-in-out infinite alternate;
}
.bg-heat{
  background:
    radial-gradient(45% 40% at 72% 42%,rgba(255,160,70,.34),transparent 70%),
    radial-gradient(40% 40% at 18% 80%,rgba(255,96,52,.26),transparent 70%);
  opacity:0;transition:opacity .6s ease;
}
@keyframes drift{to{transform:translate3d(-4%,3%,0) scale(1.06)}}
.dust{position:absolute;left:0;right:0;top:0;height:calc(100% + var(--tile-h));
  background-image:
    radial-gradient(1.3px 1.3px at 22px 36px,rgba(190,230,255,.55),transparent 70%),
    radial-gradient(1px 1px at 128px 96px,rgba(190,230,255,.38),transparent 70%),
    radial-gradient(1.7px 1.7px at 74px 164px,rgba(190,230,255,.42),transparent 70%);
  background-size:180px var(--tile-h);
  --tile-h:200px;
  animation:rise 26s linear infinite;will-change:transform}
.dust.d2{--tile-h:280px;background-size:260px var(--tile-h);opacity:.55;animation-duration:44s}
@keyframes rise{to{transform:translate3d(0,calc(var(--tile-h) * -1),0)}}
html.lite .bg-cold,html.lite .dust{animation:none}
html.lite .d2{display:none}

main,header,footer{position:relative;z-index:2}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}

/* ---------- прогресс ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--ice),var(--heat-2),var(--heat));z-index:70;will-change:transform}

/* ---------- шапка ---------- */
.top{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);background:rgba(2,6,9,.9);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  html:not(.lite) .top{background:rgba(2,6,9,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:var(--header-h)}
.top nav{display:none}
.top .cta{display:none}

/* логотип */
.logo{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--ink);flex:none;line-height:0}
.logo .lsvg{width:88px;height:auto;overflow:visible}
.logo .sup{stroke:var(--ice);transition:transform .45s var(--ease)}
.logo .supp{fill:var(--ice)}

/* бургер */
.burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-right:-10px;border:0;background:none;cursor:pointer;border-radius:12px}
.burger span{display:block;grid-area:1/1;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){transform:translateY(-4px)}
.burger span:nth-child(2){transform:translateY(4px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
.burger:active{background:rgba(159,216,255,.08)}

/* мобильное меню */
.menu{position:fixed;inset:0;z-index:55;background:var(--bg);padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + var(--s5)) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s6);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .3s ease}
.menu.open{opacity:1}
.menu .views{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s1);border:1px solid var(--line);border-radius:999px}
.menu .views a{display:grid;place-items:center;min-height:var(--tap);border-radius:999px;text-decoration:none;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.menu .views a[aria-current="page"]{background:var(--ice);color:var(--bg);box-shadow:0 0 24px var(--ice-glow)}
.menu ul{list-style:none;margin:0;padding:0;display:grid}
.menu li{border-bottom:1px solid var(--line);transform:translateY(12px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.menu.open li{transform:none;opacity:1}
.menu.open li:nth-child(2){transition-delay:.04s}.menu.open li:nth-child(3){transition-delay:.08s}.menu.open li:nth-child(4){transition-delay:.12s}
.menu ul a{display:flex;justify-content:space-between;align-items:center;min-height:64px;text-decoration:none;font-family:var(--display);font-weight:500;font-size:clamp(22px,6vw,30px);text-transform:uppercase}
.menu ul a::after{content:"→";font-family:var(--mono);font-size:18px;color:var(--ice)}
.menu .mc{display:grid;gap:var(--s3);margin-top:auto}
.menu .mc b{font-family:var(--display);font-weight:300;font-size:22px}
.menu .mc span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- кнопки ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 var(--s5);border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,background-color .25s,color .25s,box-shadow .3s;touch-action:manipulation}
.btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:0 0 0 0 rgba(159,216,255,0),0 8px 24px rgba(0,0,0,.35)}
.btn:active{transform:scale(.97)}
.btn.wide{width:100%}

/* ---------- типографика ---------- */
.eyebrow{margin:0;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.04}
.lead{margin:0;color:var(--ink-2);max-width:58ch;font-size:var(--fs-lg);line-height:1.55}
.note{margin:var(--s4) 0 0;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}

/* ---------- hero ---------- */
.hero{display:grid;gap:var(--s7);padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + var(--s7));padding-bottom:var(--s6)}
.hero h1{font-size:var(--fs-h1);line-height:.98;text-transform:uppercase;margin-top:var(--s4)}
.hero h1 .l{display:block}
.hero h1 .i1{padding-left:.9em}
.hero h1 .i2{padding-left:.4em}
.hero h1 .o{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.hero h1 em{font-style:normal;color:var(--ice);text-shadow:0 0 36px rgba(159,216,255,.5)}
.hero .sub{display:grid;gap:var(--s5);margin-top:var(--s6)}
.ctas{display:grid;gap:var(--s3)}
.specs{display:grid;gap:1px;margin-top:var(--s6);background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.specs div{display:grid;gap:var(--s1);padding:var(--s4) var(--s5);background:var(--bg-2)}
.specs b{font-family:var(--display);font-weight:300;font-size:clamp(22px,1rem + 1.6vw,32px);font-variant-numeric:tabular-nums;white-space:nowrap}
.specs span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* схема дуги (вид сверху) */
.archview{position:relative;width:100%;max-width:420px;justify-self:center;perspective:900px}
.archview::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(159,216,255,.18),transparent);pointer-events:none}
.archview svg{position:relative;display:block;width:100%;height:auto;overflow:visible;will-change:transform}
.ov-ridge{fill:none;stroke:rgba(159,216,255,.35);stroke-width:1}
.ov-mid{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.ov-teeth rect{fill:rgba(234,240,242,.06);stroke:rgba(234,240,242,.38);stroke-width:.8}
.ov-imp .r{fill:none;stroke:var(--ice);stroke-width:1.2}
.ov-imp .c{fill:var(--ice)}
.ov-imp .halo{fill:rgba(159,216,255,.22)}
.ov-imp text{font-family:var(--display);font-weight:700;font-size:30px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.ov-imp .fdi{font-family:var(--mono);font-weight:400;font-size:10px;fill:var(--muted)}

/* ---------- бегущая строка ---------- */
.marquee{margin-top:var(--s7);padding-block:var(--s5);border-block:1px solid var(--line);overflow:hidden;background:rgba(2,6,9,.5);contain:paint}
.mrow{display:flex;gap:var(--s7);white-space:nowrap;font-family:var(--display);font-weight:300;font-size:clamp(28px,1rem + 4vw,84px);line-height:1.1;text-transform:uppercase;will-change:transform}
.mrow + .mrow{margin-top:var(--s2)}
.mrow span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1px rgba(234,240,242,.55)}
.mrow i{font-style:normal;color:var(--ice)}

/* ---------- секции ---------- */
.block{padding-block:var(--section)}
.head{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
.head h2{margin-top:var(--s4)}
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- сцены со sticky ---------- */
.scene{position:relative;height:520vh}
.stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr;align-content:start;padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + var(--s2));overflow:hidden}
.pv{position:relative;height:38svh;min-height:220px;display:grid;place-items:center}
.pv::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(159,216,255,.16),transparent);pointer-events:none}
.pv svg{position:relative;width:100%;height:100%;overflow:visible}
.pl{display:grid;gap:var(--s3);align-content:start;padding-top:var(--s4);padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px));max-width:560px}
.stage-k{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stage-k b{color:var(--ice);font-weight:500;font-variant-numeric:tabular-nums}
.ticks{display:flex;gap:6px}
.ticks i{position:relative;display:block;width:22px;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.ticks i::after{content:"";position:absolute;inset:0;background:var(--ice);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.stage-t{font-size:clamp(22px,1rem + 2.6vw,52px);line-height:1.05;text-transform:uppercase}
.stage-p{margin:0;color:var(--ink-2);font-size:var(--fs-base);min-height:5em;max-width:46ch}
.stage-s{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--ink)}
.swap{transition:opacity .3s,transform .3s var(--ease)}
.swap.out{opacity:0;transform:translateY(8px)}
.readout{position:absolute;right:0;top:0;display:grid;gap:var(--s1);text-align:right;font-family:var(--mono)}
.readout b{font-family:var(--display);font-weight:300;font-size:var(--fs-num);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(159,216,255,.25)}
.readout span{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lbl{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em}

/* ---------- материалы ---------- */
.mats{display:grid;gap:var(--s4)}
.mat{position:relative;display:grid;gap:var(--s4);align-content:start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface),var(--bg-2));transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.mat .ill{display:block;width:100%;height:auto;aspect-ratio:240/96;border-radius:12px;background:radial-gradient(80% 90% at 50% 20%,rgba(159,216,255,.10),transparent 70%),var(--bg);border:1px solid var(--line)}
.mat .th{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.mat h3{font-size:var(--fs-h3);line-height:1.25}
.mat p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}
.mat dl{display:grid;gap:var(--s2);margin:0;padding-top:var(--s4);border-top:1px solid var(--line)}
.mat dl div{display:flex;justify-content:space-between;gap:var(--s3);font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mat dt{color:var(--muted)}
.mat dd{margin:0;white-space:nowrap}
.mat.hl{border-color:rgba(159,216,255,.35);box-shadow:0 0 0 1px rgba(159,216,255,.08),0 20px 60px -20px rgba(159,216,255,.25)}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--ice);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 18px var(--ice-glow)}

/* ---------- кросс-ссылка между вкладками ---------- */
.xlink{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:88px;padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);text-decoration:none;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.xlink span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.xlink b{display:block;margin-top:var(--s1);font-family:var(--display);font-weight:500;font-size:var(--fs-h3)}
.xlink i{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line-2);font-style:normal;color:var(--ice);transition:transform .35s var(--ease),background-color .3s,color .3s}

/* ---------- прайс ---------- */
.pgroup + .pgroup{margin-top:var(--s7)}
.pgroup > h3{margin-bottom:var(--s3);font-family:var(--mono);font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.price{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:28px 1fr;gap:var(--s1) var(--s3);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:linear-gradient(90deg,rgba(159,216,255,.07),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.row .n{padding-top:3px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.row h4{font-family:var(--body);font-weight:500;font-size:var(--fs-base);line-height:1.45}
.row .t{display:block;margin-top:var(--s1);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.row .p{grid-column:2;font-family:var(--display);font-weight:300;font-size:clamp(18px,1rem + .8vw,24px);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- оттенки ---------- */
.shades{display:grid;gap:var(--s4)}
.group{padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.group header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s5)}
.group header b{font-family:var(--display);font-weight:500;font-size:32px}
.group header span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--muted)}
.sws{display:flex;gap:var(--s2);align-items:flex-end;min-height:110px}
.s{flex:1;display:grid;justify-items:center;gap:var(--s2)}
.s i{display:block;width:100%;max-width:52px;aspect-ratio:1/1.9;border-radius:46% 46% 40% 40%/26% 26% 70% 70%;background:linear-gradient(180deg,var(--c) 0 58%,color-mix(in srgb,var(--c) 60%,#cfe6f5) 100%);box-shadow:inset -5px -8px 14px rgba(80,60,30,.25),inset 5px 5px 10px rgba(255,255,255,.5);transition:transform .35s var(--ease),box-shadow .35s}
.s small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}

/* ---------- клиникам ---------- */
.feat{display:grid;gap:var(--s4)}
.feat article{display:grid;gap:var(--s3);align-content:start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .3s,transform .35s var(--ease)}
.feat .ic{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.feat h3{font-size:var(--fs-h3);line-height:1.25}
.feat p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}
.stats{display:grid;gap:var(--s5);margin-top:var(--s8)}
.stats div{padding-top:var(--s4);border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(44px,1rem + 5vw,80px);line-height:1;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:var(--s3);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- контакты и форма ---------- */
.order{display:grid;gap:var(--s7)}
.contacts{display:grid;gap:var(--s5);margin-top:var(--s6)}
.contact{display:grid;gap:var(--s2);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.contact > span{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact b{font-family:var(--display);font-weight:300;font-size:clamp(20px,1rem + 1vw,28px);overflow-wrap:anywhere}
.contact .acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mini{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--s4);border:1px solid var(--line-2);border-radius:999px;background:transparent;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);cursor:pointer;transition:border-color .25s,color .25s,background-color .25s,box-shadow .3s;touch-action:manipulation}
.mini:active{background:rgba(159,216,255,.1)}
form{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.fr{display:grid;gap:var(--s4)}
label{display:grid;gap:var(--s2);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
input,select,textarea{width:100%;min-height:var(--tap);padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;letter-spacing:0;text-transform:none;transition:border-color .2s,box-shadow .2s}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ice) 50%),linear-gradient(135deg,var(--ice) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(159,216,255,.18)}
textarea{min-height:120px;resize:vertical}
.ok{margin:0;min-height:1.4em;font-family:var(--mono);font-size:var(--fs-sm);color:var(--ice)}
.ok[data-kind="err"]{color:#FF9A7A}
.consent{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--tap);font-family:var(--body);font-size:var(--fs-sm);letter-spacing:0;text-transform:none;line-height:1.45;color:var(--ink-2);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;border-radius:6px;accent-color:var(--ice);cursor:pointer}
.consent a{color:var(--ice);text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.7;cursor:progress}
.btn.loading .dot{animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.8);opacity:.4}}

/* ---------- реквизиты ---------- */
.req{display:grid;gap:var(--s5);padding-top:var(--s7);border-top:1px solid var(--line)}
.req h3{font-size:var(--fs-h3);margin-top:var(--s3)}
.req dl{display:grid;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.req dl div{display:grid;gap:var(--s1);padding:var(--s4) var(--s5);background:var(--bg-2)}
.req dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.req dd{margin:0;font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all}

/* ---------- футер ---------- */
footer{display:grid;gap:var(--s4);padding-block:var(--s7) calc(var(--s9) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}

/* ---------- HUD (виден только внутри сцен) ---------- */
.hud{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:var(--s3);max-width:calc(100% - 32px);padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(2,6,9,.88);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transform:translate(-50%,12px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.hud.on{opacity:1;transform:translate(-50%,0)}
.hud b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.hud .led{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice);transition:background-color .3s,box-shadow .3s}
.hud .led.hot{background:var(--heat);box-shadow:0 0 10px var(--heat)}

/* ---------- reveal (только transform+opacity) ---------- */
.rv{transition:transform .9s var(--ease),opacity .9s ease}
.rv.pend{transform:translate3d(0,32px,0);opacity:.2}

/* =========================================================
   ≥ 600px
   ========================================================= */
@media (min-width:600px){
  .ctas{display:flex;flex-wrap:wrap}
  .specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mats,.feat,.shades{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .req dl{grid-template-columns:1fr 1fr}
  .req dl .w{grid-column:1/-1}
  .row{grid-template-columns:40px 1fr auto;align-items:baseline;padding-block:var(--s5)}
  .row .p{grid-column:3;grid-row:1;text-align:right}
  form{padding:var(--s6)}
  footer{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s6)}
}

/* =========================================================
   ≥ 1000px — десктоп
   ========================================================= */
@media (min-width:1000px){
  :root{--header-h:76px}
  .burger,.menu{display:none!important}
  .top nav{display:flex;align-items:center;gap:var(--s1);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
  .top nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--muted);transition:color .2s,background-color .2s,box-shadow .3s}
  .top nav a[aria-current="page"]{background:var(--ice);color:var(--bg);box-shadow:0 0 22px var(--ice-glow)}
  .top nav .sep{width:1px;height:18px;margin-inline:var(--s2);background:var(--line-2)}
  .top .cta{display:inline-flex;min-height:44px}
  .logo .lsvg{width:100px}

  .hero{grid-template-columns:1.5fr 1fr;align-items:center;gap:var(--s7);padding-top:calc(var(--header-h) + var(--s8))}
  .archview{max-width:none}

  .head{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s7)}
  .head .lead{justify-self:end}

  .scene{height:600vh}
  .stick{grid-template-columns:1fr 1.15fr;grid-template-rows:1fr;align-items:center;gap:var(--s7);padding-top:var(--header-h)}
  .pv{order:2;height:min(80vh,740px)}
  .pl{order:1;gap:var(--s5);padding:0}
  .stage-t{min-height:2.1em}
  .readout{top:8%}

  .mats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .feat,.shades{grid-template-columns:repeat(4,minmax(0,1fr))}
  .order{grid-template-columns:1fr 1fr;align-items:start;gap:var(--s8)}
  .req{grid-template-columns:1fr 2fr;gap:var(--s7)}
  .hud{left:auto;right:var(--gutter);transform:translateY(12px)}
  .hud.on{transform:none}
}

/* =========================================================
   Hover — только для устройств с мышью (без «залипания» на тачах)
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .logo:hover .sup{transform:translateY(3px)}
  .top nav a:hover{color:var(--ink);background:rgba(159,216,255,.07)}
  .top nav a[aria-current="page"]:hover{background:var(--ice);color:var(--bg)}
  .btn:hover{border-color:var(--ice);color:var(--ice);box-shadow:0 0 0 1px rgba(159,216,255,.25),0 0 28px -4px var(--ice-glow);transform:translateY(-1px)}
  .btn.solid:hover{background:var(--ice);border-color:var(--ice);color:var(--bg);box-shadow:0 0 0 4px rgba(159,216,255,.14),0 10px 40px -6px var(--ice-glow)}
  .mini:hover{border-color:var(--ice);color:var(--ice);box-shadow:0 0 20px -6px var(--ice-glow)}
  .mat:hover,.feat article:hover{transform:translateY(-4px);border-color:rgba(159,216,255,.4);box-shadow:0 24px 60px -24px rgba(159,216,255,.35)}
  .xlink:hover{border-color:rgba(159,216,255,.4);box-shadow:0 20px 60px -24px rgba(159,216,255,.35)}
  .xlink:hover i{transform:translateX(4px);background:var(--ice);color:var(--bg)}
  .row:hover::before{opacity:1}
  .s:hover i{transform:translateY(-8px);box-shadow:inset -5px -8px 14px rgba(80,60,30,.25),inset 5px 5px 10px rgba(255,255,255,.5),0 10px 30px -6px rgba(159,216,255,.45)}
  .contact a.map:hover{color:var(--ink)}
}
.menu ul a:active,.xlink:active{background:rgba(159,216,255,.06)}

/* ---------- декоративное зерно: только десктоп и не lite ---------- */
@media (min-width:1000px){
  html:not(.lite) .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .rv,.rv.pend{transition:none;transform:none;opacity:1}
  .swap,.menu,.menu li{transition:none}
}