.cmp-info { --info-accent:#0d6efd; --info-accent-dark:#0759cf; --info-soft:#edf5ff; width:100%; margin:0; padding:7px 0 40px; color:var(--cmp-ink); }
.cmp-info--seller { --info-accent:#176ca5; --info-accent-dark:#10547f; --info-soft:#eaf6fc; }
.cmp-info--manufacturer { --info-accent:#4d5fc4; --info-accent-dark:#3d4da7; --info-soft:#f0f1ff; }
.cmp-info--media { --info-accent:#6b54bb; --info-accent-dark:#55409d; --info-soft:#f4f0ff; }
.cmp-info--developer { --info-accent:#255b92; --info-accent-dark:#174873; --info-soft:#edf4fa; }
.cmp-info-nav { display:flex; align-items:center; gap:18px; min-height:52px; margin-bottom:14px; padding:7px 10px 7px 16px; border:1px solid var(--cmp-line); border-radius:14px; background:#fff; box-shadow:0 5px 20px rgb(24 45 78 / 4%); overflow:hidden; }
.cmp-info-nav__label { flex:0 0 auto; color:#78869a; font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.cmp-info-nav__items { display:flex; min-width:0; flex:1; align-items:center; justify-content:flex-end; gap:5px; overflow-x:auto; scrollbar-width:none; }
.cmp-info-nav__items::-webkit-scrollbar { display:none; }
.cmp-info-nav a { display:inline-flex; min-height:36px; align-items:center; gap:7px; padding:8px 11px; border-radius:9px; color:#596b82; font-size:11px; font-weight:650; line-height:1.2; text-decoration:none; white-space:nowrap; }
.cmp-info-nav a:hover { color:var(--info-accent); background:var(--info-soft); }
.cmp-info-nav a.is-active { color:#fff; background:var(--info-accent); box-shadow:0 6px 15px color-mix(in srgb,var(--info-accent) 22%,transparent); }
.cmp-info-nav a i { font-size:13px; }
.cmp-info-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(350px,.94fr); min-width:0; max-width:100%; align-items:center; min-height:490px; gap:38px; padding:52px; border:1px solid #d8e5f4; border-radius:26px; background:radial-gradient(circle at 88% 6%,color-mix(in srgb,var(--info-accent) 14%,transparent),transparent 39%),linear-gradient(130deg,#fff 0%,#f5f9ff 58%,var(--info-soft) 100%); box-shadow:0 16px 54px rgb(31 67 110 / 8%); overflow:hidden; }
.cmp-info-hero::after { position:absolute; right:41%; bottom:-110px; width:260px; height:260px; border:1px solid color-mix(in srgb,var(--info-accent) 12%,transparent); border-radius:50%; content:""; pointer-events:none; }
.cmp-info-hero__copy { position:relative; z-index:1; min-width:0; }
.cmp-info-eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--info-accent); font-size:11px; font-weight:750; letter-spacing:.085em; text-transform:uppercase; }
.cmp-info-eyebrow i { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:#fff; box-shadow:0 5px 18px rgb(35 68 107 / 9%); font-size:13px; }
.comparor-ui .cmp-info-hero h1 { max-width:630px; margin:20px 0 17px; color:#15283e; font-size:clamp(2.25rem,4vw,3.65rem); font-weight:780; letter-spacing:-.052em; line-height:1.04; }
.cmp-info-hero__copy > p { max-width:620px; margin:0; color:#5b6e85; font-size:16px; line-height:1.75; }
.cmp-info-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cmp-info-actions .btn { display:inline-flex; min-height:46px; align-items:center; gap:9px; padding:11px 17px; }
.cmp-info-actions .btn-primary { border-color:var(--info-accent); background:var(--info-accent); }
.cmp-info-actions .btn-primary:hover { border-color:var(--info-accent-dark); background:var(--info-accent-dark); }
.cmp-info-btn-secondary { border:1px solid #d4dfed; color:#344f6c; background:#fff; }
.cmp-info-btn-secondary:hover { border-color:#b9cce2; color:var(--info-accent); background:#fff; }
.cmp-info-hero__visual { position:relative; z-index:1; min-width:0; margin:0; }
.cmp-info-hero__visual::before { position:absolute; inset:7% 4% 2%; border-radius:46% 54% 47% 53%; background:color-mix(in srgb,var(--info-accent) 10%,#fff); filter:blur(3px); content:""; }
.cmp-info-hero__visual img { position:relative; display:block; width:100%; height:auto; max-height:390px; object-fit:contain; filter:drop-shadow(0 20px 24px rgb(33 62 96 / 15%)); }
.cmp-info-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:18px 0 76px; border:1px solid var(--cmp-line); border-radius:18px; background:var(--cmp-line); box-shadow:var(--cmp-shadow); overflow:hidden; }
.cmp-info-highlight { display:flex; align-items:flex-start; gap:14px; min-width:0; padding:22px; background:#fff; }
.cmp-info-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; color:var(--info-accent); background:var(--info-soft); font-size:15px; }
.comparor-ui .cmp-info-highlight h2 { margin:0 0 5px; font-size:14px; letter-spacing:-.015em; line-height:1.3; }
.cmp-info-highlight p { margin:0; color:#6b7a8e; font-size:11.5px; line-height:1.55; }
.cmp-info-section { margin:0 0 74px; }
.cmp-info-section--soft { padding:42px; border:1px solid #dee8f3; border-radius:22px; background:linear-gradient(145deg,#f8fbff,#fff); }
.cmp-info-section__heading { max-width:750px; margin-bottom:25px; }
.cmp-info-section__heading > span { display:block; margin-bottom:8px; color:var(--info-accent); font-size:10px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; }
.comparor-ui .cmp-info-section__heading h2 { margin:0; font-size:clamp(1.65rem,2.7vw,2.25rem); line-height:1.16; }
.cmp-info-section__heading p { margin:12px 0 0; color:#64758a; font-size:13px; line-height:1.7; }
.cmp-info-card-grid { display:grid; gap:14px; }
.cmp-info-card-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cmp-info-card-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cmp-info-card { position:relative; min-width:0; padding:25px; border:1px solid var(--cmp-line); border-radius:17px; background:#fff; box-shadow:0 8px 25px rgb(26 55 91 / 5%); }
.cmp-info-card__icon,.cmp-info-step { display:grid; width:42px; height:42px; margin-bottom:18px; place-items:center; border-radius:12px; color:var(--info-accent); background:var(--info-soft); font-size:17px; font-weight:780; }
.cmp-info-step { border:1px solid color-mix(in srgb,var(--info-accent) 20%,#fff); border-radius:50%; }
.comparor-ui .cmp-info-card h3 { margin:0 0 10px; font-size:17px; line-height:1.3; }
.cmp-info-card p { margin:0; color:#64758a; font-size:12.5px; line-height:1.7; }
.cmp-info-card ul { display:grid; gap:9px; margin:17px 0 0; padding:0; list-style:none; }
.cmp-info-card li { display:flex; align-items:flex-start; gap:9px; color:#52677f; font-size:12px; line-height:1.55; }
.cmp-info-card li i { margin-top:4px; color:var(--info-accent); font-size:9px; }
.cmp-info-text-link { display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:var(--info-accent); font-size:12px; font-weight:700; text-decoration:none; }
.cmp-info-text-link:hover { color:var(--info-accent-dark); }
.cmp-info-api { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:16px; }
.cmp-info-api__panel { padding:27px; border:1px solid var(--cmp-line); border-radius:18px; background:#fff; }
.cmp-info-api__panel h3 { margin:0 0 12px; font-size:18px; }
.cmp-info-api__panel p { color:#64758a; font-size:12.5px; line-height:1.7; }
.cmp-info-api__params { display:grid; gap:9px; margin:20px 0 0; padding:0; list-style:none; }
.cmp-info-api__params li { display:grid; grid-template-columns:100px 1fr; gap:12px; padding-top:9px; border-top:1px solid #edf1f5; color:#627287; font-size:11.5px; }
.cmp-info-api code { color:#174c85; font-size:11px; }
.cmp-info-code { margin:0; padding:24px; overflow:auto; border:1px solid #29455f; border-radius:16px; color:#dcecff; background:#13283c; box-shadow:0 14px 34px rgb(12 35 56 / 16%); font:12px/1.75 Consolas,Monaco,monospace; white-space:pre-wrap; word-break:break-word; }
.cmp-info-code code { color:inherit; }
.cmp-info-resources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cmp-info-resource { display:grid; min-height:205px; padding:25px; grid-template-rows:1fr auto; border:1px solid var(--cmp-line); border-radius:18px; color:var(--cmp-ink); background:#fff; text-decoration:none; overflow:hidden; }
.cmp-info-resource--dark { border-color:#183754; color:#fff; background:#183754; }
.cmp-info-resource__preview { display:flex; align-items:center; justify-content:center; min-height:90px; padding:20px; }
.cmp-info-resource__preview img { display:block; width:min(250px,80%); height:auto; }
.cmp-info-resource__meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:17px; border-top:1px solid #e8edf3; font-size:12px; font-weight:700; }
.cmp-info-resource--dark .cmp-info-resource__meta { border-color:rgb(255 255 255 / 18%); }
.cmp-info-resource:hover { color:var(--info-accent); border-color:#bcd2ef; }
.cmp-info-resource--dark:hover { color:#fff; border-color:#2d6fa9; background:#1b4162; }
.cmp-info-cta { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:31px 34px; border-radius:20px; color:#fff; background:radial-gradient(circle at 82% 10%,rgb(255 255 255 / 15%),transparent 30%),linear-gradient(125deg,var(--info-accent-dark),var(--info-accent)); box-shadow:0 16px 40px color-mix(in srgb,var(--info-accent) 22%,transparent); }
.cmp-info-cta__icon { display:grid; width:48px; height:48px; place-items:center; border:1px solid rgb(255 255 255 / 25%); border-radius:14px; background:rgb(255 255 255 / 12%); font-size:19px; }
.comparor-ui .cmp-info-cta h2 { margin:0 0 5px; color:#fff; font-size:20px; }
.cmp-info-cta p { margin:0; color:rgb(255 255 255 / 80%); font-size:12.5px; }
.cmp-info-cta .btn { display:inline-flex; min-height:44px; align-items:center; gap:8px; color:var(--info-accent-dark); background:#fff; }
@media (max-width:991.98px) {
  .cmp-info-nav { align-items:flex-start; flex-direction:column; gap:5px; padding:10px 11px; }
  .cmp-info-nav__items { width:100%; justify-content:flex-start; }
  .cmp-info-nav__label { padding:2px 6px; }
  .cmp-info-hero { grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); min-height:auto; padding:40px; }
  .cmp-info-card-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .cmp-info { width:calc(100vw - 24px); max-width:calc(100vw - 24px); padding-top:0; overflow:hidden; }
  .cmp-info-hero { grid-template-columns:minmax(0,1fr); gap:24px; padding:32px 25px; border-radius:20px; }
  .cmp-info-hero__copy,.cmp-info-hero__visual { width:100%; max-width:100%; }
  .comparor-ui .cmp-info-hero h1 { max-width:100%; overflow-wrap:anywhere; }
  .comparor-ui .cmp-info-hero h1 { font-size:2.25rem; }
  .cmp-info-hero__copy > p { font-size:14px; }
  .cmp-info-hero__visual { width:min(430px,100%); margin:auto; }
  .cmp-info-hero__visual img { max-height:290px; }
  .cmp-info-highlights { grid-template-columns:1fr; margin-bottom:54px; }
  .cmp-info-card-grid--2,.cmp-info-card-grid--3,.cmp-info-api,.cmp-info-resources { grid-template-columns:1fr; }
  .cmp-info-section { margin-bottom:54px; }
  .cmp-info-section--soft { padding:29px 20px; }
  .cmp-info-cta { grid-template-columns:auto 1fr; padding:26px 23px; }
  .cmp-info-cta .btn { grid-column:1/-1; justify-content:center; }
}
@media (max-width:420px) {
  .cmp-info-actions { align-items:stretch; flex-direction:column; }
  .cmp-info-actions .btn { justify-content:center; }
  .cmp-info-highlight { padding:18px; }
  .cmp-info-card { padding:21px; }
  .cmp-info-api__params li { grid-template-columns:80px 1fr; }
}