:root {
        color-scheme: light;
        font-family: Arial, Helvetica, sans-serif;
        color: #080808;
        background: #fff;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      button {
        color: inherit;
        font: inherit;
      }

      .features {
        padding: 22px 3% 15px;
        background: #f3f3f3;
      }

      .section-title {
        margin: 0 0 21px;
        text-align: center;
        font-size: clamp(1.7rem, 3vw, 2.2rem);
        line-height: 1.15;
        font-weight: 750;
        letter-spacing: -0.035em;
      }

      .feature-viewport {
        overflow: hidden;
      }

      .feature-track {
        display: flex;
        gap: 24px;
        transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: transform;
      }

      .feature-card {
        flex: 0 0 calc((100% - 48px) / 3);
        min-width: 0;
      }

      .feature-card img {
        display: block;
        width: 100%;
        aspect-ratio: 1.28;
        border-radius: 14px;
        object-fit: cover;
      }

      .feature-card h3 {
        margin: 3px 0 7px;
        font-size: clamp(1.15rem, 2vw, 1.5rem);
        line-height: 1.14;
        letter-spacing: -0.035em;
      }

      .feature-card p {
        margin: 0;
        font-size: clamp(0.94rem, 1.2vw, 1.03rem);
        line-height: 1.48;
      }

      .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 45px;
        margin-top: 5px;
      }

      .dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }

      .dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #9a9a9a;
        cursor: pointer;
      }

      .dot[aria-current="true"] {
        width: 12px;
        height: 12px;
        background: #080808;
      }

      .arrow-group {
        display: flex;
        gap: 15px;
        position: absolute;
        right: 0;
      }

      .arrow {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        padding: 0;
        border: 1px solid #111;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        transition: color 160ms ease, background 160ms ease;
      }

      .arrow:hover {
        color: #fff;
        background: #111;
      }

      .arrow:focus-visible,
      .dot:focus-visible {
        outline: 2px solid #1769aa;
        outline-offset: 3px;
      }

      .showcase {
        padding: 35px 0 34px;
        overflow: hidden;
        background: #fff;
      }

      .showcase .section-title {
        margin-bottom: 28px;
      }

      .showcase-viewport {
        overflow: hidden;
        touch-action: pan-y;
      }

      .showcase-track {
        display: flex;
        align-items: center;
        gap: 24px;
        transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: transform;
      }

      .showcase-slide {
        flex: 0 0 min(70vw, 960px);
        height: min(62vw, 610px);
        min-height: 360px;
        max-height: 610px;
        overflow: hidden;
        opacity: 0.5;
        transition: opacity 450ms ease;
      }

      .showcase-slide.is-active {
        opacity: 1;
      }

      .showcase-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .showcase .carousel-controls {
        margin-top: 23px;
      }

      .showcase .arrow-group {
        right: max(3%, calc((100vw - 1200px) / 2));
      }

      @media (max-width: 900px) {
        .features {
          padding-right: 24px;
          padding-left: 24px;
        }

        .feature-card {
          flex-basis: calc((100% - 24px) / 2);
        }

        .showcase-slide {
          flex-basis: 78vw;
          height: 65vw;
        }
      }

      @media (max-width: 600px) {
        .features {
          padding: 24px 18px 12px;
        }

        .section-title {
          margin-bottom: 18px;
        }

        .feature-track {
          gap: 16px;
        }

        .feature-card {
          flex-basis: 100%;
        }

        .feature-card img {
          aspect-ratio: 1.16;
          border-radius: 12px;
        }

        .feature-card h3 {
          margin-top: 7px;
          font-size: 1.35rem;
        }

        .feature-card p {
          font-size: 1rem;
        }

        .carousel-controls {
          justify-content: flex-start;
          min-height: 52px;
        }

        .arrow-group {
          gap: 10px;
        }

        .arrow {
          width: 32px;
          height: 32px;
        }

        .showcase {
          padding: 29px 0 25px;
        }

        .showcase .section-title {
          margin: 0 18px 21px;
        }

        .showcase-track {
          gap: 12px;
        }

        .showcase-slide {
          flex-basis: 84vw;
          height: 105vw;
          min-height: 310px;
          max-height: 520px;
        }

        .showcase .carousel-controls {
          justify-content: center;
          margin: 13px 18px 0;
        }

        .showcase .arrow-group {
          right: 0;
        }
      }

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