:root{
    --ink:#1E2633;          /* графит из презентации */
    --ink-2:#2A3242;        /* карточки на тёмном */
    --paper:#F4F6F2;
    --panel:#FCFDFB;
    --band:#EAEEE7;         /* чередующиеся светлые секции */
    --rule:#DDE2DA;
    --text:#1E2633;
    --muted:#5A6577;
    --accent:#17814A;       /* зелёный для текста на светлом */
    --green:#42D97C;        /* фирменный зелёный */
    --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
}

html,body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
html{scroll-behavior:smooth; scroll-padding-top:76px;}
*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); background:var(--paper); color:var(--text); line-height:1.6; font-size:17px;}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.container{max-width:1160px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--sans); letter-spacing:-.02em;}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px;}
.skip:focus{left:8px}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(244,246,242,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.mark{width:40px; height:40px; border-radius:9px; background:var(--green); color:var(--ink); display:grid; place-items:center; flex:none;}
.pxmark{width:24px; height:auto; display:block;}
.brand-title{display:flex; flex-direction:column; line-height:1.1}
.brand-title b{font-size:16px; letter-spacing:.08em; color:var(--ink); font-weight:800;}
.brand-title span{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:3px; font-weight:600;}
nav ul{display:flex; gap:22px; list-style:none; padding:0; margin:0; align-items:center;}
nav a{white-space:nowrap; font-size:14.5px; font-weight:500; color:var(--text); padding:6px 0; border-bottom:2px solid transparent; display:block;}
nav a:hover{border-bottom-color:var(--green)}
.nav-actions{display:flex; align-items:center; gap:12px;}
.cta-mail{font-size:14.5px; padding:11px 20px; border-radius:10px; background:var(--green); color:var(--ink); font-weight:700; white-space:nowrap; transition:filter .18s ease;}
.cta-mail:hover{filter:brightness(.94)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--rule); border-radius:10px; background:var(--panel); cursor:pointer; align-items:center; justify-content:center; padding:0;}
.burger span,.burger span::before,.burger span::after{display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:transform .2s ease, background .2s ease;}
.burger span::before,.burger span::after{content:""; position:absolute; left:0;}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font-weight:700; font-size:16px; font-family:inherit; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease,filter .18s ease;}
.btn:hover{background:rgba(255,255,255,.1)}
.btn.primary{background:var(--green); border-color:var(--green); color:var(--ink);}
.btn.primary:hover{filter:brightness(.94)}

/* Hero */
.hero{padding:72px 0 0; background:var(--ink); color:#fff;}
.hero-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:stretch;}
.hero-text{padding-bottom:56px; align-self:center;}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--green);}
h1{margin:22px 0 20px; font-weight:800; font-size:clamp(34px,4.6vw,60px); line-height:1.06; letter-spacing:-.025em; max-width:16ch;}
h1 em{font-style:normal; color:var(--green);}
.lead{margin:0; color:rgba(255,255,255,.82); font-size:clamp(18px,1.5vw,22px); max-width:46ch; line-height:1.5;}
.hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{border-radius:18px 18px 0 0; background:var(--green) url(assets/hero-logo.png) center/cover no-repeat; min-height:340px;}

.kpi{border-top:1px solid rgba(255,255,255,.14); padding:30px 0 38px;}
.kpi-title{margin:0 0 18px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.kpi-item{padding:0 26px; border-left:1px solid rgba(255,255,255,.14);}
.kpi-item:first-child{padding-left:0; border-left:0;}
.kpi-num{font-size:clamp(34px,3.6vw,48px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--green);}
.kpi-sub{margin-top:10px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.4;}

/* Sections */
section{padding:88px 0;}
section.band{background:var(--band);}
section.dark{background:var(--ink); color:#fff;}
.kicker{display:block; margin-bottom:14px; font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);}
.dark .kicker{color:var(--green)}
.section-title{margin:0 0 16px; font-weight:800; font-size:clamp(28px,3.2vw,42px); line-height:1.12; color:var(--ink); max-width:26ch;}
.dark .section-title{color:#fff}
.section-sub{margin:0 0 36px; color:var(--muted); font-size:18px; max-width:66ch;}
.dark .section-sub{color:rgba(255,255,255,.75)}
.statement{margin:0 0 24px; font-weight:800; font-size:clamp(26px,3.4vw,44px); line-height:1.16; letter-spacing:-.025em; color:var(--ink); max-width:26ch;}
.sub-title{margin:48px 0 18px; font-weight:800; font-size:22px; color:var(--ink);}
.note{margin:28px 0 0; color:var(--muted); font-size:16px; max-width:70ch;}

/* Cards */
.card{background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:26px 24px;}
.card h3{margin:0 0 8px; font-size:20px; font-weight:800; line-height:1.25; color:var(--ink);}
.card p{margin:0; color:var(--muted); font-size:15.5px;}
.card .num{display:block; margin-bottom:16px; font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--accent); text-transform:uppercase;}
.card .meta{margin:0 0 10px; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.04em;}
.card .out{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule); color:var(--text); font-size:14.5px;}
.card-lead{margin-bottom:14px !important;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.flow .step{position:relative;}
.flow .step:not(:last-child)::after{content:"→"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); z-index:2; width:26px; height:26px; border-radius:50%; background:var(--green); color:var(--ink); display:grid; place-items:center; font-size:13px; font-weight:800;}

