/* alansyz — экраны сайта
   синий #2F6BF6 · фон #EDF1FA · белые карточки, радиус 24, мягкая тень
   Каждая секция .screen ровно в высоту окна. Правила — в GRID.md */

:root{
  --blue:#2F6BF6;
  --blue-dark:#2455CE;
  --bg:#EDF1FA;
  --ink:#0E1320;
  --ink-soft:#4A5468;
  --ink-faint:#8A93A6;
  --card:#FFFFFF;
  --navy:#16233C;
  --red:#E4574C;
  --green:#E4F5EA;
  --green-ink:#2E8A57;
  --radius:24px;
  --shadow:0 18px 44px rgba(20,40,90,.07);
  --shadow-btn:0 10px 24px rgba(47,107,246,.28);

  --wrap:1240px;      /* максимальная ширина полосы набора */
  --gutter:32px;      /* боковые поля, на мобильном 20px */
  --col-gap:24px;     /* межколонник сетки 12 колонок */
  --header-h:clamp(64px,9vh,88px);

  /* вертикальный ритм — шаг 8, только эти значения */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* один экран = высота окна минус шапка */
.screen{
  position:relative;
  height:calc(100dvh - var(--header-h));
  display:flex;align-items:center;
  overflow:hidden;
}

/* ---------- шапка ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(237,241,250,.86);backdrop-filter:blur(10px)}
.header__inner{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.wordmark{font-size:28px;font-weight:800;letter-spacing:-.03em;text-transform:lowercase}

.nav{display:flex;gap:34px;margin-inline:auto}
.nav a{font-size:16px;font-weight:500;color:var(--ink-soft);transition:color .15s}
.nav a:hover{color:var(--blue)}

.header__right{display:flex;align-items:center;gap:16px}

.lang{display:flex;background:#fff;border-radius:999px;padding:4px;box-shadow:0 2px 8px rgba(20,40,90,.06)}
.lang__btn{
  border:0;background:transparent;cursor:pointer;
  font:600 13px/1 Inter,sans-serif;letter-spacing:.04em;
  color:var(--ink-faint);padding:8px 12px;border-radius:999px;transition:.15s;
}
.lang__btn:hover{color:var(--ink)}
.lang__btn.is-active{background:var(--blue);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;border:0;background:transparent;padding:8px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:clamp(52px,7vh,60px);padding:0 34px;border-radius:999px;
  font-size:17px;font-weight:600;white-space:nowrap;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn--sm{height:46px;padding:0 24px;font-size:15px}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-btn)}
.btn--primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--blue);border:2px solid rgba(47,107,246,.45)}
.btn--ghost:hover{border-color:var(--blue);background:rgba(47,107,246,.06)}

/* ---------- экран 1: герой ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:clamp(14px,2.4vh,22px);
  padding:9px 18px 9px 14px;border-radius:999px;
  background:#fff;box-shadow:0 4px 14px rgba(20,40,90,.06);
  font-size:15px;font-weight:600;color:var(--ink-soft);
}
.eyebrow__dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--green-ink);box-shadow:0 0 0 4px var(--green);
}

.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch;gap:clamp(24px,3vw,56px);
}
.hero__title{
  white-space:pre-line;
  font-size:clamp(34px,min(4.6vw,7.2vh),64px);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;
  max-width:16ch;
}
.hero__sub{
  margin-top:clamp(16px,2.6vh,28px);max-width:34rem;
  font-size:clamp(17px,min(1.5vw,2.2vh),21px);line-height:1.5;color:var(--ink-soft);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(20px,3.6vh,38px)}

/* картинка вынута из потока: высоту задаёт только текстовая колонка */
.hero__art{position:relative;min-height:0}
.hero__card{
  position:absolute;inset:8% 2% 4% 4%;
  background:var(--card);border-radius:40px;box-shadow:var(--shadow);
}
.hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- секция «проблема»: белые карточки с пазлом ---------- */
.section{padding-block:clamp(48px,7vh,88px)}
.section__title{
  max-width:24ch;
  font-size:clamp(28px,3.4vw,44px);
  font-weight:800;letter-spacing:-.03em;line-height:1.12;
}
.section__title--center{max-width:22ch;margin-inline:auto;text-align:center}
.accent{color:var(--red)}

.pcards{
  margin-top:clamp(34px,5vh,56px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);
}
.problems{background:#E5EBF7}
.pcard{
  position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(64px,7vw,84px) clamp(24px,2.4vw,32px) clamp(24px,2.4vw,32px);
  box-shadow:var(--shadow);
}
.pcard--yellow{color:#F0B824}
.pcard--orange{color:#F0803C}
.pcard--red{color:#E4463A}
.pcard__piece{position:absolute;top:0;left:0;display:block;width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px)}
.pcard__piece svg{width:100%;height:100%;display:block}
.pcard h3{
  font-size:clamp(18px,1.4vw,21px);font-weight:700;
  letter-spacing:-.015em;line-height:1.25;color:var(--ink);
}
.pcard p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-soft)}


/* ---------- секция «решение» ---------- */
.solution{background:var(--bg)}
/* заголовок решения держим в одну строку */
.solution .section__title{max-width:none;white-space:nowrap;font-size:clamp(28px,3.1vw,42px)}
.eyebrow--blue{
  display:inline-flex;margin-inline:auto;
  background:#DEE8FE;box-shadow:none;color:#2A56C4;
}
.eyebrow__ico{display:grid;place-items:center;width:20px;height:20px;color:var(--blue)}
.eyebrow__ico svg{width:20px;height:20px}
.solution .eyebrow{display:flex;width:max-content;margin-inline:auto}
.accent--blue{color:var(--blue)}
.section__lead{
  margin-top:14px;text-align:center;
  font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);
}

.scards{
  margin-top:clamp(30px,4.4vh,48px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);
}
.scard{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(22px,2.2vw,28px);
  box-shadow:var(--shadow);
}
.scard__num{
  position:absolute;top:22px;left:22px;z-index:2;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:17px;font-weight:700;
}
.scard__art{
  width:82%;max-width:280px;margin:0 auto clamp(14px,2vh,20px);
  height:clamp(150px,17vw,210px);object-fit:contain;object-position:bottom;
}
.scard h3{font-size:clamp(18px,1.35vw,20px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.scard p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}


/* ---------- секция «прямая связь»: карточка со сценой ---------- */
.link{background:#fff}
.link__card{
  margin-top:clamp(28px,4vh,44px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,64px);
  background:var(--bg);border-radius:32px;
  padding:clamp(26px,3vw,44px) clamp(26px,3.4vw,56px);
}
.link__scene{
  display:grid;grid-template-columns:minmax(0,1.32fr) auto minmax(0,.62fr);
  align-items:center;gap:clamp(10px,1.4vw,22px);
}
.link__phone{width:100%;height:auto;filter:drop-shadow(0 16px 34px rgba(20,40,90,.16))}
.link__board{width:100%;height:auto;filter:drop-shadow(0 14px 28px rgba(20,40,90,.18))}
.link__wifi{
  position:relative;display:grid;place-items:center;
  width:clamp(56px,7vw,96px);color:var(--blue);
}
.link__arc{width:100%;height:auto;opacity:.85}
.link__sign{position:absolute;top:-6%;right:2%;width:clamp(20px,2.2vw,30px);height:auto}

.checks{display:grid;gap:clamp(16px,2vh,22px)}
.checks li{
  display:grid;grid-template-columns:26px 1fr;align-items:start;gap:14px;
  font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--ink);
}
.chk{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  margin-top:1px;color:#fff;
}
.chk svg{width:14px;height:14px}
.chk--blue{background:var(--blue)}
.chk--green{background:#22A45D}

.link__tech{
  margin-top:clamp(18px,2.6vh,26px);text-align:center;
  font-size:15px;line-height:1.6;color:var(--ink-faint);
}

/* ---------- секция «цена» ---------- */
.price{background:var(--bg)}
.price__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.price__copy{max-width:34rem}
.price .section__title{max-width:15ch;font-size:clamp(30px,3.4vw,46px);line-height:1.12}
.price__lead{
  margin-top:var(--s-3);max-width:30rem;
  font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink-soft);
}
.price__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s-4)}
.note{margin-top:var(--s-3);font-size:15px;color:var(--ink-faint)}

