@font-face{font-family:Manrope;
src:url(./Manrope-variable.ttf)format("truetype");
font-weight:200 800;
font-display:swap}
:root{--orange:#ef7f1a;
--ink:#191b1d;
--paper:#f5f5f2;
--muted:#5c6066;
--line:#d9dde1;
--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:24px}
body{background:var(--paper);
color:var(--ink);
margin:0;
font-family:Manrope,Arial,sans-serif;
font-size:16px;
line-height:1.65}
a{color:inherit;
text-decoration:none}
a:hover{text-underline-offset:5px;
text-decoration:underline}
button,select{font:inherit}
a:focus-visible,summary:focus-visible,select:focus-visible{outline-offset:6px;
outline:3px solid}
img{max-width:100%;
display:block}
.wrap{max-width:1360px;
margin:auto;
padding-left:56px;
padding-right:56px}
.section{padding-top:96px;
padding-bottom:96px}
.dark,.dark-top{background:var(--ink);
color:#fff}
.header{justify-content:space-between;
align-items:center;
gap:30px;
padding-top:26px;
padding-bottom:26px;
display:flex}
.logo{width:250px;
height:auto}
.header nav{align-items:center;
gap:30px;
font-size:14px;
display:flex}
.outline{border:1px solid var(--orange);
border-radius:6px;
gap:25px;
padding:11px 20px;
display:flex}
.outline span{color:var(--orange)}
.mobile-nav{display:none}
.hero{grid-template-columns:1.15fr 1fr;
align-items:center;
padding-top:66px;
padding-bottom:28px;
display:grid;
position:relative;
overflow:hidden}
.hero-copy{z-index:2;
position:relative}
.eyebrow{letter-spacing:2px;
margin:0 0 24px;
font-size:11px;
font-weight:600}
.dot{background:var(--orange);
vertical-align:middle;
border-radius:50%;
width:6px;
height:6px;
margin-right:9px;
display:inline-block}
.muted{color:var(--muted)}
h1,h2,h3,p{margin-top:0}
h1{letter-spacing:-3px;
margin-bottom:30px;
font-size:clamp(46px,5.4vw,76px);
font-weight:700;
line-height:1.07}
h1 em{color:var(--orange);
font-style:normal}
.lead{color:#d9dde1;
max-width:530px;
font-size:18px;
line-height:1.6}
.actions{align-items:center;
gap:30px;
margin-top:36px;
display:flex}
.button{background:var(--orange);
color:var(--ink);
border-radius:6px;
justify-content:space-between;
align-items:center;
gap:35px;
padding:16px 24px;
font-size:14px;
font-weight:700;
text-decoration:none;
display:inline-flex}
.button:hover{filter:brightness(1.07);
text-decoration:none}
.button span{font-size:23px;
line-height:1}
.dark-button{background:var(--ink);
color:#fff}
.text-link{border-bottom:1px solid #666;
padding-bottom:4px;
font-size:13px}
.hero-art{align-self:center;
min-width:0;
position:relative}
.hero-art img{z-index:1;
filter:drop-shadow(0 18px 32px #f8790018);
width:100%;
position:relative}
.orbit{border:1px solid #ef7f1a40;
border-radius:50%;
width:110%;
height:44%;
position:absolute;
top:29%;
left:-5%;
transform:rotate(-30deg)}
.orbit.two{width:95%;
height:62%;
top:18%;
left:3%;
transform:rotate(50deg)}
.label{background:var(--ink);
letter-spacing:1px;
z-index:3;
border:1px solid #fff3;
border-radius:5px;
padding:5px 12px;
font-size:10px;
position:absolute}
.a{top:16%;
left:8%}
.b{top:26%;
right:0}
.c{bottom:15%;
left:2%}
.d{bottom:24%;
right:0}
.hero-foot{letter-spacing:1.6px;
color:#b5b8bc;
border-top:1px solid #fff2;
grid-column:1/-1;
justify-content:space-between;
margin-top:65px;
padding-top:24px;
font-size:9px;
display:flex}
.section-heading{justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:44px;
display:flex}
.section-heading>p{color:var(--muted);
margin-bottom:6px;
font-size:14px}
h2{letter-spacing:-1.6px;
margin-bottom:35px;
font-size:clamp(32px,3.7vw,50px);
line-height:1.14}
.section-heading h2{margin-bottom:0}
h3{letter-spacing:-.6px;
margin-bottom:16px;
font-size:24px;
line-height:1.25}
.service-grid{grid-template-columns:1fr 1fr;
gap:22px;
display:grid}
.service{border:1px solid var(--line);
background:#fff;
border-radius:9px;
padding:30px 34px;
scroll-margin-top:24px;
position:relative}
.service-top{justify-content:space-between;
height:102px;
display:flex}
.number{color:#a74800;
font-size:13px}
.service p{max-width:430px;
color:var(--muted);
font-size:15px}
.tags{flex-wrap:wrap;
gap:7px;
margin:22px 0;
display:flex}
.tags span{border:1px solid var(--line);
border-radius:3px;
padding:4px 9px;
font-size:10px}
.service details{border-top:1px solid var(--line);
font-size:13px}
.service summary{cursor:pointer;
justify-content:space-between;
padding:15px 0;
list-style:none;
display:flex}
.service summary::-webkit-details-marker{display:none}
.service details p{font-size:13px}
.service-link{justify-content:space-between;
padding-top:12px;
font-size:13px;
font-weight:600;
display:flex}
.service-link span{color:#a74800}
.art{width:145px;
height:90px;
position:relative}
.art i{background:linear-gradient(145deg,#ffc870,#ef7f1a 55%,#c84d04);
display:block;
position:absolute}
.bars{justify-content:flex-end;
align-items:flex-end;
gap:7px;
display:flex}
.bars i{width:22px;
height:30%;
position:relative;
transform:skewY(-15deg)}
.bars i:nth-child(2){height:48%}
.bars i:nth-child(3){height:70%}
.bars i:nth-child(4){height:94%}
.windows i{opacity:.7;
border:1px solid #ea7b1a;
width:90px;
height:65px;
top:5px;
left:30px}
.windows i:nth-child(2){transform:translate(-15px,8px)}
.windows i:nth-child(3){transform:translate(-30px,16px)}
.windows i:nth-child(4){display:none}
.nodes i{width:27px;
height:27px;
top:0;
left:60px;
transform:rotate(45deg)}
.nodes i:nth-child(2){top:35px;
left:25px}
.nodes i:nth-child(3){top:35px;
left:95px}
.nodes i:nth-child(4){top:70px}
.nodes:before{content:"";
border:1px solid #ef7f1a77;
width:75px;
height:75px;
position:absolute;
top:0;
left:38px;
transform:rotate(45deg)}
.layers i{opacity:.8;
width:90px;
height:40px;
top:5px;
left:25px;
transform:rotate(-20deg)skew(30deg)}
.layers i:nth-child(2){top:20px}
.layers i:nth-child(3){top:35px}
.layers i:nth-child(4){top:50px}
.three{grid-template-columns:repeat(3,1fr);
gap:42px;
margin-top:55px;
display:grid}
.three article{border-top:1px solid #fff3;
padding-top:20px}
.three h3{margin-top:20px;
font-size:22px}
.three p{color:#bdc0c4;
font-size:14px}
.accent{color:var(--orange);
font-size:14px}
.formats{grid-template-columns:1fr 1fr;
gap:22px;
display:grid}
.format{border-radius:9px;
flex-direction:column;
align-items:flex-start;
padding:40px;
display:flex}
.format h3{font-size:31px}
.format>p:not(.eyebrow){max-width:460px;
font-size:15px}
.format .eyebrow{font-size:9px}
.light{background:#eee9e1}
.format ul{margin:10px 0 30px;
padding-left:20px;
font-size:14px}
.format .button{margin-top:auto}
.solutions{background:#ecece8}
.solutions .lead{color:var(--muted)}
.solutions .button{margin-top:12px}
.solutions a:not(.button){border-top:1px solid #c9cbca;
grid-template-columns:1fr 1.2fr 30px;
align-items:center;
gap:35px;
padding:28px 0;
display:grid}
.solutions a:not(.button):last-child{border-bottom:1px solid #c9cbca}
.solutions strong{font-size:21px;
line-height:1.3}
.solutions a:not(.button) span{color:var(--muted);
font-size:14px}
.solutions b{font-size:27px;
font-weight:400}
.steps{grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:55px;
display:grid}
.steps span{border:1px solid #9e4b00;
border-radius:50%;
justify-content:center;
align-items:center;
width:40px;
height:40px;
font-size:13px;
display:inline-flex}
.steps h3{margin-top:23px;
font-size:21px}
.steps p{color:var(--muted);
font-size:14px}
.company{border-top:1px solid var(--line);
justify-content:space-between;
align-items:center;
gap:30px;
margin-top:65px;
padding-top:30px;
display:flex}
.company strong{font-size:19px}
.company strong span{color:#9e4b00;
padding:0 20px;
font-weight:400}
.company p{color:var(--muted);
margin:0;
font-size:13px}
.contact{background:var(--orange)}
.contact-grid{grid-template-columns:1.3fr 1fr;
align-items:center;
gap:60px;
display:grid}
.contact h2{font-size:clamp(36px,4.2vw,58px)}
.contact p{font-size:15px}
.contact-panel{background:#ffffff28;
border:1px solid #191b1d30;
border-radius:9px;
padding:30px}
.contact-panel label{margin-bottom:12px;
font-size:14px;
font-weight:600;
display:block}
.contact-panel select{background:var(--paper);
border:1px solid var(--ink);
width:100%;
color:var(--ink);
border-radius:4px;
padding:14px 10px;
font-size:14px}
.contact-panel .button{width:100%;
margin-top:16px}
.contact-panel .small{margin-top:18px;
margin-bottom:0;
font-size:11px}
.small a{text-decoration:underline}
.footer{justify-content:space-between;
align-items:center;
gap:35px;
padding-top:42px;
padding-bottom:42px;
font-size:11px;
display:flex}
.footer p{color:#c1c3c7;
margin:0}
.footer span{color:#c1c3c7}
.brand-caption{letter-spacing:0;
color:#fff;
margin-top:5px;
font-size:11px;
line-height:1.5;
display:block}
.skip{z-index:100;
background:#fff;
padding:10px;
position:fixed;
top:-100px;
left:20px}
.skip:focus{top:10px}
@media (width<=1000px){.wrap{padding-left:32px;
padding-right:32px}
.header nav{gap:20px}
.logo{width:205px}
.hero{padding-top:45px}
h1{font-size:52px}
.actions{gap:18px}
.three{gap:24px}
.format{padding:30px}
.format h3{font-size:27px}
.footer{flex-wrap:wrap}
.contact-grid{gap:35px}
}
@media (width<=700px){.wrap{padding-left:22px;
padding-right:22px}
.section{padding-top:62px;
padding-bottom:62px}
.header{padding-top:20px;
padding-bottom:20px}
.logo{width:190px}
.header nav{display:none}
.mobile-nav{font-size:13px;
display:block;
position:relative}
.mobile-nav summary{cursor:pointer}
.mobile-nav div{z-index:10;
background:#292c30;
border:1px solid #fff3;
width:190px;
padding:20px;
position:absolute;
top:35px;
right:0}
.mobile-nav a{padding:9px 0;
display:block}
.hero{padding-top:36px;
display:block}
.eyebrow{letter-spacing:1.3px;
font-size:9px}
h1{letter-spacing:-1.8px;
font-size:clamp(32px,9.3vw,60px)}
.lead{font-size:16px}
.actions{flex-wrap:wrap;
gap:20px}
.hero .button{min-width:230px}
.hero-art{max-width:390px;
margin:20px auto 0}
.hero-art img{height:auto}
.hero-foot{gap:20px;
margin-top:20px;
font-size:8px;
line-height:1.6}
.hero-foot span:last-child{display:none}
.section-heading{margin-bottom:30px;
display:block}
.section-heading>p{margin-top:20px}
h2{letter-spacing:-1px;
font-size:34px}
.service-grid,.formats,.three,.steps,.contact-grid{grid-template-columns:1fr}
.service{padding:25px}
.service h3{font-size:24px}
.service-top{height:90px}
.three{gap:26px;
margin-top:35px}
.three article{padding-top:18px}
.three h3{margin-top:10px}
.three p{margin-bottom:0}
.format{padding:28px}
.format h3{font-size:27px}
.format .button{gap:18px;
width:100%;
padding:16px 18px;
font-size:12px}
.solutions a:not(.button){grid-template-columns:1fr 25px;
gap:8px}
.solutions strong{font-size:20px}
.solutions a:not(.button) span{grid-area:2/1}
.solutions b{grid-area:1/2/3}
.steps{gap:24px;
margin-top:35px}
.steps article{grid-template-columns:40px 1fr;
gap:0 18px;
display:grid}
.steps h3{margin:4px 0 10px}
.steps p{grid-column:2;
margin:0}
.company{margin-top:45px;
display:block}
.company strong{font-size:16px}
.company strong span{padding:0 9px}
.company p{margin-top:18px}
.contact h2{font-size:38px}
.contact-grid{gap:24px}
.contact-panel{padding:23px}
.footer{grid-template-columns:1fr 1fr;
gap:22px;
display:grid}
.footer img{grid-column:1/-1;
width:190px}
.footer>a{grid-column:1/-1;
font-size:15px}
.footer span{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
@media print{.mobile-nav,.hero-art,.contact-panel{display:none}
.wrap{max-width:none}
.section{padding-top:30px;
padding-bottom:30px}
body{font-size:12px}
}


/* Layout extension, based on the 1.3 brand system. */
.eyebrow{font-size:12px}
.hero-foot{font-size:12px;
letter-spacing:1px}
.label{font-size:12px}
.hero-art img{filter:none}
.lead{max-width:580px}
.tags span{font-size:13px}
.service p,.format>p:not(.eyebrow),.three p,.steps p,.solutions a:not(.button) span,.contact p{font-size:16px}
.service-link,.service summary,.service details p,.text-link,.format ul,.company p{font-size:14px}
.format .eyebrow{font-size:12px}
.light{background:white;
border:1px solid var(--line)}
.header{gap:24px}
.header nav{gap:22px}
.header .logo{width:215px}
.header nav .login-link{border:1px solid #ffffff55;
border-radius:6px;
padding:10px 16px}
.header .brand-caption{font-size:11px}
.footer{display:grid;
grid-template-columns:1.3fr 1fr 1fr;
font-size:14px;
align-items:start}
.footer-address a{display:block;
margin-bottom:8px}
.footer-bottom{border-top:1px solid #ffffff33;
padding-top:24px;
padding-bottom:30px;
display:flex;
justify-content:space-between;
gap:24px;
font-size:14px;
color:#d9dde1}
.footer-bottom div{display:flex;
gap:24px;
flex-wrap:wrap}
.contact-panel .button{margin:0 0 24px}
.contact-panel p{margin-bottom:12px}
.page-header{padding-top:54px;
padding-bottom:52px}
.breadcrumb{font-size:14px;
margin-bottom:36px;
color:var(--muted)}
.page-header h1{font-size:clamp(36px,5vw,64px);
line-height:1.12;
letter-spacing:-2px;
max-width:920px}
.page-header .lead{color:var(--muted);
max-width:780px}
.selection{padding-top:0}
.choice{display:flex;
flex-direction:column;
padding:32px;
background:white;
border:1px solid var(--line);
border-radius:9px;
transition:border-color .2s,transform .2s}
.choice:hover{border-color:var(--orange);
transform:translateY(-3px);
text-decoration:none}
.choice-head{display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:32px}
.service-icon{width:44px;
height:44px;
color:#a74800}
.choice h2{font-size:26px;
letter-spacing:-.7px;
margin-bottom:16px}
.choice p{color:var(--muted);
max-width:470px}
.choice .choice-cta{border-top:1px solid var(--line);
padding-top:20px;
margin-top:auto;
display:flex;
justify-content:space-between;
font-size:14px;
font-weight:700}
.help-strip{display:flex;
justify-content:space-between;
gap:30px;
border-top:1px solid var(--line);
margin-top:40px;
padding-top:30px}
.help-strip p{margin:8px 0 0;
color:var(--muted)}
.help-strip a{white-space:nowrap;
align-self:center;
text-decoration:underline}
.detail-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:64px}
.detail-grid h2{font-size:34px}
.detail-grid ul{padding-left:22px}
.detail-grid li{padding:10px 0}
.result-panel{background:var(--ink);
color:white;
padding:36px;
border-radius:9px}
.result-panel .eyebrow{color:var(--orange)}
.detail-intro{display:grid;
grid-template-columns:1.3fr .7fr;
gap:60px;
align-items:center}
.detail-intro .service-icon{width:120px;
height:120px;
margin:auto}
.result-panel p{color:#d9dde1}
.faq{max-width:880px}
.faq details{border-top:1px solid var(--line);
padding:20px 0}
.faq summary{font-size:18px;
font-weight:600;
cursor:pointer}
.faq details p{margin:16px 0 0;
color:var(--muted)}
.login-layout{min-height:600px;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:start}
.login-layout h1{font-size:48px;
line-height:1.12;
letter-spacing:-1.6px}
.login-box{padding:36px;
background:#fff;
border:1px solid var(--line);
border-radius:9px}
.login-box label{display:block;
margin-bottom:8px;
font-size:14px;
font-weight:600}
.login-box input{font:inherit;
width:100%;
border:1px solid #8c9094;
border-radius:4px;
padding:13px 14px;
margin-bottom:22px;
background:white;
color:var(--ink)}
.password-row{position:relative}
.password-row input{padding-right:98px}
.password-toggle{position:absolute;
right:8px;
top:10px;
background:transparent;
border:0;
font-size:14px;
cursor:pointer;
padding:6px}
.login-box .button{border:0;
width:100%;
cursor:pointer}
.login-note{font-size:14px;
color:var(--muted);
margin-top:20px}
.login-status{padding:14px;
background:var(--paper);
border-left:3px solid var(--orange);
margin-top:20px}
.legal{max-width:880px;
min-height:480px}
.legal h1{font-size:clamp(32px,5vw,64px);
overflow-wrap:anywhere;
letter-spacing:-1.2px}
.legal-status{padding:24px;
border:1px solid var(--line);
background:white;
border-radius:8px}
button:focus-visible,input:focus-visible{outline:3px solid #a74800;
outline-offset:4px}
.art{display:none}
.service-top{height:76px}
.service-top .service-icon{width:48px;
height:48px}
.service{display:flex;
flex-direction:column}
.service-link{margin-top:auto}
.section-heading>p{font-size:16px}
.contact .small{font-size:14px}
.footer img{height:auto}
.mobile-nav summary{min-height:44px;
display:flex;
align-items:center}
.mobile-nav div{width:250px}
.mobile-nav a{font-size:14px}
.mobile-nav summary:after{content:'☰';
margin-left:10px}
.mobile-nav[open] summary:after{content:'×'}
.header>a:hover{text-decoration:none}

@media(max-width:1100px){.header nav{gap:14px}
.header nav .login-link{max-width:150px;
font-size:13px;
text-align:center}
.header .logo{width:190px}
.detail-intro{gap:32px}
.hero-foot{gap:30px}
}

@media(max-width:900px){.header nav{display:none}
.mobile-nav{display:block;
position:relative}
.mobile-nav div{position:absolute;
right:0;
top:44px;
background:#191b1d;
border:1px solid #ffffff55;
padding:20px;
z-index:10}
.mobile-nav a{display:block;
padding:8px}
.login-layout{gap:40px}
.footer{grid-template-columns:1fr 1fr}
.footer-address{grid-column:2}
.footer-about{grid-column:1/-1}
}

@media(max-width:700px){.hero-foot{font-size:12px}
.hero .eyebrow{font-size:11px;
letter-spacing:1px}
.hero-art{max-width:340px}
.hero-art .label{font-size:11px}
.hero-foot span:last-child{display:none}
.page-header{padding-top:32px;
padding-bottom:30px}
.page-header h1{letter-spacing:-1px;
font-size:36px}
.choice{padding:24px}
.choice h2{font-size:24px}
.help-strip,.detail-grid,.detail-intro,.login-layout{display:block}
.help-strip a{display:inline-block;
margin-top:20px;
white-space:normal}
.detail-intro>.service-icon{display:none}
.detail-grid .result-panel{margin-top:32px}
.footer{display:flex;
flex-direction:column;
gap:24px}
.footer-bottom{flex-direction:column;
gap:16px}
.footer-bottom div{gap:16px}
.login-layout h1{font-size:36px}
.login-box{padding:24px;
margin-top:32px}
.format .button{font-size:14px}
.contact h2{font-size:36px}
.hero h1{font-size:clamp(28px,8.8vw,58px)}
.hero .actions{gap:22px}
.service-grid{gap:18px}
.format .eyebrow{font-size:12px}
.section-heading>p br{display:none}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;
transition:none!important}
.choice:hover{transform:none}
}


/* Дополнения deltalab-ru (28.09.2026): адрес и режим работы в подвале — по docs/brand.md. */
.footer-address{font-style:normal}
.footer-address span{display:block;
margin-bottom:8px}
.footer-address span a{color:#c1c3c7}
/* Подзаголовок на странице входа лежит на светлом фоне, а не в тёмном hero. */
.login-layout .lead{color:var(--muted)}

.contacts-list{font-style:normal}
.contacts-list p{margin:0 0 16px;
font-size:18px;
line-height:1.5}
.contacts-list a{color:inherit}
.contacts-list .muted{font-size:13px;
letter-spacing:.04em;
text-transform:uppercase}
/* Первый экран главной (29.09.2026): контент прижат к шапке, а не отцентрован по высокому знаку,
   чтобы заголовок, текст и кнопка «Обсудить задачу» умещались в первый экран ноутбука (768–900 px).
   Только для широких экранов: на телефоне hero идёт блоком со своими отступами. */
@media (min-width:701px){.hero{padding-top:24px}
.hero-art{max-width:500px;
margin-left:auto}
.hero-art img{height:auto}
.hero h1{margin-bottom:24px}
.hero .actions{margin-top:30px}
.hero-foot{margin-top:40px}}

/* Политика конфиденциальности (29.09.2026): типографика юридического текста на /privacy. */
.legal-meta{color:var(--muted);
font-size:15px;
margin:-16px 0 32px}
.legal-summary{background:#fff;
border:1px solid var(--line);
border-radius:9px;
padding:22px 24px 18px;
margin:0 0 40px}
.legal-summary .eyebrow{margin-bottom:10px}
.legal-summary ul{margin:0;
padding-left:20px}
.legal h2{font-size:26px;
letter-spacing:-.6px;
line-height:1.2;
margin:44px 0 14px;
scroll-margin-top:24px}
.legal p,.legal li{font-size:17px;
line-height:1.65}
.legal p{margin-bottom:14px}
.legal ul{padding-left:20px;
margin:0 0 16px}
.legal li{margin:6px 0}
.legal a{color:inherit;
text-decoration:underline;
text-underline-offset:3px}
.legal-table{width:100%;
border-collapse:collapse;
font-size:15px;
line-height:1.5;
margin:8px 0 20px;
background:#fff;
border:1px solid var(--line)}
.legal-table th,.legal-table td{text-align:left;
vertical-align:top;
padding:12px 14px;
border-bottom:1px solid var(--line)}
.legal-table th{background:var(--paper);
font-weight:600;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted)}
.legal-table tr:last-child td{border-bottom:0}
.legal-foot{margin-top:48px;
padding-top:20px;
border-top:1px solid var(--line);
color:var(--muted);
font-size:15px}
@media (max-width:700px){.legal-table{display:block;
overflow-x:auto}
.legal-table th,.legal-table td{min-width:170px;
padding:10px 12px}
.legal p,.legal li{font-size:16px}}

/* Вход по номеру телефона (29.09.2026): код страны с флагом и маска +7 (000) 000-00-00, второй шаг — код из СМС. */
.login-step{border:0;
padding:0;
margin:0;
min-width:0}
.phone-field{display:flex;
align-items:stretch;
margin-bottom:22px}
.phone-field input{margin:0;
border-radius:0 4px 4px 0;
border-left:0}
.phone-country{position:relative;
flex:none}
.phone-country summary{list-style:none;
display:flex;
align-items:center;
gap:8px;
height:100%;
padding:0 12px 0 14px;
border:1px solid #8c9094;
border-radius:4px 0 0 4px;
background:var(--paper);
cursor:pointer;
font-weight:600;
white-space:nowrap}
.phone-country summary::-webkit-details-marker{display:none}
.phone-country summary:focus-visible{outline:3px solid #a74800;
outline-offset:2px;
position:relative;
z-index:1}
.phone-country .flag{width:22px;
height:16px;
border-radius:2px;
box-shadow:inset 0 0 0 1px #0002;
flex:none}
.phone-country .chev{width:12px;
height:12px;
color:var(--muted);
transition:transform .15s}
.phone-country[open] .chev{transform:rotate(180deg)}
.phone-country ul{position:absolute;
z-index:5;
top:calc(100% + 6px);
left:0;
min-width:230px;
margin:0;
padding:6px;
list-style:none;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 12px 32px #191b1d1f}
.phone-country li[role=option]{display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:6px;
cursor:pointer;
font-size:15px}
.phone-country li[aria-selected=true]{background:var(--paper);
font-weight:600}
.phone-country li[role=option] span{margin-left:auto;
color:var(--muted);
font-weight:400}
.phone-country-note{padding:6px 12px 4px;
font-size:12px;
color:var(--muted)}
.login-consent,.login-resend{font-size:14px;
color:var(--muted);
margin:16px 0 0}
.login-consent a{color:inherit;
text-decoration:underline}
.link-button{background:none;
border:0;
padding:0;
font:inherit;
color:var(--ink);
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer}
.link-button[disabled]{color:var(--muted);
text-decoration:none;
cursor:default}
.login-sent{margin:0 0 22px;
line-height:1.5}
#login-phone-echo{white-space:nowrap}
#code{letter-spacing:6px;
font-size:22px;
font-weight:600;
max-width:220px}
.login-box .button[disabled]{opacity:.55;
cursor:not-allowed}

/* Анимация первого экрана (утверждена 29.09.2026): текст появляется строками друг за другом, за знаком — поток частиц
   на canvas (site.js). Только при prefers-reduced-motion: no-preference. */
.hero-canvas{position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0}
.hero-flow .hero-copy,.hero-flow .hero-art,.hero-flow .hero-foot{position:relative;
z-index:1}
/* Правило сайта (29.09.2026): текст первого экрана каждой страницы появляется строками друг за другом — класс rise
   на контейнере с заголовочным текстом (первые шесть прямых потомков по очереди), rise-block — соседний блок целиком. */
@media (prefers-reduced-motion:no-preference){.rise>:nth-child(-n+6){animation:hero-rise .75s cubic-bezier(.2,.8,.2,1) both}
.rise>:nth-child(2){animation-delay:.1s}
.rise>:nth-child(3){animation-delay:.2s}
.rise>:nth-child(4){animation-delay:.3s}
.rise>:nth-child(5){animation-delay:.4s}
.rise>:nth-child(6){animation-delay:.5s}
.rise-block{animation:hero-rise .75s cubic-bezier(.2,.8,.2,1) both .35s}
@keyframes hero-rise{from{opacity:0;
transform:translateY(18px)}}}

/* Фокус на поле телефона обводит весь блок «код страны + номер», а не только ввод (29.09.2026). */
@supports selector(:has(a)){.phone-field:has(>input:focus-visible){outline:3px solid #a74800;
outline-offset:4px;
border-radius:4px}
.phone-field>input:focus-visible{outline:none}}

/* Уведомление о cookies (29.09.2026): тёмная плашка внизу слева, на телефоне — во всю ширину. */
.cookie-notice{position:fixed;
left:24px;
bottom:24px;
z-index:50;
max-width:440px;
padding:20px 22px;
background:var(--ink);
color:#fff;
border-radius:12px;
box-shadow:0 18px 48px #191b1d40;
display:flex;
flex-direction:column;
gap:14px;
font-size:14px;
line-height:1.55;
transform:translateY(16px);
opacity:0;
transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cookie-notice.is-shown{transform:none;
opacity:1}
.cookie-notice[hidden]{display:none}
.cookie-notice p{margin:0;
color:#d9dde1}
.cookie-notice a{color:#fff;
text-decoration:underline;
text-underline-offset:3px}
.cookie-notice .button{align-self:flex-start;
border:0;
cursor:pointer;
padding:12px 22px;
font-size:14px}
@media (max-width:700px){.cookie-notice{left:12px;
right:12px;
bottom:12px;
max-width:none;
padding:16px 18px}
.cookie-notice .button{align-self:stretch;
text-align:center}}
@media print{.cookie-notice{display:none}}

/* Наведение на подписи и знак первого экрана (утверждён вариант «Связь», 29.09.2026): от подписи к знаку прочерчивается
   оранжевая линия, знак подсвечивается. Только для устройств с мышью. */
@media (hover:hover){.hero-art .label{transition:transform .25s,color .25s,border-color .25s,background .25s,box-shadow .25s}
.hero-art img{transition:filter .35s,transform .35s}
.hero-links{position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
overflow:visible}
.hero-links line{stroke:var(--orange);
stroke-width:1.5px;
vector-effect:non-scaling-stroke;
stroke-dasharray:1;
stroke-dashoffset:1;
opacity:0;
transition:stroke-dashoffset .45s ease-out,opacity .2s}
.hover-link .label:hover{color:var(--orange);
border-color:var(--orange)}
.hover-link .label.a:hover~.hero-links .link-a,.hover-link .label.b:hover~.hero-links .link-b,.hover-link .label.c:hover~.hero-links .link-c,.hover-link .label.d:hover~.hero-links .link-d{stroke-dashoffset:0;
opacity:1}
.hover-link .label:hover~img{filter:drop-shadow(0 18px 32px #f8790018) drop-shadow(0 0 36px #ef7f1a55)}}

/* Шапка при прокрутке (29.09.2026): обычная в потоке уходит с первым экраном; плавающая копия (header-float, создаёт
   site.js) всегда fixed и спрятана за верхним краем, выезжает с переходом при движении вверх после первого экрана. */
header.dark{position:relative;
z-index:40}
header.dark.header-float{position:fixed;
top:0;
left:0;
right:0;
z-index:41;
opacity:0;
transform:translateY(-100%);
pointer-events:none;
box-shadow:0 8px 28px #191b1d40;
transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}
header.dark.header-float.is-shown{opacity:1;
transform:none;
pointer-events:auto}
@media (prefers-reduced-motion:reduce){header.dark.header-float{transition:none}}