/* What is SyFu Section - Mobile First */
.what-is-syfu {
    color: var(--SyFu-Neutral-light);
    font-family: "Inter", sans-serif;
    max-width: 100%;
    overflow: hidden; /* Prevent horizontal scroll from syfu-top-bg */
    position: relative; /* Contain absolute positioned children */
}
.syfu-top-bg {
    position: absolute;
    right: -154px;
    top: 0;
    width: 554px;
    height: 417px;
    border-radius: 636px;
    opacity: 0.7;
    background: var(--SyFu-purple-main, #6B46C1);
    filter: blur(175px);
    z-index: 10; /* Above video and mask but below content */
}

/* Header Container - Full Width */
.syfu-header-container {
    width: 100%;
    text-align: center;
    padding-top: 1.906rem; /* 30.5px top padding mobile */
    position: relative;
    z-index: 11; /* Above purple bg */
}

.syfu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.851rem; /* 13.62px mobile */
    margin-top: 0;
}

/* First text "What is" */
.syfu-title-text1 {
    text-align: center;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 2.25rem; /* 36px */
    font-style: normal;
    font-weight: 400;
    line-height: 2.281rem; /* 36.502px - 101.395% */
    background: linear-gradient(90deg, #FFF 0%, #58B2D4 182.77%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-self: flex-start; /* Align to top */
}

/* Logo in the middle */
.syfu-title-logo {
    display: inline-block;
    width: 6.021rem; /* 96.332px */
    align-self: center; /* Center vertically */
}

.syfu-title-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Second text "?" */
.syfu-title-text2 {
    text-align: center;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 2.25rem; /* 36px */
    font-style: normal;
    font-weight: 400;
    line-height: 2.281rem; /* 36.502px - 101.395% */
    background: linear-gradient(90deg, #FFF -1132.69%, #58B2D4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-self: flex-start; /* Align to top */
}

/* Content Container */
.syfu-container {
    width: 100%;
    position: relative;
    z-index: 11; /* Above purple bg */
    margin-top: -4.375rem; /* -70px margin top mobile */
    padding-bottom: 3rem; /* 48px bottom padding mobile */
}

.syfu-inner-container {
    margin: 0; /* No margin on mobile */
}

.syfu-content {
    display: flex;
    flex-direction: column; /* Vertical alignment on mobile */
    gap: 1.5rem; /* 24px gap mobile */
    align-items: center; /* Center horizontally on mobile */
}

/* NFT Illustration */
.nft-illustration {
    margin-top: 2.9375rem; /* 47px top margin */
    /* margin-left: 0.7125rem; 11.4px left margin */
    position: relative;
    width: 100vw; /* 480.486px width mobile */
    height: 100vw; /* 480.486px height mobile */
    max-width: 100vh;
    z-index: 1; /* Same level as video, below purple bg */
}

/* Video Container with Mask */
.video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; /* 480.486px width mobile */
    height: 100vw; /* 480.486px height mobile */
    max-width: 100vh;
    overflow: hidden;
    z-index: 1; /* Below purple bg */
    /* CSS gradient mask - sharp circular cutoff */
    -webkit-mask-image: radial-gradient(ellipse 60% 70%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 85%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask-image: radial-gradient(ellipse 60% 70%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0) 85%);
    mask-repeat: no-repeat;
    mask-position:center;
    mask-size: cover;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      width: 100vw; /* 480.486px width mobile */
    height: 100vw; /* 480.486px height mobile */
    max-width: 100vh;
    object-fit: cover;
}

/* Image Overlays */
.image-overlay {
    position: absolute;
    z-index: 10;
}

.nft-card {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Left Image - Mobile */
.left-image {
    width: 7.838rem; /* 125.405px */
    height: 9.454rem; /* 151.27px */
    transform: rotate(-16.528deg);
    border-radius: 0.522rem; /* 8.356px */
    border: 0.043rem solid #E49221; /* 0.696px */
    box-shadow: 0 0 0.871rem 0 rgba(250, 168, 126, 0.30), 0 0.174rem 1.567rem 0 #FFAE00;
    top: 40%;
    left: 10%;
}

.left-image .nft-card {
    background-image: url('img/what-is-syfu/mknk3.jpg');
    border-radius: 0.522rem;
}

/* Top Image - Mobile */
.top-image {
    width: 6.966rem; /* 111.417px */
    height: 8.4rem; /* 134.397px */
    transform: rotate(7.271deg);
    border-radius: 1rem; /* 16px */
    border: 0.043rem solid #FFF; /* 0.696px */
    box-shadow: 0 0 0.871rem 0 rgba(242, 81, 188, 0.30), 0 0.174rem 1.567rem 0 #C71F8F;
    top: 15%;
    right: 20%;
}

.top-image .nft-card {
    background-image: url('img/what-is-syfu/mknk2.jpg');
    border-radius: 1rem;
}

/* Bottom Image - Mobile */
.bottom-image {
    width: 6.966rem; /* 111.417px */
    height: 8.4rem; /* 134.397px */
    transform: rotate(21.967deg);
    border-radius: 0.522rem; /* 8.356px */
    border: 0.043rem solid #58B2D4; /* 0.696px */
    box-shadow: 0 0 0.871rem 0 rgba(123, 219, 255, 0.30), 0 0.174rem 1.567rem 0 #58B2D4;
    bottom: 15%;
    right: 15%;
}

.bottom-image .nft-card {
    background-image: url('img/what-is-syfu/mknk6.jpg');
    border-radius: 0.522rem;
}

/* Feature Cards */
.feature-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px gap between title and desc mobile */
    width: 20rem; /* 320px width mobile */
    position: relative;
    z-index: 11; /* Above purple bg */
}

.feature-card {
    background: transparent;
}

.card-content {
    display: flex;
    flex-direction: column; /* Title on top, description on bottom on mobile */
    gap: 1rem; /* 16px gap between title and desc on mobile */
}

.card-title-section {
    width: 16.9375rem; /* 271px width */
    height: 2.625rem; /* 42px height */
    position: relative;
    background-image: linear-gradient(90deg, #3EE8B5 0%, #58B2D4 100%);
    background-repeat: no-repeat;
    background-size: 36px 4px;
    background-position: right bottom;
}

.card-title {
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3rem; /* 48px mobile */
    font-weight: normal;
    margin: 0;
    background: linear-gradient(90deg, #3EE8B5 0%, #58B2D4 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.card-description {
    color: #EEE;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 300;
    line-height: 2.125rem; /* 26px */
    margin: 0;
}

.card-description a {
    color: white;
    text-decoration: underline;
}

.card-description strong {
    font-weight: 700;
}

/* Tablet Styles - 550px to 1280px */
@media (min-width: 550px) and (max-width: 1279px) {
    /* Header adjustments for tablet */
    .syfu-header-container {
        padding-top: 3.5rem; /* Between mobile (30.5px) and desktop (89px) */
    }

    .syfu-title {
        gap: 0.75rem; /* Slightly larger gap than mobile */
    }

    .syfu-title-text1,
    .syfu-title-text2 {
        font-size: 2.75rem; /* Between mobile (36px) and desktop (54px) */
        line-height: 2.75rem;
    }

    .syfu-title-logo {
        width: 7.5rem; /* Between mobile (96.332px) and desktop (150px) */
    }

    /* Container adjustments */
    .syfu-container {
        margin-top: 1rem; /* Add positive margin to separate from title */
        padding-bottom: 4rem; /* Between mobile (48px) and desktop (99px) */
    }

    .syfu-inner-container {
        max-width: 90%; /* Contained but wider than mobile */
        margin: 0 auto;
        padding: 0 2rem; /* Side padding for tablet */
    }

    /* Key change: Horizontal alignment for tablet */
    .syfu-content {
        flex-direction: row; /* Horizontal layout like desktop */
        gap: 2rem; /* Reasonable gap between video and text */
        align-items: center; /* Center vertically */
        justify-content: center;
    }

    /* NFT Illustration scaling - keeping mobile proportions but scaling up */
    .nft-illustration {
        width: 28rem; /* Scaled from mobile 100vw, roughly for tablet */
        height: 28rem; /* Keep square aspect ratio */
        max-width: 45vw; /* Responsive but contained */
        max-height: 45vw;
        margin-top: 1rem; /* Reduced top margin */
        flex-shrink: 0; /* Don't shrink */
    }

    /* Video container scaling */
    .video-container {
        width: 28rem;
        height: 28rem;
        max-width: 45vw;
        max-height: 45vw;
    }

    .background-video {
        width: 28rem;
        height: 28rem;
        max-width: 45vw;
        max-height: 45vw;
    }

    /* Scale NFT card overlays proportionally */
    .left-image {
        width: 9.5rem; /* Scaled from mobile */
        height: 11.5rem;
        border-radius: 0.65rem;
        border: 0.05rem solid #E49221;
    }

    .top-image {
        width: 8.5rem; /* Scaled from mobile */
        height: 10.25rem;
        border-radius: 1.2rem;
        border: 0.05rem solid #FFF;
    }

    .bottom-image {
        width: 8.5rem; /* Scaled from mobile */
        height: 10.25rem;
        border-radius: 0.65rem;
        border: 0.05rem solid #58B2D4;
    }

    /* Feature cards adjustments */
    .feature-cards {
        width: auto; /* Let it size naturally */
        max-width: 24rem; /* Constrain max width */
        gap: 1.25rem; /* Slightly larger gap */
        flex-shrink: 1; /* Allow shrinking if needed */
    }

    .card-content {
        gap: 1.25rem; /* Slightly larger gap between title and description */
    }

    .card-title-section {
        width: 18rem; /* Slightly wider than mobile */
        height: 3rem; /* Slightly taller than mobile */
    }

    .card-title {
        font-size: 3.25rem; /* Between mobile (48px) and desktop (60px) */
    }

    .card-description {
        font-size: 1.1875rem; /* Between mobile (18px) and desktop (20px) */
        line-height: 1.75rem; /* Adjusted line height */
        max-width: 22rem; /* Constrain text width for readability */
    }

    /* Purple background adjustment for tablet */
    .syfu-top-bg {
        width: 650px; /* Between mobile (554px) and desktop (1028px) */
        height: 500px; /* Between mobile (417px) and desktop (772.5px) */
        right: -100px; /* Adjusted position */
        top: -30px;
    }
}

/* Medium Desktop Styles - 1280px to 1500px */
@media (min-width: 1280px) and (max-width: 1500px) {
    /* Header adjustments */
    .syfu-header-container {
        padding-top: 4.5rem; /* Between tablet and desktop */
    }

    .syfu-title {
        gap: 0.875rem;
    }

    .syfu-title-text1,
    .syfu-title-text2 {
        font-size: 3.125rem; /* Between tablet and desktop */
        line-height: 3.125rem;
    }

    .syfu-title-logo {
        width: 8.75rem; /* Between tablet and desktop */
    }

    /* Responsive container instead of fixed width */
    .syfu-container {
        margin-top: -1rem;
        padding-bottom: 5rem;
    }

    .syfu-inner-container {
        max-width: 95%; /* Responsive width instead of fixed 1321px */
        width: auto;
        margin: 0 auto;
        padding: 0 2rem; /* Side padding for breathing room */
        display: flex;
        justify-content: center;
    }

    .syfu-content {
        flex-direction: row;
        gap: 3rem; /* Slightly larger gap */
        align-items: center;
        width: 100%;
        max-width: 75rem; /* Constrain total width */
    }

    /* Scaled NFT Illustration */
    .nft-illustration {
        width: 38rem; /* Smaller than full desktop */
        height: 35rem;
        margin-top: 0;
        flex-shrink: 0;
    }

    .video-container {
        width: 35rem;
        height: 35rem;
    }

    .background-video {
        width: 34rem;
        height: 34rem;
    }

    /* Scaled NFT overlays */
    .left-image {
        width: 10rem;
        height: 12rem;
        border-radius: 0.7rem;
    }

    .top-image {
        width: 9rem;
        height: 11rem;
        border-radius: 1.1rem;
    }

    .bottom-image {
        width: 9rem;
        height: 11rem;
        border-radius: 0.7rem;
    }

    /* Feature cards adjustments */
    .feature-cards {
        flex-direction: column;
        gap: 1.75rem;
        flex: 1; /* Take remaining space */
        max-width: 28rem; /* Constrain width */
    }

    .card-content {
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        padding: 1.5rem 0;
    }

    .card-title-section {
        width: 15rem; /* Slightly smaller than desktop */
        height: 3.25rem;
    }

    .card-title {
        font-size: 3.5rem; /* Between tablet and desktop */
    }

    .card-description {
        font-size: 1.1875rem;
        line-height: 1.75rem;
        max-width: 20rem; /* Constrain for readability */
        flex: 1;
    }

    /* Purple background adjustment */
    .syfu-top-bg {
        width: 800px;
        height: 600px;
        left: -50px;
        top: -60px;
    }
}