.price__card{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(24px,3vw,44px);
  background:var(--card);border-radius:28px;
  padding:clamp(26px,3vw,40px);box-shadow:var(--shadow);
}
.price__amount{
  padding-right:clamp(20px,2.4vw,36px);
  border-right:1px solid #E6EBF5;
}
.price__label{display:block;font-size:15px;color:var(--ink-faint)}
.price__num{
  display:block;margin-top:8px;white-space:nowrap;
  font-size:clamp(34px,3.6vw,50px);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;color:var(--blue);
}
.price__cur{font-size:.42em;font-weight:700;color:var(--ink-soft);letter-spacing:-.01em}
.price__hint{display:block;margin-top:14px;max-width:14rem;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

.ticks{display:grid;gap:clamp(14px,1.8vh,20px)}
.ticks li{display:grid;grid-template-columns:26px 1fr;align-items:start;gap:14px}
.tick{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;margin-top:1px;
}
.tick svg{width:14px;height:14px}
.ticks li>span:last-child{font-size:16px;line-height:1.5;color:var(--ink)}

/* ---------- узкие экраны ---------- */

@media (max-width:1080px){
  .nav{display:none}
  .header__cta{display:none}
  .burger{display:flex}
  .header__right{margin-left:auto}

  /* высота окна больше не держит контент: обычная прокрутка */
  .screen{height:auto;display:block;overflow:visible}
  .hero{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:32px}
  .hero__title{max-width:none}
  .hero__art{height:auto;margin-top:24px}
  .hero__art img{position:relative;width:100%;height:auto;max-height:none}

  /* на телефоне высота окна не должна раздувать шрифт */
  .hero__title{font-size:clamp(30px,8.4vw,46px)}
  .hero__sub{font-size:17px;max-width:none}
  .problem__title{font-size:clamp(26px,7.4vw,40px)}
  .problem__list li{font-size:17px}
  .btn{height:56px}
  .eyebrow{font-size:14px}
  .hero__card{inset:12% 0 6% 0;border-radius:32px}

  .section__title,.section__title--center{max-width:none;font-size:clamp(26px,7vw,36px)}
  .solution .section__title{white-space:normal;font-size:clamp(26px,7vw,36px)}
  .pcards{grid-template-columns:minmax(0,1fr);gap:14px}
  .pcard{padding-top:64px}
  .scards{grid-template-columns:minmax(0,1fr);gap:14px}
  .scard__art{height:auto;width:70%}
  .price__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .link__card{grid-template-columns:minmax(0,1fr);gap:24px;padding:22px;border-radius:24px}
  .link__scene{gap:8px}
  .price .section__title{max-width:none}
  .price__card{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px}
  .price__amount{padding:0 0 20px;border-right:0;border-bottom:1px solid #E6EBF5}
  .price__hint{max-width:none}
  .price__copy{max-width:none}
  .link__tech{text-align:left}
  .link__copy{max-width:none;order:2}
  .link__art{order:1}
  .link .section__title{max-width:none}
}
@media (max-width:640px){
  .wrap{padding-inline:20px}
  :root{--gutter:20px}
  .wordmark{font-size:24px}
  .btn{width:100%;padding:0 24px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .link__facts{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* мобильное меню */
body.nav-open .nav{
  display:flex;position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;gap:0;
  background:var(--bg);padding:8px 20px 24px;margin:0;box-shadow:0 20px 30px rgba(20,40,90,.08);z-index:60;
}
body.nav-open .nav a{padding:16px 0;border-bottom:1px solid #E1E7F4;font-size:18px}

/* ---------- подвал ---------- */
.footer{background:#fff;padding-top:clamp(44px,6vh,72px)}
.footer__grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)) auto;
  gap:clamp(20px,2.4vw,40px);
  align-items:end;
  padding-bottom:clamp(32px,4.5vh,52px);
}
.wordmark--blue{color:var(--blue)}
.footer__tag{
  margin-top:16px;max-width:24rem;
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);
}
.footer__col{display:flex;flex-direction:column;gap:12px;align-self:start}
.footer__brand{align-self:start}
.footer__col h3{
  margin-bottom:4px;font-size:13px;font-weight:700;
  letter-spacing:.08em;color:var(--ink);
}
.footer__col a{font-size:15.5px;color:var(--ink-soft);transition:color .15s;width:max-content}
.footer__col a:hover{color:var(--blue)}
.footer__phone{font-size:17px;font-weight:600;color:var(--ink)!important;white-space:nowrap}
.footer__hint{font-size:14.5px;line-height:1.5;color:var(--ink-faint)}

.footer__wave{
  align-self:end;justify-self:end;
  width:clamp(110px,11vw,168px);height:auto;
  margin-bottom:-8px;pointer-events:none;
}

.footer__bottom{border-top:1px solid #E6EBF5;padding-block:22px}
.footer__bottom p{text-align:center;font-size:14.5px;color:var(--ink-faint)}

@media (max-width:1080px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
  .footer__brand{grid-column:1 / -1}
  .footer__wave{display:none}
}
@media (max-width:640px){
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}