
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-tight-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-tight-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/roboto-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/roboto-mono-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --lime:#cef79e;        --ink:#222f30;         --bone:#f7f7f5;        --paper:#ffffff;
  --graphite:#4d5757;    --lichen:#c9cbbe;      --tissue:#e7e8e1;
  --frost:#eeeeee;
  --void:#000000;      
  --on-dark-2:rgba(255,255,255,.78);    --on-dark-3:rgba(255,255,255,.62);  
  --font-sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4vw,40px);
  --maxw:1200px;
  --section-pad:clamp(72px,9vw,120px);
  --radius-btn:8px;
  --radius-nav:12px;
  --radius-card:20px;
  --radius-img:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--ink);color:var(--paper);
  font:400 18px/1.3 var(--font-sans);letter-spacing:-0.001em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:400}
address{font-style:normal}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--ink)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.on-light a:focus-visible,.reach :focus-visible{outline-color:var(--ink)}

.container{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

.skip-link{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 14px;border-radius:var(--radius-btn);
  background:var(--paper);color:var(--ink);font:400 13px/1 var(--font-mono);text-decoration:none}
.skip-link:focus{top:12px}

.on-dark{background:var(--ink);color:var(--paper)}
.on-light{background:var(--bone);color:var(--ink)}

.tag{display:inline-flex;align-items:center;gap:10px;font:400 13px/1.23 var(--font-mono);
  letter-spacing:-0.02em;text-transform:uppercase;color:var(--on-dark-3)}
.on-light .tag{color:var(--graphite)}
.tag__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime)}
.on-light .tag__dot{box-sizing:content-box;border:1px solid var(--ink)} 
.pill{display:inline-flex;align-items:center;min-height:36px;padding:8px 16px;
  border:1px solid var(--lichen);border-radius:var(--radius-nav);background:transparent;color:var(--lichen);
  font:400 13px/1 var(--font-mono);letter-spacing:-0.02em;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.pill:hover,.pill[aria-current="true"],.pill[aria-expanded="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;
  border:1px solid transparent;border-radius:var(--radius-btn);font:400 13px/1 var(--font-mono);
  letter-spacing:-0.02em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--frost)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--graphite)}
.btn--ghost{background:transparent;color:inherit;border-color:var(--graphite)}
.btn--ghost:hover{border-color:currentColor}
.btn[disabled]{opacity:.6;cursor:progress}

.arrow-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;
  border-radius:var(--radius-btn);background:var(--lime);color:var(--ink);text-decoration:none;
  transition:background-color .15s,transform .15s}
.arrow-btn:hover{background:var(--paper)}

.counter{display:inline-flex;width:max-content;padding:6px 12px;border:1px solid var(--graphite);border-radius:9999px;
  font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;color:var(--on-dark-3)}
.on-light .counter{color:var(--graphite)}

.site-header{padding-block:20px}
.header-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.logo__mark{display:block;flex:none;width:63px;height:26px;background:currentColor;color:var(--paper);
  -webkit-mask:url(logo-mask.png) center/contain no-repeat;mask:url(logo-mask.png) center/contain no-repeat}
.footer-logo{display:block;width:73px;height:30px;margin-bottom:20px;background:currentColor;color:var(--paper);
  -webkit-mask:url(logo-mask.png) center/contain no-repeat;mask:url(logo-mask.png) center/contain no-repeat}
.logo__name{font-size:18px;letter-spacing:-0.006em}
.menu-toggle{display:none}
.site-nav__list{display:flex;flex-wrap:wrap;gap:8px}
.header-tools{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;gap:6px}
.pill--lang{padding:8px 12px;min-width:44px;justify-content:center}
.header-cta{display:none}

@media (min-width:960px){
  .site-nav{order:2}
  .header-tools{order:3}
}
@media (min-width:1180px){
  .header-cta{display:inline-flex}
}
@media (max-width:959px){
  .menu-toggle{display:inline-flex}
  .js .menu-toggle{order:3}
  .header-tools{order:2}
  .site-nav{flex-basis:100%;order:4;padding-top:8px}
  .js .site-nav{display:none}
  .js .site-nav.is-open{display:block}
}
@media (max-width:420px){
  .logo__name{display:none}
}

