

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=5666ac90) left center / contain no-repeat; mask:url(img/word1.svg?v=5666ac90) 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-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=5666ac90) left center / contain no-repeat; mask:url(img/word1.svg?v=5666ac90) 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-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-sec{padding:18px 16px 16px}
  .hp-page .hp-foot{margin-top:56px}
  .hp-page .hp-foot nav{margin-left:0; justify-content:flex-start}
}


.hp-page .hp-theme{flex:none; margin-left:auto; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:var(--cream); background:var(--stone)}
.hp-page .hp-theme svg{width:20px; height:20px}
.hp-page .hp-theme .sun, .hp-page .hp-theme .moon{transform-origin:12px 12px; transition:opacity 220ms ease, transform 360ms var(--ease-out, ease)}
html[data-theme="dark"] .hp-page .hp-theme .moon, html:not([data-theme="dark"]) .hp-page .hp-theme .sun{opacity:0; transform:rotate(-70deg) scale(.5)}
.hp-page .hp-theme:focus-visible{outline:2px solid var(--nw-lime-line, var(--lamp)); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hp-page .hp-theme .sun, .hp-page .hp-theme .moon{transition:none}}



.hp-page .hp-h3{margin:16px 0 8px; color:var(--cream); font:700 15px/1.3 var(--font)}
.hp-page .hp-regions{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px}
.hp-page .hp-regions li{display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border-radius:999px; font:600 13.5px/1.2 var(--font); color:var(--cream);
  background:color-mix(in oklab, var(--cream) 7%, transparent)}
.hp-page .hp-regions small{font:600 11.5px/1 var(--font); color:var(--sand-dim); letter-spacing:.04em}

.hp-page .hp-more{margin:18px 0 0; text-align:center; font-size:14px}


@media (max-width:640px){
  :root body.hp-page .hp-bar-in{flex-wrap:wrap; align-items:center; height:auto; gap:0 12px; padding-top:6px}
  :root body.hp-page .hp-logo{order:1; margin:8px 0}
  :root body.hp-page .hp-theme{order:2; margin-left:auto}
  :root body.hp-page .hp-nav{order:3; flex:0 0 100%; margin-left:0; gap:0 22px; overflow-x:auto; scrollbar-width:none}
  :root body.hp-page .hp-nav::-webkit-scrollbar{display:none}
  :root body.hp-page .hp-nav a{height:44px; flex:none; white-space:nowrap; font-size:15px}
  :root body.hp-page .hp-nav a[aria-current]::after{bottom:6px}
}



.hp-page .hp-col-wide{width:min(880px, 100% - 2 * var(--gutter))}
.hp-page .hp-col-wide .hp-title{margin-bottom:0}


.hp-page .hp-search{margin:18px 0 0}
.hp-page .hp-search-box{position:relative; display:block; margin:0}
.hp-page .hp-search-ic{position:absolute; left:16px; top:50%; width:20px; height:20px; margin-top:-10px; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; color:var(--sand); pointer-events:none}
.hp-page .hp-find-main{width:100%; height:52px; margin:0; padding:0 48px 0 46px; border-radius:var(--r-lg); font-size:16px}
.hp-page .hp-find-main::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; display:none}

.hp-page .hp-search-x{position:absolute; right:8px; top:50%; width:36px; height:36px; margin-top:-18px; padding:0; border:0;
  border-radius:50%; background:transparent; color:var(--sand); cursor:pointer}
.hp-page .hp-search-x::before, .hp-page .hp-search-x::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px;
  margin:-1px 0 0 -7px; border-radius:1px; background:currentColor}
.hp-page .hp-search-x::before{transform:rotate(45deg)}
.hp-page .hp-search-x::after{transform:rotate(-45deg)}
@media (hover:hover){ .hp-page .hp-search-x:hover{color:var(--cream)} }


.hp-page .hp-block{margin:30px 0 0}
.hp-page .hp-h2{margin:0 0 12px; color:var(--cream); font:700 20px/1.2 var(--font); letter-spacing:-.01em}


.hp-page .hp-asks{border-radius:var(--r-lg); background:var(--stone); overflow:hidden}
.hp-page .hp-ask + .hp-ask{border-top:1px solid var(--seam)}
.hp-page .hp-ask summary{display:flex; align-items:center; gap:16px; min-height:56px; padding:14px 18px; cursor:pointer;
  list-style:none; color:var(--cream); font:600 16px/1.35 var(--font); -webkit-tap-highlight-color:transparent}
.hp-page .hp-ask summary::-webkit-details-marker{display:none}
.hp-page .hp-ask summary::after{content:""; flex:none; width:8px; height:8px; margin-left:auto; border-right:2px solid var(--sand);
  border-bottom:2px solid var(--sand); transform:rotate(45deg); translate:0 -3px; transition:transform 180ms var(--ease-out)}
.hp-page .hp-ask[open] summary::after{transform:rotate(-135deg); translate:0 3px}
.hp-page .hp-ask summary:focus-visible{outline-offset:-3px}
.hp-page .hp-ans{padding:0 18px 18px; color:var(--sand); font-size:15px; line-height:1.6}
.hp-page .hp-ans p{margin:0 0 10px; max-width:66ch}
.hp-page .hp-ans p:last-child{margin-bottom:0}
@media (hover:hover){ .hp-page .hp-ask summary:hover{background:color-mix(in oklab, var(--cream) 4%, transparent)} }
.hp-page .hp-more-row{margin:14px 2px 0; color:var(--sand); font-size:14px; line-height:1.5}


.hp-page .hp-sec .hp-asks{margin:2px -24px -20px; border-radius:0 0 14px 14px; background:transparent}
.hp-page .hp-sec .hp-ask{border-top:1px solid var(--seam)}
.hp-page .hp-sec .hp-ask summary{padding-inline:24px}
.hp-page .hp-sec .hp-ans{padding-inline:24px}


.hp-page .hp-abc{display:grid; gap:2px; margin:0 -6px 4px}
.hp-page .hp-abc[hidden]{display:none}
.hp-page .hp-abc-row{display:flex; flex-wrap:wrap; gap:2px}
.hp-page .hp-abc-row + .hp-abc-row{margin-top:4px; padding-top:4px; border-top:1px solid var(--seam)}
.hp-page .hp-abc a{display:grid; place-items:center; min-width:36px; height:36px; padding:0 6px; border-radius:var(--r);
  color:var(--cream); font:600 14px/1 var(--font); text-decoration:none}
@media (hover:hover){ .hp-page .hp-abc a:hover{background:var(--stone)} }
.hp-page .hp-group{margin:14px 0 0; scroll-margin-top:12px}
.hp-page .hp-letter{margin:0 0 4px; padding:0 10px; color:var(--sand); font:700 13px/1.2 var(--font)}
.hp-page .hp-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 6px}
.hp-page .hp-list a{display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 10px; border-radius:var(--r);
  color:var(--cream); font:500 15px/1.25 var(--font); text-decoration:none}
@media (hover:hover){ .hp-page .hp-list a:hover{background:var(--stone)} }
.hp-page .hp-ico{flex:none; display:grid; place-items:center; width:28px; height:28px}
.hp-page .hp-ico img{width:28px; height:28px; object-fit:contain}
.hp-page .hp-name{min-width:0; overflow-wrap:anywhere}
@media (min-width:600px){
  .hp-page .hp-list{grid-template-columns:repeat(3, minmax(0, 1fr))}
}


.hp-page .hp-none{margin:28px 0 0; padding:18px; border-radius:var(--r-lg); background:var(--stone); color:var(--sand); font-size:15px; line-height:1.5}
.hp-page .hp-none a{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  .hp-page .hp-ask summary::after{transition:none}
}
@media (max-width:640px){
  .hp-page .hp-col-wide .hp-title{font-size:30px}
  .hp-page .hp-block{margin-top:26px}
  .hp-page .hp-sec .hp-asks{margin:2px -16px -16px}
  .hp-page .hp-sec .hp-ask summary, .hp-page .hp-sec .hp-ans{padding-inline:16px}
}


.hp-page .hp-sign{display:flex; align-items:center; filter:none; text-decoration:none; color:var(--cream)}
.hp-page .hp-sign svg{display:block; height:100%; width:auto; max-width:100%}
.hp-page .hp-sign b{display:block; font:900 26px/1 var(--font-display); letter-spacing:.01em; color:inherit; white-space:nowrap}
.hp-page .hp-foot-word.hp-sign{-webkit-mask:none; mask:none; background:none; color:var(--sand)}
.hp-page .hp-foot-word.hp-sign b{font-size:20px}

html[data-own]:not([data-own~="ramka"]) .hp-page .hp-card::before{content:none}

.hp-page .hp-acts{display:flex; align-items:center; gap:10px; margin-left:auto}
.hp-page .hp-btn{display:inline-flex; align-items:center; height:48px; padding:0 18px; border-radius:13px; text-decoration:none; white-space:nowrap;
  font:700 14px/1 var(--font); color:var(--cream); background:var(--stone-2); box-shadow:inset 0 0 0 1px var(--nw-нить-ярко, var(--seam-2))}
@media (hover:hover){ .hp-page .hp-btn:hover{box-shadow:inset 0 0 0 1px var(--lamp)} }
.hp-page .hp-btn:focus-visible{outline:2px solid var(--lamp-top, var(--lamp)); outline-offset:2px}

.hp-page:has(.hp-logo.hp-sign) :is(h1, h2){font-weight:900; letter-spacing:0; text-transform:none}
.hp-page:has(.hp-logo.hp-sign) .hp-go{border-radius:999px; font:900 16px/1 var(--font-display); letter-spacing:0; text-transform:none;
  color:var(--nw-cta-ink, var(--on-lamp)); background:var(--nw-cta, var(--metal)); box-shadow:0 3px 0 var(--nw-cta-lip, transparent)}

@media (max-width:640px){
  :root body.hp-page .hp-acts{order:2; margin-left:auto}
  :root body.hp-page .hp-btn{height:44px; padding:0 14px}
}
