/* Общие блоки главной и /b2b: сравнение «обычная студия vs SQORA PRO» и прикрепление файлов к заявке */

/* ---------- сравнение ---------- */
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:28px; overflow:hidden; border:1px solid #e2e8f1; background:#fff; box-shadow:0 30px 70px -40px rgba(10,22,40,.3); }
.cmp-col { padding:30px 30px 14px; }
.cmp-col.them { background:#f6f8fb; }
.cmp-col.us { position:relative; background:radial-gradient(circle at 100% 0%, rgba(32,130,255,.14), transparent 55%), #fff; }
.cmp-col.us::before { content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:linear-gradient(180deg, transparent, #c9d6ea, transparent); }
.cmp-h { display:flex; align-items:center; gap:12px; height:40px; margin-bottom:18px; }
.cmp-h b { font-size:18px; font-weight:800; color:#0a1628; }
.cmp-h .tag { font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:#e9edf3; color:#5b6b82; }
.cmp-h img { height:26px; width:auto; display:block; }
.cmp-h .best { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; background:#2082ff; color:#fff; }
.cmp-row { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-top:1px dashed #e2e8f1; opacity:0; transform:translateX(-10px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.cmp-col.us .cmp-row { transform:translateX(10px); }
.cmp.in .cmp-row { opacity:1; transform:none; }
.cmp-row i { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:800; margin-top:1px; }
.them .cmp-row i { background:#fde8e8; color:#dc2626; }
.us .cmp-row i { background:#dcfce7; color:#16a34a; transform:scale(.6); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.cmp.in .us .cmp-row i { transform:none; }
.cmp-row div { min-width:0; }
.cmp-row small { display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; margin-bottom:3px; }
.cmp-row span { font-size:15px; line-height:1.5; }
.them .cmp-row span { color:#5b6b82; }
.us .cmp-row span { color:#0a1628; font-weight:600; }
.cmp-row.hl { background:linear-gradient(90deg, rgba(32,130,255,.06), transparent); }
@media (max-width:760px) {
  .cmp { grid-template-columns:1fr; border-radius:24px; }
  .cmp-col { padding:22px 18px 8px; }
  .cmp-col.us::before { display:none; }
  .cmp-col.them { border-bottom:1px solid #e2e8f1; }
}

/* ---------- прикрепление файлов ---------- */
.attach { display:grid; gap:10px; }
.attach-drop { position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border:1.5px dashed #c3d3ea; border-radius:16px; background:#f8fbff; cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s; color:#0a1628; }
.attach-drop:hover, .attach-drop.over { border-color:#2082ff; background:#eef5ff; }
.attach-drop.over { transform:scale(1.01); }
.attach-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.attach-ic { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:#fff; box-shadow:0 4px 12px -6px rgba(10,22,40,.25); }
.attach-drop b { display:block; font-size:14px; }
.attach-drop small { display:block; font-size:12px; color:#5b6b82; margin-top:2px; }
.attach-list { display:flex; flex-wrap:wrap; gap:8px; }
.attach-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:7px 8px 7px 12px; border-radius:999px; background:#fff; border:1px solid #d6e2f3; font-size:13px; color:#0a1628; animation:attIn .3s cubic-bezier(.2,.8,.2,1); }
.attach-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.attach-chip em { font-style:normal; color:#94a3b8; font-size:12px; }
.attach-chip button { width:22px; height:22px; border-radius:50%; border:0; background:#eef2f8; color:#5b6b82; cursor:pointer; font-size:11px; line-height:1; }
.attach-chip button:hover { background:#fde8e8; color:#dc2626; }
.attach-err { font-size:13px; color:#b91c1c; }
@keyframes attIn { from { opacity:0; transform:scale(.9); } }

/* ---------- главный отзыв ---------- */
.rv-feat { position:relative; margin:0 0 24px; padding:44px 48px 34px; border-radius:30px; overflow:hidden; color:#0a1628;
  background:radial-gradient(circle at 100% 0%, rgba(32,130,255,.13), transparent 50%), radial-gradient(circle at 0% 100%, rgba(125,211,252,.12), transparent 45%), #fff;
  border:1px solid #e2e8f1; box-shadow:0 30px 70px -40px rgba(10,22,40,.35); }
.rvf-q { position:absolute; top:-30px; right:34px; font:800 220px/1 Georgia, serif; color:rgba(32,130,255,.1); pointer-events:none; }
.rv-feat blockquote { margin:0; position:relative; }
.rv-feat blockquote p { margin:0 0 14px; font-size:16px; line-height:1.7; color:#334155; max-width:860px; }
.rv-feat .rvf-pull { font-size:clamp(20px,2.2vw,28px); line-height:1.35; font-weight:800; letter-spacing:-.015em; color:#0a1628; max-width:900px; margin-bottom:22px;
  background:linear-gradient(90deg,#0a1628 0%,#0a1628 55%,#2082ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rv-feat figcaption { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px dashed #e2e8f1; }
.rvf-ava { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#60a5fa,#2563eb); flex:none; }
.rv-feat figcaption b { display:block; font-size:16px; }
.rv-feat figcaption small { display:block; font-size:13px; color:#5b6b82; margin-top:2px; }
.rvf-proj { margin-left:auto; display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:14px; border:1px solid #e2e8f1; background:#fff; text-decoration:none; transition:border-color .2s, transform .2s; }
.rvf-proj:hover { border-color:#2082ff; transform:translateY(-2px); }
.rvf-proj img { height:26px; width:auto; display:block; }
.rvf-proj em { font-style:normal; font-size:13px; font-weight:600; color:#2082ff; white-space:nowrap; }
@media (max-width:760px) {
  .rv-feat { padding:28px 20px 24px; border-radius:24px; }
  .rvf-q { font-size:150px; top:-20px; right:14px; }
  .rvf-proj { margin-left:0; }
}