/* Why Section - Mobile First */
.why-section {
    color: var(--SyFu-Neutral-light);
    overflow: hidden;
    padding: 0 1rem; /* 16px left right padding on mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title Container */
.why-title-container {
     display: grid;
  place-items: center;
        line-height: 3.371rem; /* 53.943px */

}

.why-title {
    text-align: center;
    text-shadow: 0 1.241px 19.077px rgba(62, 232, 181, 0.60);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3rem; /* 48px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.371rem; /* 53.943px */
    background: linear-gradient(90deg, #9EDCC9 0%, #3EE8B5 31.25%, #3EE8B5 65.38%, #87D5BE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
      grid-area: 1 / 1;
}

.why-title-outline {
    text-align: center;
    -webkit-text-stroke-width: 0.62px;
    -webkit-text-stroke-color: #000;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3rem; /* 48px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.371rem; /* 53.943px */
    mix-blend-mode: color-dodge;
    filter: blur(9.538642883300781px);
    z-index: 1;
     grid-area: 1 / 1;
}

/* Background Blurred Title */
.why-bg-title-container {
     display: grid;
  place-items: center;
    z-index: 0;
        line-height: 3.573rem; /* 57.173px */

}

.why-bg-title {
    text-align: center;
    text-shadow: 0 1.851px 28.454px rgba(62, 232, 181, 0.60);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 4.714rem; /* 75.429px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.573rem; /* 57.173px */
    background: linear-gradient(90deg, #9EDCC9 0%, #3EE8B5 31.25%, #3EE8B5 65.38%, #87D5BE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     grid-area: 1 / 1;
    z-index: 1;
     width:100%;
     height:auto;
}

.why-bg-title-outline {
     grid-area: 1 / 1;
    text-align: center;
    -webkit-text-stroke-width: 0.62px;
    -webkit-text-stroke-color: #000;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 4.714rem; /* 75.429px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.573rem; /* 57.173px */
    mix-blend-mode: color-dodge;
    filter: blur(9.538642883300781px);
    z-index: 0;
    width:100%;
     height:auto;
}

/* Content Area */
.why-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 3;
    padding: 0 1rem 3rem 1rem; /* 16px left/right padding, 48px bottom padding */
}
.why-content * {
    text-align: left;
}

.why-section-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem; /* 12px gap mobile */
    padding-top: 1.5rem; /* 24px top padding */
}

.why-item-image {
    width: 100%;
    text-align: center;
}

.why-item-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.why-item-title {
    color: #3EE8B5;
    font-family: "Inter", sans-serif;
    font-size: 1.625rem; /* 26px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.why-item-title strong {
    color: #3EE8B5;
    font-family: "Inter", sans-serif;
    font-size: 1.625rem; /* 26px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.why-item-description {
    color: rgba(255, 255, 255, 0.90);
    font-family: "Barlow", sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.why-item-descriptions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px gap between descriptions */
}

.dark-text {
    color: rgba(255, 255, 255, 0.60);
    font-family: "Barlow", sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Second section title styling */
.why-section-item:nth-child(2) .why-item-title {
    color: #3EE8B5;
    font-family: "Barlow", sans-serif;
    font-size: 1.625rem; /* 26px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.why-section-item:nth-child(2) .why-item-title strong {
    color: #3EE8B5;
    font-family: "Barlow", sans-serif;
    font-size: 1.625rem; /* 26px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Smaller font size for why-bg-title on very small screens */
@media (max-width: 440px) {
    .why-bg-title {
        font-size: 3.714rem; /* Reduced by 1rem from 4.714rem */
        line-height: 2.573rem; /* Reduced by 1rem from 3.573rem */
    }
    
    .why-bg-title-outline {
        font-size: 3.714rem; /* Reduced by 1rem from 4.714rem */
        line-height: 2.573rem; /* Reduced by 1rem from 3.573rem */
    }
}