.home-feature-card {
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.16);
    background:
      radial-gradient(circle at 18% 12%, rgba(250, 204, 21, 0.18), transparent 46%),
      radial-gradient(circle at 88% 88%, rgba(59, 130, 246, 0.14), transparent 44%),
      linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
    transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
    isolation: isolate;
  }

  .home-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transform: translateX(-24%);
    transition: opacity 0.45s ease, transform 0.8s ease;
    pointer-events: none;
    z-index: 0;
  }

  .home-feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 26px 56px -24px rgba(15, 23, 42, 0.4);
  }

  .home-feature-card:hover::after {
    opacity: 1;
    transform: translateX(24%);
  }

  .home-feature-card .relative {
    z-index: 1;
  }

  .home-feature-card:nth-child(2n) {
    background:
      radial-gradient(circle at 14% 80%, rgba(34, 197, 94, 0.14), transparent 42%),
      radial-gradient(circle at 88% 8%, rgba(212, 175, 55, 0.18), transparent 38%),
      linear-gradient(160deg, #ffffff 0%, #f7fdf9 100%);
  }

  .home-feature-card:nth-child(3n) {
    background:
      radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.16), transparent 40%),
      radial-gradient(circle at 12% 90%, rgba(168, 85, 247, 0.12), transparent 36%),
      linear-gradient(160deg, #ffffff 0%, #f8f7ff 100%);
  }

  .home-offer-card {
    border: 1px solid rgba(212, 175, 55, 0.14);
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 42%, #0f172a 100%);
    box-shadow: 0 18px 45px -25px rgba(15, 23, 42, 0.85);
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
    isolation: isolate;
  }

  .home-offer-card::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 15% 18%, rgba(250, 204, 21, 0.32), transparent 45%),
      radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.28), transparent 48%);
    opacity: 0.78;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.45s ease;
  }

  .home-offer-card:hover {
    transform: translateY(-10px) rotate(-0.4deg);
    border-color: rgba(250, 204, 21, 0.45);
    box-shadow: 0 30px 60px -26px rgba(15, 23, 42, 0.95);
  }

  .home-offer-card:hover::before {
    opacity: 0.95;
  }

  .home-offer-card img,
  .home-offer-card .absolute.bottom-0 {
    position: relative;
    z-index: 2;
  }

  .home-offer-card>.absolute.inset-0 {
    z-index: 3;
  }

  .home-offer-card .absolute.bottom-0 {
    z-index: 4;
  }

  .home-offer-card .offer-button {
    background: linear-gradient(130deg, #ffffff 0%, #fef3c7 100%);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 20px -10px rgba(251, 191, 36, 0.8);
  }

  .home-offer-card .offer-button:hover {
    background: linear-gradient(130deg, #fde68a 0%, #facc15 100%);
    color: #0f172a;
    transform: translateY(-2px);
  }

  .work-flow-card {
    position: relative;
    padding: 1.25rem 1rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background:
      radial-gradient(circle at 18% 10%, rgba(250, 204, 21, 0.14), transparent 45%),
      radial-gradient(circle at 82% 86%, rgba(59, 130, 246, 0.12), transparent 44%),
      linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
  }

  .work-flow-card::before {
    content: "";
    position: absolute;
    inset: -80% -25%;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 54%);
    transform: translateX(-30%);
    transition: transform 0.85s ease;
    pointer-events: none;
  }

  .work-flow-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.42);
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.38);
  }

  .work-flow-card:hover::before {
    transform: translateX(30%);
  }

  .work-flow-card:nth-child(2n) {
    background:
      radial-gradient(circle at 84% 12%, rgba(34, 197, 94, 0.13), transparent 40%),
      radial-gradient(circle at 12% 90%, rgba(250, 204, 21, 0.16), transparent 38%),
      linear-gradient(160deg, #ffffff 0%, #f7fdf8 100%);
  }

  .work-flow-card:nth-child(3n) {
    background:
      radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.12), transparent 42%),
      radial-gradient(circle at 10% 16%, rgba(14, 165, 233, 0.16), transparent 40%),
      linear-gradient(160deg, #ffffff 0%, #f8f7ff 100%);
  }

  .work-icon-shell {
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(255, 255, 255, 0.9);
    transition: transform 0.35s ease, border-color 0.35s ease;
  }

  .work-icon-core {
    background: linear-gradient(135deg, #fde68a 0%, #facc15 100%);
    box-shadow: 0 12px 24px -14px rgba(234, 179, 8, 0.9);
    transition: transform 0.35s ease;
  }

  .work-flow-card:hover .work-icon-shell {
    transform: scale(1.06);
    border-color: rgba(212, 175, 55, 0.58);
  }

  .work-flow-card:hover .work-icon-core {
    transform: rotate(6deg) scale(1.06);
  }
</style>