html:has(.hp-page){background:var(--deep); color-scheme:dark}
.hp-page{margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--deep); color:var(--sand);
  font:400 16px/1.6 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  --gutter:clamp(16px, 3vw, 40px);
  --steel:linear-gradient(135deg, var(--lamp-hi), var(--sand) 52%, color-mix(in oklab, var(--lamp-hi) 64%, var(--sand)));
  --acc:var(--lamp)}
.hp-page *, .hp-page *::before, .hp-page *::after{box-sizing:border-box}
.hp-page a{color:var(--lamp-top); text-decoration-thickness:1px; text-underline-offset:3px}
.hp-page :focus-visible{outline:2px solid var(--lamp-top); outline-offset:3px; border-radius:6px}
.hp-page img{display:block; max-width:100%}
.hp-page [hidden]{display:none!important}


.hp-page .hp-air{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 45% at 50% -8%, color-mix(in oklab, var(--lamp) 9%, transparent), transparent 70%),
             radial-gradient(38% 34% at -4% 46%, color-mix(in oklab, var(--lamp-lo) 7%, transparent), transparent 72%),
             radial-gradient(40% 36% at 104% 78%, color-mix(in oklab, var(--zhar) 5%, transparent), transparent 72%), var(--deep)}
.hp-page .hp-air::after{content:""; position:absolute; inset:0; background-image:var(--nw-зерно); opacity:.32; mix-blend-mode:overlay}


.hp-page .hp-wrap{width:min(1320px + clamp(0px, (100vw - 1600px) * .35, 360px), 100% - 2 * var(--gutter)); margin-inline:auto}
.hp-page .hp-col{width:min(760px, 100% - 2 * var(--gutter)); margin-inline:auto}


.hp-page .hp-bar{position:relative; z-index:20; flex:none}
.hp-page .hp-bar-in{display:flex; align-items:center; gap:40px; height:88px}
.hp-page .hp-logo{position:relative; flex:none; display:block; width:196px; height:44px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.9))}
.hp-page .hp-logo i{position:absolute; inset:0; -webkit-mask:url(img/word1.svg?v=a4c93eb1) left center / contain no-repeat; mask:url(img/word1.svg?v=a4c93eb1) left center / contain no-repeat;
  background:linear-gradient(180deg, #fbfcff 0%, #d9dbea 30%, #8e92b3 49%, #5b5f7d 52%, #e6e8f4 60%, #b4b8d3 78%, #f2f3fa 100%)}
.hp-page .hp-nav{display:flex; align-items:center; gap:34px}
.hp-page .hp-nav a{position:relative; display:flex; align-items:center; height:88px; text-decoration:none;
  font:700 14px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--sand); transition:color 180ms ease}
.hp-page .hp-nav a[aria-current]{color:var(--cream)}
.hp-page .hp-nav a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:24px; height:2px; border-radius:2px;
  background:var(--metal); box-shadow:0 0 12px color-mix(in oklab, var(--lamp) 60%, transparent)}
@media (hover:hover){ .hp-page .hp-nav a:hover{color:var(--cream)} }


.hp-page .hp-main{position:relative; z-index:1; flex:1 0 auto; padding:20px 0 0}
.hp-page .hp-crumbs{margin:0 0 6px; font:700 11.5px/1 var(--font); letter-spacing:.16em; text-transform:uppercase}
.hp-page .hp-crumbs a{color:var(--sand-dim); text-decoration:none; transition:color 160ms ease}
.hp-page .hp-crumbs a::before{content:"\2190"; margin-right:8px}
@media (hover:hover){ .hp-page .hp-crumbs a:hover{color:var(--cream)} }
.hp-page .hp-title{margin:0; color:var(--cream); font:700 clamp(26px, 4vw, 38px)/1.12 var(--font-display); letter-spacing:.06em; text-transform:uppercase}
.hp-page .hp-sub{margin:8px 0 0; color:var(--sand-dim); font-size:15px}


