:root { --ink:#12181d; --navy:#101820; --blue:#1c6371; --teal:#5bb9b6; --red:#ad3032; --paper:#fff; --mist:#eff4f4; --line:#cbd6d7; --muted:#617175; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
img, video { max-width:100%; }
.shell { width:min(var(--max), calc(100% - 64px)); margin:0 auto; }
.utility { min-height:34px; color:#d5e2e2; background:#0b1115; font-size:11px; letter-spacing:.06em; }
.utility .shell { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.utility-links { display:flex; gap:22px; }
.header { position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid #dfe6e6; }
.header .shell { min-height:76px; display:flex; align-items:center; gap:34px; }
.brand { color:var(--navy); min-width:254px; font-size:18px; line-height:1; font-weight:800; letter-spacing:.065em; }
.brand span { display:block; margin-top:7px; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:.14em; }
.nav { display:flex; align-items:stretch; gap:30px; min-height:76px; margin-left:auto; font-size:13px; font-weight:700; }
.nav a { display:flex; align-items:center; border-bottom:3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--blue); border-color:var(--red); }
.button { border:0; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; background:var(--red); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.button:hover { background:#842224; }
.button-secondary { color:var(--navy); border:1px solid #8ca0a2; background:#fff; }
.button-secondary:hover { color:#fff; background:var(--navy); }
.catalog-hero { padding:76px 0 68px; color:#fff; background:var(--navy); }
.catalog-hero .shell { display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:end; }
.catalog-hero h1, .detail-title h1 { margin:0; letter-spacing:0; white-space:nowrap; }
.catalog-hero h1 { max-width:none; font-size:clamp(38px, 3.45vw, 44px); line-height:1.08; }
.catalog-hero p { max-width:690px; margin:24px 0 0; color:#c8d7d8; font-size:17px; line-height:1.65; }
.category-shortcuts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:30px; }
.category-shortcut { min-height:86px; display:flex; flex-direction:column; justify-content:center; padding:14px 16px; color:#eaf3f3; border:1px solid rgba(196,219,220,.28); background:rgba(255,255,255,.03); transition:border-color .2s, background .2s, transform .2s; }
.category-shortcut span { color:#7ed5d0; font-size:10px; font-weight:800; letter-spacing:.1em; }
.category-shortcut strong { margin-top:8px; font-size:14px; line-height:1.2; }
.category-shortcut:hover { transform:translateY(-2px); color:#fff; border-color:#7ed5d0; background:rgba(126,213,208,.1); }
.catalog-stat { border-left:1px solid rgba(196,219,220,.45); padding-left:34px; }
.catalog-stat strong { display:block; color:#7ed5d0; font-size:42px; line-height:1; }
.catalog-stat span { display:block; margin-top:10px; color:#c8d7d8; font-size:12px; line-height:1.5; text-transform:uppercase; letter-spacing:.08em; }
.catalog-main { padding:58px 0 92px; }
.filters { display:grid; grid-template-columns:minmax(260px, 1.5fr) repeat(4, minmax(150px, .7fr)); gap:14px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.control { display:grid; gap:7px; }
.control label { color:#405458; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.control input, .control select { width:100%; min-height:48px; padding:0 13px; color:var(--ink); border:1px solid var(--line); border-radius:0; background:#fff; outline-color:var(--blue); font-size:14px; }
.catalog-summary { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:13px; }
.catalog-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px 20px; }
.catalog-card { min-width:0; border:1px solid #dfe6e6; background:#fff; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.catalog-card:hover { transform:translateY(-3px); border-color:#aebdbf; box-shadow:0 12px 28px rgba(16,24,32,.09); }
.catalog-media { aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f4f6f6; border-bottom:1px solid #dfe6e6; }
.catalog-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .35s ease; }
.catalog-card:hover .catalog-media img { transform:scale(1.03); }
.catalog-copy { min-height:250px; display:flex; flex-direction:column; padding:22px 20px 20px; }
.category-label { color:var(--red); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.catalog-copy h2 { margin:10px 0 10px; color:var(--navy); font-size:21px; line-height:1.12; letter-spacing:0; }
.catalog-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.catalog-meta { margin-top:auto; padding-top:18px; color:#355057; font-size:11px; line-height:1.5; border-top:1px solid #e2e8e8; }
.catalog-meta strong { color:var(--navy); }
.catalog-cta { display:flex; align-items:center; justify-content:space-between; margin-top:17px; padding-top:14px; color:var(--red); border-top:1px solid #e2e8e8; font-size:11px; font-weight:800; letter-spacing:.06em; }
.catalog-cta b { font-size:17px; font-weight:400; transition:transform .2s ease; }
.catalog-card:hover .catalog-cta b { transform:translateX(4px); }
.empty { grid-column:1 / -1; padding:70px 30px; text-align:center; color:var(--muted); background:var(--mist); }
.detail-main { padding:34px 0 90px; }
.breadcrumb { display:flex; gap:9px; margin-bottom:30px; color:var(--muted); font-size:12px; }
.breadcrumb a:hover { color:var(--blue); }
.detail-hero { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr); gap:64px; align-items:start; }
.primary-viewer { min-height:640px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f3f5f5; border:1px solid #dce4e4; }
.primary-viewer button { width:100%; height:100%; min-height:640px; padding:0; border:0; background:transparent; cursor:zoom-in; }
.primary-viewer img { width:100%; height:640px; display:block; object-fit:contain; }
.detail-title { padding-top:12px; }
.detail-title h1 { margin-top:12px; color:var(--navy); font-size:clamp(32px, 3vw, 40px); line-height:1.08; }
.detail-title > p { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.feature-list { display:grid; gap:0; margin:34px 0; border-top:1px solid var(--line); }
.feature-list div { padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.spec-table { margin:30px 0; }
.spec-row { display:grid; grid-template-columns:132px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid #dde5e5; font-size:13px; line-height:1.5; }
.spec-row span:first-child { color:var(--muted); }
.detail-actions { display:flex; flex-wrap:wrap; gap:12px; }
.detail-actions--primary { margin:28px 0 8px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-actions--primary .button { min-width:132px; }
.media-section { margin-top:82px; padding-top:44px; border-top:1px solid var(--line); }
.media-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:25px; }
.media-head h2 { margin:0; color:var(--navy); font-size:36px; letter-spacing:0; }
.media-head p { margin:0; color:var(--muted); font-size:13px; }
.media-filters { display:grid; grid-template-columns:1.2fr .75fr .9fr; gap:14px; margin-bottom:22px; }
.media-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.media-card { min-width:0; padding:0; overflow:hidden; text-align:left; border:1px solid #dbe3e3; background:#fff; cursor:pointer; }
.media-card:hover { border-color:#769195; }
.media-thumb { aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f4f6f6; }
.media-thumb img { width:100%; height:100%; display:block; object-fit:contain; }
.video-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; background:#16232b; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.media-caption { min-height:64px; display:block; padding:11px 12px; color:#43565a; font-size:11px; line-height:1.4; border-top:1px solid #e0e6e6; overflow-wrap:anywhere; }
.load-more { display:flex; justify-content:center; margin-top:32px; }
.lightbox { width:min(1180px, calc(100% - 48px)); max-height:calc(100vh - 48px); padding:0; border:0; background:#fff; box-shadow:0 24px 90px rgba(0,0,0,.35); }
.lightbox::backdrop { background:rgba(5,10,13,.86); }
.lightbox-layout { display:grid; grid-template-columns:minmax(0, 1fr) 310px; min-height:680px; }
.lightbox-media { position:relative; min-width:0; display:flex; align-items:center; justify-content:center; background:#eef2f2; }
.lightbox-media img, .lightbox-media video { max-width:100%; max-height:calc(100vh - 64px); object-fit:contain; }
.lightbox-meta { padding:30px 26px; overflow:auto; border-left:1px solid #dfe6e6; }
.lightbox-meta h3 { margin:0 38px 16px 0; color:var(--navy); font-size:18px; line-height:1.25; overflow-wrap:anywhere; }
.lightbox-meta p { color:var(--muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.lightbox-files { margin:20px 0 0; padding-top:18px; border-top:1px solid #dfe6e6; }
.lightbox-files div { margin-top:9px; color:#405458; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.icon-button { position:absolute; z-index:2; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; color:#fff; border:0; background:rgba(9,17,21,.78); font-size:26px; cursor:pointer; }
.lightbox-close { top:14px; right:14px; color:var(--navy); background:#fff; border:1px solid #bcc9ca; font-size:22px; }
.lightbox-prev { left:14px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:14px; top:50%; transform:translateY(-50%); }
.footer { margin-top:0; padding:54px 0 25px; color:#bdc9ca; background:#0b1115; font-size:12px; }
.footer-grid { display:grid; grid-template-columns:1.35fr .85fr .9fr; gap:70px; padding-bottom:44px; border-bottom:1px solid rgba(204,225,224,.2); }
.footer-brand { color:#fff; font-size:18px; font-weight:800; letter-spacing:.04em; }
.footer-brand span { display:block; margin-top:9px; color:#72d1cc; font-size:10px; letter-spacing:.15em; }
.footer-brand p { max-width:300px; margin:17px 0 0; color:#aebdbe; font-size:13px; font-weight:400; line-height:1.65; letter-spacing:0; }
.footer h3 { margin:3px 0 16px; color:#fff; font-size:11px; letter-spacing:.1em; }
.footer-links { display:grid; gap:10px; color:#bdc9ca; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; padding-top:20px; color:#829294; font-size:10px; letter-spacing:.07em; }
@media (max-width:1050px) {
  .catalog-grid, .media-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .filters { grid-template-columns:1fr 1fr; }
  .detail-hero { grid-template-columns:1fr; }
  .primary-viewer, .primary-viewer button { min-height:560px; }
  .primary-viewer img { height:560px; }
}
@media (max-width:760px) {
  .shell { width:min(var(--max), calc(100% - 32px)); }
  .utility-links, .nav { display:none; }
  .header .shell { min-height:66px; }
  .catalog-hero .shell { grid-template-columns:1fr; gap:35px; }
  .catalog-hero { padding:58px 0; }
  .catalog-hero h1 { font-size:43px; white-space:normal; }
  .catalog-stat { padding:0; border:0; }
  .category-shortcuts { grid-template-columns:1fr 1fr; }
  .filters, .media-filters { grid-template-columns:1fr; }
  .catalog-grid, .media-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .catalog-copy { min-height:210px; }
  .detail-hero { gap:32px; }
  .detail-title h1 { font-size:36px; white-space:normal; }
  .primary-viewer, .primary-viewer button { min-height:420px; }
  .primary-viewer img { height:420px; }
  .lightbox-layout { grid-template-columns:1fr; }
  .lightbox-meta { border:0; border-top:1px solid #dfe6e6; }
}
@media (max-width:480px) {
  .catalog-grid, .media-grid { grid-template-columns:1fr; }
  .catalog-copy { min-height:0; }
  .catalog-summary, .media-head { display:block; }
  .media-head p { margin-top:10px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-bottom { display:block; line-height:1.8; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }