:root {
      --bg: #0b0f14;
      --surface: #111821;
      --surface-2: #17202b;
      --text: #f4f7fa;
      --muted: #a8b2bd;
      --accent: #e31b23;
      --border: rgba(255,255,255,.10);
      --max-width: 1280px;
      --radius: 16px;
      --shadow: 0 18px 50px rgba(0,0,0,.22);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 82px; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Roboto, sans-serif;
      line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; }
    button { font: inherit; }

    .disable {
      display: none !important;
    }

    .container {
      width: min(calc(100% - 32px), var(--max-width));
      margin-inline: auto;
    }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(11,15,20,.92);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(14px);
    }
    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .logo {
      width: 190px;
      height: auto;
    }
    .nav-toggle {
      display: none;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 1.25rem;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .nav-links a {
      display: block;
      text-decoration: none;
      padding: 10px 14px;
      border-radius: 9px;
      color: var(--muted);
      transition: .2s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: var(--text);
      background: rgba(255,255,255,.07);
    }
    .nav-products {
      position: relative;
    }
    .nav-products > button {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 10px 14px;
      border-radius: 9px;
      cursor: pointer;
    }
    .nav-products > button:hover,
    .nav-products > button:focus-visible { color: var(--text); background: rgba(255,255,255,.07); }
    .dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 220px;
      padding: 8px;
      background: #151d27;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      display: none;
    }
    .nav-products.is-open .dropdown { display: block; }
    .dropdown a { color: var(--text); }

    /* Hero */
    .hero {
      position: relative;
      overflow: hidden;
      background: #080b0f;
    }
    .hero-slides {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      min-height: clamp(280px, 48vw, 45rem);
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity .55s ease;
    }
    .hero-slide.is-active {
      opacity: 1;
      visibility: visible;
      position: relative;
    }
    .hero-slide .slide-img {
      width: 100%;
      height: clamp(280px, 48vw, 45rem);
      object-fit: cover;
      object-position: center;
    }
    .hero-overlay {
      position: absolute;
      inset: auto 0 0;
      padding: 70px 0 32px;
      background: linear-gradient(transparent, rgba(0,0,0,.82));
      pointer-events: none;
    }
    .hero-copy {
      width: min(calc(100% - 32px), var(--max-width));
      margin: auto;
    }
    .hero-copy p {
      margin: 0;
      font-family: Aldrich, sans-serif;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: clamp(.7rem, 1.2vw, .9rem);
      color: #fff;
    }
    .hero-controls {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      width: min(calc(100% - 32px), var(--max-width));
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: end;
      z-index: 2;
    }
    .hero-arrow {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50%;
      background: rgba(0,0,0,.35);
      color: white;
      cursor: pointer;
    }
    .hero-dots { display: flex; gap: 7px; margin-inline: auto; }
    .hero-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.45);
      cursor: pointer;
    }
    .hero-dot.is-active { background: white; transform: scale(1.3); }

    /* Sections */
    .catalog {
      padding: 88px 0 30px;
    }
    .section-title {
      text-align: center;
      margin-bottom: 56px;
    }
    .eyebrow {
      display: block;
      color: var(--accent);
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    #brands-title {
      font-size: 3rem;
    } 
    h1, h2, h3 { margin-top: 0; }
    .section-title h1 {
      margin-bottom: 14px;
      font-family: Aldrich, sans-serif;
      font-size: clamp(2rem, 4vw, 3.2rem);
      text-transform: uppercase;
    }
    .section-title p {
      font-size: large;
      max-width: 680px;
      margin: 0 auto;
      color: var(--muted);
    }
    .catalog-section {
      padding: 52px 0;
      border-top: 1px solid var(--border);
    }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }
    .section-heading h2 {
      margin: 0;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
    }
    .slider-controls { display: flex; gap: 8px; flex-shrink: 0; }
    .slider-button {
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 50%;
      cursor: pointer;
      transition: .2s ease;
    }
    .slider-button:hover { background: var(--surface-2); border-color: rgba(255,255,255,.25); }

    .product-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 48px) / 4);
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      padding: 4px 2px 18px;
      overscroll-behavior-inline: contain;
    }
    .product-track::-webkit-scrollbar { height: 6px; }
    .product-track::-webkit-scrollbar-thumb { background: #3a4652; border-radius: 999px; }
    .product-card {
      scroll-snap-align: start;
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0,0,0,.12);
    }
    .product-image {
      position: relative;
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      padding: 22px;
      background: #fff;
      overflow: hidden;
    }
    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform .35s ease;
    }
    .product-card:hover .product-image img { transform: scale(1.04); }
    .product-link {
      position: absolute;
      inset: auto 12px 12px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-radius: 10px;
      text-decoration: none;
      color: white;
      background: rgba(11,15,20,.88);
      opacity: 0;
      transform: translateY(8px);
      transition: .25s ease;
    }
    .product-card:hover .product-link,
    .product-link:focus-visible { opacity: 1; transform: translateY(0); }
    .product-card h3 {
      min-height: 58px;
      margin: 0;
      padding: 16px;
      font-size: .98rem;
      font-weight: 500;
      text-align: center;
    }

    /* Brands */
    .brands {
      padding: 70px 0 90px;
      border-top: 1px solid var(--border);
    }
    .brand-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      align-items: center;
    }
    .brand {
      min-height: 100px;
      display: grid;
      place-items: center;
      padding: 18px;
      background: #fff;
      border-radius: 14px;
    }
    .brand img { max-height: 70px; object-fit: contain; }

    /* About */
    .about {
      padding: 90px 0;
      background: #0e141c;
      border-top: 1px solid var(--border);
    }
    .about-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 60px;
      align-items: center;
    }
    .about-image {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #fff;
    }
    .about-copy h2 {
      font-family: Aldrich, sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      margin-bottom: 24px;
    }
    .about-copy p { color: var(--muted); margin: 0 0 18px; }
    .tagline {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin-top: 18px;
      font-family: Aldrich, sans-serif;
      text-transform: uppercase;
      font-size: .8rem;
      letter-spacing: .08em;
    }
    .tagline img { width: auto; height: 34px; }

    /* Contact */
    .contact {
      padding: 80px 0 30px;
      border-top: 1px solid var(--border);
    }
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .contact-card {
      padding: 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .contact-card h2 {
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 20px;
    }
    .contact-card p { color: var(--muted); font-size: .95rem; }
    .contact-card a { color: var(--text); text-decoration: none; }
    .contact-card a:hover { text-decoration: underline; }
    .contact-logo { width: 130px; margin: 0 auto 18px; }
    .map {
      width: 100%;
      height: 275px;
      border: 0;
      border-radius: 10px;
      filter: grayscale(15%);
    }

    .footer {
      padding: 26px 16px;
      text-align: center;
      color: #74808c;
      font-size: .82rem;
      border-top: 1px solid var(--border);
    }

    @media (max-width: 1000px) {
      .product-track { grid-auto-columns: calc((100% - 32px) / 3); }
      .about-grid { grid-template-columns: 1fr; gap: 35px; }
      .contact-grid { grid-template-columns: 1fr 1fr; }
      .contact-card:last-child { grid-column: 1 / -1; }
    }

    @media (max-width: 760px) {
      .nav { min-height: 68px; }
      .nav-toggle { display: block; }
      .nav-links {
        display: none;
        position: absolute;
        top: 68px;
        left: 16px;
        right: 16px;
        padding: 8px;
        flex-direction: column;
        align-items: stretch;
        background: #151d27;
        border: 1px solid var(--border);
        border-radius: 12px;
      }
      .nav-links.is-open { display: flex; }
      .nav-products .dropdown {
        position: static;
        margin-top: 4px;
        box-shadow: none;
        background: #0f151d;
      }
      .nav-products > button { width: 100%; text-align: left; }
      .product-track { grid-auto-columns: calc((100% - 16px) / 2); }
      .brand-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: 1fr; }
      .contact-card:last-child { grid-column: auto; }
    }

    @media (max-width: 480px) {
      .container { width: min(calc(100% - 24px), var(--max-width)); }
      .product-track { grid-auto-columns: 84%; }
      .brand-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .brand { min-height: 80px; }
      .section-heading { align-items: start; flex-direction: column; }
      .hero-controls { bottom: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }