/* ЛЁД · прототип «по мотивам lyod.pro»: чёрный фон, серебро, мягкий красноватый свет.
   Основа — стиль выбранного референса (OPUL): Inter + JetBrains Mono, белая «таблетка», стеклянные плашки. */
:root{
  --bg:#050506; --ink:#fff; --g300:#b4bbc5; --g500:#838e9e; --g700:#2a2d33;
  --silver:rgba(222,228,238,.55); --red:#a0706d; --post:#d03a35; --post-d:#8f1f1f;
  --glow:0 0 0 1px rgba(255,255,255,.07),0 30px 90px -30px rgba(150,162,184,0.29),0 0 70px -34px rgba(222,228,238,.55);
  --serif:'Inter',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --wrap:min(1180px,calc(100vw - 40px)); --r:26px; --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font:400 16px/24px var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:300;background:#fff;color:#000;padding:10px 14px;border-radius:99px}
.wrap{width:var(--wrap);margin-inline:auto}
.label{font:500 13px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--g300);text-align:center}
.label.left{text-align:left}
.h2{font:500 clamp(40px,4.6vw,84px)/1 var(--serif);letter-spacing:-.01em;text-align:center;margin-top:22px}
.h2.left{text-align:left}
.sub{color:var(--g300);max-width:46ch;margin:22px auto 0;text-align:center}.sub.left{text-align:left;margin-left:0}
.made{color:var(--g500);font:400 14px/1.4 var(--ui);margin:18px 0 28px}
.row-head{display:flex;justify-content:space-between;align-items:end;gap:24px}
.row-head .h2{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;font:600 15px/1 var(--ui);padding:16px 26px;border-radius:999px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pill i{display:inline-block;width:0;overflow:hidden;font-style:normal;transition:width .45s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 44px rgba(255,255,255,.14),0 10px 50px rgba(150,162,184,0.17)}
.pill:hover i{width:14px}
.pill.small{padding:12px 20px;font-size:14px}
.tlink{position:relative;font:500 20px/1.2 var(--ui);padding-bottom:4px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;scale:0 1;transform-origin:right;transition:scale .5s var(--ease)}
.tlink:hover::after{scale:1 1;transform-origin:left}
.arrows{display:flex;gap:10px}
.arrows button{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:grid;place-items:center;transition:background .4s,box-shadow .5s,transform .4s var(--ease)}
.arrows button:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 30px -6px rgba(150,162,184,0.35)}
.arrows button:active{transform:scale(.94)}
.arrows i{width:9px;height:9px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;rotate:45deg;margin-right:3px}
.arrows button:first-child i{rotate:-135deg;margin:0 0 0 3px}
[data-r]{opacity:0;translate:0 34px;transition:opacity 1s var(--ease),translate 1.2s var(--ease)}
[data-r].in{opacity:1;translate:0 0}