.section{padding-block:var(--section-pad)}
.section--tight-top{padding-top:0}
.section--deep{background:#151e1f}
.section-head{display:grid;gap:24px;justify-items:start;margin-bottom:clamp(40px,6vw,72px)}
.section-head h2{max-width:20em;font-size:clamp(2rem,1.1rem + 2.9vw,3.5rem);line-height:1.1;letter-spacing:-0.02em;text-wrap:balance}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(24px,5vh,72px);padding-bottom:clamp(48px,6vw,72px)}
.hero__main{display:flex;flex-direction:column;gap:clamp(28px,6vw,40px)}
.hero__label{margin-bottom:clamp(16px,3vh,40px);max-width:42em}
.hero__title{font-size:clamp(2.75rem,min(1.2rem + 6.6vw,11.5vh),6rem);line-height:1;letter-spacing:-0.03em;text-wrap:balance}
@media (min-width:900px){
  .hero__screen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:center;
    min-height:calc(100vh - 84px - clamp(24px,5vh,72px) - 24px);
    min-height:calc(100svh - 84px - clamp(24px,5vh,72px) - 24px)}
  .hero__main{align-self:center;justify-content:center;gap:clamp(24px,4.5vh,44px)}
}
.hero__sub{max-width:32em;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.35;letter-spacing:-0.006em;color:var(--on-dark-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.hero__tile{position:relative;justify-self:end;width:min(100%,78vh);aspect-ratio:3/2;border:1px solid var(--graphite);border-radius:var(--radius-img);overflow:hidden;color:var(--graphite)}
.hero__tile svg{width:100%;height:100%}
.tile__tag{position:absolute;top:16px;left:16px;z-index:1}
.hero__tile .grid{opacity:.55}
.line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.line--base{stroke:var(--graphite);stroke-width:2}
.line--main{stroke:var(--paper);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s .3s cubic-bezier(.2,.7,.2,1) forwards}
.dot{fill:var(--lime);opacity:0;animation:fade .4s 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;margin-top:clamp(40px,6vw,72px)}
.stats__item{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--graphite)}
.stats__value{font-size:clamp(2rem,1rem + 2.6vw,3rem);line-height:1;letter-spacing:-0.02em;white-space:nowrap}
.stats__label{font-size:16px;line-height:1.3;color:var(--on-dark-3);max-width:16em}

@media (max-width:899px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.service-group + .service-group{margin-top:clamp(64px,8vw,104px)}
.group-head{display:grid;gap:16px;justify-items:start;margin-bottom:32px}
.group-head h3{font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.2;letter-spacing:-0.006em}
.service-list{border-bottom:1px solid var(--graphite)}
.service{display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,5fr) 40px;column-gap:24px;align-items:start;
  padding-block:28px;border-top:1px solid var(--graphite)}
.service__num{padding-top:5px;font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;color:var(--on-dark-3)}
.service__title{font-size:clamp(1.25rem,1rem + .8vw,1.625rem);line-height:1.2;letter-spacing:-0.006em}
.service__desc{font-size:18px;line-height:1.4;color:var(--on-dark-2)}

@media (max-width:759px){
  .service{grid-template-columns:40px minmax(0,1fr) 40px;grid-template-areas:"num title arrow" ". desc desc";row-gap:12px;column-gap:16px}
  .service__num{grid-area:num}
  .service__title{grid-area:title}
  .service__desc{grid-area:desc}
  .service .arrow-btn{grid-area:arrow}
}

.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);gap:0 20px}
.compare__card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;
  padding:clamp(24px,3vw,40px);background:var(--paper);border:1px solid var(--lichen);border-radius:var(--radius-card)}
