:root {
        --bg: #f7f3ee;
        --panel: #fffdfb;
        --card: #ffffff;
        --ink: #1d1b1a;
        --muted: #6d615b;
        --line: #e9dfd7;
        --accent: #d46c3d;
        --accent-dark: #a84d2b;
        --accent-soft: #fbeae0;
        --green: #2d6a4f;
        --shadow: 0 18px 45px rgba(32, 20, 18, 0.08);
      }

      * { box-sizing: border-box; }

      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
      }

      img { max-width: 100%; display: block; }

      a { text-decoration: none; color: inherit; }

      .container {
        width: min(1180px, calc(100% - 32px));
        margin: 0 auto;
      }

      header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 253, 251, 0.9);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--line);
      }

      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 76px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
      }

      .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 0.8rem;
      }

      .nav-links {
        display: flex;
        gap: 26px;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .nav-links a:hover { color: var(--ink); }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 22px;
        border-radius: 999px;
        border: 1px solid transparent;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.2s ease, opacity 0.2s ease;
      }

      .btn:hover { transform: translateY(-1px); }

      .btn-primary {
        background: var(--accent);
        color: #fff;
      }

      .btn-secondary {
        background: transparent;
        border-color: var(--line);
        color: var(--ink);
      }

      .hero {
        padding: 72px 0 36px;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        align-items: center;
        gap: 38px;
      }

      .eyebrow {
        display: inline-block;
        background: var(--accent-soft);
        color: var(--accent-dark);
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 700;
      }

      h1 {
        margin: 18px 0 16px;
        font-size: clamp(2.5rem, 5vw, 5rem);
        line-height: 0.95;
        letter-spacing: -0.05em;
      }

      .lead {
        font-size: 1.08rem;
        color: var(--muted);
        max-width: 620px;
      }

      .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
      }

      .stats {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 32px;
      }

      .stat strong {
        display: block;
        font-size: 1.8rem;
      }

      .stat span {
        color: var(--muted);
      }

      .hero-visual {
        position: relative;
      }

      .hero-card {
        background: linear-gradient(145deg, #221c1a, #473830);
        border-radius: 28px;
        padding: 18px;
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .shirt-visual {
        background:
          linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
          url('../images/1064.jpg') center/cover no-repeat;
        min-height: 520px;
        border-radius: 22px;
        position: relative;
      }

      .floating-box {
        position: absolute;
        right: -18px;
        bottom: 24px;
        background: rgba(255,255,255,0.96);
        border-radius: 18px;
        padding: 16px 18px;
        box-shadow: var(--shadow);
        min-width: 190px;
      }

      .floating-box small {
        display: block;
        color: var(--muted);
      }

      .floating-box strong {
        display: block;
        font-size: 1.3rem;
        margin-top: 4px;
      }

      section {
        padding: 80px 0;
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 28px;
      }

      .section-head h2 {
        margin: 10px 0 0;
        font-size: clamp(2rem, 4vw, 3rem);
        letter-spacing: -0.04em;
      }

      .section-head p {
        margin: 0;
        color: var(--muted);
        max-width: 560px;
      }

      .products-grid,
      .work-grid,
      .machines-grid {
        display: grid;
        gap: 24px;
      }

      .products-grid {
        grid-template-columns: repeat(4, minmax(220px, 1fr));
      }

      .product-card,
      .work-card,
      .machine-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(20, 16, 15, 0.03);
      }

      .product-card {
        padding: 18px;
      }

      .product-art {
        height: 200px;
        border-radius: 18px;
        background-size: cover;
        background-position: center;
        margin-bottom: 18px;
      }

      .product-card h3 {
        margin: 0 0 10px;
        font-size: 1.4rem;
      }

      .product-card p {
        margin: 0 0 18px;
        color: var(--muted);
      }

      .price-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-dark);
        font-weight: 700;
      }

      .work-grid {
        grid-template-columns: repeat(3, minmax(260px, 1fr));
      }

      .work-card {
        display: flex;
        flex-direction: column;
      }

      .work-image {
        height: 260px;
        background-size: cover;
        background-position: center;
      }

      .work-info {
        padding: 18px 18px 20px;
      }

      .work-info h3 {
        margin: 0 0 8px;
      }

      .work-info p {
        margin: 0;
        color: var(--muted);
      }

      .machines-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
      }

      .machine-card {
        padding: 22px;
      }

      .machine-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--accent-soft), #f3efe9);
        color: var(--accent-dark);
        font-size: 1.7rem;
        margin-bottom: 18px;
      }

      .machine-card h3 {
        margin: 0 0 10px;
      }

      .machine-card p {
        margin: 0;
        color: var(--muted);
      }

      .cta-band {
        background: linear-gradient(135deg, #201b1a, #3f342f);
        color: #fff;
        border-radius: 28px;
        padding: 38px 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
      }

      .cta-band h3 {
        margin: 0 0 8px;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
      }

      .cta-band p {
        margin: 0;
        color: rgba(255,255,255,0.76);
      }

      footer {
        padding: 28px 0 50px;
        color: var(--muted);
      }

      .footer-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        border-top: 1px solid var(--line);
        padding-top: 24px;
      }

      @media (max-width: 980px) {
        .hero-grid,
        .cta-band,
        .section-head {
          grid-template-columns: 1fr;
          display: grid;
        }

        .products-grid {
          grid-template-columns: repeat(2, minmax(220px, 1fr));
        }

        .work-grid,
        .machines-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 720px) {
        .nav {
          flex-wrap: wrap;
          padding: 14px 0;
        }

        .nav-links {
          width: 100%;
          justify-content: center;
          flex-wrap: wrap;
          gap: 12px 18px;
          padding-bottom: 8px;
        }

        .nav-actions {
          width: 100%;
          justify-content: center;
        }

        .products-grid {
          grid-template-columns: 1fr;
        }

        .hero {
          padding-top: 40px;
        }
      }