/* красная лампа гола */
.lamp{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;background:radial-gradient(60% 40% at 92% 0%,rgba(150,162,184,0.39),transparent 70%)}
.lamp.on{animation:lamp 1.1s var(--ease) 2}
@keyframes lamp{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* шапка */
.hd{position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:20px max(20px,calc((100vw - 1180px)/2));transition:background .5s,padding .5s var(--ease),translate .6s var(--ease)}
.hd.solid{background:rgba(5,5,6,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-block:12px}
.hd.solid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(222,228,238,.5),rgba(150,162,184,0.39),rgba(222,228,238,.5),transparent);background-size:200% 100%;animation:edge 9s linear infinite}
@keyframes edge{to{background-position:200% 0}}
.hd.hide{translate:0 -110%}
.hd nav{display:flex;gap:clamp(18px,2.2vw,38px);font:500 16px/1 var(--ui)}
.hd__r{display:flex;justify-content:flex-end;align-items:center;gap:clamp(14px,1.8vw,30px)}
.hd nav a{position:relative;opacity:.9;white-space:nowrap;transition:opacity .3s}
.hd nav a:hover,.hd nav a.is-on{opacity:1}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#fff;scale:0 1;transition:scale .45s var(--ease)}
.hd nav a:hover::after,.hd nav a.is-on::after{scale:1 1}
.logo img{height:44px;width:auto;filter:invert(1)}
.tg{display:flex;align-items:center;gap:2px;font:500 13px/1 var(--ui);color:var(--g500)}
.tg button{padding:6px 5px}.tg button.on{color:#fff}
.tg i{width:1px;height:12px;background:#444;margin:0 6px}
.goal{position:relative;display:grid;place-items:center;width:62px;height:46px}
.goal svg{width:62px;height:46px;overflow:visible}
.goal .net path{fill:none;stroke:rgba(222,228,238,.28);stroke-width:.8;transform-origin:50% 50%}
.goal:hover .net path,.goal.score .net{filter:drop-shadow(0 0 4px rgba(150,162,184,0.49))}
.goal.score .net{animation:net .9s var(--ease)}
@keyframes net{0%{transform:scaleY(1)}25%{transform:scaleY(1.25) scaleX(.92) translateY(4px)}60%{transform:scaleY(.94)}100%{transform:scaleY(1)}}
.goal .frame{transition:filter .4s}
.goal:hover .frame,.goal.score .frame{filter:drop-shadow(0 0 6px rgba(150,162,184,0.42))}
.goal__n{position:absolute;right:-6px;top:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--post);font:600 12px/22px var(--ui);text-align:center;scale:0;transition:scale .5s var(--ease)}
.goal__n.has{scale:1}
.puckfly{position:fixed;left:0;top:0;width:26px;height:12px;margin:-6px 0 0 -13px;border-radius:50%;z-index:200;pointer-events:none;background:radial-gradient(ellipse at 40% 30%,#8c929b,#1b1d21 70%);box-shadow:0 5px 0 -1px #0b0c0e,0 0 18px rgba(150,162,184,0.49)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1.5px;background:#fff;transition:.4s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:24px}
.burger[aria-expanded=true] span:nth-child(1){top:19px;rotate:45deg}.burger[aria-expanded=true] span:nth-child(2){top:19px;rotate:-45deg}
.menu{position:fixed;inset:0;z-index:95;background:rgba(5,5,6,.96);backdrop-filter:blur(10px);display:grid;place-content:center;gap:20px;text-align:center;font:500 30px/1.2 var(--serif);opacity:0;pointer-events:none;transition:opacity .45s}
.menu a{translate:0 14px;opacity:0;transition:translate .6s var(--ease),opacity .6s}
.menu.on{opacity:1;pointer-events:auto}.menu.on a{translate:0 0;opacity:1}
.menu.on a:nth-child(2){transition-delay:.04s}.menu.on a:nth-child(3){transition-delay:.08s}.menu.on a:nth-child(4){transition-delay:.12s}.menu.on a:nth-child(5){transition-delay:.16s}.menu.on a:nth-child(6){transition-delay:.2s}
@media(max-width:1180px){.hd{grid-template-columns:auto 1fr}.hd nav,.tg{display:none}.burger{display:block}.hd__l,.hd__r nav{display:none}.hd__r{justify-content:flex-end}.logo{order:-1}}
@media(max-width:1180px){.hd{grid-template-columns:auto 1fr}.logo img{height:38px}}

/* 1. слайдер */
.hero{position:relative;height:max(100svh,620px);overflow:hidden;isolation:isolate;background:radial-gradient(60% 70% at 85% 30%,rgba(150,162,184,0.08),transparent 70%),radial-gradient(50% 60% at 15% 90%,rgba(222,228,238,.07),transparent 70%)}
.hero__slides{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
.hero__slides.drag{cursor:grabbing}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 0s 1s}
.slide.on{opacity:1;visibility:visible;transition:opacity 1s var(--ease)}
.slide__img{position:absolute;overflow:hidden;inset:0;scale:1.08;transition:scale 2.4s var(--ease)}
.slide.on .slide__img{scale:1}
.slide__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);-webkit-user-drag:none;user-select:none}
.slide[data-layout=right] .slide__img{left:34%;-webkit-mask:linear-gradient(90deg,transparent,#000 36%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 36%,#000 88%,transparent)}
.slide[data-layout=full] .slide__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,6,.92),rgba(5,5,6,.35) 48%,transparent 75%),linear-gradient(transparent 70%,var(--bg))}
.slide__t{position:absolute;left:max(20px,calc((100vw - 1180px)/2));top:50%;translate:0 -50%;max-width:min(560px,46vw);z-index:2}
.slide__t>span,.slide__t>h2,.slide__t>em,.slide__t>a{display:block;opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate 1.1s var(--ease)}
.slide.on .slide__t>*{opacity:1;translate:0 0}
.slide.on .slide__t>*:nth-child(1){transition-delay:.25s}.slide.on .slide__t>*:nth-child(2){transition-delay:.4s}.slide.on .slide__t>*:nth-child(3){transition-delay:.55s}.slide.on .slide__t>*:nth-child(4){transition-delay:.7s}
.slide__t .k{font:500 clamp(18px,1.8vw,26px)/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--g300)}
.slide__t h2{font:600 clamp(48px,6.6vw,118px)/.92 var(--serif);margin:16px 0 14px;letter-spacing:-.015em;text-shadow:0 0 60px rgba(222,228,238,.12)}
.slide__t em{font:500 clamp(24px,2.6vw,42px)/1 var(--serif);font-style:normal;background:linear-gradient(90deg,#e8ebf0,#b4bbc5 60%,#8e98a8);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:34px}
.slide__t .pill{width:fit-content}
.hero__ui{position:absolute;left:max(20px,calc((100vw - 1180px)/2));right:max(20px,calc((100vw - 1180px)/2));bottom:34px;z-index:5;display:flex;align-items:center;gap:30px}
.dots{display:flex;gap:10px;flex:1;max-width:340px}
.dots button{position:relative;flex:1;height:22px}
.dots button::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;background:rgba(255,255,255,.2)}
.dots button i{position:absolute;left:0;top:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e8ebf0,#8e98a8);width:0}
.dots button.on i{animation:fill var(--dur,7s) linear forwards}
.dots.still button.on i{animation:none;width:100%}
@keyframes fill{to{width:100%}}
.hero__ctr{font:500 15px/1 var(--ui);color:var(--g500);font-variant-numeric:tabular-nums}.hero__ctr b{color:#fff;font-weight:500}
.hero__ui .arrows{margin-left:auto}
.cue{position:absolute;left:50%;bottom:10px;z-index:4;width:1px;height:26px;background:linear-gradient(#fff,transparent);opacity:.4}
@media(max-width:860px){
  .slide[data-layout=right] .slide__img,.slide__img{inset:0 0 38% 0;left:0}
  .slide[data-layout=right] .slide__img{-webkit-mask:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
  .slide[data-layout=full] .slide__img{inset:0 0 34% 0}
  .slide[data-layout=full] .slide__img::after{background:linear-gradient(transparent 55%,var(--bg))}
  .slide__t{top:auto;bottom:96px;translate:0;max-width:calc(100vw - 40px)}
  .slide__t h2{font-size:clamp(40px,12vw,64px)}
  .hero__ui{bottom:22px;gap:14px}.hero__ctr{display:none}.dots{max-width:none}
  .cue{display:none}
}

/* 2. категории */
.cats{padding:110px 0 100px;position:relative}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:44px max(20px,calc((100vw - 1180px)/2)) 40px;scroll-padding-inline:max(20px,calc((100vw - 1180px)/2));cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.cat{position:relative;flex:0 0 min(78vw,520px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;background:#0b0b0c;box-shadow:0 20px 60px -30px #000;transition:box-shadow .7s var(--ease),transform .7s var(--ease)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.6s var(--ease);-webkit-user-drag:none}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.82))}
.cat:hover{box-shadow:var(--glow);transform:translateY(-6px)}.cat:hover img{scale:1.06}
.cat__t{position:absolute;left:30px;right:30px;bottom:28px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:14px}
.cat__t h3{font:500 clamp(30px,3vw,46px)/1 var(--serif)}
.cat__t span{font:500 14px/1 var(--ui);color:var(--g300);display:inline-flex;gap:8px;align-items:center;translate:-8px 0;opacity:0;transition:.6s var(--ease)}
.cat:hover .cat__t span{translate:0 0;opacity:1}

/* 3. о коллекции */
.about{position:relative;padding:130px 0 140px;overflow:hidden;isolation:isolate}
.about__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 80% 40%,rgba(150,162,184,0.09),transparent 70%),radial-gradient(40% 50% at 10% 70%,rgba(222,228,238,.08),transparent 70%)}
.about__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,100px);align-items:center}
.about__t p:not(.label):not(.made){color:var(--g300);margin-top:22px;max-width:46ch}
.about__t .h2{margin-bottom:6px}
.about__ph{position:relative;height:min(660px,80vw)}
.ph{position:absolute;overflow:hidden;border-radius:var(--r);box-shadow:var(--glow);will-change:transform}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.a{left:0;top:0;width:72%;aspect-ratio:3/2;clip-path:inset(0 100% 0 0 round var(--r));transition:clip-path 1.6s var(--ease-io)}
.ph.b{right:0;bottom:0;width:58%;aspect-ratio:3/2;clip-path:inset(0 0 0 100% round var(--r));transition:clip-path 1.6s .2s var(--ease-io)}
.about__ph.in .ph{clip-path:inset(0 0 0 0 round var(--r))}
@media(max-width:860px){.about__grid{grid-template-columns:1fr}.about__ph{height:92vw}}

/* 4. галерея */
.gal{padding:120px 0 120px;position:relative;background:linear-gradient(var(--bg),#0b0b0c 20%,#0b0b0c 80%,var(--bg))}
.gal__ctr{display:flex;align-items:center;gap:14px;font:500 18px/1 var(--ui);font-variant-numeric:tabular-nums}
.gal__ctr b{font-weight:500}.gal__ctr span{color:var(--g500)}
.gal__ctr .arrows{margin-left:14px}
.led{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);opacity:.35;transition:opacity .2s}
.led.on{opacity:1}
.film{display:flex;gap:18px;overflow-x:auto;padding:46px max(20px,calc((100vw - 1180px)/2)) 20px;scroll-padding-inline:max(20px,calc((100vw - 1180px)/2));scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.film::-webkit-scrollbar{display:none}
.film.drag{cursor:grabbing;scroll-snap-type:none}
.film figure{flex:0 0 auto;height:min(64svh,560px);border-radius:20px;overflow:hidden;scroll-snap-align:center;position:relative;transition:box-shadow .7s var(--ease),transform .7s var(--ease);background:#0d0d0e}
.film figure img{height:100%;width:100%;object-fit:cover;-webkit-user-drag:none;transition:scale 1.4s var(--ease),filter .6s}
.film figure:hover,.film figure.is-cur{box-shadow:var(--glow)}
.film figure:hover img{scale:1.04}
.film figure.is-cur{transform:translateY(-6px)}
.film__bar{width:var(--wrap);height:2px;margin:26px auto 0;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.film__bar i{display:block;height:100%;width:20%;border-radius:2px;background:linear-gradient(90deg,#e8ebf0,#8e98a8);transform-origin:left;translate:var(--x,0) 0}
.belts{margin-top:80px;overflow:hidden;display:grid;gap:16px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.belt{display:flex;gap:16px;width:max-content;animation:belt 90s linear infinite}
.belt.rev{animation-direction:reverse;animation-duration:110s}
.belt:hover{animation-play-state:paused}
.belt img{height:clamp(120px,16vw,200px);width:auto;border-radius:14px;opacity:.78;transition:opacity .5s,filter .5s;filter:saturate(.85)}
.belt img:hover{opacity:1;filter:none}
@keyframes belt{to{transform:translateX(-50%)}}
@media(max-width:760px){.gal__ctr .arrows{display:none}.row-head{flex-wrap:wrap}.film figure{height:56svh}}

/* 5. персонализация */
.pers{position:relative;padding:130px 0;overflow:hidden;isolation:isolate;background:radial-gradient(50% 60% at 78% 50%,rgba(222,228,238,.07),transparent 70%)}
.rink{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:none;stroke-width:2;opacity:.9}
.rink line,.rink circle{stroke:rgba(150,162,184,0.14)}.rink .b{stroke:rgba(222,228,238,.1)}.rink circle:last-child{fill:rgba(150,162,184,0.17)}
.pers__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,100px);align-items:center}
.fields{display:flex;gap:26px;margin:34px 0 30px;flex-wrap:wrap}
.fields label{display:grid;gap:8px;font:500 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--g500)}
.fields input{width:min(260px,70vw);padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font:500 18px var(--ui);letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s,background .3s}
.fields input.n{width:100px}
.fields input:focus{outline:none;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.medal{position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center;perspective:1200px}
.puck{position:absolute;inset:6%;transform-style:preserve-3d;transform:rotateX(var(--rx,56deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,-12deg))}
.puck i{position:absolute;inset:0;border-radius:50%;background:#2b2e33}
.puck .top{background:conic-gradient(from calc(var(--ang,0)*1deg),#f6f8fa,#8f98a3,#e8ecf0,#4f565f,#d9dee3,#8f98a3,#f6f8fa);box-shadow:inset 0 0 0 12px rgba(0,0,0,.16),inset 0 0 70px rgba(0,0,0,.25)}
.puck .top::before{content:"";position:absolute;inset:11%;border-radius:50%;background:conic-gradient(from calc(var(--ang,0)*-1deg + 90deg),#1c1f23,#42484f,#16181b,#3a4046,#1c1f23);box-shadow:inset 0 0 40px #000}
.puck svg{position:absolute;inset:0;width:100%;height:100%}
.medal__sh{position:absolute;left:14%;right:14%;bottom:6%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,162,184,0.24),transparent)}
@media(max-width:860px){.pers__grid{grid-template-columns:1fr}.medal{order:-1;width:78%}}

/* 6. доставка */
.del{padding:100px 0 110px;background:linear-gradient(var(--bg),#0b0b0c 20%,#0b0b0c 80%,var(--bg))}
.del__g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,70px);margin-top:60px}
.del__g div{padding-top:22px;position:relative}
.del__g div::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;background:linear-gradient(90deg,#e8ebf0,#8e98a8)}
.del__g h3{font:500 clamp(26px,2.3vw,36px)/1.1 var(--serif);margin-bottom:12px}
.del__g p{color:var(--g300)}
@media(max-width:760px){.del__g{grid-template-columns:1fr}}

/* 7. контакты */
.cont{padding:120px 0 130px;position:relative;overflow:hidden;background:radial-gradient(45% 60% at 15% 60%,rgba(150,162,184,0.08),transparent 70%)}
.cont__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:start}
.cl{margin-top:26px}.cl .tlink{font-size:clamp(24px,2.4vw,36px);font-family:var(--serif)}
.soc{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:30px}
.soc a{font:500 14px/1 var(--ui);padding:12px 18px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background .4s,box-shadow .5s}
.soc a:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 30px -8px rgba(150,162,184,0.35)}
.form{display:grid;gap:18px}
.form label{display:grid;gap:8px;font:500 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--g500)}
.form input:not([type=checkbox]),.form textarea{width:100%;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font:400 16px var(--body);letter-spacing:0;text-transform:none;color:#fff;transition:border-color .3s,background .3s;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.form .chk{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font:400 14px/1.3 var(--body);color:var(--g300)}
.form .chk input{width:18px;height:18px;accent-color:#8e98a8}
.form .pill{width:fit-content}
.note{color:var(--g500);font-size:13px}.note.err{color:#e07a74}
.form .bad{border-color:#e07a74!important}
@media(max-width:860px){.cont__grid{grid-template-columns:1fr}}

/* подвал */
.ft{padding:70px 0 0;background:linear-gradient(var(--bg),#020203)}
.ft__grid{display:grid;grid-template-columns:1.6fr repeat(2,minmax(0,1fr));gap:40px}
.ft__logo{height:64px;width:auto}
.ft p{color:var(--g300);max-width:30ch;margin-top:20px;font-size:15px}
.ft h4{font:500 14px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
.ft a.l{display:block;width:fit-content;color:var(--g500);font:400 16px/1.25 var(--ui);margin-bottom:14px;transition:color .3s}
.ft a.l:hover{color:#fff}
.ft__copy{margin-top:70px;padding:22px 0 26px;text-align:center;font:400 14px/1 var(--ui);color:var(--g500);position:relative}
.ft__copy::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(222,228,238,.4),rgba(150,162,184,0.35),rgba(222,228,238,.4),transparent)}
@media(max-width:760px){.ft__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.ft__grid>div:first-child{grid-column:1/-1}}

/* просмотр фото */
.lb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,3,4,.96);color:#fff;overflow:hidden}
.lb[open]{display:grid;grid-template-columns:80px 1fr 80px;grid-template-rows:1fr auto;animation:lbin .5s var(--ease)}
@keyframes lbin{from{opacity:0}}
.lb::backdrop{background:#000}
.lb__f{grid-column:2;grid-row:1;display:grid;grid-template-rows:1fr auto;gap:14px;padding:30px 0 0;min-height:0;touch-action:pan-y}
.lb__f img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;border-radius:12px;min-height:0;transition:opacity .35s,translate .5s var(--ease);box-shadow:0 0 120px -30px rgba(150,162,184,0.32)}
.lb__f img.sw{opacity:0;translate:var(--dx,0) 0}
.lb__f figcaption{text-align:center;color:var(--g300);font-size:15px;min-height:24px}
.lb__x{position:absolute;right:22px;top:16px;z-index:3;font-size:38px;line-height:1;width:48px;height:48px;border-radius:50%;transition:background .3s}
.lb__x:hover{background:rgba(255,255,255,.1)}
.lb__nav{grid-row:1;align-self:center;width:52px;height:52px;border-radius:50%;justify-self:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);display:grid;place-items:center;transition:background .4s}
.lb__nav:hover{background:rgba(255,255,255,.08)}
.lb__nav.p{grid-column:1}.lb__nav.n{grid-column:3}
.lb__nav i{width:10px;height:10px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;rotate:45deg;margin-right:3px}
.lb__nav.p i{rotate:-135deg;margin:0 0 0 3px}
.lb__bar{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:26px;padding:16px 20px 22px;font:500 15px var(--ui);color:var(--g500)}
@media(max-width:700px){.lb[open]{grid-template-columns:1fr;grid-template-rows:1fr auto auto}.lb__f{grid-column:1;padding:60px 14px 0}.lb__nav{display:none}}

/* корзина-ворота */
@keyframes cin{from{translate:40px 0;opacity:0}}

/* курсор-шайба */
#toast{position:fixed;left:50%;bottom:24px;z-index:260;translate:-50% 20px;opacity:0;background:#fff;color:#000;padding:13px 22px;border-radius:999px;font:500 14px var(--ui);transition:.4s var(--ease);pointer-events:none}
#toast.on{opacity:1;translate:-50% 0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-r],.slide__t>*{opacity:1;translate:0 0}
  .belt{animation:none}.ph{clip-path:none!important}
  html{scroll-behavior:auto}
}
.dots.paused button.on i{animation-play-state:paused}
/* только для проверки снимков: ?shot=1 фиксирует высоту первого экрана */
[data-shot] .hero{height:900px}
