:root{
  --paper:#f4f1ea;
  --paper-2:#ebe7dd;
  --ink:#14171c;
  --ink-2:#3a3f47;
  --ink-3:#8b8f96;
  --accent:#d94f2a;
  --line:#14171c;
  --line-soft:#cfcabd;
  --white:#fff;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --hd-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
ul{list-style:none}
img{max-width:100%;display:block}

/* якоря: не залезать под sticky-хедер */
section[id],div[id]{scroll-margin-top:calc(var(--hd-h) + 12px)}

::selection{background:var(--accent);color:#fff}

.wrap{max-width:1440px;margin:0 auto;padding:0 max(32px,var(--safe-l),var(--safe-r))}

/* ================= TYPE ================= */
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.02em;font-size:12px;text-transform:uppercase}
.mono-b{font-family:var(--mono);font-weight:500;letter-spacing:.02em;font-size:12px;text-transform:uppercase}

h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;line-height:1.02}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;
  font-family:var(--sans);font-weight:600;font-size:15px;
  border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);
  border-radius:0;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
  min-height:48px;
  touch-action:manipulation;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn .ar{display:inline-block;transition:transform .2s;font-family:var(--mono);font-weight:500}
.btn:hover .ar{transform:translateX(4px)}

/* ================= HEADER ================= */
header{
  position:sticky;top:0;z-index:200;
  background:var(--paper);
  border-bottom:1.5px solid var(--ink);
  padding-top:var(--safe-t);
}
.hd{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:32px;
  height:var(--hd-h);
}
.logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:800;font-size:19px;
  letter-spacing:-.03em;
  min-height:44px;
}
.logo .mark{
  width:30px;height:30px;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--mono);font-weight:600;font-size:13px;
  flex-shrink:0;
}
.logo .sub{
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;
  border-left:1px solid var(--line-soft);padding-left:12px;margin-left:2px;
}
.nav{display:flex;justify-content:center;gap:6px}
.nav a{
  padding:8px 14px;font-size:14px;font-weight:500;
  font-family:var(--sans);letter-spacing:-.01em;
  transition:color .15s;
}
.nav a:hover{color:var(--accent)}
.nav a .num{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  margin-right:6px;vertical-align:super;
}
.hd-cta{display:flex;align-items:center;gap:20px}
.hd-phone{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.02em;color:var(--ink);
}
.hd-phone:hover{color:var(--accent)}
.hd .btn{padding:12px 20px;font-size:14px;min-height:44px}

.burger{display:none;width:44px;height:44px;position:relative;flex-shrink:0}
.burger::before,.burger::after{
  content:'';position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);
  transition:transform .2s, top .2s, bottom .2s;
}
.burger::before{top:16px}
.burger::after{bottom:16px}
.burger span{position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--ink);transform:translateY(-50%);transition:opacity .15s}

/* ================= HERO ================= */
.hero{
  padding:70px 0 90px;
  position:relative;
  border-bottom:1.5px solid var(--ink);
}
.hero-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:28px;margin-bottom:44px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);
  flex-wrap:wrap;
}
.hero-top .dot{color:var(--accent)}

.hero-grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:60px;
  align-items:end;
}
.hero h1{
  font-size:clamp(42px,8.2vw,124px);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.045em;
  margin-bottom:36px;
  word-wrap:break-word;
}
.hero h1 .amp{color:var(--accent);font-style:italic;font-weight:700}
.hero h1 .sub-line{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(11px,1vw,13px);letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;
  margin-top:24px;
  line-height:1.4;
}
.hero-right{padding-bottom:6px}
.hero-right p{
  font-size:17.5px;line-height:1.55;color:var(--ink-2);
  margin-bottom:32px;max-width:520px;letter-spacing:-.01em;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-cta .btn{flex:1 1 auto}
.hero-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line-soft);
}
.hero-facts .fact{
  padding:20px 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:6px;
}
.hero-facts .fact:nth-child(odd){padding-right:20px;border-right:1px solid var(--line-soft)}
.hero-facts .fact:nth-child(even){padding-left:20px}
.hero-facts .fact .v{
  font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;
}
.hero-facts .fact .v .u{color:var(--accent);font-family:var(--mono);font-size:14px;margin-left:4px;font-weight:500}
.hero-facts .fact .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase;
}

