/* ============ TOKENS ============ */
:root{
  --y:#FFDD2D;
  --y-deep:#F2CE00;
  --ink:#0F0F0F;
  --ink-70:#3A3A3A;
  --ink-50:#6B6B6B;
  --paper:#FFFFFF;
  --mist:#F3F4F5;
  --mist-2:#EDEEF0;
  --line:#E3E4E6;
  --ok:#12B76A;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --w:1240px;
  --pad:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
button{font:inherit}
ul,ol{list-style:none; margin:0; padding:0}
h1,h2,h3,p,dl,dd{margin:0}

.wrap{width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--pad)}
section[id]{scroll-margin-top:92px}

/* ============ TYPE ============ */
.h2{
  font-family:"Onest",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h2--light{color:#fff}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Onest",sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-50);
  margin:0 0 18px;
}
.eyebrow::before{
  content:""; width:22px; height:3px; border-radius:2px; background:var(--y-deep);
}
.eyebrow--light{color:rgba(255,255,255,.6)}

.section-head{max-width:860px; margin-bottom:44px}
.section-head__lead{margin-top:18px; font-size:18px; color:var(--ink-50); max-width:56ch}
.section-head--row{
  display:grid; grid-template-columns:1fr .62fr; gap:48px; align-items:end;
  max-width:none;
}
.section-head__lead--right{margin-top:0; font-size:16px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  height:56px; padding:0 28px;
  border:0; border-radius:16px;
  font-family:"Onest",sans-serif;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--sm{height:44px; padding:0 18px; font-size:15px; border-radius:12px}
.btn--yellow{background:var(--y); color:var(--ink)}
.btn--yellow:hover{background:var(--y-deep); transform:translateY(-2px)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#000; transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--link{
  background:transparent; padding:0; height:auto; color:var(--ink);
  font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px;
}
.btn--full{width:100%}
.btn:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ink); outline-offset:3px; border-radius:8px;
}
.skip{
  position:absolute; left:-9999px; top:8px; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px;
}
.skip:focus{left:16px}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.topbar.is-stuck{border-bottom-color:var(--line)}
.topbar__inner{display:flex; align-items:center; gap:28px; height:76px}
.logo{display:inline-flex; align-items:center; gap:10px; flex:0 0 auto}
.logo__mark{width:34px; height:34px; flex:0 0 auto}
.logo__text{
  font-family:"Onest",sans-serif; font-weight:800; font-size:24px;
  letter-spacing:-.05em; line-height:1;
}
.logo--light .logo__text{color:#fff}
.nav{display:flex; gap:26px; margin-left:8px}
.nav a{font-size:15px; color:var(--ink-70); transition:color .16s}
.nav a:hover{color:var(--ink)}
.topbar__actions{display:flex; align-items:center; gap:20px; margin-left:auto}
.topbar__phone{font-family:"Onest",sans-serif; font-weight:600; font-size:15px; white-space:nowrap}
.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:0; border-radius:12px; background:var(--mist);
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:13px; right:13px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{
  display:grid; gap:4px; padding:8px var(--pad) 22px;
  border-bottom:1px solid var(--line); background:#fff;
}
.mobile-nav a{padding:12px 0; font-family:"Onest",sans-serif; font-weight:600; font-size:18px}
.mobile-nav .btn{margin-top:10px; height:48px}

/* ============ HERO ============ */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px); overflow:hidden}
.hero__grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,4vw,56px); align-items:center;
}
.hero__title{
  font-family:"Onest",sans-serif;
  font-weight:800;
  font-size:clamp(38px,6.1vw,74px);
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero__mark{
  background:linear-gradient(transparent 62%,var(--y) 62%,var(--y) 94%,transparent 94%);
  padding:0 .06em;
}
.hero__lead{
  margin-top:24px; max-width:46ch;
  font-size:clamp(17px,1.5vw,20px); color:var(--ink-70); line-height:1.5;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 36px; margin-top:44px;
  padding-top:26px; border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-50);
}
.hero__facts b{
  display:block; font-family:"Onest",sans-serif; font-size:26px; font-weight:800;
  color:var(--ink); letter-spacing:-.03em; line-height:1.1; margin-bottom:4px;
}
.hero__art{position:relative}
.hero__art img{
  width:100%;
  filter:drop-shadow(0 30px 60px rgba(15,15,15,.07));
}
.hero__badge{
  position:absolute; left:0; bottom:8px;
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border-radius:100px; padding:10px 18px 10px 14px;
  font-size:14px; font-weight:500;
  box-shadow:0 10px 30px rgba(15,15,15,.08); border:1px solid var(--line);
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(18,183,106,.16)}

