:root {
  --night: #0A0F1C;
  --navy: #0D1B2E;
  --blue: #1565FF;
  --cyan: #00D4FF;
  --mint: #00E6B8;
  --gray: #6B7280;
  --white: #FFFFFF;
  --ice: #F6F9FD;
  --ink: #101827;
  --muted: #5F6A7A;
  --line: #D8E2EF;
  --gradient: linear-gradient(135deg, var(--blue), var(--cyan) 52%, var(--mint));
  --font: Inter, "Open Sans", Arial, sans-serif;
  --display: Montserrat, Inter, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #dfe7f1; color: var(--ink); font-family: var(--font); }
.catalog-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 24px; background: rgba(10,15,28,.92); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.catalog-logo img { width: 150px; height: 52px; object-fit: contain; }
.catalog-header nav { display: flex; gap: 10px; flex-wrap: wrap; }
.catalog-header a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 800; }
.catalog-header nav a { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); }
.catalog-nav { position: fixed; left: 18px; top: 92px; bottom: 24px; z-index: 10; width: 210px; overflow: auto; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 16px 50px rgba(10,15,28,.16); }
.catalog-nav a { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 8px 6px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #e7eef7; font-size: 12px; font-weight: 700; }
.catalog-nav span { color: var(--blue); }
.catalog { display: grid; gap: 28px; padding: 28px 28px 28px 252px; }
.page { position: relative; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 24mm 20mm; overflow: hidden; background: var(--white); box-shadow: 0 20px 70px rgba(10,15,28,.18); }
.page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 12%, rgba(0,212,255,.14), transparent 28%), linear-gradient(90deg, rgba(21,101,255,.06), transparent 32%); }
.page > * { position: relative; z-index: 1; }
.page-number { position: absolute; right: 16mm; bottom: 10mm; color: #8a96a8; font-weight: 800; font-size: 10px; }
h1,h2,h3 { font-family: var(--display); line-height: 1.05; letter-spacing: 0; }
h1 { max-width: 620px; color: var(--white); font-size: 54px; margin: 24px 0 18px; }
h2 { font-size: 38px; margin: 0 0 18px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.lead { max-width: 680px; font-size: 18px; color: inherit; }
.catalog-kicker { margin: 0 0 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: 12px; }
.cover-brand img { width: 285px; height: auto; }
.page-cover, .page-back { color: var(--white); background: linear-gradient(135deg, var(--night), var(--navy)); }
.page-cover::before, .page-back::before { background: radial-gradient(circle at 72% 22%, rgba(0,212,255,.28), transparent 30%), radial-gradient(circle at 18% 82%, rgba(0,230,184,.16), transparent 34%); }
.toc { list-style: none; padding: 0; margin: 28px 0 0; columns: 2; column-gap: 38px; }
.toc li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.toc span { color: var(--blue); display: inline-block; width: 36px; }
.signature { margin-top: 40px; color: var(--ink); font-weight: 800; }
.three-cards, .reason-grid, .pricing-grid, .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.three-cards article, .reason-grid article, .pricing-grid article, .case-grid article, .faq article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(10,15,28,.08); }
.reason-grid { grid-template-columns: repeat(2, 1fr); }
.reason-grid span { display: block; width: 30px; height: 4px; background: var(--gradient); border-radius: 20px; margin-bottom: 12px; }
.services-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.services-cloud span { padding: 8px 12px; border-radius: 999px; color: var(--navy); background: #eef6ff; border: 1px solid #d9e7f7; font-size: 12px; font-weight: 800; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; margin: 24px 0; list-style: none; }
.feature-list li { padding: 12px; border-left: 4px solid var(--cyan); background: var(--ice); border-radius: 8px; font-weight: 700; }
.image-placeholder, .cert-box, .promise-seal { margin-top: 26px; min-height: 170px; padding: 22px; display: grid; place-items: center; border-radius: 14px; color: var(--white); text-align: center; background: linear-gradient(135deg, rgba(10,15,28,.96), rgba(13,27,46,.86)), var(--navy); border: 1px solid rgba(0,212,255,.35); }
.catalog-photo { width: 100%; height: 210px; object-fit: cover; display: block; margin-top: 24px; border-radius: 16px; border: 1px solid rgba(0,212,255,.28); box-shadow: 0 18px 38px rgba(10,15,28,.14); }
.catalog-photo-wide { height: 190px; }
.pricing-grid article strong { display: block; margin: 12px 0; color: var(--blue); font-size: 22px; }
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.logo-grid article { min-height: 120px; display: grid; place-items: center; gap: 8px; padding: 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(10,15,28,.08); text-align: center; font-weight: 800; }
.logo-grid img { max-width: 100px; max-height: 58px; object-fit: contain; }
.placeholder-logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; color: #fff; background: var(--gradient); font-weight: 900; }
.process { display: grid; gap: 14px; margin-top: 28px; }
.process article { display: grid; grid-template-columns: 70px 1fr; gap: 18px; align-items: start; padding: 18px; background: var(--ice); border-radius: 12px; }
.process strong { color: var(--cyan); font-size: 28px; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 28px; overflow: hidden; border-radius: 12px; }
.data-table th { color: #fff; background: var(--navy); }
.data-table th, .data-table td { padding: 14px; border: 1px solid var(--line); text-align: left; }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.qr-row { display: flex; gap: 22px; margin: 28px 0; }
.qr-row article { width: 170px; padding: 16px; border-radius: 14px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 12px 30px rgba(10,15,28,.12); }
.qr-row img { width: 128px; height: 128px; }
blockquote { margin: 16px 0 0; padding: 14px; border-left: 4px solid var(--mint); background: var(--ice); color: var(--muted); }
.floating-quote { position: fixed; right: 22px; bottom: 22px; z-index: 30; padding: 13px 16px; border-radius: 999px; color: #06111e; background: linear-gradient(135deg, var(--cyan), var(--mint)); text-decoration: none; font-weight: 900; box-shadow: 0 18px 48px rgba(0,212,255,.24); }
@media (max-width: 1180px) { .catalog-nav { display: none; } .catalog { padding: 24px; } }
@media (max-width: 820px) { .catalog-header { align-items: flex-start; flex-direction: column; } .page { width: min(100%, 210mm); min-height: auto; padding: 44px 24px 76px; } .catalog { padding: 14px; gap: 16px; } h1 { font-size: 38px; } h2 { font-size: 30px; } .three-cards,.reason-grid,.pricing-grid,.case-grid,.faq,.logo-grid { grid-template-columns: 1fr; } .feature-list { grid-template-columns: 1fr; } .qr-row { flex-wrap: wrap; } .floating-quote { left: 14px; right: 14px; text-align: center; } }
@media print { body { background: #fff; } .catalog-header,.catalog-nav,.floating-quote { display: none; } .catalog { padding: 0; gap: 0; } .page { box-shadow: none; break-after: page; margin: 0; } }