@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Spline+Sans:wght@400;500;600&display=swap"); :root{
--ink:#16243a;
--paper:#f5f3ee;
--accent:#e46f35;
--body:rgba(22,36,58,.85);
--muted:rgba(22,36,58,.58);
--faint:rgba(22,36,58,.42);
--line:rgba(22,36,58,.18);
--hair:rgba(22,36,58,.11);
} body.bg-warm {--paper:#f6f4ef} body.bg-slate{--paper:#e8ebee} body.bg-cool {--paper:#e9ecef} body.bg-dark { --paper:#16243a;
--ink:#f3f0e9;
--body:rgba(243,240,233,.82);
--muted:rgba(243,240,233,.60);
--faint:rgba(243,240,233,.42);
--line:rgba(243,240,233,.22);
--hair:rgba(243,240,233,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:'Spline Sans',Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%} .brand{
position:fixed;z-index:20;left:104px;top:172px;
transform-origin:left bottom;transform:rotate(-90deg);
font-family:'Onest',sans-serif;font-weight:600;
font-size:clamp(52px,6.2vw,86px);line-height:.78;letter-spacing:-.045em;
text-transform:uppercase;white-space:nowrap;color:var(--ink);
} .menu{
position:fixed;left:40px;top:272px;z-index:20;
display:flex;flex-direction:column;align-items:flex-start;gap:11px;
font-family:'Onest',sans-serif;font-size:clamp(22px,2.05vw,32px);
font-weight:400;line-height:1.02;text-transform:uppercase;letter-spacing:-.025em;
}
.menu a{position:relative;color:var(--ink);transition:color .2s ease}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1.5px;background:var(--accent);opacity:.9;transition:opacity .2s ease}
.menu a:hover{color:var(--accent)}
.menu a:hover::after{opacity:1} .burger{display:none;position:fixed;top:26px;left:22px;z-index:60;
width:32px;height:20px;padding:0;border:0;background:none;cursor:pointer;
flex-direction:column;align-items:flex-start;justify-content:space-between}
.burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
transition:transform .28s ease,opacity .2s ease,width .28s ease,background .2s ease}
.burger span:nth-child(2){width:58%;background:var(--accent)} .burger:hover span:nth-child(2){width:100%}
body.nav-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg);width:100%} .doc{
max-width:640px;
margin:0 auto 0 max(240px,19vw);
padding:120px 40px 120px;
}
.doc.wide{max-width:760px} .head{display:flex;align-items:flex-start;gap:22px;margin:0 0 22px}
.idx{
font-family:'Onest',sans-serif;font-weight:600;font-size:clamp(40px,5vw,64px);
line-height:.82;color:var(--accent);letter-spacing:-.04em;
}
.kicker{
font-family:'Onest',sans-serif;font-size:12px;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0 0 18px;
}
.kicker .dot{color:var(--accent)}
h1{
font-family:'Onest',sans-serif;font-weight:600;
font-size:clamp(38px,6.6vw,70px);line-height:1.0;letter-spacing:-.035em;
margin:0 0 20px;
}
h2{
font-family:'Onest',sans-serif;font-weight:600;
font-size:clamp(21px,2.8vw,29px);line-height:1.1;letter-spacing:-.02em;
margin:46px 0 14px;
}
.lede{
font-size:clamp(17px,1.8vw,21px);line-height:1.48;font-weight:400;
color:var(--ink);margin:0 0 10px;max-width:46ch;
}
p{font-size:16px;line-height:1.66;color:var(--body);margin:0 0 16px;max-width:62ch}
p.meta{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.ex{font-size:15px;color:rgba(22,36,58,.7);border-left:2px solid var(--line);padding-left:14px;margin:0 0 16px}
.ex b{color:var(--ink)} .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.tags li{
font-family:'Onest',sans-serif;font-size:12px;font-weight:500;
text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:6px 13px;
}
.link{
display:inline-block;font-family:'Onest',sans-serif;font-weight:600;
font-size:15px;color:var(--accent);border-bottom:1.5px solid transparent;transition:border-color .2s;
}
.link:hover{border-color:var(--accent)} .block{margin:30px 0}
.lab{
font-family:'Onest',sans-serif;font-size:12px;font-weight:600;
text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin:0 0 10px;
}
.rule{border:0;border-top:1px solid var(--line);margin:56px 0} ul.clean{list-style:none;margin:0;padding:0}
ul.clean li{
position:relative;padding:12px 0 12px 24px;font-size:16px;line-height:1.5;
color:var(--body);border-top:1px solid var(--hair);
}
ul.clean li:first-child{border-top:0}
ul.clean li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
ol.steps{list-style:none;margin:22px 0;padding:0;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--hair)}
ol.steps li h3{font-family:'Onest',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
ol.steps li p{margin:0 0 8px}
ol.steps li::before{
content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;
font-family:'Onest',sans-serif;font-size:14px;font-weight:600;color:var(--accent);
} figure{margin:30px 0}
figure img{
width:100%;height:auto;border:1px solid var(--hair);border-radius:3px;
box-shadow:0 26px 52px -32px rgba(22,36,58,.45);
}
figure.portrait{max-width:420px}
figcaption{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-top:10px} .pull{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:38px 0}
.pull .lab{color:var(--accent);margin-bottom:10px}
.pull p{font-family:'Onest',sans-serif;font-size:clamp(20px,2.6vw,27px);line-height:1.24;color:var(--ink);margin:0;font-weight:600;letter-spacing:-.02em;max-width:30ch} blockquote{margin:32px 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
blockquote p{font-size:18px;line-height:1.5;color:var(--ink);margin:0 0 12px;max-width:52ch}
blockquote cite{font-style:normal;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .contacts{list-style:none;margin:44px 0;padding:0}
.contacts li{border-top:1px solid var(--hair)}
.contacts li:last-child{border-bottom:1px solid var(--hair)}
.contacts a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:22px 0;transition:color .2s}
.contacts .k{font-family:'Onest',sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.contacts .v{font-family:'Onest',sans-serif;font-weight:600;font-size:clamp(18px,2.3vw,25px);letter-spacing:-.015em;text-align:right}
.contacts a:hover .v{color:var(--accent)} form.lead{display:flex;flex-direction:column;gap:22px;max-width:440px;margin:30px 0 0}
.sekhvan-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.formdone--error{color:#a32626}
form.lead input[type="text"],form.lead input[type="tel"],form.lead textarea{
font-family:'Spline Sans',sans-serif;font-size:15px;color:var(--ink);background:transparent;
border:0;border-bottom:1px solid var(--line);padding:11px 0;outline:none;transition:border-color .2s;width:100%}
form.lead input::placeholder,form.lead textarea::placeholder{color:var(--faint)}
form.lead input:focus,form.lead textarea:focus{border-color:var(--accent)}
form.lead textarea{resize:vertical;min-height:74px} .consent{display:flex;align-items:flex-start;gap:10px;max-width:480px;font-size:13px;line-height:1.35;color:var(--muted);cursor:pointer;margin-top:2px}
.consent input{width:17px;height:17px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.consent span{flex:1 1 auto;min-width:0}
.consent a{color:var(--muted);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.consent a:hover{color:var(--accent);border-color:var(--accent)} .btn-send{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
font-family:'Onest',sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.06em;
color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:0;
padding:14px 30px;cursor:pointer;position:relative;overflow:hidden;transition:color .3s ease}
.btn-send::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .34s ease;z-index:0}
.btn-send:hover{color:var(--paper)}
.btn-send:hover::before{transform:translateX(0)}
.btn-send .txt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px}
.btn-send .txt::after{content:"→";transition:transform .3s ease}
.btn-send:hover .txt::after{transform:translateX(4px)}
.formdone{display:block;font-family:'Onest',sans-serif;font-size:17px;color:var(--ink);margin:24px 0;line-height:1.4}
.formdone b{color:var(--accent)} .cta{margin:48px 0 12px}
.cta h2{margin:0 0 16px;max-width:22ch}
.cta a{
display:inline-block;font-family:'Onest',sans-serif;font-weight:600;font-size:16px;
color:var(--paper);background:var(--ink);padding:15px 26px;border-radius:999px;transition:background .2s;
}
.cta a:hover{background:var(--accent)}
.back{display:inline-block;margin-top:10px;font-family:'Onest',sans-serif;font-size:14px;color:var(--muted);transition:color .2s}
.back:hover{color:var(--accent)}
footer{
margin:80px 0 0;padding:36px 40px 48px;
border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:30px 56px;justify-content:space-between;
}
footer .f-col{display:flex;flex-direction:column;gap:9px;font-size:13px}
footer .f-head{font-family:'Onest',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);margin-bottom:3px}
footer .f-col a{color:var(--muted);transition:color .2s}
footer .f-col a:hover{color:var(--accent)}
footer .f-brand{font-family:'Onest',sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
footer .f-note{color:var(--faint);font-size:12px} @media(max-width:700px){ .brand{font-size:clamp(78px,22vw,104px);left:78px;top:262px}
.burger{display:flex} .menu{
position:fixed;inset:0;left:0;top:0;z-index:50;
background:var(--paper);
flex-direction:column;justify-content:center;align-items:flex-start;
gap:20px;padding:0 24px 0 40px;
font-size:clamp(34px,9vw,46px);
visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease;
}
body.nav-open .menu{visibility:visible;opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
.menu a::after{display:none}
.doc{margin:0;padding:78px 20px 44px 96px;max-width:none}
.doc.wide{max-width:none}
footer{margin:56px 0 0;padding:30px 20px 40px;gap:26px 40px}
.head{gap:16px}
p,.lede{max-width:none}
figure.portrait{max-width:none}
}