.corner-label{
  position:absolute;left:0;top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--ink-3);text-transform:uppercase;
  white-space:nowrap;
}
.corner-label::before{content:'— ';color:var(--accent)}
.corner-label::after{content:' —';color:var(--accent)}

/* ================= MARQUEE ================= */
.marquee{
  background:var(--ink);color:var(--paper);
  overflow:hidden;border-bottom:1.5px solid var(--ink);
  padding:20px 0;
}
.marquee-track{
  display:flex;gap:80px;
  white-space:nowrap;
  animation:scroll 32s linear infinite;
  width:max-content;
}
.marquee-track span{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:80px;
}
.marquee-track span::after{
  content:'◆';color:var(--accent);font-size:10px;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ================= SECTION BASE ================= */
section{padding:110px 0;border-bottom:1.5px solid var(--ink)}
section.no-border{border-bottom:none}
.sec-head{
  display:grid;grid-template-columns:auto 1fr;
  gap:44px;align-items:start;
  padding-bottom:44px;margin-bottom:60px;
  border-bottom:1.5px solid var(--ink);
}
.sec-head .num{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--accent);letter-spacing:.06em;
  padding-top:8px;
}
.sec-head .num::before{content:'('}
.sec-head .num::after{content:')'}
.sec-head .ttl{display:flex;flex-direction:column;gap:14px}
.sec-head .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.sec-head h2{
  font-size:clamp(30px,4.4vw,62px);
  letter-spacing:-.04em;line-height:1;font-weight:800;
  max-width:900px;
}
.sec-head h2 em{
  font-style:italic;font-family:var(--sans);font-weight:500;
  color:var(--ink-3);
}

/* ================= SERVICES ================= */
.services{display:flex;flex-direction:column}
.svc{
  display:grid;grid-template-columns:70px 1.2fr 1fr 60px;
  gap:32px;align-items:start;
  padding:36px 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .25s ease;
  cursor:pointer;
  position:relative;
  min-height:44px;
}
.svc:last-child{border-bottom:none}
.svc .idx{
  font-family:var(--mono);font-size:12px;
  color:var(--ink-3);letter-spacing:.06em;padding-top:4px;
}
.svc h3{
  font-size:clamp(22px,2.4vw,32px);
  font-weight:700;letter-spacing:-.035em;
  line-height:1.1;
}
.svc h3 .ar{
  font-family:var(--mono);color:var(--accent);
  font-size:.7em;vertical-align:middle;
  margin-left:12px;opacity:0;
  transition:opacity .2s, transform .3s;
  display:inline-block;
}
.svc p{
  font-size:14.5px;color:var(--ink-2);line-height:1.6;
  max-width:400px;
}
.svc .plus{
  font-family:var(--mono);font-size:20px;
  color:var(--ink-3);justify-self:end;padding-top:6px;
  transition:color .2s, transform .3s;
}
.svc:hover{padding-left:14px}
.svc:hover h3 .ar{opacity:1;transform:translateX(0)}
.svc:hover .plus{color:var(--accent);transform:rotate(45deg)}

/* ================= WHY ================= */
.why-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  grid-auto-rows:minmax(200px,auto);
  gap:0;
}
.why-cell{
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:36px 32px 36px 0;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:260px;
}
.why-cell:last-child{border-right:none}
.why-cell .num{
  font-family:var(--mono);font-size:12px;
  color:var(--accent);letter-spacing:.06em;
}
.why-cell h3{
  font-size:22px;font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin:auto 0 14px;
}
.why-cell p{font-size:14px;color:var(--ink-2);line-height:1.6;max-width:340px}