.compare__card--me{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.compare__name{display:flex;align-items:center;gap:12px;padding-bottom:28px;font-size:clamp(1.375rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-0.006em}
.compare__row{padding-block:20px;border-top:1px solid var(--lichen)}
.compare__card--me .compare__row{border-color:var(--graphite)}
.compare__label{margin-bottom:10px;font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite)}
.compare__card--me .compare__label{color:var(--on-dark-3)}
.compare__text{font-size:18px;line-height:1.35}

.principles{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid var(--lichen)}


@media (max-width:899px){
  .compare{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
  .compare__card{grid-row:auto;grid-template-rows:none}
}

.cases{display:grid;gap:20px}
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);
  padding:20px;background:var(--paper);border:1px solid var(--lichen);border-radius:var(--radius-card)}
.case:nth-child(even) .case__tile{background:#d3eea5;color:var(--ink)}
.case:nth-child(even) .case__tile .tag{color:var(--graphite)}
.case:nth-child(even) .case__tile .tag__dot{box-sizing:content-box;border:1px solid var(--ink)}
.case:nth-child(even) .case__cap{color:rgba(34,47,48,.78)}
.case:nth-child(even) .case__spark{color:rgba(34,47,48,.55)}
.case:nth-child(even) .spark-dot{background:var(--ink)}
.case__tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:340px;
  padding:28px 28px 0;border-radius:var(--radius-img);overflow:hidden}
.case__big{margin-top:auto;font-size:clamp(2.5rem,1.2rem + 4vw,4.5rem);line-height:1;letter-spacing:-0.03em;white-space:nowrap}
.case__cap{margin-top:14px;max-width:16em;font-size:18px;line-height:1.3;color:var(--on-dark-2)}
.case__spark{position:relative;width:calc(100% + 56px);height:64px;margin:28px -28px 0;color:rgba(255,255,255,.5)}
.case__spark svg{position:absolute;inset:0;width:100%;height:100%}
.spark-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--lime)}
.case__body{display:flex;flex-direction:column;gap:18px;padding:clamp(4px,1.5vw,16px) clamp(4px,2vw,24px) clamp(4px,1.5vw,16px) 0}
.case__title{font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.2;letter-spacing:-0.006em;text-wrap:balance}
.case__rows{margin-top:auto}
.case__row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding-block:18px;border-top:1px solid var(--lichen)}
.case__row dt{padding-top:3px;font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite)}
.case__row dd{font-size:18px;line-height:1.4}

@media (max-width:899px){
  .case{grid-template-columns:1fr;gap:20px}
  .case__tile{min-height:280px}
  .case__body{padding:4px 8px 8px}
}
@media (max-width:519px){
  .case__row{grid-template-columns:1fr;gap:6px}
}

.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"photo head" "photo body";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,96px);row-gap:clamp(24px,3vw,40px);align-items:start}
.about__head{grid-area:head;margin-bottom:0}
.about__body{grid-area:body}
.about__photo{grid-area:photo;margin:0;border:1px solid var(--graphite);border-radius:var(--radius-img);overflow:hidden;background:#000}
.about__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about__text{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.4;letter-spacing:-0.006em;color:var(--on-dark-2)}
.about__text + .about__text{margin-top:20px}
.about__skills-label{margin-top:48px}
.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.skills li{padding:8px 14px;border:1px solid var(--graphite);border-radius:9999px;font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;color:var(--paper)}

@media (max-width:899px){
  .about{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body";grid-template-rows:auto;row-gap:32px}
  .about__photo{max-width:420px}
}

.contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.steps{margin-top:20px;border-bottom:1px solid var(--graphite)}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding-block:18px;border-top:1px solid var(--graphite);font-size:18px;line-height:1.35}
.steps__num{padding-top:3px;font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;color:var(--on-dark-3)}

@media (max-width:899px){
  .contact{grid-template-columns:1fr}
}

.site-footer{padding-block:clamp(56px,7vw,88px) 40px;background:var(--void);color:var(--paper)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.footer-name{font-size:24px;line-height:1.2;letter-spacing:-0.006em}
.footer-domain{margin-top:8px;font:400 14px/1.3 var(--font-mono);letter-spacing:-0.008em;color:var(--on-dark-3)}
.footer-contacts,.footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:400 14px/1.3 var(--font-mono);letter-spacing:-0.008em}
.footer-contacts a,.footer-legal a{text-decoration:none}
.footer-contacts a:hover,.footer-legal a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-contacts span{color:var(--on-dark-3)}
.footer-copy{margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--graphite);font:400 13px/1.23 var(--font-mono);letter-spacing:-0.02em;color:var(--on-dark-3)}

