:root{
  --accent: #EF074A;
  --accent-hover: #ff2a63;
  --dark-1: #1C1C1F;
  --dark-2: #232327;
  --light: #FFFEFC;
  --line-light: #EAEAEA;
  --line-dark: #36363E;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #A0A0AD;
  --text-on-light: #1C1C1F;
  --text-on-light-muted: #717179;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--light);
  color:var(--text-on-light);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.02em}
p{margin:0}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
}

.section{padding:110px 0}
.section--light{background:var(--light);color:var(--text-on-light)}
.section--dark{background:var(--dark-1);color:var(--text-on-dark)}
.section__title{font-size:clamp(28px,4vw,44px);max-width:720px;line-height:1.12}
.section__lead{margin-top:22px;max-width:560px;font-size:18px;line-height:1.65}
.section--light .section__lead{color:var(--text-on-light-muted)}
.section--dark .section__lead{color:var(--text-on-dark-muted)}

.accent{color:var(--accent)}

/* Hand-drawn underline in hero */
.u-mark{position:relative;display:inline-block;white-space:nowrap}
.u-mark__stroke{
  position:absolute;
  left:-1%;
  bottom:-0.12em;
  width:102%;
  height:0.22em;
  color:var(--accent);
  overflow:visible;
}
.u-mark__stroke path{
  stroke-dasharray:320;
  stroke-dashoffset:320;
  animation:u-draw .7s ease-out .5s forwards;
}
@keyframes u-draw{to{stroke-dashoffset:0}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .u-mark__stroke path{animation:none;stroke-dashoffset:0}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Brand (text logo) */
.brand{display:flex;align-items:center;gap:8px;margin-right:auto}
.brand__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.02em;
  border-radius:8px;
  flex:none;
}
.brand__word{font-weight:800;font-size:18px;letter-spacing:-0.01em;color:#fff}
.brand--footer{margin-right:0}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 28px;
  border-radius:8px;
  font-weight:700;
  font-size:15px;
  white-space:nowrap;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  border:1px solid transparent;
}
.btn__icon{width:20px;height:20px;flex:none}
.btn:active{transform:scale(0.97)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-hover)}
.btn--tg{background:var(--accent);color:#fff}
.btn--tg:hover{background:var(--accent-hover);box-shadow:0 8px 24px rgba(239,7,74,.35)}
.btn--max{background:transparent;color:var(--text-on-dark);border-color:var(--line-dark)}
.btn--max:hover{border-color:var(--accent);color:var(--accent)}
.section--light .btn--max{color:var(--text-on-light);border-color:var(--line-light)}
.btn--lg{padding:19px 34px;font-size:16px}
.btn--small{padding:11px 18px;font-size:14px}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.cta-row--center{justify-content:center;margin-top:44px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(28,28,31,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.header__row{display:flex;align-items:center;gap:32px;height:76px}
.nav{display:flex;gap:28px}
.nav a{color:var(--text-on-dark-muted);font-size:15px;font-weight:500;transition:color .15s}
.nav a:hover{color:#fff}
.header__cta{margin-left:8px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff}

/* Hero */
.hero{
  background:var(--dark-1);
  color:var(--text-on-dark);
  padding:64px 0 110px;
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--line-dark) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.35;
  mask-image:linear-gradient(105deg, transparent 45%, #000 75%);
  -webkit-mask-image:linear-gradient(105deg, transparent 45%, #000 75%);
  pointer-events:none;
}
.hero__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px;
  align-items:center;
  position:relative;
}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.08}
.hero__lead{margin-top:28px;font-size:19px;line-height:1.65;color:var(--text-on-dark-muted);max-width:520px}

.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.hero__chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  font-weight:500;
  color:var(--text-on-dark-muted);
}
.hero__chips svg{width:15px;height:15px;color:var(--accent);flex:none}

.hero__figure{display:flex;flex-direction:column;align-items:stretch}
.figure-card{
  border:1px solid var(--line-dark);
  border-radius:12px;
  padding:24px 28px;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--dark-2);
}
.figure-card--2{margin-left:14%}
.figure-card--3{margin-left:28%}
.figure-card--accent{background:var(--accent);border-color:var(--accent);box-shadow:0 16px 40px rgba(239,7,74,.3)}
.figure-card__num{font-size:13px;font-weight:800;color:var(--text-on-dark-muted)}
.figure-card--accent .figure-card__num{color:rgba(255,255,255,.7)}
.figure-card__text{font-weight:700;font-size:17px}
.figure-connector{
  width:1px;height:22px;
  background:var(--line-dark);
  margin-left:calc(14% + 28px);
}
.figure-connector + .figure-card--3 ~ .figure-connector{margin-left:calc(28% + 28px)}

/* Ticker */
.ticker{
  background:var(--accent);
  color:#fff;
  overflow:hidden;
  padding:18px 0;
}
.ticker__track{
  display:flex;
  align-items:center;
  gap:36px;
  width:max-content;
  animation:ticker 28s linear infinite;
  font-weight:800;
  font-size:16px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker__track i{
  width:7px;height:7px;
  background:#fff;
  border-radius:50%;
  flex:none;
  opacity:.6;
}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:56px;
}
.step{
  background:var(--light);
  border:1px solid var(--line-light);
  border-radius:12px;
  padding:40px 34px;
  transition:border-color .15s, box-shadow .15s;
}
.step:hover{border-color:var(--accent);box-shadow:0 12px 32px rgba(28,28,31,.06)}
.step__index{display:block;font-size:13px;font-weight:800;color:var(--accent);margin-bottom:22px}
.step__icon{width:36px;height:36px;color:var(--accent);margin-bottom:22px}
.step h3{font-size:20px;margin-bottom:12px}
.step p{color:var(--text-on-light-muted);font-size:15px;line-height:1.65}

.lead-quote{
  margin-top:64px;
  font-size:21px;
  line-height:1.6;
  font-weight:700;
  max-width:820px;
  border-left:3px solid var(--accent);
  padding-left:28px;
}

/* Trust */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:60px;
}
.trust-card{
  border:1px solid var(--line-dark);
  border-radius:12px;
  padding:36px;
  background:var(--dark-2);
  transition:border-color .15s;
}
.trust-card:hover{border-color:var(--accent)}
.trust-card__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.trust-card__head svg{width:34px;height:34px;color:var(--accent);flex:none}
.trust-card h3{font-size:19px;line-height:1.3}
.trust-card p{color:var(--text-on-dark-muted);font-size:15px;line-height:1.7}