.why-cell.big{
  grid-row:span 2;
  padding-right:40px;
  border-right:1.5px solid var(--ink);
}
.why-cell.big h3{
  font-size:clamp(30px,3.6vw,54px);
  letter-spacing:-.04em;line-height:.98;
}
.why-cell.big h3 em{
  font-style:italic;color:var(--ink-3);font-weight:400;
}
.why-cell.big p{font-size:16px;max-width:440px}

/* ================= WORKS ================= */
.works-categories {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.work-category {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 40px;
}

.work-category:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cat-title {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 20px;
  font-weight: 500;
}

/* ================= CAROUSEL ================= */
.carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 56px;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  gap: 16px;
  will-change: transform;
}

.slide {
  flex: 0 0 calc(33.333% - 11px);
  max-width: calc(33.333% - 11px);
  min-width:0;
}

@media (max-width: 1100px) {
  .slide {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

@media (max-width: 720px) {
  .slide {
    flex: 0 0 85%;
    max-width: 85%;
  }
}

.work-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
  touch-action:pan-y;
}

.work-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  background: #222;
}

.work-card:hover img {
  transform: scale(1.03);
}

.work-card .info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
  pointer-events: none;
}

.work-card .idx {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}

.work-card h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.25;
}

/* Контролы карусели */
.carousel-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
  touch-action: manipulation;
}

.carousel-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:60%;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-soft);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  touch-action: manipulation;
  position:relative;
}
.carousel-dot::after{
  content:'';
  position:absolute;
  inset:-10px;
}

.carousel-dot.active {
  background: var(--accent);
}

/* ================= PROCESS ================= */
.process{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
}
.p-step{
  padding:44px 32px 44px 0;
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:26px;
  position:relative;
}
.p-step:last-child{border-right:none;padding-right:0}
.p-step .n{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(72px,8vw,120px);
  line-height:.82;letter-spacing:-.06em;
  color:var(--ink);
}
.p-step .n em{
  font-family:var(--mono);font-style:normal;
  font-size:.16em;color:var(--accent);
  letter-spacing:.08em;vertical-align:super;
  margin-left:6px;font-weight:500;
}
.p-step h3{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.p-step p{font-size:14px;color:var(--ink-2);line-height:1.6}
.p-step .dur{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);text-transform:uppercase;
  margin-top:auto;
}

/* ================= FAQ ================= */
.faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
.faq-intro h2{
  font-size:clamp(30px,4vw,54px);
  letter-spacing:-.04em;line-height:1.02;font-weight:800;
  margin-bottom:22px;
}
.faq-intro h2 em{font-style:italic;font-weight:500;color:var(--ink-3)}
.faq-intro p{font-size:16px;color:var(--ink-2);line-height:1.6;max-width:340px}

