body {
      background:
        radial-gradient(circle at top left, rgba(0, 114, 206, 0.035), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 42%, #f5f8fc 100%);
    }

    main {
      background: transparent;
    }

    .about-strip {
      background: #ffffff;
    }

    .tools-home {
      background: #f5f6f7;
      padding: 72px 56px;
      border-top: 1px solid rgba(17, 17, 17, 0.06);
      border-bottom: 1px solid rgba(17, 17, 17, 0.05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .tools-home-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .tools-home .section-label {
      margin-bottom: 12px;
      color: #0072CE;
    }

    .tools-home h2 {
      font-family: 'Inter', sans-serif;
      font-size: 2rem;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 16px;
    }

    .tools-home-intro {
      font-size: 0.95rem;
      color: #4f5d6f;
      max-width: 68ch;
      line-height: 1.75;
      margin-bottom: 32px;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .tool-card {
      position: relative;
      min-height: 360px;
      overflow: hidden;
      background: #111;
      color: #fff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .tool-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      transition: transform 0.5s ease;
    }

    .tool-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 12, 18, 0.16) 0%, rgba(8, 12, 18, 0.42) 45%, rgba(8, 12, 18, 0.8) 100%);
    }

    .tool-card.scope-card::before {
      background-image: url('../assets/images/skyscrapers.webp');
      background-position: center;
    }

    .tool-card.readiness-card::before {
      background-image: url('../assets/images/office_equipment.webp');
      background-position: center;
    }

    .tool-card:hover::before {
      transform: scale(1.05);
    }

    .tool-card-content {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 28px;
      z-index: 1;
      max-width: 44ch;
    }

    .tool-card h3 {
      font-family: 'Inter', sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.2;
      margin-bottom: 12px;
      color: #fff;
    }

    .tool-card p {
      font-size: 0.95rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.84);
      margin-bottom: 22px;
    }

    .tool-card-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 148px;
      padding: 12px 22px;
      background: rgba(255,255,255,0.96);
      color: var(--black);
      text-decoration: none;
      font-size: 0.84rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .tool-card-btn:hover,
    .tool-card-btn:focus-visible {
      background: #0072CE;
      color: #fff;
      outline: none;
    }

    .why {
      background: #ffffff;
      border-top: 1px solid rgba(17, 17, 17, 0.05);
    }

    .pillars-anim {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 48px;
      padding: 8px 0 40px;
      overflow: visible;
      min-height: 180px;
    }

    .pa-boxes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
      width: 136px;
      height: 136px;
      flex-shrink: 0;
      overflow: visible;
      padding-left: 4px;
    }

    .pa-box {
      border-radius: 8px;
      width: 64px;
      height: 64px;
      cursor: pointer;
      opacity: 0;
      transform: translateX(600px);
      transition: transform 0.2s ease;
    }

    .pa-box.arrived {
      opacity: 1;
      transform: translateX(0);
      transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    }

    .pa-box.hovered {
      transform: scale(1.06);
      transition: transform 0.2s ease;
    }

    .pa-box.b1 { background: #0072CE; }
    .pa-box.b2 { background: #E06F00; }
    .pa-box.b3 { background: #3F9C35; }
    .pa-box.b4 { background: #582B94; }

    .pa-tagline {
      opacity: 0;
      transition: opacity 1s ease;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 136px;
    }

    .pa-tagline.show { opacity: 1; }

    .pa-tagline-name {
      font-family: 'Inter', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: var(--black);
      letter-spacing: 0.05em;
    }

    .pa-tagline-sub {
      font-size: 14px;
      color: #888;
      letter-spacing: 0.08em;
      margin-top: 4px;
    }

    .pa-info {
      width: 240px;
      height: 136px;
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }

    .pa-card {
      position: absolute;
      top: 50%;
      transform: translateY(-50%) translateX(16px);
      width: 100%;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
      pointer-events: none;
    }

    .pa-card.show {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
      pointer-events: auto;
    }

.pa-dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      display: inline-block;
      margin-right: 7px;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .pa-dot--trust { background: #0072CE; }
    .pa-dot--growth { background: #E06F00; }
    .pa-dot--sustainability { background: #3F9C35; }
    .pa-dot--quality { background: #582B94; }

    .pa-title {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }

    .pa-desc {
      font-size: 0.88rem;
      color: #555;
      line-height: 1.75;
    }

    @media (max-width: 900px) {
      .tools-home {
        padding: 56px 24px;
      }

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

      .tool-card {
        min-height: 320px;
      }

      .pillars-anim {
        flex-wrap: wrap;
        gap: 12px;
        min-height: auto;
        padding: 8px 0 16px;
        align-items: center;
      }

      .pa-boxes {
        width: 88px;
        height: 88px;
        gap: 6px;
        padding-left: 2px;
        flex-shrink: 0;
        order: 1;
      }

      .pa-box {
        width: 41px;
        height: 41px;
        border-radius: 6px;
      }

      .pa-tagline {
        order: 3;
        width: 100%;
        height: auto;
        flex-shrink: 0;
        margin-top: 8px;
        justify-content: flex-start;
      }

      .pa-tagline-name { font-size: 16px; }
      .pa-tagline-sub { font-size: 10px; margin-top: 2px; }

      .pa-info {
        flex: 1;
        min-width: 0;
        height: 88px;
        position: relative;
        display: block;
        order: 2;
      }

      .pa-card {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) translateX(12px);
        width: 100%;
        opacity: 0;
      }

      .pa-card.show {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }

      .pa-title { font-size: 12px; margin-bottom: 3px; }
      .pa-desc { font-size: 0.75rem; line-height: 1.45; }
      .pa-dot { width: 7px; height: 7px; margin-right: 4px; }
    }

    @media (max-width: 600px) {
      .tools-home {
        padding: 48px 20px;
      }

      .tools-home h2 {
        font-size: 1.6rem;
      }

      .tools-home-intro,
      .tool-card p {
        font-size: 0.88rem;
        line-height: 1.65;
      }

      .tool-card {
        min-height: 300px;
      }

      .tool-card-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
      }

      .tool-card h3 {
        font-size: 1.28rem;
      }

      .tool-card-btn {
        width: 100%;
      }
    }