
:root{
  --catalog-bg:#f5f7fa;
  --soft-blue:#eef3f8;
  --line-2:#dfe5ec;
  --steel:#6d7a89;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main-nav a.is-active{color:var(--navy)}
.main-nav a.is-active::after{width:100%}
.catalog-wrap{width:min(1320px,calc(100% - 64px));margin:0 auto}
.catalog-hero{padding:58px 0 42px;background:linear-gradient(135deg,#f8fafc 0%,#eef3f7 100%);border-bottom:1px solid var(--line-2)}
.eyebrow{margin:0 0 13px;color:#52708f;font-size:12px;font-weight:900;letter-spacing:.16em}
.catalog-hero h1{margin:0;color:var(--navy);font-size:clamp(34px,3.3vw,50px);line-height:1.16;letter-spacing:-.06em}
.catalog-hero h1 strong{color:#245a91}
.catalog-hero p:last-child{margin:16px 0 0;color:#746b63;font-size:15px;line-height:1.7;max-width:720px}
.catalog-controls{position:sticky;top:84px;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-2);backdrop-filter:blur(14px)}
.controls-inner{display:grid;grid-template-columns:1fr 260px auto;gap:16px;align-items:center;padding:18px 0}
.filter-row{display:flex;flex-wrap:wrap;gap:7px}
.filter-chip{height:38px;padding:0 14px;border:1px solid #d9e0e7;background:#fff;border-radius:999px;color:#425164;font-weight:800;font-size:13px;cursor:pointer}
.filter-chip:hover,.filter-chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.model-search input{width:100%;height:42px;border:1px solid #d7dee7;border-radius:8px;padding:0 14px;font:inherit;color:#1e2b3a;outline:none;background:#fff}
.model-search input:focus{border-color:#7f9fbd;box-shadow:0 0 0 3px rgba(36,90,145,.08)}
.result-count{margin:0;color:#7a8694;font-size:13px;white-space:nowrap}
.result-count strong{color:var(--navy);font-size:15px}
.catalog-list{padding:44px 0 84px;background:var(--catalog-bg)}
.list-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}
.list-heading>div{display:flex;align-items:center;gap:15px}
.list-no{display:grid;place-items:center;width:42px;height:42px;border:1px solid #cfd8e1;border-radius:50%;color:#41617f;font-size:12px;font-weight:900}
.list-heading h2{margin:0;color:var(--navy);font-size:25px;letter-spacing:-.05em}
.list-heading p{margin:0;color:#7a8694;font-size:13px}
.model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 18px}
.model-card{position:relative;min-width:0;background:#fff;border:1px solid #e0e5eb;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(27,46,68,.04);transition:.2s ease}
.model-card::before{content:"";position:absolute;left:0;top:0;width:4px;height:68px;background:#7f9ab4}
.model-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(27,46,68,.09)}
.model-card__top{height:58px;padding:18px 16px 0 20px;display:flex;justify-content:space-between;gap:10px}
.model-card__brand{font-size:12px;font-weight:900;color:#5e7082;letter-spacing:.04em}
.model-card__price-chip{font-size:11px;font-weight:900;color:#8b6a16;background:#fbf5df;border:1px solid #eee0aa;border-radius:999px;padding:5px 8px;white-space:nowrap}
.model-card__image{display:flex;align-items:center;justify-content:center;height:235px;padding:10px 28px;background:#fff}
.model-card__image img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s ease}
.model-card:hover .model-card__image img{transform:scale(1.025)}
.model-card__body{padding:16px 16px 18px;border-top:0;box-sizing:border-box}
.model-card h3{margin:0 0 12px;color:var(--navy);font-size:16px;line-height:1.38;letter-spacing:-.03em;min-height:44px}
.model-tags{display:flex;flex-wrap:wrap;gap:5px;min-height:30px}
.model-tags span{padding:5px 7px;background:#f1f4f7;border-radius:4px;color:#5e6d7c;font-size:10px;font-weight:800}
.model-price{margin-top:14px;padding-top:0;border-top:0}
.model-price small{display:block;color:#8994a0;font-size:10px}
.model-price strong{display:inline-block;margin-top:4px;color:#163d66;font-size:18px;letter-spacing:-.04em}
.model-price em{margin-left:5px;color:#9aa3ac;font-size:9px;font-style:normal}
.model-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:17px}
.model-btn{display:flex;align-items:center;justify-content:center;height:40px;border-radius:6px;font-size:12px;font-weight:900}
.model-btn--ghost{border:1px solid #bdc9d5;color:#39536c;background:#fff}
.model-btn--solid{background:#244e78;color:#fff}
.model-card[hidden]{display:none}
.catalog-note{padding:0 0 72px;background:var(--catalog-bg)}
.note-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;padding:36px 40px;border-radius:14px;background:#eaf0f5;border:1px solid #d9e2ea}
.note-box h2{margin:0;color:#23384f;font-size:24px;letter-spacing:-.04em}
.note-box>p{margin:0;color:#687786;line-height:1.8;font-size:14px}
.catalog-contact{padding:58px 0;background:#1f3853;color:#fff}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact-inner span{color:#c8d5e2;font-size:12px;font-weight:900;letter-spacing:.12em}
.contact-inner h2{margin:8px 0 0;font-size:31px;line-height:1.3;letter-spacing:-.05em}
.contact-actions{display:flex;gap:9px}
.contact-actions a{display:flex;align-items:center;justify-content:center;min-width:150px;height:50px;border:1px solid rgba(255,255,255,.4);border-radius:7px;font-weight:900;font-size:14px}
.contact-actions a:first-child{background:#fff;color:#1f3853;border-color:#fff}
@media(max-width:1100px){
  .model-grid{grid-template-columns:repeat(3,1fr)}
  .controls-inner{grid-template-columns:1fr 220px}
  .result-count{grid-column:1/-1}
}
@media(max-width:780px){
  .catalog-wrap{width:min(100% - 32px,720px)}
  .catalog-hero{padding:52px 0 42px}
  .catalog-controls{top:70px;position:static}
  .controls-inner{grid-template-columns:1fr}
  .filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .filter-chip{flex:0 0 auto}
  .model-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .model-card__image{height:190px}
  .list-heading{display:block}
  .list-heading p{margin-top:10px}
  .note-box{grid-template-columns:1fr;gap:12px;padding:28px 24px}
  .contact-inner{display:block}
  .contact-actions{margin-top:24px}
}
@media(max-width:520px){
  .catalog-wrap{width:calc(100% - 24px)}
  .model-grid{grid-template-columns:1fr}
  .model-card__image{height:230px}
  .contact-actions{display:grid}
}
