/* Продобот — лендинг сервиса ИИ-агентов. Светлая тема, один акцент.
   Стекло — веб-приближение матового материала (backdrop-filter + внутренние блики),
   не официальный Apple Liquid Glass. */

:root{
  --bg:#F5F7FA;
  --bg-2:#FFFFFF;
  --ink:#0E1726;
  --ink-2:#4A5668;
  --ink-3:#7A8698;
  --line:rgba(14,23,38,.10);
  --line-2:rgba(14,23,38,.06);
  --accent:#2F8FED;
  --accent-deep:#1B6FD0;
  --accent-soft:rgba(47,143,237,.10);
  --r-card:18px;
  --r-img:14px;
  --r-pill:999px;
  --shadow-s:0 1px 2px rgba(14,23,38,.05), 0 6px 18px rgba(14,23,38,.05);
  --shadow-m:0 2px 6px rgba(14,23,38,.06), 0 18px 44px rgba(14,23,38,.09);
  --shadow-l:0 30px 70px rgba(14,23,38,.16);
  --wrap:1200px;
  --pad:clamp(16px, 4vw, 28px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 "Golos Text", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Onest", system-ui, sans-serif; font-weight:600; letter-spacing:-.02em; margin:0; line-height:1.18}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.section{padding:clamp(64px, 9vw, 120px) 0}
.h2{font-size:clamp(28px, 4vw, 44px); line-height:1.1; max-width:19ch}
.sub{margin-top:14px; color:var(--ink-2); max-width:56ch; font-size:clamp(16px,1.6vw,19px)}
.eyebrow{
  display:inline-block; font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--accent-deep); background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.7);
  padding:7px 14px; border-radius:var(--r-pill); margin:0 0 20px; backdrop-filter:blur(10px);
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:#fff; padding:10px 16px; border-radius:var(--r-pill)}

/* ── Кнопки ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  font-family:"Onest", sans-serif; font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn-lg{font-size:16.5px; padding:16px 28px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(47,143,237,.32)}
.btn-primary:hover{background:var(--accent-deep); box-shadow:0 10px 26px rgba(47,143,237,.38)}
.btn-quiet{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-s)}
.btn-quiet:hover{border-color:rgba(14,23,38,.2)}
.btn-ghost{background:transparent; color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px}

.link{display:inline-flex; align-items:center; gap:7px; color:var(--accent-deep); font-weight:600; text-decoration:none; font-size:15px}
.link:hover{gap:11px}
.link i{transition:transform .2s ease}

/* ── Стекло (веб-приближение) ───────────────────────────── */
.glass{
  position:relative; isolation:isolate; border-radius:var(--r-card);
  border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(140deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--shadow-l);
}
.glass-soft{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--shadow-m);
}
@media (prefers-reduced-transparency: reduce){
  .glass{background:rgba(255,255,255,.97); backdrop-filter:none; -webkit-backdrop-filter:none}
  .eyebrow{backdrop-filter:none}
}

