/* ========== BASIC RESET ========== */
    body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; color: #333; background: #fff; }
    section { width: 100%; box-sizing: border-box; padding: 60px 20px; }

    /* ========== ENVIRONMENT SECTION ========== */
    .shield-inner {
      max-width: 1300px;
      margin: 0 auto;
      display: flex;
      gap: 48px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* IMAGE SIDE */
    .shield-col-image { flex: 1 1 48%; min-width: 300px; position: relative; }
    .shield-img {
      width: 100%;
      height: auto;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transform: scale(1.02);
      transition: opacity .55s ease, transform .55s ease;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }
    .shield-img.active { opacity: 1; transform: scale(1); position: relative; }

    /* CONTENT SIDE */
    .shield-col-content { flex: 1 1 42%; min-width: 320px; }
    .shield-title { font-size: 40px; line-height: 1.05; margin: 6px 0 22px; font-weight: 600; color: #1b1b1b; }

    /* ENVIRONMENT BUTTONS */
    .env-list { display: flex; flex-direction: column; gap: 10px; }
    .env-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      background: transparent;
      border: 0;
      padding: 12px 18px;
      cursor: pointer;
      transition: background .25s ease;
      width: 100%;
      box-sizing: border-box;
      position: relative;
    }
    .env-item:not(.env-item-active) { opacity: 0.9; }
    .env-item:hover { background: rgba(0,0,0,0.02); }

    .env-num { color: #f29400; font-weight: 700; margin-right: 10px; display: inline-block; width: 40px; }
    .env-head { font-weight: 700; font-size: 18px; color: #333; }

    /* BODY SHOW/HIDE */
    .env-body {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .45s ease, opacity .35s ease;
      margin-top: 8px;
      color: #555;
    }
    .env-item-active .env-body { max-height: 420px; opacity: 1; }

    .env-cta {
      display: inline-block;
      margin-top: 12px;
      border: 2px solid #f29400;
      color: #f29400;
      padding: 8px 18px;
      border-radius: 24px;
      text-decoration: none;
      font-weight: 700;
      font-size: 13px;
    }
    .env-cta:hover { background: #f29400; color: #fff; }

    /* ========== BRANDS & TECHNOLOGY ========== */
    .shield-brands-inner {
      max-width: 900px;
      margin: 60px auto;
      text-align: center;
    }
    .brands-title {
      font-size: 32px;
      margin-bottom: 30px;
      color: #1b1b1b;
      font-weight: 600;
    }

    .chart-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      max-width: 800px;
      height: 150px;
      margin: 0 auto;
      position: relative;
      gap: 3px;
    }
    .chart-bar {
      width: 60px;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }
    .chart-bar:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.2);
      z-index: 2;
    }
    .chart-bar::after {
      content: attr(data-title) "\A" attr(data-line1);
      white-space: pre;
      position: absolute;
      bottom: 10px;
      left: 5px;
      right: 5px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .chart-bar:hover::after { opacity: 1; }

    /* COLORS */
    .orange { background-color: #f29400; }
    .gray-1 { background-color: #a9a9a9; }
    .gray-2 { background-color: #bfbfbf; }
    .gray-3 { background-color: #e0e0e0; }
    .purple { background-color: #580fb1; }
    .blue { background-color: #0080ff; }
    .green { background-color: #008000; }
    .orange-2 { background-color: #f29400; }
    .red { background-color: #d63c42; }

    /* HEIGHTS */
    .chart-container .orange { height: 80px; }
    .chart-container .gray-1 { height: 70px; }
    .chart-container .gray-2 { height: 60px; }
    .chart-container .gray-3 { height: 50px; }
    .chart-container .purple { height: 130px; }
    .chart-container .blue { height: 55px; }
    .chart-container .green { height: 65px; }
    .chart-container .orange-2 { height: 75px; }
    .chart-container .red { height: 85px; }

    /* SHAPES */
    .orange, .gray-1, .gray-2, .gray-3 {
      clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
    }
    .blue, .green, .orange-2, .red {
      clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
    }
    .purple { position: relative; }
    .purple::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 20px solid #580fb1;
    }

    .labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 800px;
      margin: 12px auto 0;
      font-size: 14px;
      color: #6b6b6b;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* RESPONSIVE */
    @media (max-width: 980px) {
      .shield-inner { gap: 22px; padding: 0 8px; }
      .shield-col-image, .shield-col-content { flex-basis: 100%; }
      .shield-img { position: relative; }
      .chart-bar { width: 40px; }
      .chart-container { height: 100px; }
      .brands-title { font-size: 26px; }
      .labels { font-size: 12px; }
      .shield-title { font-size: 32px; }
      .env-head { font-size: 16px; }
    }