/* ── Hero: живой холст редактора ─────────────────────────── */
.hero{position:relative;padding:180px 0 90px;overflow:hidden}
.hero-grid-in{position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 72%);opacity:.4}
.hero-spot{position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(122,92,246,.18),transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;will-change:transform}
.hero:hover .hero-spot{opacity:1}

.hero-eyebrow{display:flex;justify-content:center;margin-bottom:30px}
.hero-stage{max-width:920px;margin:0 auto;text-align:center;position:relative}

/* мини-тулбар как в редакторе */
.hero-toolbar{display:inline-flex;gap:4px;padding:6px;border-radius:14px;margin:0 auto 26px;
  background:var(--surf2);border:1px solid var(--bd);backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);animation:floatY 5s ease-in-out infinite;
  user-select:none;cursor:default}
.hero-toolbar i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--t2);
  font-style:normal;font-size:15px;cursor:default;transition:.18s}
.hero-toolbar i.on{background:var(--grad-brand);color:#fff;box-shadow:0 6px 18px rgba(122,92,246,.4)}
/* декоративный мок-тулбар — без hover-эффекта, чтобы не выглядел кликабельным */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* заголовок как объект на холсте с рамкой выделения */
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.2;
  font-size:clamp(42px,7.4vw,88px);margin:0 auto;position:relative;display:inline-block;padding:6px 14px}
.hero h1 .l2{display:block}
.hero h1 .l2:first-child{margin-bottom:10px} /* зазор, чтобы плашка/рамка 1-й строки не лезли на 2-ю */
.sel-word{position:relative;display:inline-block;border-radius:4px}
/* активное слово рисуется ПОВЕРХ соседней строки (иначе градиентный текст 2-й строки
   перекрывает рамку и размерную плашку 1-й строки) */
.sel-word.active{z-index:5}
/* рамка выделения вокруг активного слова */
.sel-box{position:absolute;inset:-10px -8px;border:1.5px solid var(--brand-violet);border-radius:7px;
  opacity:0;transition:opacity .45s;pointer-events:none}
.sel-word.active .sel-box{opacity:1;animation:selpulse 2.6s ease-in-out infinite}
@keyframes selpulse{0%,100%{box-shadow:0 0 0 0 rgba(122,92,246,0)}50%{box-shadow:0 0 0 6px rgba(122,92,246,.08)}}
.sel-box::before,.sel-box::after,.sel-h{position:absolute;width:9px;height:9px;background:var(--bg);
  border:1.5px solid var(--brand-violet);border-radius:2px}
.sel-box::before{content:'';left:-5px;top:-5px}
.sel-box::after{content:'';right:-5px;top:-5px}
.sel-h.bl{left:-5px;bottom:-5px}.sel-h.br{right:-5px;bottom:-5px}
/* размерная плашка */
.sel-dim{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);z-index:6;
  background:var(--brand-violet);color:#fff;font-family:var(--font-mono);font-size:11px;
  padding:3px 9px;border-radius:6px;white-space:nowrap;opacity:0;transition:.45s;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.sel-word.active .sel-dim{opacity:1}
/* розовая направляющая-привязка */
.snap-guide{position:absolute;background:var(--brand-guide);opacity:0;transition:opacity .4s}
.snap-guide.v{width:1px;top:-40px;bottom:-40px}
.snap-guide.h{height:1px;left:-60px;right:-60px}
.sel-word.active .snap-guide{opacity:.55}

.hero-sub{max-width:620px;margin:40px auto 0;font-size:19px;color:var(--t2);line-height:1.65}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-trust{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:54px}
.htv{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1}
.htl{font-size:12.5px;color:var(--t3);margin-top:6px;font-family:var(--font-mono)}

/* ── секции ─────────────────────────────── */
.sec{padding:84px 0;position:relative}
.sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
.sec-head h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(30px,4.2vw,46px);line-height:1.08;margin-bottom:16px}
.sec-head p{color:var(--t2);font-size:17.5px}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{padding:28px;border-radius:18px;background:var(--surf);border:1px solid var(--bd);
  position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.feat:hover{border-color:var(--bd2)}
.feat-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  margin-bottom:16px;background:var(--surf2);border:1px solid var(--bd)}
.feat h3{font-size:19px;font-weight:700;margin-bottom:8px;font-family:var(--font-display)}
.feat p{color:var(--t2);font-size:14.5px;line-height:1.6}
.feat.big{grid-column:span 2;background:var(--grad-brand);border:0;color:#fff}
.feat.big h3,.feat.big p{color:#fff}.feat.big p{opacity:.9}
.feat.big .feat-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)}

/* сравнение */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto}
.cmp-card{padding:30px;border-radius:18px;border:1px solid var(--bd);background:var(--surf)}
.cmp-card.us{border-color:rgba(122,92,246,.45);background:linear-gradient(180deg,rgba(122,92,246,.08),var(--surf))}
.cmp-card h3{font-family:var(--font-display);font-size:22px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.cmp-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:14.5px;color:var(--t2);border-top:1px solid var(--bd)}
.cmp-row .m{flex-shrink:0;font-weight:700}
.cmp-card.us .m{color:var(--brand-teal)}.cmp-card.them .m{color:var(--t3)}

/* лента возможностей */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto}
.chip{padding:9px 16px;border-radius:30px;background:var(--surf);border:1px solid var(--bd);
  font-size:14px;color:var(--t2);font-family:var(--font-mono);transition:.2s}
.chip:hover{border-color:var(--brand-violet);color:var(--text)}

/* CTA */
.cta-band{max-width:1000px;margin:0 auto;padding:64px 40px;border-radius:28px;text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,rgba(122,92,246,.22),var(--surf));
  border:1px solid var(--bd2);position:relative;overflow:hidden}
.cta-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,42px);margin-bottom:14px;letter-spacing:-.02em}
.cta-band p{color:var(--t2);font-size:17px;max-width:520px;margin:0 auto 28px}

/* Единый контракт: 2 колонки на планшете, 1 на телефоне (было — 1 col ≤880). */
@media(min-width:768px) and (max-width:1199px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.feat-grid{grid-template-columns:1fr}.feat.big{grid-column:span 1}.cmp{grid-template-columns:1fr}}

/* ── FAQ (секция #faq — цель ссылок «FAQ» в футере) ───────────────── */
.faq-list{max-width:760px;margin:0 auto}
.faq-q{border-bottom:1px solid var(--bd)}
.faq-q summary{cursor:pointer;padding:20px 4px;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary .pl{color:var(--t2);transition:.25s;font-size:22px;font-weight:400}
.faq-q[open] summary .pl{transform:rotate(45deg);color:var(--acc)}
.faq-q p{padding:0 4px 22px;color:var(--t2);font-size:14.5px;line-height:1.65;margin:0}
.faq-q a{color:var(--acc)}