@media (max-width:759px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .line--main{animation:none;stroke-dashoffset:0}
  .dot{animation:none;opacity:1}
  *{transition:none!important}
}

.legal__head{margin-bottom:clamp(40px,6vw,72px)}
.legal__head h1{max-width:20em;font-size:clamp(2rem,1.1rem + 2.9vw,3.5rem);line-height:1.1;letter-spacing:-0.02em;text-wrap:balance}
.legal__meta{margin-top:16px;font:400 13px/1.4 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite)}
.legal__body{max-width:760px}
.legal__section{padding-block:clamp(20px,3vw,32px);border-top:1px solid var(--lichen)}
.legal__section h2{margin-bottom:16px;font-size:clamp(1.25rem,1rem + .8vw,1.625rem);line-height:1.2;letter-spacing:-0.006em}
.legal__section p{font-size:18px;line-height:1.5}
.legal__section p + p,.legal__section p + .legal__list,.legal__list + p,.legal__section p + .legal__dl{margin-top:14px}
.legal__list{padding-left:1.2em;list-style:disc;font-size:18px;line-height:1.5}
.legal__list li + li{margin-top:8px}
.legal__dl{margin-top:20px;border-bottom:1px solid var(--lichen)}
.legal__dl > div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:16px;padding-block:12px;border-top:1px solid var(--lichen)}
.legal__dl dt{font:400 13px/1.4 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite);padding-top:4px}
.legal__dl dd{font-size:18px;line-height:1.4;overflow-wrap:anywhere}
@media (max-width:519px){.legal__dl > div{grid-template-columns:1fr;gap:4px}}


/* Контакты вместо формы */
.reach{padding:clamp(24px,3vw,40px);background:var(--paper);color:var(--ink);border-radius:var(--radius-card)}
.reach__label{font:400 13px/1.3 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite)}
.reach__text{margin-top:12px;font-size:20px;line-height:1.35;letter-spacing:-0.006em}
.reach__list{margin-top:28px;border-bottom:1px solid var(--lichen)}
.reach__item{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"k arrow" "v arrow";column-gap:16px;row-gap:4px;align-items:center;padding-block:20px;border-top:1px solid var(--lichen);text-decoration:none}
.reach__k{grid-area:k;font:400 13px/1.3 var(--font-mono);letter-spacing:-0.02em;text-transform:uppercase;color:var(--graphite)}
.reach__v{grid-area:v;font-size:clamp(1.25rem,1rem + 1vw,1.625rem);line-height:1.2;letter-spacing:-0.006em;overflow-wrap:anywhere}
.reach__item .arrow-btn{grid-area:arrow}
.reach__item:hover .arrow-btn{background:var(--ink);color:var(--lime)}

/* Страница 404 */
.notfound{min-height:calc(100vh - 84px - 260px);display:flex;align-items:center}
.notfound__code{font-size:clamp(5rem,3rem + 12vw,12rem);line-height:1;letter-spacing:-0.04em}
.notfound__langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,64px);margin-top:clamp(24px,4vw,48px);max-width:900px}
.notfound__block{display:grid;gap:14px;justify-items:start;padding-top:24px;border-top:1px solid var(--graphite)}
.notfound__block h1{font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.2;letter-spacing:-0.006em}
.notfound__block p{font-size:18px;line-height:1.4;color:var(--on-dark-2)}
.notfound__block .btn{margin-top:6px}
@media (max-width:640px){.notfound__langs{grid-template-columns:1fr}}
