/* What is SyFu Section - Mobile First */
.what-is-syfu {
    color: var(--SyFu-Neutral-light);
    font-family: "Inter", sans-serif;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #000000;
}

/* 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 "About" */
.syfu-title-text1 {
    text-align: center;
    color: var(--sds-color-text-neutral-on-neutral, #F7F7F7);
    font-family: var(--sds-typography-subtitle-font-family, "Inter", sans-serif);
    font-size: 2rem; /* 32px mobile */
    font-style: normal;
    font-weight: var(--sds-typography-subtitle-font-weight, 600);
    line-height: 120%; /* 38.4px */
    align-self: flex-start; /* Align to top */
}

/* Logo in the middle */
.syfu-title-logo {
    display: inline-block;
    width: 8.919188rem; /* 142.707px mobile */
    height: 2.399313rem; /* 38.389px mobile */
    align-self: center; /* Center vertically */
    filter: brightness(0) saturate(100%) invert(97%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(100%);
}

/* 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: 30.03rem; /* 480.486px fixed width mobile */
    height: 30.03rem; /* 480.486px fixed height mobile */
    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: 30.03rem; /* 480.486px fixed width mobile */
    height: 30.03rem; /* 480.486px fixed height mobile */
    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: 30.03rem; /* 480.486px fixed width mobile */
    height: 30.03rem; /* 480.486px fixed height mobile */
    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;
}

/* Text Container */
.syfu-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    margin-top: 1.25rem; /* 20px top margin */
    position: relative;
    z-index: 11;
}

.syfu-description {
    color: var(--sds-color-text-utilities-text-on-overlay, #F7F7F7);
    font-family: var(--sds-typography-subheading-font-family, "Inter", sans-serif);
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: var(--sds-typography-subheading-font-weight, 400);
    line-height: 130%; /* 31.2px */
    margin: 0 0 1.5rem 0; /* 24px bottom margin between paragraphs */
    text-align: left;
}

.syfu-description:last-of-type {
    margin-bottom: 5.3125rem; /* 85px bottom margin before button */
}

.syfu-button {
    display: inline-flex;
    width: auto; /* Auto width based on content */
    height: 2.75rem; /* 44px */
    padding: 0.5rem 1.75rem; /* 8px 28px - reduced vertical padding */
    justify-content: center;
    align-items: center;
    gap: 0.7rem; /* 11.2px */
    background: #FFF;
    border-radius: 42px;
    text-decoration: none;
    color: #1D1D1D;
    font-family: Barlow, sans-serif;
    font-size: 0.9375rem; /* 15px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.2; /* Reduced line height to prevent wrapping */
    text-transform: capitalize;
    white-space: nowrap; /* Prevent text wrapping */
}