* { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f6f8fc;
      color: #172033;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button, select { cursor: pointer; }

    .container { width: min(1120px, 92%); margin: auto; }

    .announcement {
      padding: 9px 16px;
      background: #101b32;
      color: white;
      text-align: center;
      font-size: 13px;
    }

    header { background: white; border-bottom: 1px solid #e5e9f1; }

    .navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px 0;
    }

    .brand { font-size: 20px; font-weight: 800; line-height: 1.2; }

    .brand span {
      display: block;
      color: #667085;
      font-size: 11px;
      letter-spacing: 3px;
      margin-top: 6px;
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      font-size: 14px;
      font-weight: 600;
    }

    nav a:hover, nav a[aria-current="page"] { color: #2563eb; }

    .page-heading { padding: 45px 0 25px; }

    .eyebrow {
      color: #2563eb;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
    }

    h1 {
      margin: 10px 0;
      font-size: clamp(32px, 5vw, 46px);
      line-height: 1.2;
      letter-spacing: -1px;
    }

    .page-heading p { color: #667085; margin-bottom: 0; }

    .demo-notice {
      padding: 12px 16px;
      background: #fff7e6;
      border: 1px solid #f2d69c;
      border-radius: 10px;
      font-size: 14px;
      margin-bottom: 24px;
    }

    .filters {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 14px;
      padding: 20px;
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 16px;
    }

    label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 7px;
    }

    input, select {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid #d7deea;
      border-radius: 8px;
      background: white;
      color: #172033;
      min-width: 0;
    }

    .results-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      margin: 24px 0;
      font-size: 14px;
      color: #667085;
    }

    .reset {
      border: 0;
      background: transparent;
      color: #2563eb;
      font-weight: 700;
      padding: 8px;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      padding-bottom: 45px;
    }

    .product-card {
      overflow: hidden;
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 18px;
      transition: transform .2s, box-shadow .2s;
    }

    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px #1720330d;
    }

    .product-image {
      position: relative;
      display: grid;
      place-items: center;
      height: 235px;
      background: #edf2fa;
    }

    .badge {
      position: absolute;
      top: 15px;
      left: 15px;
      background: white;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
    }

    .phone {
      height: 175px;
      width: 90px;
      padding: 5px;
      border-radius: 19px;
      background: #182235;
      box-shadow: 10px 12px 20px #17203326;
      transform: rotate(-8deg);
    }

    .screen {
      height: 100%;
      border-radius: 14px;
      background: linear-gradient(145deg, var(--phone-colour), #e6eaff);
      position: relative;
    }

    .screen::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      height: 6px;
      width: 30px;
      border-radius: 10px;
      background: #182235;
    }

    .product-content { padding: 22px; }
    .product-content h2 { margin: 0 0 7px; font-size: 21px; }
    .specifications { color: #667085; font-size: 13px; margin: 0; }

    .price {
      font-size: 25px;
      font-weight: 800;
      margin: 17px 0;
    }

    .button {
      display: block;
      text-align: center;
      background: #2563eb;
      color: white;
      padding: 11px;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 700;
    }

    .button:hover { background: #1d4ed8; }

    .empty {
      grid-column: 1 / -1;
      padding: 50px 20px;
      text-align: center;
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 16px;
    }

    .empty h2 { margin-top: 0; }
    .empty p { color: #667085; }

    footer {
      padding: 25px 0;
      border-top: 1px solid #e5e9f1;
      color: #667085;
      font-size: 13px;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
    }

    :focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 3px;
    }

    @media (max-width: 900px) {
      .filters { grid-template-columns: 1fr 1fr; }
      .products { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 550px) {
      .filters, .products { grid-template-columns: 1fr; }
      nav { gap: 16px; }
      .page-heading { padding-top: 30px; }
    }