.faq-list{border-top:1.5px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line-soft)}
.faq-list summary{
  list-style:none;cursor:pointer;
  padding:26px 60px 26px 0;
  font-size:19px;font-weight:600;letter-spacing:-.02em;
  position:relative;
  display:flex;gap:24px;align-items:baseline;
  transition:color .2s;
  min-height:44px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .fnum{
  font-family:var(--mono);font-size:11px;
  color:var(--accent);letter-spacing:.06em;flex-shrink:0;
  padding-top:6px;
}
.faq-list summary::after{
  content:'+';position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;font-weight:300;
  color:var(--ink);transition:transform .2s;
}
.faq-list details[open] summary::after{content:'–';transform:translateY(-50%) rotate(0)}
.faq-list summary:hover{color:var(--accent)}
.faq-list .ans{
  padding:0 60px 26px 40px;
  font-size:15.5px;color:var(--ink-2);line-height:1.7;
  max-width:640px;
}

/* ================= CTA ================= */
.cta-band{
  background:var(--ink);color:var(--paper);
  padding:100px 0;
  border-bottom:1.5px solid var(--ink);
  position:relative;overflow:hidden;
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band .top{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:rgba(244,241,234,.5);text-transform:uppercase;
  padding-bottom:24px;margin-bottom:40px;
  border-bottom:1px solid rgba(244,241,234,.15);
}
.cta-band h2{
  font-size:clamp(38px,7vw,110px);
  font-weight:800;letter-spacing:-.045em;line-height:.94;
  color:var(--paper);
  margin-bottom:48px;
  max-width:1100px;
}
.cta-band h2 em{font-style:italic;font-weight:500;color:var(--accent)}
.cta-band .row{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
}
.cta-band .row p{font-size:16px;color:rgba(244,241,234,.65);max-width:520px;line-height:1.55}
.cta-band .btn{
  border-color:var(--paper);background:var(--paper);color:var(--ink);
}
.cta-band .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ================= CONTACT ================= */
.contact{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:80px;align-items:start;
}
.contact-info h2{
  font-size:clamp(30px,4vw,56px);
  letter-spacing:-.04em;line-height:1;font-weight:800;
  margin-bottom:24px;
}
.contact-info h2 em{font-style:italic;font-weight:400;color:var(--ink-3)}
.contact-info .lead{
  font-size:16px;color:var(--ink-2);line-height:1.6;
  margin-bottom:44px;max-width:440px;
}
.ci-list{display:flex;flex-direction:column}
.ci-row{
  display:grid;grid-template-columns:130px 1fr;
  gap:24px;padding:22px 0;
  border-bottom:1px solid var(--line-soft);
  align-items:baseline;
}
.ci-row:first-child{border-top:1px solid var(--line-soft)}
.ci-row .l{
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);
}
.ci-row .v{
  font-size:18px;font-weight:600;letter-spacing:-.02em;
  word-wrap:break-word;
}
.ci-row .v:hover{color:var(--accent)}
.ci-row .v small{
  display:block;font-family:var(--mono);font-size:11.5px;
  font-weight:400;color:var(--ink-3);
  letter-spacing:.04em;margin-top:6px;
}

/* form */
.form{
  border-top:1.5px solid var(--ink);
  padding-top:40px;
}
.form .head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid var(--line-soft);
  margin-bottom:36px;
}
.form .head h3{
  font-size:26px;font-weight:700;letter-spacing:-.03em;
}
.form .head .n{
  font-family:var(--mono);font-size:11px;
  color:var(--accent);letter-spacing:.06em;
}
.f-row{display:grid;gap:26px;margin-bottom:26px}
.f-row.two{grid-template-columns:1fr 1fr}
.f-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.f-field label{
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);
}
.f-field input,.f-field textarea{
  font-family:var(--sans);
  font-size:16px; /* НЕ меньше 16px — иначе iOS зумит при фокусе */
  font-weight:500;
  color:var(--ink);background:transparent;
  border:none;border-bottom:1.5px solid var(--ink);
  padding:10px 0;letter-spacing:-.01em;
  border-radius:0;
  transition:border-color .15s;
  width:100%;
  min-height:44px;
}
.f-field input::placeholder,.f-field textarea::placeholder{
  color:var(--ink-3);font-weight:400;
}
.f-field input:focus,.f-field textarea:focus{
  outline:none;border-bottom-color:var(--accent);
}
.f-field textarea{resize:vertical;min-height:80px;font-family:var(--sans)}

.pd-consent{
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--sans);font-size:13px;line-height:1.4;
  color:var(--ink-2);
  cursor:pointer;
  min-height:44px;
}
.pd-consent input{
  margin-top:3px;flex-shrink:0;
  width:20px;height:20px;
  accent-color:var(--accent);
  cursor:pointer;
}
.pd-consent a{color:var(--accent);text-decoration:underline}

.form .actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;margin-top:12px;
}
.form .note{
  font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);letter-spacing:.04em;
  max-width:320px;line-height:1.5;
}

