.catalog-page,
.catalog-modal {
    --catalog-orange: #ff7100;
    --catalog-dark: #111827;
    /* background: #f7f8fb; */
    color: var(--catalog-dark);
    overflow: hidden;
}

.catalog-hero {
    position: relative;
    min-height: 470px;
    display: grid;
    place-items: center;
    padding: 115px 0 85px;
    color: #fff;
    isolation: isolate;
    background:
        linear-gradient(120deg, rgba(9, 16, 31, .98), rgba(20, 28, 48, .94)),
        radial-gradient(circle at 80% 20%, #ff7100, transparent 40%);
}

.catalog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.catalog-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
}

.catalog-eyebrow,
.catalog-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffb170;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.catalog-hero h1 {
    max-width: 760px;
    margin: 18px auto 16px;
    color: #fff;
    font-family: Anton, sans-serif;
    font-size: clamp(52px, 8vw, 92px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.catalog-hero h1 span { color: var(--catalog-orange); }
.catalog-hero p { max-width: 650px; margin: 0 auto; color: #d8dee9; font-size: clamp(16px, 2vw, 19px); line-height: 1.75; }

.catalog-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding: 14px 22px;
    border-radius: 999px;
    color: #fff;
    background: var(--catalog-orange);
    font-weight: 800;
    box-shadow: 0 15px 35px rgba(255, 113, 0, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}

.catalog-hero__button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(255, 113, 0, .36); }
.catalog-hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .2; animation: catalogFloat 7s ease-in-out infinite; }
.catalog-hero__orb--one { width: 260px; height: 260px; left: -80px; top: 80px; border: 45px solid #ff7100; }
.catalog-hero__orb--two { width: 180px; height: 180px; right: 5%; bottom: -70px; background: #ff7100; animation-delay: -3s; }

.catalog-list-section { padding: 90px 0 110px; }
.catalog-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:38px; }
.catalog-section-heading > div > span { color:var(--catalog-orange); font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.catalog-section-heading h2 { max-width:620px; margin:8px 0 0; font-size:clamp(30px,4vw,48px); line-height:1.12; }
.catalog-section-heading > p { max-width:430px; margin:0; color:#667085; line-height:1.7; }

.catalog-grid {display:grid;grid-template-columns: repeat(4,minmax(0,1fr));gap:24px;}
.catalog-card {
    position:relative;
    overflow:hidden;
    border:1px solid #e7eaf0;
    border-radius:22px;
    background:#fff;
    box-shadow:0 16px 40px rgba(15,23,42,.07);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    animation:catalogReveal .55s both;
    animation-delay:var(--catalog-delay);
}
.catalog-card:hover { transform:translateY(-10px); border-color:#ffd1ad; box-shadow:0 28px 55px rgba(15,23,42,.14); }
.catalog-card__media { position:relative; overflow:hidden; aspect-ratio:3/4; background:#eceff4; }
.catalog-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.catalog-card:hover .catalog-card__media img { transform:scale(1.055); }
.catalog-card__media::after { content:""; position:absolute; inset:auto 0 0; height:38%; background:linear-gradient(transparent,rgba(7,12,24,.45)); }
.catalog-card__tag { position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; color:#fff; background:rgba(9,16,31,.78); backdrop-filter:blur(8px); font-size:11px; font-weight:800; letter-spacing:.04em; }
.catalog-card__shine { position:absolute; z-index:3; inset:-70% auto -70% -70%; width:38%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transition:left .65s ease; }
.catalog-card:hover .catalog-card__shine { left:135%; }
.catalog-card__body { position:relative; padding:22px; }
.catalog-card__number { position:absolute; right:18px; top:13px; color:#eef1f5; font-family:Anton,sans-serif; font-size:46px; line-height:1; }
.catalog-card__body h2 { position:relative; z-index:1; min-height:52px; margin:0 48px 20px 0; font-size:19px; line-height:1.35; }
.catalog-download-button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border:0; border-radius:12px; color:#fff; background:var(--catalog-dark); font:inherit; font-weight:800; cursor:pointer; transition:background .25s ease, transform .25s ease; }
.catalog-download-button i { display:grid; place-items:center; width:34px; height:34px; margin:-7px -8px -7px 0; border-radius:9px; color:var(--catalog-dark); background:#fff; transition:transform .25s ease; }
.catalog-download-button:hover { background:var(--catalog-orange); transform:translateY(-2px); }
.catalog-download-button:hover i { transform:translateY(2px); }
.catalog-download-button.is-loading { pointer-events:none; opacity:.7; }

.catalog-empty { padding:70px 24px; border:1px dashed #ccd3df; border-radius:22px; background:#fff; text-align:center; }
.catalog-empty span { display:grid; place-items:center; width:82px; height:82px; margin:0 auto 18px; border-radius:24px; color:var(--catalog-orange); background:#fff2e8; font-size:34px; }
.catalog-empty h2 { margin:0 0 8px; }.catalog-empty p { margin:0; color:#667085; }

.catalog-modal { position:fixed; z-index:99999; inset:0; display:grid; place-items:center; padding:20px; }
.catalog-modal[hidden] { display:none; }
.catalog-modal__backdrop {position:absolute;inset:0;background: rgb(5 10 20 / 65%);backdrop-filter:blur(8px);animation:catalogFade .25s both;}
.catalog-modal__box { position:relative; z-index:1; width:min(100%,500px); max-height:calc(100vh - 40px); overflow:auto; padding:34px; border-radius:24px; background:#fff; box-shadow:0 32px 90px rgba(0,0,0,.34); animation:catalogModalIn .35s cubic-bezier(.2,.8,.2,1) both; }
.catalog-modal__close { position:absolute; top:16px; right:16px; width:38px; height:38px; border:0; border-radius:50%; color:#475467; background:#f2f4f7; cursor:pointer; }
.catalog-modal__icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:18px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#ff8b2d,#ff6200); box-shadow:0 15px 30px rgba(255,113,0,.28); font-size:25px; }
.catalog-modal__eyebrow { color:var(--catalog-orange); }
.catalog-modal__box h2 { margin:7px 0 8px; font-size:30px; }
.catalog-modal__intro { margin:0 0 22px; color:#667085; line-height:1.6; }
#catalog-verification-form label { display:block; margin-bottom:15px; color:#344054; font-size:13px; font-weight:800; }
.catalog-input-wrap { position:relative; display:block; margin-top:7px; }
.catalog-input-wrap i { position:absolute; left:14px; top:50%; color:#98a2b3; transform:translateY(-50%); }
.catalog-input-wrap input { width:100%; height:48px; padding:0 14px 0 42px; border:1px solid #d0d5dd; border-radius:12px; outline:none; font:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
.catalog-input-wrap input:focus { border-color:var(--catalog-orange); box-shadow:0 0 0 4px rgba(255,113,0,.11); }
.catalog-recaptcha-wrap { min-height:78px; margin:7px 0 14px; overflow-x:auto; }
.catalog-form-message { display:none; margin:0 0 14px; padding:11px 13px; border-radius:10px; font-size:13px; }
.catalog-form-message.is-error { display:block; color:#b42318; background:#fef3f2; }
.catalog-modal__submit { width:100%; display:flex; justify-content:center; align-items:center; gap:12px; padding:14px 18px; border:0; border-radius:12px; color:#fff; background:var(--catalog-orange); font:inherit; font-weight:900; cursor:pointer; box-shadow:0 14px 28px rgba(255,113,0,.22); }
.catalog-modal__submit:disabled { cursor:wait; opacity:.7; }
.catalog-privacy { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:13px; color:#98a2b3; text-align:center; }
body.catalog-modal-open { overflow:hidden; }

@keyframes catalogReveal { from { opacity:0; transform:translateY(22px); } }
@keyframes catalogFade { from { opacity:0; } }
@keyframes catalogModalIn { from { opacity:0; transform:translateY(25px) scale(.96); } }
@keyframes catalogFloat { 50% { transform:translateY(-18px) rotate(5deg); } }

@media (max-width:1100px) { .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) {
    .catalog-section-heading {align-items:start;flex-direction:column;gap:14px;display: none;}
    .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575px) {
    .catalog-card__body h2 {
    font-size: 15px;
    margin: 0 0px 20px 0;
}
    .catalog-card__body {
    padding: 10px;
}
 .catalog-download-button {
    font-size: 14px;
    padding: 10px 10px;
    gap: 6px;
}
    .catalog-hero__button {display:none;}
    .catalog-download-button i {width: 30px;height: 30px;font-size: 14px;}
    .catalog-hero {min-height: 200px;padding: 60px 0 65px;}
    .catalog-list-section { padding:65px 0 80px; }
    .catalog-grid {grid-template-columns: 1fr 1fr;gap: 10px;}
    .catalog-card {max-width:390px;width:100%;margin:0 auto;border-radius: 12px;}
    .catalog-modal { padding:10px; align-items:end; }
    .catalog-modal__box { max-height:calc(100vh - 20px); padding:28px 20px 22px; border-radius:22px 22px 14px 14px; }
    .catalog-recaptcha-wrap { transform-origin:left top; }
}
@media (prefers-reduced-motion:reduce) {
    .catalog-card,.catalog-modal__box,.catalog-modal__backdrop,.catalog-hero__orb { animation:none!important; }
    .catalog-card,.catalog-card__media img,.catalog-download-button { transition:none!important; }
}