/* ── Шапка ──────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; background:rgba(245,247,250,.72); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid transparent; transition:border-color .2s ease, background .2s ease}
.nav.is-stuck{border-bottom-color:var(--line-2); background:rgba(245,247,250,.9)}
.nav-in{display:flex; align-items:center; gap:28px; height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand-mark{display:flex; filter:drop-shadow(0 4px 10px rgba(29,111,224,.3))}
.brand-name{font-family:"Onest", sans-serif; font-weight:700; font-size:19px; letter-spacing:-.02em}
.nav-links{display:flex; gap:26px; margin-inline:auto}
.nav-links a{text-decoration:none; color:var(--ink-2); font-size:15.5px; transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:10px}
.burger{display:none; background:none; border:0; font-size:26px; color:var(--ink); cursor:pointer; padding:4px}
.nav-drop{display:none !important; flex-direction:column; gap:4px; padding:8px var(--pad) 20px; background:rgba(245,247,250,.97); border-bottom:1px solid var(--line-2)}
.nav-drop a{padding:12px 4px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-2)}
.nav-drop .btn{margin-top:12px; border-bottom:0}

/* ── Герой ──────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:clamp(48px, 7vw, 84px) 0 clamp(64px, 8vw, 104px)}
.hero-photo{
  position:absolute; inset:0;
  background:url("art/office-hero.jpg") center 30%/cover no-repeat;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(245,247,250,.97) 0%, rgba(245,247,250,.9) 38%, rgba(245,247,250,.45) 62%, rgba(245,247,250,.25) 100%);
}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,5vw,72px); align-items:center}
.hero-copy h1{font-size:clamp(32px, 4.3vw, 54px); line-height:1.06; max-width:19ch}
.hero-copy h1 em{font-style:normal; color:var(--accent-deep)}
.lead{margin-top:20px; font-size:clamp(17px, 1.9vw, 21px); line-height:1.5; color:var(--ink-2); max-width:44ch}
.hero-buttons{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* телефон с живой перепиской */
.hero-demo{display:flex; justify-content:center}
.phone{width:min(360px, 100%); padding:0; overflow:hidden; border-radius:26px}
.phone-top{display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid rgba(14,23,38,.07)}
.ava{width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,#6FB4FF,#1D6FE0); color:#fff; display:grid; place-items:center; font-weight:600; font-family:"Onest",sans-serif}
.phone-name{font-family:"Onest",sans-serif; font-weight:600; font-size:15.5px; display:flex; flex-direction:column; line-height:1.25}
.phone-name em{font-style:normal; font-size:12.5px; color:var(--accent); font-weight:500}
.phone-top i{margin-left:auto; font-size:21px; color:var(--accent)}
.phone-body{height:330px; padding:16px; display:flex; flex-direction:column; gap:9px; overflow:hidden; background:rgba(226,236,245,.5)}
.msg{max-width:84%; padding:10px 14px; border-radius:16px; font-size:14.6px; line-height:1.42; box-shadow:0 1px 2px rgba(14,23,38,.07); animation:pop .34s cubic-bezier(.16,1,.3,1) both}
.msg-in{align-self:flex-start; background:#fff; border-bottom-left-radius:6px}
.msg-out{align-self:flex-end; background:#D9F2C8; border-bottom-right-radius:6px}
.msg-dots{align-self:flex-start; background:#fff; display:flex; gap:4px; padding:13px 14px; border-radius:16px; border-bottom-left-radius:6px}
.msg-dots i{width:6px; height:6px; border-radius:50%; background:#B4BFCC; animation:blink 1.1s infinite}
.msg-dots i:nth-child(2){animation-delay:.18s} .msg-dots i:nth-child(3){animation-delay:.36s}
.phone-foot{display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid rgba(14,23,38,.07); color:var(--ink-3); font-size:14.5px}
.phone-foot i{margin-left:auto; font-size:20px; color:var(--accent)}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}
@keyframes blink{0%,60%,100%{opacity:.35} 30%{opacity:1}}

/* ── Бенто «почему» ─────────────────────────────────────── */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.cell{border-radius:var(--r-card); padding:30px; display:flex; flex-direction:column; gap:14px}
.cell h3{font-size:22px}
.cell p{color:var(--ink-2); font-size:16px}
.cell-wide{grid-column:span 2; flex-direction:row; align-items:center; gap:30px; padding-right:0; overflow:hidden}
.cell-wide .cell-text{flex:0 0 40%; min-width:270px; display:flex; flex-direction:column; gap:14px}
.cell-wide img{flex:1 1 0; width:100%; min-width:0; align-self:stretch; height:100%; min-height:300px; object-fit:cover; object-position:left top; border-radius:var(--r-img) 0 0 var(--r-img); box-shadow:-10px 14px 40px rgba(14,23,38,.14); margin:14px 0 -30px}
.cell-figure{background:linear-gradient(160deg,#0E1726,#1C3352); color:#fff; justify-content:center}
.cell-figure h3{color:#fff; font-size:19px; font-weight:500}
.cell-figure p{color:rgba(255,255,255,.72); font-size:15.5px}
.figure{font-family:"Onest",sans-serif; font-size:clamp(40px,5vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1}
.cell-law{grid-column:span 3; background:#fff; border:1px solid var(--line-2); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 44px; align-items:center; box-shadow:var(--shadow-s)}
.cell-law h3{grid-row:1; font-size:24px}
.cell-law p{grid-row:2; grid-column:1}
.ticks{display:flex; flex-direction:column; gap:12px; grid-row:1/3; grid-column:2}
.ticks li{display:flex; align-items:center; gap:11px; color:var(--ink); font-size:16px}
.ticks i{font-size:22px; color:var(--accent)}
.ticks-lg li{font-size:17px}

/* ── Шаги ───────────────────────────────────────────────── */
.steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,28px); margin-top:48px; counter-reset:s}
.step{display:flex; flex-direction:column; gap:14px}
.shot{overflow:hidden; border-radius:var(--r-img); height:268px}
.shot img{width:100%; height:100%; object-fit:cover; object-position:top center}
.shot-wide img{object-position:top center; object-fit:contain; background:#fff; padding:12px}
.step-no{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-deep); font-family:"Onest",sans-serif; font-weight:700; font-size:16px;
}
.step h3{font-size:20px; margin-top:-6px}

.steps-proof{
  margin-top:clamp(40px,6vw,72px); background:#fff; border:1px solid var(--line-2); border-radius:24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(24px,4vw,56px);
  align-items:center; padding:clamp(24px,4vw,48px); box-shadow:var(--shadow-m); overflow:hidden;
}
.proof-text h3{font-size:clamp(22px,2.6vw,30px); max-width:18ch}
.proof-text p{margin:16px 0 26px; color:var(--ink-2)}
.proof-shot{border-radius:var(--r-img); box-shadow:var(--shadow-l); justify-self:center; max-height:420px; width:auto; object-fit:cover; object-position:top}

/* ── Роли ───────────────────────────────────────────────── */
.roles-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:44px}
.role{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-s); transition:transform .2s ease, box-shadow .2s ease}
.role:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.role h3{font-size:19px; margin:16px 0 8px}
.role p{color:var(--ink-2); font-size:15.6px}
.role{grid-column:span 2}
.role-lead{grid-column:span 3; background:linear-gradient(150deg,#fff, #EEF5FE); border-color:rgba(47,143,237,.22)}
.role-second{grid-column:span 3}
.role-lead h3{font-size:24px}
.role-lead p{font-size:17px}
.gi{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:26px; color:#fff;
  background:linear-gradient(145deg,#6FB4FF,#1D6FE0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(29,111,224,.28);
}

/* ── Экономика и калькулятор ────────────────────────────── */
.money{background:linear-gradient(180deg,#fff, #F1F5FA)}
.money-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); align-items:center}
.money-copy p{margin:18px 0 26px; color:var(--ink-2); max-width:52ch}
.calc{padding:30px}
.calc h3{font-size:21px}
.calc label{display:block; margin-top:22px; font-size:14.5px; color:var(--ink-2)}
.calc output{display:block; font-family:"Onest",sans-serif; font-size:32px; font-weight:700; letter-spacing:-.02em; margin:2px 0 10px}
.calc input[type=range]{width:100%; accent-color:var(--accent); height:26px}
.calc-rows{margin-top:22px; display:flex; flex-direction:column; gap:2px}
.calc-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-2); font-size:15.5px; color:var(--ink-2)}
.calc-row b{font-family:"Onest",sans-serif; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
.calc-row-ours b{color:var(--accent-deep)}
.calc-row-save{border-bottom:0; padding-top:18px}
.calc-row-save b{font-size:24px}
.calc-note{margin-top:14px; font-size:13.5px; color:var(--ink-3); line-height:1.5}

/* ── Закон, фото во всю ширину ──────────────────────────── */
.law{position:relative; padding:clamp(72px,10vw,140px) 0; overflow:hidden}
.law-photo{position:absolute; inset:0; background:url("art/office-studio.jpg") center 35%/cover no-repeat}
.law-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg, rgba(8,14,24,.72), rgba(8,14,24,.3))}
.law .wrap{position:relative}
.law-card{max-width:620px; margin-left:auto; padding:clamp(26px,3.5vw,42px); background:linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,.72))}
.law-card h2{font-size:clamp(25px,3.4vw,38px); line-height:1.12}
.law-card p{margin-top:16px; color:var(--ink-2)}
.law-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 24px; margin-top:28px}
.law-grid div{display:flex; flex-direction:column; gap:3px; padding-top:14px; border-top:1px solid var(--line)}
.law-grid b{font-family:"Onest",sans-serif; font-size:15px}
.law-grid span{color:var(--ink-2); font-size:15px}

/* ── Каналы ─────────────────────────────────────────────── */
.ch-row{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px}
.ch{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-card); padding:22px 18px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow-s)}
.ch i{font-size:28px; color:var(--ink-3)}
.ch b{font-family:"Onest",sans-serif; font-size:16px; font-weight:600}
.ch span{font-size:13.5px; color:var(--ink-3)}
.ch-on i{color:var(--accent)}
.ch-on span{color:var(--accent-deep); font-weight:600}