/* ================= FOOTER ================= */
footer{
  background:var(--paper);
  padding:80px 0 calc(30px + var(--safe-b));
}
.ft-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:44px;
  padding-bottom:60px;
  border-bottom:1px solid var(--line-soft);
}
.ft-top h4{
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);margin-bottom:22px;font-weight:500;
}
.ft-top ul{display:flex;flex-direction:column;gap:12px}
.ft-top a,.ft-top li{font-size:14.5px;color:var(--ink-2);letter-spacing:-.01em}
.ft-top a:hover{color:var(--accent)}
.ft-brand p{
  font-size:14.5px;color:var(--ink-2);line-height:1.65;
  max-width:340px;margin-top:20px;
}
.ft-brand .logo{margin-bottom:0}

.wordmark{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(64px,19vw,280px);
  letter-spacing:-.055em;line-height:.82;
  color:var(--ink);
  padding:50px 0 20px;
  border-bottom:1.5px solid var(--ink);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;
  overflow:hidden;
}
.wordmark span{display:block}
.wordmark .dot{
  width:clamp(12px,2vw,26px);height:clamp(12px,2vw,26px);
  background:var(--accent);border-radius:50%;
  margin-bottom:clamp(10px,2vw,24px);
  flex-shrink:0;
}

.ft-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:24px;
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);
}
.ft-bottom a{color:var(--ink-3);text-decoration:underline}

/* ================= МОБИЛЬНОЕ МЕНЮ ================= */
.nav.nav-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: calc(var(--hd-h) + var(--safe-t));
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--paper);
  padding: 24px max(24px, var(--safe-l), var(--safe-r)) calc(24px + var(--safe-b));
  gap: 0;
  border-top: 1.5px solid var(--ink);
  z-index: 150;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav.nav-open a {
  font-size: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav.nav-open a .num {
  font-size: 11px;
}
.burger.is-open::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger.is-open::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.burger.is-open span { opacity: 0; }
body.no-scroll { overflow: hidden; position: fixed; width: 100%; }

/* ================= КНОПКИ МЕССЕНДЖЕРОВ ================= */
.send-alt {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.send-alt-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.send-alt-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-wa, .btn-max {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background .15s, color .15s;
  min-height: 44px;
  flex: 1 1 auto;
  touch-action: manipulation;
}
.btn-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.btn-max:hover { background: #7B61FF; border-color: #7B61FF; color: #fff; }

/* ================= COOKIE BANNER ================= */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 20px max(32px, var(--safe-l), var(--safe-r)) calc(20px + var(--safe-b));
  z-index: 9999;
  border-top: 1.5px solid var(--accent);
}
.cookie-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.5;
}
.cookie-inner p {
  margin: 0;
  color: rgba(244, 241, 234, 0.8);
  max-width: 700px;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.cookie-actions a {
  color: var(--accent);
  text-decoration: underline;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cookie-actions button {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 12px 24px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 44px;
  touch-action: manipulation;
}
.cookie-actions button:hover {
  background: var(--accent);
  color: #fff;
}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:block}
  .hero-grid{grid-template-columns:1fr;gap:50px}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-cell.big{grid-row:auto;grid-column:span 2;border-right:none;border-bottom:1.5px solid var(--ink);padding-right:0}
  .why-cell:nth-child(3n){border-right:none}
  .process{grid-template-columns:1fr 1fr;gap:0}
  .p-step:nth-child(2){border-right:none}
  .p-step:nth-child(1),.p-step:nth-child(2){border-bottom:1px solid var(--line-soft)}
  .contact{grid-template-columns:1fr;gap:60px}
  .faq-wrap{grid-template-columns:1fr;gap:40px}
  .faq-intro p{max-width:100%}
  .ft-top{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .wrap{padding:0 max(18px, var(--safe-l), var(--safe-r))}
  section{padding:60px 0}
  .hero{padding:36px 0 48px}
  .hero-top{
    flex-direction:column;align-items:flex-start;gap:8px;
    font-size:10.5px;letter-spacing:.06em;
    padding-bottom:20px;margin-bottom:32px;
  }
  .hero h1{
    font-size:clamp(38px,12vw,64px);
    margin-bottom:28px;
  }
  .hero h1 .sub-line{
    margin-top:18px;letter-spacing:.1em;
  }
  .hero-right p{font-size:16px;margin-bottom:24px}
  .hero-cta{flex-direction:column;align-items:stretch;margin-bottom:32px}
  .hero-cta .btn{width:100%}
  .hero-facts .fact .v{font-size:24px}

  .sec-head{grid-template-columns:1fr;gap:12px;padding-bottom:24px;margin-bottom:32px}
  .sec-head h2{font-size:clamp(26px,7vw,36px)}
  .sec-head .num{padding-top:0}

  .svc{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .svc .idx{padding:0}
  .svc .plus{display:none}
  .svc h3{font-size:22px}

  .why-grid{grid-template-columns:1fr}
  .why-cell{border-right:none;padding:26px 0;min-height:auto}
  .why-cell.big{grid-column:auto;padding:26px 0}
  .why-cell.big h3{font-size:28px}

  .process{grid-template-columns:1fr}
  .p-step{border-right:none;border-bottom:1px solid var(--line-soft);padding:28px 0;gap:18px}
  .p-step:last-child{border-bottom:none}
  .p-step .n{font-size:72px}

  .works-categories{gap:44px}
  .work-category{padding-bottom:32px}

  .f-row.two{grid-template-columns:1fr}
  .f-row{gap:22px;margin-bottom:22px}

  .ci-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .ci-row .v{font-size:16px}

  .ft-top{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
  .ft-bottom{padding-top:20px;font-size:10px}

  .cta-band{padding:56px 0}
  .cta-band h2{margin-bottom:32px}
  .cta-band .row p{font-size:15px}
  .cta-band .btn{width:100%}

  .marquee{padding:16px 0}
  .marquee-track{gap:48px}
  .marquee-track span{gap:48px;font-size:12px}
  .corner-label{display:none}

  .wordmark{font-size:22vw;padding:30px 0 10px}

  /* карусель на мобилке */
  .carousel{padding-bottom:60px}
  .carousel-controls{padding:0 0}
  .carousel-btn{width:44px;height:44px}
  .carousel-dots{bottom:20px;max-width:55%}

  /* cookie banner */
  #cookie-banner{padding:16px max(18px, var(--safe-l), var(--safe-r)) calc(16px + var(--safe-b))}
  .cookie-inner{flex-direction:column;align-items:stretch;gap:14px;font-size:13px}
  .cookie-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .cookie-actions button{width:100%}
  .cookie-actions a{text-align:center}

  /* кнопки мессенджеров */
  .send-alt-btns{flex-direction:column}
  .btn-wa,.btn-max{width:100%}

  /* форма */
  .form .actions{flex-direction:column;align-items:stretch;gap:16px}
  .form .actions .btn{width:100%}
  .form .note{max-width:100%;text-align:center}

  /* faq */
  .faq-list summary{padding:22px 50px 22px 0;font-size:17px;gap:16px}
  .faq-list .ans{padding:0 0 22px 34px;font-size:15px}
}

@media (max-width:400px){
  .logo .sub{display:none}
  .hd-cta{gap:8px}
  .hd-phone{font-size:12px}
  .hd .btn{padding:10px 14px;font-size:13px}
  .hero h1{font-size:clamp(34px,11vw,52px)}
  .wordmark{font-size:20vw}
}

/* hover только на устройствах с реальным hover */
@media (hover:none){
  .svc:hover{padding-left:0}
  .svc:hover .plus{transform:none;color:var(--ink-3)}
  .work-card:hover img{transform:none}
  .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
  .cta-band .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
}

/* уважение к настройкам ОС */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{animation:none}
}