/* ============ CONTOUR ============ */
.contour{padding:clamp(52px,7vw,96px) 0; background:var(--mist); margin-top:8px}
.contour__row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:sys;
}
.sys{
  position:relative;
  background:#fff; border-radius:var(--r-md); padding:22px 20px 24px;
  box-shadow:0 1px 0 rgba(15,15,15,.04);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sys:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(15,15,15,.08)}
.sys__icon{
  width:38px; height:38px; border-radius:11px; background:var(--mist);
  display:grid; place-items:center; color:var(--ink);
}
.sys__icon svg{width:20px; height:20px}
.sys__name{font-family:"Onest",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em}
.sys__status{
  font-size:14px; line-height:1.4; color:var(--ink-50);
  padding-left:0;
}
.sys::after{
  content:""; position:absolute; top:41px; right:-9px; width:14px; height:2px;
  background:repeating-linear-gradient(90deg,var(--ink-50) 0 3px,transparent 3px 6px);
  opacity:.45;
}
.sys:last-child::after{display:none}

.contour__merge{margin-top:28px; display:grid; justify-items:center; gap:0}
.contour__arrow{
  width:2px; height:34px;
  background:repeating-linear-gradient(180deg,var(--ink) 0 4px,transparent 4px 8px);
  opacity:.35;
}
.merge-card{
  display:grid; gap:6px; text-align:center;
  background:var(--y); border-radius:var(--r-lg);
  padding:26px 32px; max-width:760px;
  box-shadow:0 18px 40px rgba(255,221,45,.32);
}
.merge-card__label{
  font-family:"Onest",sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.merge-card__text{
  font-family:"Onest",sans-serif; font-weight:600;
  font-size:clamp(17px,2vw,22px); line-height:1.32; letter-spacing:-.02em;
}

/* ============ SERVICES ============ */
.services{padding:clamp(60px,8vw,110px) 0}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{
  display:flex; flex-direction:column;
  background:var(--mist); border-radius:var(--r-lg); padding:34px 34px 30px;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{background:var(--mist-2); transform:translateY(-3px)}
.card--accent{background:var(--ink); color:#fff}
.card--accent:hover{background:#000}
.card__title{
  font-family:"Onest",sans-serif; font-weight:700;
  font-size:clamp(21px,2.1vw,26px); letter-spacing:-.03em; line-height:1.16;
}
.card__text{margin-top:14px; font-size:16px; color:var(--ink-50)}
.card--accent .card__text{color:rgba(255,255,255,.66)}
.card__list{margin-top:22px; display:grid; gap:10px}
.card__list li{
  position:relative; padding-left:26px; font-size:15px; color:var(--ink-70);
}
.card--accent .card__list li{color:rgba(255,255,255,.86)}
.card__list li::before{
  content:""; position:absolute; left:0; top:.46em;
  width:14px; height:8px; border-left:2px solid var(--y-deep); border-bottom:2px solid var(--y-deep);
  transform:rotate(-45deg);
}
.card--accent .card__list li::before{border-color:var(--y)}
.card__price{
  margin-top:auto; padding-top:26px;
  font-family:"Onest",sans-serif; font-weight:800; font-size:26px; letter-spacing:-.035em;
}
.card__price span{font-weight:500; font-size:15px; color:var(--ink-50); letter-spacing:0}
.card--accent .card__price span{color:rgba(255,255,255,.55)}

/* ============ PRODUCTS ============ */
.products{padding:0 0 clamp(60px,8vw,110px)}
.products__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.product{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product:hover{transform:translateY(-3px); box-shadow:0 22px 50px rgba(15,15,15,.08)}
.product__art{
  background:linear-gradient(160deg,var(--mist) 0%,#FAFAFA 100%);
  padding:34px 0 0; display:grid; place-items:center;
  min-height:280px; overflow:hidden;
}
.product__body{padding:28px 30px 32px}
.product__title{
  font-family:"Onest",sans-serif; font-weight:700; font-size:24px;
  letter-spacing:-.03em; line-height:1.15;
}
.product__text{margin-top:12px; font-size:15.5px; color:var(--ink-50)}
.product__meta{
  margin-top:18px; font-family:"Onest",sans-serif; font-weight:600; font-size:15px;
  color:var(--ink);
}

/* phone mockup */
.phone{
  width:186px; height:300px; border-radius:26px 26px 0 0;
  background:var(--ink); padding:9px 9px 0;
  box-shadow:0 -2px 0 rgba(255,255,255,.06) inset, 0 24px 50px rgba(15,15,15,.18);
  display:flex; flex-direction:column;
}
.phone__bar{height:16px; display:grid; place-items:center}
.phone__bar::after{content:""; width:44px; height:4px; border-radius:3px; background:rgba(255,255,255,.3)}
.phone__shot{
  position:relative; flex:1; border-radius:16px 16px 0 0; overflow:hidden;
  background:
    linear-gradient(180deg,rgba(15,15,15,.05),rgba(15,15,15,.22)),
    repeating-linear-gradient(135deg,#C9CDD2 0 10px,#BFC4CA 10px 20px);
}
.phone__wm{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-18deg);
  font-family:"Onest",sans-serif; font-weight:800; font-size:11px; letter-spacing:.06em;
  color:rgba(255,255,255,.55); white-space:nowrap;
}
.phone__chip{
  position:absolute; left:10px; bottom:10px;
  background:rgba(15,15,15,.78); color:#fff; font-size:10px; font-weight:500;
  padding:5px 9px; border-radius:100px; backdrop-filter:blur(4px);
}
/* browser mockup */
.browser{
  width:min(430px,92%); border-radius:16px 16px 0 0; background:#fff; overflow:hidden;
  box-shadow:0 24px 50px rgba(15,15,15,.13); border:1px solid var(--line); border-bottom:0;
}
.browser__bar{
  height:30px; display:flex; align-items:center; gap:6px; padding:0 12px;
  background:var(--mist); border-bottom:1px solid var(--line);
}
.browser__bar i{width:8px; height:8px; border-radius:50%; background:#CFD3D8}
.browser__body{display:grid; grid-template-columns:66px 1fr; min-height:200px}
.browser__side{
  border-right:1px solid var(--line); padding:14px 10px; display:grid; gap:8px; align-content:start;
}
.browser__side i{display:block; height:7px; border-radius:4px; background:var(--mist-2)}
.browser__side i:first-child{background:var(--y)}
.browser__table{padding:14px 14px 0; display:grid; gap:8px; align-content:start}
.browser__row{display:grid; grid-template-columns:1.4fr 1fr .7fr; gap:8px}
.browser__row span{height:8px; border-radius:4px; background:var(--mist-2)}
.browser__row--head span{background:#D8DBDF}
.browser__row span:last-child{background:rgba(255,221,45,.55)}

/* ============ DARK BAND ============ */
.dark{background:var(--ink); color:#fff; border-radius:32px; margin:0 var(--pad) clamp(60px,8vw,110px)}
.dark__grid{
  display:grid; grid-template-columns:1fr .95fr; gap:clamp(24px,4vw,60px);
  align-items:center; padding-top:clamp(44px,5vw,72px); padding-bottom:clamp(44px,5vw,72px);
}
.dark__text{margin-top:20px; font-size:16.5px; color:rgba(255,255,255,.66); max-width:52ch}
.dark__list{margin-top:30px; display:grid; gap:12px}
.dark__list li{
  position:relative; padding-left:22px; font-size:15px; color:rgba(255,255,255,.88);
}
.dark__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:50%; background:var(--y);
}
.dark__art img{width:100%; height:auto; border-radius:var(--r-md); object-fit:cover}

/* ============ PROCESS ============ */
.process{padding:0 0 clamp(60px,8vw,110px)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.step{
  padding:30px 26px 34px; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.step:last-child{border-right:0}
.step__num{
  font-family:"Onest",sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.1em; color:var(--ink-50); margin-bottom:26px;
  position:relative; padding-bottom:14px;
}
.step__num::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:3px; border-radius:2px; background:var(--y);
}
.step__title{
  font-family:"Onest",sans-serif; font-weight:700; font-size:21px; letter-spacing:-.03em;
}
.step__text{margin-top:12px; font-size:15px; color:var(--ink-50)}
.step__time{
  margin-top:auto; padding-top:22px;
  font-family:"Onest",sans-serif; font-weight:600; font-size:14px;
}

/* ============ CASES ============ */
.cases{padding:0 0 clamp(60px,8vw,110px)}
.cases__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.case{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px 28px;
  display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.case:hover{border-color:var(--ink); transform:translateY(-3px)}
.case__tag{
  font-family:"Onest",sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50);
}
.case__title{
  margin-top:16px; font-family:"Onest",sans-serif; font-weight:700;
  font-size:20px; line-height:1.2; letter-spacing:-.03em;
}
.case__text{margin-top:12px; font-size:15px; color:var(--ink-50)}
.case__stats{margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:grid; gap:14px}
.case__stats div{display:flex; align-items:baseline; gap:12px}
.case__stats dt{
  font-family:"Onest",sans-serif; font-weight:800; font-size:24px; letter-spacing:-.04em;
  min-width:76px;
}
.case__stats dd{margin:0; font-size:14px; color:var(--ink-50); line-height:1.3}
.cases__note{margin-top:26px; font-size:14px; color:var(--ink-50)}

/* ============ PRICE ============ */
.price{padding:0 0 clamp(60px,8vw,110px)}
.tariffs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
.tariff{
  position:relative;
  background:var(--mist); border-radius:var(--r-lg); padding:34px 30px 30px;
  display:flex; flex-direction:column;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tariff:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(15,15,15,.07)}
.tariff--featured{background:#fff; border-color:var(--ink); box-shadow:0 24px 60px rgba(15,15,15,.1)}
.tariff__badge{
  position:absolute; top:-13px; left:30px;
  background:var(--y); color:var(--ink);
  font-family:"Onest",sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; padding:6px 12px; border-radius:100px;
}
.tariff__name{font-family:"Onest",sans-serif; font-weight:700; font-size:22px; letter-spacing:-.03em}
.tariff__desc{margin-top:8px; font-size:14.5px; color:var(--ink-50); min-height:44px}
.tariff__price{
  margin-top:22px; font-family:"Onest",sans-serif; font-weight:800;
  font-size:clamp(32px,3.6vw,42px); letter-spacing:-.045em; line-height:1;
}
.tariff__price span{font-size:15px; font-weight:500; color:var(--ink-50); letter-spacing:0}
.tariff__list{margin:26px 0 30px; display:grid; gap:11px}
.tariff__list li{
  position:relative; padding-left:24px; font-size:15px; color:var(--ink-70);
}
.tariff__list li::before{
  content:""; position:absolute; left:0; top:.44em;
  width:13px; height:7px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}
.tariff .btn{margin-top:auto}
.price__note{margin-top:26px; font-size:14px; color:var(--ink-50); max-width:70ch}

/* ============ OFFER (yellow) ============ */
.offer{background:var(--y); padding:clamp(48px,6vw,84px) 0; margin-bottom:clamp(60px,8vw,110px)}
.offer__grid{display:grid; grid-template-columns:1fr .4fr; gap:40px; align-items:center}
.offer .eyebrow{color:rgba(15,15,15,.55)}
.offer .eyebrow::before{background:var(--ink)}
.offer__title{
  font-family:"Onest",sans-serif; font-weight:800;
  font-size:clamp(34px,5.6vw,64px); line-height:.98; letter-spacing:-.045em;
  text-wrap:balance;
}
.offer__text{margin-top:20px; font-size:clamp(16px,1.5vw,18px); max-width:56ch; color:rgba(15,15,15,.78)}
.offer__cta{display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px}
.offer__counter{text-align:center; justify-self:center}
.offer__number{
  display:block; font-family:"Onest",sans-serif; font-weight:800;
  font-size:clamp(140px,18vw,220px); line-height:.8; letter-spacing:-.07em;
}
.offer__free{
  display:block; margin-top:10px; font-family:"Onest",sans-serif; font-weight:600;
  font-size:16px; letter-spacing:.16em; text-transform:uppercase;
}

/* ============ FAQ ============ */
.faq{padding:0 0 clamp(60px,8vw,110px)}
.faq__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start}
.faq__head .h2{font-size:clamp(28px,3.4vw,42px)}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-family:"Onest",sans-serif; font-weight:600; font-size:18px; letter-spacing:-.02em;
  transition:color .18s var(--ease);
}
.qa__q::-webkit-details-marker{display:none}
.qa__q:hover{color:var(--ink-50)}
.qa__q::after{
  content:""; flex:0 0 auto; width:14px; height:14px; position:relative;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
  transition:transform .22s var(--ease);
}
.qa[open] .qa__q::after{transform:rotate(45deg)}
.qa__a{padding:0 40px 26px 0; font-size:16px; color:var(--ink-50)}
.qa[open] .qa__a{animation:qaIn .28s var(--ease)}
@keyframes qaIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

/* ============ CONTACT ============ */
.contact{padding:0 0 clamp(60px,8vw,110px)}
.contact__grid{
  display:grid; grid-template-columns:1fr .95fr; gap:clamp(28px,4vw,64px);
  background:var(--mist); border-radius:32px; padding:clamp(32px,4vw,60px);
}
.contact__title{
  font-family:"Onest",sans-serif; font-weight:800;
  font-size:clamp(30px,4.2vw,50px); line-height:1; letter-spacing:-.045em;
}
.contact__text{margin-top:20px; font-size:17px; color:var(--ink-50); max-width:44ch}
.contact__list{margin-top:34px; display:grid; gap:16px}
.contact__list li{display:grid; gap:2px}
.contact__list span{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50);
  font-family:"Onest",sans-serif; font-weight:600;
}
.contact__list a{
  font-family:"Onest",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em;
  border-bottom:2px solid transparent; transition:border-color .18s var(--ease);
  justify-self:start;
}
.contact__list a:hover{border-bottom-color:var(--y-deep)}

.form{display:grid; gap:14px; align-content:start}
.field{display:grid; gap:7px}
.field__label{font-size:13px; font-weight:500; color:var(--ink-70)}
.field__input{
  width:100%; border:1.5px solid var(--line); background:#fff; border-radius:14px;
  padding:15px 16px; font:inherit; font-size:16px; color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field__input::placeholder{color:#A6A9AE}
.field__input:hover{border-color:#CFD3D8}
.field__input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(15,15,15,.06)}
.field__input--area{resize:vertical; min-height:88px}
.field__input.is-invalid{border-color:#E5484D; box-shadow:0 0 0 4px rgba(229,72,77,.1)}
.form .btn{margin-top:6px}
.form__note{font-size:12.5px; color:var(--ink-50); line-height:1.45}
.form__status{
  font-size:14px; font-weight:500; min-height:20px; color:var(--ok);
}
.form__status.is-error{color:#E5484D}

/* ============ FOOTER ============ */
.footer{background:var(--ink); color:#fff; padding:clamp(44px,5vw,72px) 0 28px}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.footer__tagline{margin-top:18px; font-size:15px; color:rgba(255,255,255,.55); max-width:32ch}
.footer__col{display:grid; gap:10px; align-content:start}
.footer__title{
  font-family:"Onest",sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55);
  margin-bottom:6px;
}
.footer__col a{font-size:15px; color:rgba(255,255,255,.82); transition:color .16s}
.footer__col a:hover{color:var(--y)}
.footer__legal{font-size:14px; color:rgba(255,255,255,.5); line-height:1.6}
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.58);
}
.footer__bottom a:hover{color:#fff}

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .nav{display:none}
  .topbar__actions .topbar__phone{display:none}
  .hero__grid{grid-template-columns:1fr; gap:36px}
  .hero__art{order:-1; max-width:420px}
  .hero__badge{position:static; margin-top:16px}
  .contour__row{grid-template-columns:repeat(3,1fr)}
  .sys:nth-child(3)::after{display:none}
  .cards,.products__grid,.cases__grid{grid-template-columns:1fr 1fr}
  .dark__grid{grid-template-columns:1fr}
  .dark__art{order:-1; max-width:520px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tariffs{grid-template-columns:1fr}
  .tariff--featured{order:-1}
  .faq__grid{grid-template-columns:1fr}
  .offer__grid{grid-template-columns:1fr}
  .offer__counter{display:none}
  .contact__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .section-head--row{grid-template-columns:1fr; gap:16px}
  .section-head__lead--right{max-width:60ch}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--pad:16px}
  .topbar__inner{height:64px; gap:12px}
  .topbar__actions .btn{display:none}
  .burger{display:block}
  .hero{padding-top:20px}
  .hero__title{font-size:clamp(32px,9vw,44px)}
  .hero__cta .btn{flex:1 1 100%}
  .hero__facts{gap:18px 24px; margin-top:32px}
  .hero__facts b{font-size:22px}
  .contour__row{grid-template-columns:1fr 1fr; gap:10px}
  .sys::after{display:none}
  .sys{padding:18px 16px 20px}
  .merge-card{padding:22px 20px; border-radius:var(--r-md)}
  .cards,.products__grid,.cases__grid{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line); padding:24px 0 28px}
  .step:last-child{border-bottom:0}
  .tariff{padding:28px 22px 24px}
  .offer{padding:40px 0}
  .offer__cta .btn{flex:1 1 100%}
  .contact__grid{padding:26px 20px; border-radius:24px}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .dark{border-radius:24px; margin-left:0; margin-right:0}
  .phone{width:160px; height:250px}
  .product__art{min-height:230px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}