.catalog-site { --cat-navy:#051326; --cat-blue:#168cff; --cat-light:#f4f7fa; margin:0; color:#0a1830; background:#fff; font-family:Arial,Helvetica,sans-serif; }
.catalog-container { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.catalog-header { position:absolute; z-index:20; inset:0 0 auto; border-bottom:1px solid rgba(255,255,255,.12); }
.catalog-header-inner { height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.catalog-brand { display:flex; align-items:center; gap:11px; color:#fff; }
.catalog-brand img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(52,160,255,.28)); }
.catalog-brand > span { display:flex; flex-direction:column; line-height:1; }
.catalog-brand strong { font-size:18px; letter-spacing:.2em; }
.catalog-brand small { margin-top:6px; color:#a8b8ca; font-size:8px; letter-spacing:.4em; }
.catalog-header nav { display:flex; gap:30px; margin-left:auto; }
.catalog-header nav a { color:#c9d5e0; font-size:12px; }
.catalog-header-cta { min-height:42px; padding:0 17px; display:flex; align-items:center; gap:8px; color:#fff; background:var(--cat-blue); border-radius:3px; font-size:11px; font-weight:800; }
.catalog-hero { position:relative; min-height:760px; display:flex; align-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 75% 45%,#123e6c,#071d39 37%,#041225 74%); }
.catalog-hero::before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.catalog-orb { position:absolute; border:1px solid rgba(84,177,255,.15); border-radius:50%; }
.catalog-orb.one { width:620px; height:620px; right:-190px; top:-180px; box-shadow:0 0 0 95px rgba(69,169,255,.025); }
.catalog-orb.two { width:310px; height:310px; left:-190px; bottom:-150px; }
.catalog-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr .85fr; gap:80px; align-items:center; padding-top:88px; }
.catalog-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:32px; color:#96abc0; font-size:10px; }
.catalog-kicker { display:flex; align-items:center; gap:8px; color:#8fcfff; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.catalog-hero h1 { max-width:740px; margin:22px 0; font-size:clamp(48px,5.2vw,75px); line-height:.99; letter-spacing:-.052em; }
.catalog-hero-copy > p { max-width:660px; margin:0; color:#b5c5d5; font-size:16px; line-height:1.75; }
.catalog-actions { display:flex; gap:14px; margin-top:35px; }
.catalog-btn { min-height:52px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:3px; font-size:12px; font-weight:800; transition:.2s ease; }
.catalog-btn:hover { transform:translateY(-2px); }
.catalog-btn.primary { color:#fff; background:var(--cat-blue); }
.catalog-btn.ghost { color:#fff; border:1px solid rgba(255,255,255,.24); }
.catalog-btn.light-btn { color:#0a65b9; background:#fff; }
.catalog-stack { position:relative; min-height:500px; perspective:1200px; }
.stack-card { position:absolute; width:350px; height:225px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:5px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.stack-card img { width:100%; height:100%; object-fit:cover; }
.stack-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,11,21,.8),transparent 58%); }
.stack-card span { position:absolute; z-index:2; left:18px; bottom:15px; font-size:8px; font-weight:800; letter-spacing:.18em; }
.stack-card.s1 { top:20px; left:20px; transform:rotateY(-11deg) rotateZ(-4deg); }
.stack-card.s2 { top:145px; right:5px; transform:rotateY(-9deg) rotateZ(4deg); }
.stack-card.s3 { bottom:5px; left:45px; transform:rotateY(-8deg) rotateZ(-2deg); }
.catalog-principles { border-bottom:1px solid #dfe7ef; }
.catalog-principles .catalog-container { min-height:96px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; }
.catalog-principles p { margin:0; padding:10px 30px; color:#738295; font-size:11px; border-right:1px solid #dfe7ef; }
.catalog-principles p:first-child { padding-left:0; }
.catalog-principles p:last-child { border:0; }
.catalog-principles span { display:block; margin-bottom:5px; color:#0a1830; font-size:12px; font-weight:850; letter-spacing:.08em; }
.catalog-section { padding:112px 0; }
.catalog-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:end; }
.catalog-label { display:inline-flex; align-items:center; gap:10px; color:#1687ef; font-size:9px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.catalog-label::before { content:""; width:30px; height:1px; background:currentColor; }
.catalog-label.light { color:#82c5ff; }
.catalog-heading h2,.catalog-compare-head h2,.catalog-future-grid h2,.catalog-method-copy h2,.catalog-contact h2 { margin:18px 0 0; font-size:clamp(37px,4.2vw,58px); line-height:1.05; letter-spacing:-.047em; }
.catalog-heading > p { margin:0 0 4px; color:#68798b; font-size:14px; line-height:1.75; }
.catalog-demo-list { margin-top:60px; display:grid; gap:24px; }
.catalog-demo { min-height:430px; display:grid; grid-template-columns:1.12fr .88fr; overflow:hidden; border:1px solid #dae3eb; border-radius:6px; background:#fff; }
.catalog-demo:nth-child(even) { grid-template-columns:.88fr 1.12fr; }
.catalog-demo:nth-child(even) .demo-image { order:2; }
.demo-image { position:relative; min-height:430px; overflow:hidden; background:#0b1623; }
.demo-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.55s ease; }
.catalog-demo:hover .demo-image img { transform:scale(1.035); }
.demo-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,12,22,.67),transparent 55%); }
.demo-image > span { position:absolute; z-index:2; left:25px; bottom:22px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.18em; }
.demo-copy { padding:46px; display:flex; flex-direction:column; justify-content:center; }
.demo-category { display:flex; align-items:center; gap:9px; color:#167fdb; font-size:10px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.catalog-demo.solar .demo-category { color:#07805f; }
.catalog-demo.performance .demo-category { color:#d51d23; }
.catalog-demo.detailing .demo-category { color:#987039; }
.catalog-demo.clinic .demo-category { color:#0c6964; }
.catalog-demo.salon .demo-category { color:#9a5739; }
.demo-copy h3 { margin:18px 0 14px; font-size:34px; line-height:1.07; letter-spacing:-.04em; }
.demo-copy > p { margin:0; color:#6c7b8b; font-size:13px; line-height:1.75; }
.demo-copy ul { list-style:none; margin:26px 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.demo-copy li { padding:7px 10px; color:#6c7b8b; background:#f0f4f7; border-radius:2px; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.demo-copy > a { display:inline-flex; align-items:center; gap:9px; color:#0d75d1; font-size:11px; font-weight:850; }
.catalog-demo.solar .demo-copy > a { color:#087a5d; }
.catalog-demo.performance .demo-copy > a { color:#c71a20; }
.catalog-demo.detailing .demo-copy > a { color:#8d682f; }
.catalog-demo.clinic .demo-copy > a { color:#0a625d; }
.catalog-demo.salon .demo-copy > a { color:#915137; }
.catalog-demo.school .demo-category,.catalog-demo.school .demo-copy > a { color:#2456ae; }
.catalog-demo.restaurant .demo-category,.catalog-demo.restaurant .demo-copy > a { color:#a74e30; }
.catalog-demo.commerce .demo-category,.catalog-demo.commerce .demo-copy > a { color:#35644b; }
.catalog-compare { padding:112px 0; color:#fff; background:#06162b; }
.catalog-compare-head { max-width:780px; }
.compare-table { margin-top:55px; border-top:1px solid rgba(255,255,255,.18); }
.compare-row { display:grid; grid-template-columns:1fr 1.15fr 1.2fr .85fr; border-bottom:1px solid rgba(255,255,255,.13); }
.compare-row > * { min-height:75px; padding:20px 18px; display:flex; align-items:center; color:#aebed0; font-size:11px; border-right:1px solid rgba(255,255,255,.1); }
.compare-row > *:first-child { padding-left:0; }
.compare-row > *:last-child { border:0; }
.compare-row strong { color:#fff; }
.compare-title > * { min-height:55px; color:#679bc7; font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.catalog-future { background:#f4f7fa; }
.catalog-future-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:100px; align-items:center; }
.catalog-future-grid > div:first-child > p { margin:23px 0; color:#68798b; font-size:14px; line-height:1.8; }
.catalog-future-grid > div:first-child > a { display:inline-flex; align-items:center; gap:9px; color:#0d75d1; font-size:11px; font-weight:850; }
.future-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #d7e1e9; border-left:1px solid #d7e1e9; }
.future-grid div { min-height:125px; padding:24px; display:grid; grid-template-columns:auto 1fr; align-content:center; gap:7px 13px; border-right:1px solid #d7e1e9; border-bottom:1px solid #d7e1e9; }
.future-grid svg { grid-row:1 / 3; color:#1687ef; }
.future-grid span { font-size:12px; font-weight:800; }
.future-grid small { color:#97a4b0; font-size:7px; font-weight:800; letter-spacing:.13em; }
.catalog-method { padding:112px 0; color:#fff; background:radial-gradient(circle at 82% 35%,#133e69,#06172c 58%); }
.catalog-method-copy { max-width:740px; }
.catalog-method-copy a { margin-top:24px; display:inline-flex; align-items:center; gap:8px; color:#7bc4ff; font-size:12px; font-weight:800; }
.catalog-method ol { list-style:none; margin:58px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.15); }
.catalog-method li { padding:28px 25px 0 0; border-right:1px solid rgba(255,255,255,.13); }
.catalog-method li + li { padding-left:25px; }
.catalog-method li:last-child { border:0; }
.catalog-method li > span { display:block; margin-bottom:30px; color:#50acfa; font-size:9px; font-weight:850; letter-spacing:.16em; }
.catalog-method strong { font-size:17px; }
.catalog-method p { margin:10px 0 0; color:#92a8bc; font-size:11px; line-height:1.65; }
.catalog-contact { padding:82px 0; color:#fff; background:linear-gradient(110deg,#0878df,#1494ff 55%,#0c69c0); }
.catalog-contact .catalog-container { display:flex; align-items:center; justify-content:space-between; gap:60px; }
.catalog-contact h2 { max-width:800px; color:#fff; }
.catalog-contact p { margin:14px 0 0; color:#d7ecff; font-size:12px; }
.catalog-footer { padding:50px 0; color:#8fa4b8; background:#030c1a; }
.catalog-footer .catalog-container { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.catalog-footer p { margin:0; font-size:9px; }
.catalog-footer > .catalog-container > div:nth-of-type(2) { display:flex; gap:20px; color:#c1cfdb; font-size:10px; }
.catalog-footer > .catalog-container > span { font-size:9px; text-align:right; }
@media (max-width:900px) {
  .catalog-header nav { display:none; }
  .catalog-hero-grid,.catalog-heading,.catalog-future-grid { grid-template-columns:1fr; gap:45px; }
  .catalog-hero-grid { padding:145px 0 90px; }
  .catalog-stack { min-height:470px; width:min(100%,520px); margin:auto; }
  .catalog-demo,.catalog-demo:nth-child(even) { grid-template-columns:1fr; }
  .catalog-demo:nth-child(even) .demo-image { order:0; }
  .compare-row { grid-template-columns:1fr 1fr; }
  .compare-row > * { border-bottom:1px solid rgba(255,255,255,.08); }
  .catalog-method ol { grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .catalog-contact .catalog-container { align-items:flex-start; flex-direction:column; }
}
@media (max-width:640px) {
  .catalog-container { width:min(100% - 30px,1180px); }
  .catalog-header-inner { height:76px; }
  .catalog-header-cta { width:42px; padding:0; font-size:0; justify-content:center; }
  .catalog-hero-grid { padding-top:125px; }
  .catalog-hero h1 { font-size:45px; }
  .catalog-actions { flex-direction:column; align-items:stretch; }
  .catalog-stack { min-height:400px; transform:scale(.84); transform-origin:top center; margin-bottom:-60px; }
  .catalog-principles .catalog-container { grid-template-columns:1fr; padding:18px 0; }
  .catalog-principles p,.catalog-principles p:first-child { padding:13px 0; border-right:0; border-bottom:1px solid #dfe7ef; }
  .catalog-section,.catalog-compare,.catalog-method { padding:82px 0; }
  .catalog-heading h2,.catalog-compare-head h2,.catalog-future-grid h2,.catalog-method-copy h2,.catalog-contact h2 { font-size:38px; }
  .demo-image { min-height:300px; }
  .demo-copy { padding:28px; }
  .demo-copy h3 { font-size:29px; }
  .compare-row { grid-template-columns:1fr; padding:17px 0; }
  .compare-row > *,.compare-row > *:first-child { min-height:auto; padding:6px 0; border:0; }
  .compare-title { display:none; }
  .future-grid { grid-template-columns:1fr; }
  .catalog-method ol { grid-template-columns:1fr; }
  .catalog-method li,.catalog-method li + li { padding:25px 0 0; border-right:0; border-top:1px solid rgba(255,255,255,.13); }
  .catalog-method li:first-child { border-top:0; }
  .catalog-footer .catalog-container { grid-template-columns:1fr; }
  .catalog-footer > .catalog-container > span { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { .catalog-site * { scroll-behavior:auto!important; transition:none!important; } }
.catalog-demo.jewelry .demo-category,.catalog-demo.jewelry .demo-copy > a { color:#92733c; }
.catalog-demo.wedding .demo-category,.catalog-demo.wedding .demo-copy > a { color:#7e6450; }
.catalog-demo.law .demo-category,.catalog-demo.law .demo-copy > a { color:#736039; }
.catalog-demo.portal .demo-category,.catalog-demo.portal .demo-copy > a { color:#174c92; }
