/* ── RESET ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

    /* ── FADE-UP (Intersection Observer) ───────────────────────────── */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ── BOUNCE ARROW ──────────────────────────────────────────────── */
    @keyframes bounce-down {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(10px); }
    }
    .bounce { animation: bounce-down 1.2s ease-in-out infinite; }

    /* ══════════════════════════════════════════════════════════════════
       SECTION 1 — HERO (white)
    ══════════════════════════════════════════════════════════════════ */
    #hero {
      background: #fff;
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 6vw;
    }

    /* ── Logo (always centered) */
    .logo {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 20px 0 10px;
    }
    .logo span {
      font-weight: 900;
      font-size: clamp(1.3rem, 3vw, 1.8rem);
      letter-spacing: 0.12em;
      font-style: italic;
      border-bottom: 3px solid #000;
      padding-bottom: 2px;
      line-height: 1;
    }

    /* ── Hero body: mobile = column centered ── */
    .hero-body {
      width: 100%;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    /* ── Product image stack ── */
    .hero-image {
      width: 50vw;
      max-width: 220px;
      flex-shrink: 0;
    }
    .stack-placeholder {
      position: relative;
      width: 100%;
      padding-bottom: 128%;
    }
    .stack-card {
      position: absolute;
      width: 70%;
      height: 90%;
      border-radius: 10px;
      box-shadow: 3px 6px 18px rgba(0,0,0,0.35);
    }
    .stack-card:nth-child(1) { background:#5a5a5a; right:0;    top:10%; }
    .stack-card:nth-child(2) { background:#3a3a3a; right:12%;  top:5%;  }
    .stack-card:nth-child(3) { background:#1a1a1a; right:24%;  top:0;   }

    /* ── Hero text: mobile = centered ── */
    .hero-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
    }
    .hero-text h1 {
      font-size: clamp(2rem, 8vw, 3.2rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 12px;
      color: #000;
    }
    .hero-text p {
      font-size: clamp(0.85rem, 2.5vw, 1rem);
      color: #444;
      line-height: 1.55;
      margin-bottom: 28px;
      max-width: 28ch;
    }
    .btn-get-started {
      background: #111;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: clamp(11px,2vw,14px) clamp(28px,4vw,40px);
      font-size: clamp(0.9rem, 2.2vw, 1.05rem);
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .btn-get-started:hover { background: #333; transform: scale(1.04); }

    /* ── Chevron: ALWAYS centered ── */
    .chevron-wrap {
      width: 100%;
      margin-top: 36px;
      margin-bottom: 36px;
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: center;
    }

    /* ── DESKTOP hero: row layout ── */
    @media (min-width: 768px) {
      #hero { padding: 0 7vw; }
      .hero-body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5vw;
        min-height: 70vh;
      }
      .hero-image {
        width: 40%;
        max-width: 380px;
        order: 2;
      }
      .hero-text {
        order: 1;
        align-items: flex-start;
        text-align: left;
        width: 50%;
      }
      .hero-text p { max-width: 32ch; }
      /* chevron stays centered — no override needed */
    }

    /* ══════════════════════════════════════════════════════════════════
       SECTION 2 — WHAT WE CREATE (black)
    ══════════════════════════════════════════════════════════════════ */
    #what-we-create {
      background: #000;
      width: 100%;
      padding: 6vw 5vw 10vw;
    }
    #what-we-create h2 {
      color: #fff;
      font-weight: 700;
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      margin-bottom: clamp(20px, 4vw, 40px);
    }

    /* ── Card row ── */
    .card-row { margin-bottom: clamp(32px, 5vw, 56px); }
    .card-row .category {
      color: #fff;
      font-weight: 600;
      font-size: clamp(13px, 2vw, 16px);
      margin-bottom: clamp(10px, 2vw, 16px);
    }

    /* ── Carousel wrapper: arrow | window | arrow ── */
    .carousel {
      display: flex;
      align-items: center;
      gap: clamp(10px, 2vw, 20px);
    }

    /* ── Scroll arrows — always on sides ── */
    .arrow-btn {
      flex-shrink: 0;
      width: clamp(36px, 4vw, 50px);
      height: clamp(36px, 4vw, 50px);
      border-radius: 50%;
      border: 1.5px solid #555;
      background: transparent;
      color: #fff;
      font-size: clamp(20px, 2.5vw, 28px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease;
      line-height: 1;
      padding: 0;
    }
    .arrow-btn:hover { background: #222; }

    /* ── Card window (clips the track) ── */
    .carousel-window {
      flex: 1;
      overflow: hidden;
      min-width: 0;
    }

    /* ── Sliding track ── */
    .carousel-track {
      display: flex;
      gap: clamp(10px, 2vw, 18px);
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    /* ── Product card — width set by JS based on visible count ── */
    .product-card {
      flex-shrink: 0;
      border-radius: clamp(10px, 1.5vw, 16px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #1a1a1a;
      border: 2px solid #2a2a2a;
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.6);
    }
    .card-title {
      background: #111;
      border-bottom: 1px solid #2a2a2a;
      color: #fff;
      font-size: clamp(11px, 1.5vw, 14px);
      font-weight: 600;
      text-align: center;
      padding: clamp(7px,1vw,10px) 8px;
    }
    .card-image-wrap {
      position: relative;
      background: #222;
    }
    .card-image-wrap img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }
    .card-image-wrap svg {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
    }
    .badge-new {
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: #e53e3e;
      color: #fff;
      font-size: clamp(9px, 1.2vw, 11px);
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .card-footer {
      background: #1a1a1a;
      padding: clamp(7px,1.2vw,12px);
      display: flex;
      justify-content: center;
    }
    .btn-see-more {
      background: #2a2a2a;
      color: #fff;
      font-size: clamp(11px, 1.4vw, 13px);
      font-weight: 500;
      padding: clamp(4px,0.8vw,7px) clamp(14px,2vw,22px);
      border-radius: 999px;
      border: 1px solid #444;
      font-family: inherit;
      transition: background 0.2s;
      cursor: pointer;
    }
    .product-card:hover .btn-see-more { background: #3a3a3a; }

    /* ══════════════════════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════════════════════ */
    footer {
      background: #e8e8e8;
      width: 100%;
      padding: clamp(24px,4vw,44px) 6vw clamp(20px,3vw,32px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(14px,2vw,22px);
    }
    .social-icons {
      display: flex;
      gap: clamp(20px,4vw,40px);
      align-items: center;
    }
    .social-icons a {
      font-size: clamp(1.7rem, 3.5vw, 2.4rem);
      transition: transform 0.2s ease;
      display: flex;
    }
    .social-icons a:hover { transform: scale(1.15); }
    .icon-instagram { color: #E1306C; }
    .icon-tiktok    { color: #000; }
    .icon-pinterest { color: #E60023; }
    .icon-facebook  { color: #1877F2; }
    footer p { font-size: clamp(0.7rem, 1.4vw, 0.85rem); color: #666; }