/* Projects carousel */
.section--dark-alt{background:var(--dark-2);border-top:1px solid var(--line-dark)}
.projects__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
}
.carousel__nav{display:flex;gap:10px;flex:none}
.carousel__btn{
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  background:transparent;
  color:var(--text-on-dark);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s, opacity .15s;
}
.carousel__btn svg{width:20px;height:20px}
.carousel__btn:hover{border-color:var(--accent);color:var(--accent)}
.carousel__btn:disabled{opacity:.35;cursor:default}
.carousel__btn:disabled:hover{border-color:var(--line-dark);color:var(--text-on-dark)}

.carousel{
  display:flex;
  gap:20px;
  margin-top:48px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* даём тени карточек не обрезаться */
  padding:4px;
}
.carousel::-webkit-scrollbar{display:none}
.proj-card{
  flex:0 0 340px;
  scroll-snap-align:start;
  background:var(--dark-1);
  border:1px solid var(--line-dark);
  border-radius:12px;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .15s;
}
.proj-card:hover{border-color:var(--accent)}
.proj-card__icon{width:36px;height:36px;color:var(--accent);margin-bottom:6px}
.proj-card h3{font-size:19px}
.proj-card p{color:var(--text-on-dark-muted);font-size:14px;line-height:1.65;flex:1}
.proj-card__tag{
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:6px 12px;
}