.hp-page .hp-hero{display:flex; flex-direction:column; align-items:center; text-align:center}
.hp-page .hp-obj{position:relative; width:120px; height:132px; display:grid; place-items:start center; isolation:isolate}
.hp-page .hp-obj img{position:relative; z-index:1; width:120px; height:120px; object-fit:contain;
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.6)) drop-shadow(0 0 30px color-mix(in oklab, var(--acc) 30%, transparent))}
.hp-page .hp-obj i{position:absolute; z-index:0; left:12%; right:12%; bottom:2px; height:16px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.8), color-mix(in oklab, var(--acc) 10%, transparent) 70%, transparent)}
.hp-page .hp-hero .hp-title{margin-top:6px}


.hp-page .hp-jump{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0 0}
.hp-page .hp-jump a{display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; text-decoration:none;
  font:600 13px/1 var(--font); color:var(--cream); border:1px solid transparent;
  background:var(--nw-лоск) padding-box, var(--nw-кожа) padding-box, var(--nw-кромка-тихо) border-box;
  transition:transform 130ms var(--ease-out)}
.hp-page .hp-jump a:active{transform:scale(.97)}


.hp-page .hp-sec{scroll-margin-top:20px; margin:18px 0 0; padding:22px 24px 20px; border-radius:14px; border:1px solid transparent;
  background:var(--nw-лоск) padding-box, var(--nw-кожа) padding-box, var(--nw-кромка) border-box;
  box-shadow:var(--nw-фаска), 0 24px 40px -28px rgba(0,0,0,.95)}
.hp-page .hp-sec:target{box-shadow:var(--nw-фаска), 0 24px 40px -28px rgba(0,0,0,.95), 0 0 0 1px color-mix(in oklab, var(--lamp) 55%, transparent)}
.hp-page .hp-sec h2{margin:0 0 10px; color:var(--cream); font:700 19px/1.3 var(--font)}
.hp-page .hp-sec p{margin:0 0 10px; max-width:66ch}
.hp-page .hp-sec p:last-child{margin-bottom:0}


.hp-page .hp-tabs{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:12px}
.hp-page .hp-tab{padding:2px 0 2px 14px; border-left:2px solid color-mix(in oklab, var(--lamp) 38%, transparent); max-width:66ch}
.hp-page .hp-tab b{display:block; margin-bottom:2px; color:var(--cream); font-weight:700}
.hp-page .hp-find{display:block; width:min(100%, 360px); height:40px; margin:0 0 14px; padding:0 14px; border-radius:10px; border:1px solid transparent;
  color:var(--cream); font:500 15px/1 var(--font); outline:none;
  background:var(--nw-лоск) padding-box, var(--nw-кожа) padding-box, var(--nw-кромка-тихо) border-box}
.hp-page .hp-find::placeholder{color:var(--sand-dim)}
.hp-page .hp-find:focus-visible{outline:2px solid var(--lamp-top); outline-offset:2px}


.hp-page .hp-cta{margin:28px 0 0; text-align:center}
.hp-page .hp-go{display:inline-flex; align-items:center; justify-content:center; width:min(100%, 320px); height:52px; padding:0 28px; border-radius:12px; text-decoration:none;
  font:800 13px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--on-lamp); background:var(--metal);
  box-shadow:var(--nw-хром), 0 14px 30px -14px color-mix(in oklab, var(--lamp) 80%, transparent);
  transition:transform 130ms var(--ease-out)}
.hp-page .hp-go:active{transform:scale(.97)}
.hp-page a.hp-go{color:var(--on-lamp)}


.hp-page .hp-cards{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px}
.hp-page .hp-card{--corner:20px; --curl:40px; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:16px;
  height:100%; min-height:96px; padding:16px 22px 16px 18px; border-radius:14px; border:1px solid transparent; text-decoration:none; min-width:0;
  background:radial-gradient(55% 90% at 12% 50%, color-mix(in oklab, var(--acc) 15%, transparent), transparent 72%) padding-box,
             var(--nw-лоск) padding-box, var(--nw-кожа) padding-box, var(--nw-кромка-тихо) border-box;
  box-shadow:var(--nw-фаска), 0 20px 36px -24px rgba(0,0,0,.95);
  transition:translate 160ms var(--ease-out)}