/* ── Тарифы ─────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; align-items:stretch}
.plan{position:relative; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-card); padding:28px 24px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-s)}
.plan h3{font-size:19px}
.price{font-family:"Onest",sans-serif; font-size:32px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:baseline; gap:8px}
.price span{font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0}
.plan ul{display:flex; flex-direction:column; gap:10px; flex:1}
.plan li{font-size:15.5px; color:var(--ink-2); padding-left:24px; position:relative}
.plan li::before{content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent)}
.plan li.warn{color:var(--ink); background:#FFF6E0; border-radius:10px; padding:10px 12px 10px 12px}
.plan li.warn::before{display:none}
.plan-hit{border-color:rgba(47,143,237,.4); box-shadow:0 18px 44px rgba(47,143,237,.18)}
.plan-tag{position:absolute; top:-12px; left:24px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:var(--r-pill)}

/* ── Вопросы ────────────────────────────────────────────── */
.faq-in{max-width:880px}
.faq-list{margin-top:36px; border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:"Onest",sans-serif; font-weight:500; font-size:clamp(17px,2vw,20px);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:25px; color:var(--accent); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 44px 24px 0; color:var(--ink-2); max-width:70ch}

/* ── Финал ──────────────────────────────────────────────── */
.final{padding:clamp(60px,8vw,110px) 0; background:linear-gradient(150deg,#0E1726,#1C3352); color:#fff; text-align:center}
.final h2{font-size:clamp(27px,4vw,44px); line-height:1.1; max-width:20ch; margin:0 auto}
.final p{margin:18px auto 32px; color:rgba(255,255,255,.74); max-width:46ch}

/* ── Подвал ─────────────────────────────────────────────── */
.foot{background:#0B121D; color:rgba(255,255,255,.72); padding:52px 0}
.foot-in{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; align-items:start}
.foot .brand-name{color:#fff; font-size:20px}
.foot-brand p{margin-top:10px; font-size:15px; max-width:34ch}
.foot-links, .foot-contacts{display:flex; flex-direction:column; gap:11px; font-size:15px}
.foot a{text-decoration:none; display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.72); transition:color .15s ease}
.foot a:hover{color:#fff}
.foot i{font-size:19px}

/* ── Появление при скролле ──────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.seen{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav-links{display:none}
  .roles-grid{grid-template-columns:repeat(4,1fr)}
  .role{grid-column:span 2}
  .role-lead, .role-second{grid-column:span 2}
  .ch-row{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .hero-copy h1{max-width:100%}
  .hero-photo{background-position:center 28%}
  .hero-photo::after{background:linear-gradient(180deg, rgba(245,247,250,.94) 0%, rgba(245,247,250,.86) 55%, rgba(245,247,250,.7) 100%)}
  .bento{grid-template-columns:1fr}
  .cell-wide, .cell-law{grid-column:span 1}
  .cell-wide{flex-direction:column; padding:26px; gap:22px}
  .cell-wide img{border-radius:var(--r-img); transform:none; box-shadow:var(--shadow-m)}
  .cell-law{grid-template-columns:1fr}
  .cell-law h3, .cell-law p, .ticks{grid-row:auto; grid-column:auto}
  .steps-row{grid-template-columns:1fr; gap:34px}
  .shot{height:auto; max-height:320px}
  .steps-proof{grid-template-columns:1fr}
  .money-in{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr; gap:26px}
}
@media (max-width:620px){
  .nav-drop:not([hidden]){display:flex !important}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{display:none}
  .burger{display:block; margin-left:auto}
  .roles-grid, .ch-row, .plans{grid-template-columns:1fr}
  .role, .role-lead, .role-second{grid-column:span 1}
  .law-grid{grid-template-columns:1fr}
  .hero-buttons .btn{flex:1 1 100%}
}

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