/* Who */
.who__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.who-list{display:flex;flex-direction:column;gap:16px}
.who-card{
  border:1px solid var(--line-light);
  border-radius:12px;
  padding:22px 26px;
  display:flex;
  align-items:center;
  gap:20px;
  transition:border-color .15s;
}
.who-card:hover{border-color:var(--accent)}
.who-card svg{width:32px;height:32px;color:var(--accent);flex:none}
.who-card div{display:flex;flex-direction:column;gap:3px}
.who-card strong{font-weight:800;font-size:16px}
.who-card span{color:var(--text-on-light-muted);font-size:14px}

/* Pay */
.pay__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pay-list{display:flex;flex-direction:column;gap:22px;margin-top:36px}
.pay-list li{
  font-size:16px;
  line-height:1.65;
  color:var(--text-on-dark-muted);
  padding-left:22px;
  position:relative;
}
.pay-list li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:8px;height:8px;background:var(--accent);border-radius:2px;
}
.pay-list li span{color:var(--text-on-dark);font-weight:800}
.pay-callout{
  background:var(--accent);
  color:#fff;
  border-radius:14px;
  padding:44px;
  font-size:19px;
  line-height:1.6;
  font-weight:700;
  box-shadow:0 20px 50px rgba(239,7,74,.25);
}
.pay-callout__icon{width:36px;height:36px;margin-bottom:20px;opacity:.85}

/* FAQ */
.faq__grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:64px;
  align-items:start;
}
.faq-list{border-top:1px solid var(--line-light)}
.faq-item{border-bottom:1px solid var(--line-light)}
.faq-item__q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  background:none;
  border:0;
  padding:24px 0;
  font-family:var(--font);
  font-size:17px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  color:var(--text-on-light);
}
.faq-item__plus{
  position:relative;
  width:18px;height:18px;flex:none;
}
.faq-item__plus::before,.faq-item__plus::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .2s ease, opacity .2s ease;
}
.faq-item__plus::before{left:0;top:8px;width:18px;height:2px}
.faq-item__plus::after{left:8px;top:0;width:2px;height:18px}
.faq-item[data-open="true"] .faq-item__plus::after{transform:rotate(90deg);opacity:0}
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.faq-item__a p{padding-bottom:24px;color:var(--text-on-light-muted);font-size:15px;line-height:1.7;max-width:640px}

/* Final CTA */
.final-cta{
  background:var(--dark-1);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--line-dark) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.35;
  mask-image:radial-gradient(ellipse at center, transparent 30%, #000 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, transparent 30%, #000 80%);
  pointer-events:none;
}
.final-cta__inner{position:relative}
.final-cta__inner h2{font-size:clamp(28px,4.5vw,46px);color:#fff;max-width:760px;margin:0 auto}
.final-cta__sub{margin-top:18px;color:var(--text-on-dark-muted);font-size:17px}

/* Footer */
.site-footer{background:var(--dark-2);color:var(--text-on-dark-muted);padding:36px 0}
.footer__row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:13px}
.footer__row p{margin-left:auto}

/* Responsive */
@media (max-width:900px){
  .section{padding:80px 0}
  .hero{padding:80px 0 90px}
  .hero__grid{grid-template-columns:1fr}
  .hero__figure{display:none}
  .steps{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .who__grid,.pay__grid,.faq__grid{grid-template-columns:1fr;gap:40px}
}

@media (max-width:760px){
  .projects__head{flex-direction:column;align-items:flex-start;gap:20px}
  .proj-card{flex-basis:78vw}
  .nav{
    position:fixed;
    top:76px;left:0;right:0;
    background:var(--dark-1);
    border-bottom:1px solid var(--line-dark);
    flex-direction:column;
    padding:20px 24px 28px;
    gap:18px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
  .header__cta{display:none}
  .burger{display:flex}
  .section{padding:64px 0}
  .ticker__track{font-size:14px;gap:26px}
  .footer__row p{margin-left:0}
}