.hp-page .hp-card::before{content:""; position:absolute; inset:5px; z-index:2; pointer-events:none; opacity:.42; background:var(--steel);
  -webkit-mask:url(img/ramka/lv.webp?v=97ce4dae) 0 0 / var(--corner) var(--corner) no-repeat, url(img/ramka/pv.webp?v=97ce4da8) 100% 0 / var(--corner) var(--corner) no-repeat,
    url(img/ramka/ln.webp?v=97ce4da8) 0 100% / var(--corner) var(--corner) no-repeat, url(img/ramka/pn.webp?v=97ce4da6) 100% 100% / var(--corner) var(--corner) no-repeat,
    url(img/ramka/verh.webp?v=97ce47f4) 50% 0 / var(--curl) auto no-repeat;
  mask:url(img/ramka/lv.webp?v=97ce4dae) 0 0 / var(--corner) var(--corner) no-repeat, url(img/ramka/pv.webp?v=97ce4da8) 100% 0 / var(--corner) var(--corner) no-repeat,
    url(img/ramka/ln.webp?v=97ce4da8) 0 100% / var(--corner) var(--corner) no-repeat, url(img/ramka/pn.webp?v=97ce4da6) 100% 100% / var(--corner) var(--corner) no-repeat,
    url(img/ramka/verh.webp?v=97ce47f4) 50% 0 / var(--curl) auto no-repeat;
  transition:opacity 160ms ease}
.hp-page .hp-ic{position:relative; z-index:1; flex:none; display:grid; place-items:center; width:48px; height:48px}
.hp-page .hp-ic img{width:48px; height:48px; object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.6)) drop-shadow(0 0 16px color-mix(in oklab, var(--acc) 30%, transparent))}
.hp-page .hp-ct{position:relative; z-index:3; display:flex; flex-direction:column; gap:4px; min-width:0}
.hp-page .hp-ct b{color:var(--cream); font:700 18px/1.15 var(--font-display); letter-spacing:.005em}
.hp-page .hp-ct small{font:700 11.5px/1.25 var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--sand)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hp-page .hp-card:hover{translate:0 -3px}
  .hp-page .hp-card:hover::before{opacity:.95}
}


.hp-page .hp-foot{position:relative; z-index:1; flex:none; margin-top:40px; border-top:1px solid var(--nw-нить); background:linear-gradient(180deg, transparent, rgba(0,0,0,.35))}
.hp-page .hp-foot-in{display:flex; align-items:center; gap:28px; min-height:96px; font-size:13px; color:var(--sand-dim)}
.hp-page .hp-foot-word{flex:none; width:150px; height:34px; background:var(--sand);
  -webkit-mask:url(img/word1.svg?v=a4c93eb1) left center / contain no-repeat; mask:url(img/word1.svg?v=a4c93eb1) left center / contain no-repeat}
.hp-page .hp-foot-bot a{color:var(--cream); text-decoration:none}
.hp-page .hp-foot nav{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 22px}
.hp-page .hp-foot nav a{color:inherit; text-decoration:none; transition:color 180ms ease}
@media (hover:hover){ .hp-page .hp-foot nav a:hover{color:var(--cream)} }

@media (prefers-reduced-motion:reduce){
  .hp-page .hp-nav a, .hp-page .hp-crumbs a, .hp-page .hp-jump a, .hp-page .hp-go, .hp-page .hp-card, .hp-page .hp-card::before, .hp-page .hp-foot nav a{transition:none}
}

@media (max-width:900px){
  .hp-page .hp-bar-in{gap:24px}
  .hp-page .hp-logo{width:170px; height:38px}
  .hp-page .hp-nav{gap:20px}
  .hp-page .hp-nav a{font-size:12.5px; letter-spacing:.1em}
  .hp-page .hp-foot-in{flex-wrap:wrap; gap:12px 28px; padding-block:16px}
}
@media (max-width:640px){
  .hp-page .hp-bar-in{gap:12px; height:64px}
  .hp-page .hp-logo{width:116px; height:28px}
  .hp-page .hp-nav{gap:14px; margin-left:auto}
  .hp-page .hp-nav a{height:64px; font-size:11px; letter-spacing:.08em}
  .hp-page .hp-nav a[aria-current]::after{bottom:16px}
  .hp-page .hp-main{padding-top:12px}
  .hp-page .hp-cards{grid-template-columns:1fr; margin-top:20px}
  .hp-page .hp-sec{padding:18px 16px 16px}
  .hp-page .hp-foot{margin-top:56px}
  .hp-page .hp-foot nav{margin-left:0; justify-content:flex-start}
}