.list{margin:0; padding:0; list-style:none; display:grid; gap:0;}
.list li{padding:11px 0 11px 22px; border-top:1px solid var(--rule); color:var(--text); font-size:16px; position:relative;}
.list li:first-child{border-top:0; padding-top:0}
.list li::before{content:""; position:absolute; left:0; top:19px; width:8px; height:8px; background:var(--green);}
.list li:first-child::before{top:8px}
.num-list{counter-reset:n}
.num-list li{counter-increment:n; padding-left:34px}
.num-list li::before{content:counter(n); background:none; width:auto; height:auto; top:11px; font-size:13px; font-weight:800; color:var(--accent)}
.num-list li:first-child::before{top:0}

.tags{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px;}
.tags span{padding:9px 16px; border-radius:999px; background:var(--panel); border:1px solid var(--rule); font-size:14px; font-weight:600; color:var(--ink);}

/* Model (dark) */
.dims{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.dark .card{background:var(--ink-2); border-color:transparent;}
.dark .card h3{color:#fff}
.dark .card p{color:rgba(255,255,255,.72)}
.px{display:block; width:14px; height:14px; background:var(--green); margin-bottom:18px;}

/* Modules */
.modules{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;}
.module{display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:16px 18px; font-size:16px;}
.badge{width:8px; height:8px; background:var(--green); flex:none; margin-top:9px;}

/* Clients */
.clients{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.clients li{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:22px 12px; text-align:center; font-weight:800; font-size:17px; color:var(--ink);}

/* Contact */
.contact-name{margin:0 0 14px; font-weight:700; color:#fff;}
.contacts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 36px; font-size:clamp(20px,2.4vw,28px); font-weight:800;}
.contacts a{display:inline-block; padding:10px 0 4px; border-bottom:3px solid var(--green);}
.contacts a:hover{color:var(--green)}

/* Footer */
footer{padding:56px 0 40px; background:#171E29; color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:48px;}
.footer-title{margin:0 0 14px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700;}
footer p,footer li{margin:0; color:rgba(255,255,255,.8); font-size:15px;}
footer ul{margin:0; padding:0; list-style:none; display:grid; gap:8px;}
footer a:hover{color:var(--green)}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand b{letter-spacing:.08em;}
.copy{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.5);}

/* Reveal */
.js .reveal{opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1; transform:none; transition:none}
    *{transition-duration:.01ms !important}
}

/* Responsive */
@media (max-width:1020px){
    section{padding:68px 0}
    .hero{padding:56px 0 0}
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .hero-text{padding-bottom:0}
    .hero-art{display:none}
    .kpi{margin-top:44px}
    .kpi-grid{grid-template-columns:1fr 1fr; gap:28px 0}
    .kpi-item:nth-child(3){padding-left:0; border-left:0}
    .grid-4{grid-template-columns:1fr 1fr}
    .dims{grid-template-columns:1fr 1fr}
    .flow{grid-template-columns:1fr}
    .flow .step:not(:last-child)::after{display:none}
    .clients{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
    .burger{display:inline-flex}
    .cta-mail{display:none}
    nav{position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 18px 30px rgba(30,38,51,.12); display:none; padding:8px 24px 18px;}
    nav.open{display:block}
    nav ul{flex-direction:column; align-items:stretch; gap:0}
    nav a{padding:15px 0; font-size:17px; border-bottom:1px solid var(--rule)}
}
@media (max-width:620px){
    body{font-size:16.5px}
    section{padding:52px 0}
    .container{padding:0 20px}
    .section-sub{font-size:17px; margin-bottom:26px}
    .hero{padding:40px 0 0}
    .hero-actions{flex-direction:column; align-items:stretch; margin-top:28px}
    .hero-actions .btn{width:100%}
    .kpi{margin-top:36px; padding:26px 0 30px}
    .kpi-item{padding:0 14px}
    .grid-4,.dims,.modules,.footer-grid{grid-template-columns:1fr}
    .duo{grid-template-columns:1fr}
    .card{padding:22px 20px}
    .clients li{padding:18px 8px; font-size:15px}
    .sub-title{margin-top:36px}
    footer{padding:44px 0 34px}
    footer li a,footer address a{display:inline-block; padding:6px 0}
    .contacts{flex-direction:column; gap:14px}
    .brand-title span{display:none}
}
@media (max-width:360px){
    h1{font-size:30px}
    .kpi-item{padding:0 10px}
}

.nav-switch{padding:6px 12px !important; border:1px solid var(--rule); border-radius:8px;}
.nav-switch:hover{border-color:var(--green) !important; border-bottom-color:var(--green)}
@media (max-width:1020px){.nav-switch{border:0 !important; border-radius:0; padding:15px 0 !important; border-bottom:1px solid var(--rule) !important}}

/* Company page */
.overview{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.overview .card{display:block; transition:border-color .18s ease, transform .18s ease;}
.overview a.card:hover{border-color:var(--green); transform:translateY(-2px);}
.overview .card p{margin-top:2px}
.direction{margin-top:64px; padding-top:40px; border-top:1px solid var(--rule);}
.direction .kicker{margin-bottom:10px}
.direction h3.dir-title{margin:0 0 10px; font-size:clamp(24px,2.6vw,32px); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--ink);}
.direction .dir-lead{margin:0 0 24px; color:var(--muted); font-size:17.5px; max-width:66ch;}
.direction .card h4{margin:0 0 14px; font-size:18px; font-weight:800; color:var(--ink);}
.direction .note{margin-top:20px}
.info3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:1020px){.overview,.info3{grid-template-columns:1fr 1fr} .steps4{grid-template-columns:1fr 1fr} .direction{margin-top:48px; padding-top:32px}}
@media (max-width:620px){.overview,.info3,.steps4{grid-template-columns:1fr}}

/* Collapse the menu a bit earlier: six links + CTA need room */
@media (max-width:1100px){
    .burger{display:inline-flex}
    .cta-mail{display:none}
    nav{position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 18px 30px rgba(30,38,51,.12); display:none; padding:8px 24px 18px;}
    nav.open{display:block}
    nav ul{flex-direction:column; align-items:stretch; gap:0}
    nav a{padding:15px 0; font-size:17px; border-bottom:1px solid var(--rule)}
    .nav-switch{border:0 !important; border-radius:0; padding:15px 0 !important; border-bottom:1px solid var(--rule) !important}
}
.direction .tags{margin:20px 0 0}

/* Typography polish: avoid one-word last lines in headings */
h1,h2,.statement,.dir-title{text-wrap:balance;}
.lead,.section-sub,.dir-lead{text-wrap:pretty;}

/* Section switcher dropdown in the header */
.nav-more{position:relative}
.nav-more summary{list-style:none; cursor:pointer; font-size:14.5px; font-weight:500; color:var(--text); padding:6px 12px; border:1px solid var(--rule); border-radius:8px; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;}
.nav-more details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.nav-more summary:hover{border-color:var(--green)}
.nav-sub{position:absolute; right:0; top:calc(100% + 8px); min-width:220px; margin:0; padding:6px; list-style:none; background:var(--panel); border:1px solid var(--rule); border-radius:12px; box-shadow:0 18px 40px rgba(30,38,51,.14); display:block; z-index:60;}
.nav-sub li{display:block}
.nav-sub a{display:block; padding:10px 12px; border-radius:8px; border-bottom:0; font-size:14.5px; white-space:nowrap;}
.nav-sub a:hover{background:var(--band); border-bottom:0}
.info2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){
    .nav-more summary{border:0; border-radius:0; padding:15px 0; font-size:17px; border-bottom:1px solid var(--rule); justify-content:space-between}
    .nav-sub{position:static; box-shadow:none; border:0; background:transparent; padding:0 0 6px 14px; min-width:0}
    .nav-sub a{padding:12px 0; font-size:16px; border-bottom:1px solid var(--rule); border-radius:0}
    .nav-sub a:hover{background:transparent}
}
@media (max-width:620px){.info2{grid-template-columns:1fr}}

/* Partner page */
.hero-art.photo{background:var(--ink-2) url(assets/maksim-bryukhanov-720.jpg) center 18%/cover no-repeat; border-radius:18px; min-height:420px; margin-bottom:56px;}
.facts-table{margin:0; border-top:1px solid var(--ink); max-width:860px;}
.facts-table div{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--rule);}
.facts-table dt{font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.02em; color:var(--accent);}
.facts-table dd{margin:0; align-self:center; color:var(--text); font-size:18px;}
a.card{display:block; transition:border-color .18s ease, transform .18s ease;}
a.card:hover{border-color:var(--green); transform:translateY(-2px);}
@media (max-width:1020px){
    .hero-art.photo{display:block; min-height:340px; margin:8px 0 0; order:2}
    .hero-grid .hero-text{order:1}
}
@media (max-width:620px){
    .facts-table div{grid-template-columns:1fr; gap:4px; padding:18px 0}
    .hero-art.photo{min-height:300px}
}

.tags-title{margin:36px 0 14px; font-size:18px; font-weight:800; color:var(--ink);}
.link-arrow{display:inline-block; font-weight:800; color:var(--accent); border-bottom:2px solid var(--green); padding:10px 0 2px;}
.link-arrow:hover{color:var(--ink)}

.section-sub b a,.contact-name a{display:inline-block; padding:9px 0 1px; border-bottom:2px solid var(--green);}
.section-sub b a:hover,.contact-name a:hover{color:var(--accent)}
.contact-name a:hover{color:var(--green)}