/* ============ homepage-specific styles ============ */

/* hero */
.hero{position:relative;overflow:hidden;padding:64px 0 40px}
.hero::before{
  content:"";position:absolute;top:-280px;right:-160px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(15,121,240,.16),transparent 62%);z-index:0;
}
.hero::after{
  content:"";position:absolute;bottom:-200px;left:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(106,82,232,.10),transparent 60%);z-index:0;
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero-copy{max-width:560px}
.hero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.04;margin:22px 0 20px}
.hero .sub{font-size:20px;color:var(--muted);margin-bottom:30px;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14.5px;font-weight:600}
.hero-trust .t{display:flex;align-items:center;gap:8px}
.hero-trust .t i{width:18px;height:18px;color:var(--emerald)}
.hero-trust .t i svg{width:18px;height:18px}
.hero-trust .sep{width:1px;height:18px;background:var(--line-strong)}

/* hero mock */
.hero-mock{position:relative;z-index:1}
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.mock-bar .url{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--muted-2);background:var(--bg-2);padding:4px 12px;border-radius:7px}
.mock-body{display:grid;grid-template-columns:1fr 1.15fr;gap:0}
.mock-form{padding:20px;border-right:1px solid var(--line);background:var(--surface-2)}
.mock-form .ttl{font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mock-step{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.mock-step .num{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent-700)}
.mock-step.done .num{background:var(--emerald);color:#fff}
.mock-step.active .num{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.mock-step .lbl{font-size:13.5px;font-weight:700;color:var(--ink)}
.mock-step .meta{font-size:12px;color:var(--muted)}
.mock-mini-field{background:var(--surface);border:1.5px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-size:12.5px;color:var(--ink-700);margin-top:6px;font-weight:600}
.mock-mini-field.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mock-progress{height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:6px}
.mock-progress b{display:block;height:100%;width:60%;background:linear-gradient(90deg,var(--accent),#46a0ff);border-radius:5px}

.mock-doc{padding:22px 22px 26px;position:relative;background:
  linear-gradient(var(--surface),var(--surface))}
.doc-paper{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:var(--shadow-xs)}
.doc-paper h6{font-size:12.5px;text-align:center;font-weight:800;letter-spacing:.04em;margin:0 0 12px;text-transform:uppercase;color:var(--ink)}
.doc-line{height:7px;border-radius:4px;background:var(--bg-2);margin:7px 0}
.doc-line.s{width:60%}.doc-line.m{width:85%}.doc-line.xs{width:38%}
.doc-line.hi{background:linear-gradient(90deg,var(--amber-soft),var(--amber-soft));box-shadow:0 0 0 1px var(--amber) inset;border-radius:4px}
.doc-sign{display:flex;justify-content:space-between;margin-top:16px;gap:14px}
.doc-sign .col{flex:1}
.doc-sign .sig{height:22px;border-bottom:1.5px solid var(--line-strong);margin-bottom:5px;position:relative}
.doc-sign .sig svg{position:absolute;bottom:-2px;left:6px;width:46px;height:22px;color:var(--accent)}

/* floating AI card */
.ai-float{
  position:absolute;left:-26px;bottom:30px;width:268px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 15px;
  animation:floaty 5s ease-in-out infinite;
}
.ai-float .ai-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ai-float .ai-av{width:30px;height:30px;border-radius:9px;background:var(--ink);display:grid;place-items:center}
.ai-float .ai-av img{width:20px;height:20px}
.ai-float .ai-head b{font-size:13px;font-weight:800}
.ai-float .ai-head .tag{font-size:11px}
.ai-risk{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:10px;margin-bottom:7px;font-size:12.5px;line-height:1.35}
.ai-risk i{width:16px;height:16px;flex:none;margin-top:1px}.ai-risk i svg{width:16px;height:16px}
.ai-risk.warn{background:var(--amber-soft);color:#8a5a06}
.ai-risk.warn i{color:var(--amber)}
.ai-risk.tip{background:var(--accent-soft);color:var(--accent-700)}
.ai-risk.tip i{color:var(--accent)}
.ai-risk b{font-weight:800}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* search section */
.searchbar{
  display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:var(--r-lg);padding:8px 8px 8px 20px;
  box-shadow:var(--shadow-md);max-width:760px;margin:0 auto;transition:border-color .15s,box-shadow .15s;
}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-md)}
.searchbar i.s{width:24px;height:24px;color:var(--muted-2);flex:none}
.searchbar i.s svg{width:24px;height:24px}
.searchbar input{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:18px;color:var(--ink);background:none}
.searchbar input::placeholder{color:var(--muted-2)}
.search-suggest{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
/* live search dropdown */
.search-wrap{position:relative;max-width:760px;margin:0 auto}
.ac-menu{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:6px;overflow-x:hidden;overflow-y:auto;text-align:left;
  max-height:min(60vh,540px);overscroll-behavior:contain;
}
.ac-menu[hidden]{display:none}
.ac-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.ac-item:hover,.ac-item.on{background:var(--bg-2)}
.ac-item .ic{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent-600);display:flex;align-items:center;justify-content:center;flex:none}
.ac-item .ic svg{width:18px;height:18px}
.ac-item .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ac-item .tt{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .ds{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .go{color:var(--muted-2);flex:none;display:flex}
.ac-item .go svg{width:16px;height:16px}
.ac-empty{padding:16px;text-align:center;color:var(--muted);font-size:14px}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{display:flex;flex-direction:column;padding:24px;border-radius:var(--r-lg)}
.cat-card .itile{margin-bottom:16px}
.cat-card h3{font-size:18px;margin-bottom:7px}
.cat-card p{font-size:14px;color:var(--muted);margin-bottom:18px;flex:1}
.cat-card .open{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--accent-600)}
.cat-card .open svg{width:15px;height:15px;transition:transform .15s}
.cat-card:hover .open svg{transform:translateX(3px)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;position:relative;box-shadow:var(--shadow-sm)}
.step .sn{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);margin-bottom:14px}
.step .itile{margin-bottom:16px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted)}
.step .connector{position:absolute;top:50px;right:-18px;width:18px;color:var(--line-strong);z-index:2}
.step .connector svg{width:18px;height:18px}

/* AI block (dark) */
.aiblock{background:linear-gradient(160deg,#0a1a35,#13294a 60%,#0d2247);border-radius:var(--r-xl);overflow:hidden;position:relative;box-shadow:var(--shadow-lg)}
.aiblock::before{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,121,240,.32),transparent 64%)}
.aiblock-inner{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center;padding:54px}
/* grid-элементы по умолчанию min-width:auto и не сжимаются ниже min-content */
.aiblock-inner > *{min-width:0}
.aiblock .eyebrow{color:#6db4ff}.aiblock .eyebrow::before{background:#6db4ff}
.aiblock h2{color:#fff;font-size:clamp(28px,3.2vw,40px);margin:16px 0 18px}
.aiblock p.lead{color:#aebfd8;font-size:18px;margin-bottom:26px;max-width:440px}
.aiblock .feat{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.aiblock .feat .f{display:flex;align-items:center;gap:11px;color:#d6e1f2;font-size:15px;font-weight:600}
.aiblock .feat .f i{width:22px;height:22px;color:#5fd0a0;flex:none}.aiblock .feat .f i svg{width:22px;height:22px}
/* AI mock panel */
.checkmock{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:18px;backdrop-filter:blur(6px)}
.checkmock .drop{border:1.5px dashed rgba(255,255,255,.28);border-radius:14px;padding:16px;display:flex;align-items:center;gap:13px;margin-bottom:16px;background:rgba(255,255,255,.03)}
.checkmock .drop .ic{width:42px;height:42px;border-radius:11px;background:rgba(15,121,240,.2);display:grid;place-items:center;color:#6db4ff;flex:none}
.checkmock .drop .ic svg{width:22px;height:22px}
.checkmock .drop .fn{color:#fff;font-weight:700;font-size:14.5px}
.checkmock .drop .fm{color:#8ea4c6;font-size:12.5px;font-family:var(--mono)}
.checkmock .scan{margin-left:auto;font-size:12px;color:#5fd0a0;font-weight:700;display:flex;align-items:center;gap:6px}
.checkmock .scan .pulse{width:8px;height:8px;border-radius:50%;background:#5fd0a0;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.risk-row{display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 13px;margin-bottom:9px}
.risk-row .rb{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}.risk-row .rb svg{width:17px;height:17px}
.risk-row.high .rb{background:rgba(224,82,74,.18);color:#ff8a82}
.risk-row.mid .rb{background:rgba(227,146,12,.18);color:#f5bd5c}
.risk-row .rt{color:#fff;font-weight:700;font-size:13.5px;margin-bottom:2px}
.risk-row .rd{color:#9fb1cd;font-size:12.5px;line-height:1.4}
.risk-row .fix{margin-left:auto;flex:none;align-self:center;font-size:12px;font-weight:700;color:#6db4ff;border:1px solid rgba(109,180,255,.4);padding:6px 11px;border-radius:8px;background:rgba(109,180,255,.08);white-space:nowrap;transition:all .15s}
.risk-row .fix:hover{background:rgba(109,180,255,.18)}

/* audiences */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aud-card{padding:26px;border-radius:var(--r-lg)}
.aud-card .top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.aud-card h3{font-size:18px}
.aud-card .docs{display:flex;flex-direction:column;gap:9px}
.aud-card .docs .d{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-700);font-weight:600}
.aud-card .docs .d i{width:16px;height:16px;color:var(--accent);flex:none}.aud-card .docs .d i svg{width:16px;height:16px}
a.d{text-decoration:none;transition:color .15s}
.aud-card .docs a.d:hover{color:var(--accent-600)}

/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust-item{display:flex;gap:15px;padding:24px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.trust-item .itile{width:46px;height:46px;border-radius:12px}
.trust-item .itile svg{width:23px;height:23px}
.trust-item h3{font-size:16px;margin-bottom:6px}
.trust-item p{font-size:14px;color:var(--muted)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:30px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-card.featured{border-color:var(--accent);box-shadow:var(--shadow-blue);transform:scale(1.025)}
.price-card.featured:hover{transform:scale(1.025) translateY(-4px)}
.price-card .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12.5px;font-weight:800;padding:6px 15px;border-radius:var(--r-pill);box-shadow:var(--shadow-blue);white-space:nowrap}
.price-card h3{font-size:19px;margin-bottom:6px}
.price-card .pdesc{font-size:14px;color:var(--muted);margin-bottom:20px;min-height:40px}
.price-card .amount{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.price-card .amount .v{font-size:38px;font-weight:800;letter-spacing:-.03em}
.price-card .amount .u{font-size:15px;color:var(--muted);font-weight:600}
.price-card .pre{font-size:13px;color:var(--muted-2);margin-bottom:22px;font-weight:600}
.price-card ul{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.price-card ul li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-700)}
.price-card ul li i{width:19px;height:19px;color:var(--emerald);flex:none;margin-top:1px}.price-card ul li i svg{width:19px;height:19px}

/* popular docs */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.docseo{display:flex;flex-direction:column;padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .18s,border-color .18s}
.docseo:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.docseo .dh{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.docseo .dh .di{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;flex:none}.docseo .dh .di svg{width:20px;height:20px}
.docseo h3{font-size:16px;line-height:1.25}
.docseo p{font-size:13.5px;color:var(--muted);margin-bottom:16px;flex:1}
.docseo .da{display:flex;align-items:center;justify-content:space-between}
.docseo .da .compose{font-size:14px;font-weight:700;color:var(--accent-600);display:inline-flex;align-items:center;gap:6px}
.docseo .da .compose svg{width:15px;height:15px;transition:transform .15s}
.docseo:hover .da .compose svg{transform:translateX(3px)}

/* cabinet block */
.cabinet{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
.cabinet > *{min-width:0}
.cabinet .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.cabinet .feat-list .f{display:flex;gap:11px;align-items:flex-start}
.cabinet .feat-list .f .ci{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;flex:none}.cabinet .feat-list .f .ci svg{width:18px;height:18px}
.cabinet .feat-list .f b{font-size:14.5px;display:block}
.cabinet .feat-list .f span{font-size:13px;color:var(--muted)}
/* cabinet mock */
.cab-mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.cab-mock .cm-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cab-mock .cm-top .av{width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.cab-mock .cm-top b{font-size:14.5px}.cab-mock .cm-top span{font-size:12.5px;color:var(--muted)}
.cab-mock .cm-row{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.cab-mock .cm-row:hover{background:var(--surface-2)}
.cab-mock .cm-row .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}.cab-mock .cm-row .fi svg{width:20px;height:20px}
.cab-mock .cm-row .info{flex:1;min-width:0}
.cab-mock .cm-row .info b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-mock .cm-row .info span{font-size:12px;color:var(--muted);font-family:var(--mono)}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;padding:22px 4px;text-align:left;font-size:18px;font-weight:700;color:var(--ink);font-family:inherit}
.faq-q .qi{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;flex:none;transition:transform .25s,background .2s}
.faq-q .qi svg{width:18px;height:18px}
.faq-item.open .faq-q .qi{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 4px 22px;color:var(--muted);font-size:16px;max-width:680px}

/* cta band */
.ctaband{background:linear-gradient(135deg,var(--accent),#2b86f2 55%,#5a6ff0);border-radius:var(--r-xl);padding:56px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.18),transparent 50%)}
.ctaband h2{position:relative;color:#fff;font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.ctaband p{position:relative;color:rgba(255,255,255,.9);font-size:19px;margin-bottom:30px;max-width:520px;margin-left:auto;margin-right:auto}
.ctaband .btn-white{background:#fff;color:var(--accent-700);position:relative}
.ctaband .btn-white:hover{background:#f0f6ff;transform:translateY(-2px)}
.ctaband .cb-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.ctaband .btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
.ctaband .btn-glass:hover{background:rgba(255,255,255,.24)}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-mock{max-width:560px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step .connector{display:none}
  .aiblock-inner{grid-template-columns:1fr;padding:36px}
  .aud-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .price-card.featured{transform:none}.price-card.featured:hover{transform:translateY(-4px)}
  .doc-grid{grid-template-columns:1fr 1fr}
  .cabinet{grid-template-columns:1fr;gap:36px}
}
@media (max-width:600px){
  /* мокап конструктора в hero на телефонах не показываем (решение владельца) */
  .hero-mock{display:none}
  .cat-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .aud-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
  .cabinet .feat-list{grid-template-columns:1fr}
  .mock-body{grid-template-columns:1fr}
  .mock-form{border-right:none;border-bottom:1px solid var(--line)}
  .ai-float{position:relative;left:0;bottom:0;width:auto;margin-top:-30px;animation:none}
  .ctaband{padding:40px 24px}
  .searchbar input{font-size:16px}
  .aiblock-inner{padding:26px 18px}
  /* мокап AI-проверки: не распирать блок */
  .checkmock{padding:14px}
  .checkmock .drop{flex-wrap:wrap;gap:10px;padding:14px}
  .checkmock .drop > div{min-width:0}
  .checkmock .drop .fn{overflow-wrap:anywhere}
  .risk-row{flex-wrap:wrap}
  .risk-row > div{min-width:0;flex:1 1 140px}
  .risk-row .fix{margin-left:41px;margin-top:6px;align-self:flex-start}
  /* мокап личного кабинета */
  .cab-mock .cm-top{flex-wrap:wrap}
  .cab-mock .cm-top > div{min-width:0}
}