/* Take Part Section - Mobile First */
.take-part {
    position: relative;
    min-height: 100vh;
        overflow: hidden;

}

/* Background Image - Mobile */
.take-part-bg {
    position: absolute;
    top: 0; /* Removed -3rem negative overlap */
    left: -1.5rem;
    width: calc(100vw + 1.5rem); /* Full viewport width plus the left offset */
    height: 30rem; /* 480px */
    background: url('../../../../assets/img/product/take-part/take-part.png') top left/cover no-repeat;
    z-index: 100; /* Higher z-index to appear above previous section */
}

/* Content Block - Mobile */
.take-part-content {
    position: relative;
    z-index: 101; /* Above background image */
    padding: 0 1rem; /* 16px left and right */
    padding-top: 1.5rem; /* 24px gap vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Title - Mobile */
.take-part-title {
    margin-top: 12.5rem; /* 200px - Reduced by 3rem to compensate for removed bg negative positioning */
    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: var(--Title-gradient, linear-gradient(90deg, #FFF 0%, #58B2D4 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2rem;
}

/* Countdown Container */
.countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Countdown Headers - Mobile */
.countdown-headers {
    display: flex;
    justify-content: center;
    gap: 4.938rem; /* 79px gap between titles */
    padding: 0 1.438rem; /* 23px padding from left and right */
}

.countdown-label {
    color: rgba(255, 255, 255, 0.60);
    font-family: Inter;
    font-size: 0.875rem; /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

/* Countdown Display - Mobile */
.countdown-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.countdown-number {
    color: #FFF;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3.547rem; /* 56.753px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.547rem; /* 56.753px - 100% */
}

.countdown-separator {
    color: #FFF;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3.547rem; /* 56.753px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.547rem;
    margin: 0 0.25rem;
}

/* Early Bird Button - Mobile */
.early-bird-btn {
    margin-top: 2rem;
    display: flex;
    padding: 1rem 1.75rem; /* 16px 28px */
    justify-content: center;
    align-items: center;
    gap: 0.7rem; /* 11.2px */
    background: #FFF;
    border: none;
    border-radius: 2.625rem; /* 42px */
    color: #1D1D1D;
    font-family: Barlow;
    font-size: 1.25rem; /* 20px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.875rem; /* 30px - 150% */
    text-transform: capitalize;
    cursor: pointer;
    transition: all 0.3s ease;
}

.early-bird-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* Trust & Traction Area - Mobile */
.trust-traction-area {
    position: relative;
    z-index: 10;
    padding: 0 1rem;
    margin-top: 4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px vertical gap between blocks */
}

/* Header Area - Mobile */
.trust-header {
    text-align: center;
}

.trust-title {
    color: var(--10, #FFF);
    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% */
    margin-bottom: 1rem;
}

.trust-subtitle {
    color: var(--10, #FFF);
    text-align: center;
    font-family: Inter;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* Stats Container - Mobile */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    
}

/* Base Stats Box Styling */
.stats-box {
    position: relative;
    width: calc(100vw - 2rem); /* Full width minus 16px padding on each side */
    border-radius: 1rem; /* 16px */
    background: var(--SyFu-Dark, #0D1B2B);
    padding: 2rem; /* 32px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem; /* 32px */
    overflow: hidden;
}

/* Light Effect SVG */
.light-effect {
    position: absolute;
    right: -3.125rem; /* -50px */
    top: -3.125rem; /* -50px */
    width: 16.313rem; /* 261px - original SVG width */
    height: 12.688rem; /* 203px - original SVG height */
    pointer-events: none;
    z-index: 1;
}

/* Stats Content */
.stats-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    
    gap: 0.375rem; /* 6px */
    width: 100%;
}

.stats-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
}

/* Number Styling */
.stats-number {
    color: var(--SyFu-Mint, #3EE8B5);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3.25rem; /* 52px */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 62.4px */
    letter-spacing: 0.0325rem; /* 0.52px */
}

/* Box 2 Numbers - Gold Color */
.stats-box-2 .stats-number {
    color: var(--sy-fu-gold-accent, #FFD700);
}

/* Box 3 Numbers - Pink Color */
.stats-box-3 .stats-number {
    color: var(--SyFu-Pink, #C71F8F);
}

/* Text Styling */
.stats-text {
    color: var(--Main, #D3D3D3);
    font-family: Inter;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.031rem; /* -0.5px */
}

/* Special styling for "users" text in 3rd box */
.stats-text-users {
    color: var(--SyFu-Pink, #C71F8F);
    text-align: center;
    font-family: Barlow;
    font-size: 1.75rem; /* 28px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625rem; /* 1px */
    text-transform: uppercase;
}

/* Stats Box Title */
.stats-box-title {
    color: var(--sy-fu-gold-accent, #FFD700);
    text-align: center;
    font-family: Barlow;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.0625rem; /* 1px */
    margin: 0;
}

/* Stats Columns Container */
.stats-columns {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
    align-items: center;
}

/* Box 2 specific styling - vertical layout for mobile */
.stats-box-2 .stats-content {
    align-items: center;
    gap: 0.375rem; /* 6px gap between title and columns */
}

/* Review Area - Mobile */
.review-area {
    display: flex;
    padding: 0 2rem; /* 32px horizontal padding */
    align-items: flex-end;
    gap: 1.375rem; /* 22px gap */
    justify-content: center;
}

/* Score Column */
.score-column {
    display: flex;
    align-items: baseline;
    gap: 0.375rem; /* 6px gap */
}

.review-score {
    color: var(--SyFu-Mint, #3EE8B5);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3.25rem; /* 52px */
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 52px */
    letter-spacing: 0.0325rem; /* 0.52px */
}

.score-divider {
    color: var(--SyFu-Mint, #3EE8B5);
    font-family: Barlow;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 24px */
    letter-spacing: 0.015rem; /* 0.24px */
}

/* Info Column */
.info-column {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px gap */
}

.app-title {
    color: #FFF;
    font-family: "SF Compact Display", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
    letter-spacing: -0.0294rem; /* -0.47px */
}

.review-subtitle {
    color: var(--Main, #D3D3D3);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.031rem; /* -0.5px */
}

/* User Reviews Boxes - Mobile */
.reviews-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px gap on mobile */
    width: 100%;
}

.review-box {
    display: flex;
    height: auto; /* 182px */
    padding: 2rem; /* 32px */
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    gap: 1rem; /* 16px */
    flex: 1 0 0;
    background: var(--SyFu-Dark, #0D1B2B);
    border-radius: 1rem; /* 16px */
}

.review-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* 16px between image and name block */
    width: 100%;
}

.user-image {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    flex-shrink: 0;
}

.profile-img {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px gap between name and stars */
    flex: 1;
}

.user-name {
    color: var(--10, #FFF);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 1.25rem; /* 20px */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    letter-spacing: 0.0125rem; /* 0.2px */
}

.star-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* 4px gap between stars */
}

.star {
    width: 0.583rem; /* 9.329px */
    height: 0.583rem; /* 9.329px */
    fill: var(--sy-fu-gold-accent, #FFD700);
}

.review-desc {
    color: var(--Main, #D3D3D3);
    font-family: Inter;
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: 0.01rem; /* 0.16px */
    width: 100%;
}

/* Mobile-specific alignment fixes for stats boxes */
@media (max-width: 1279px) {
    /* Make all boxes consistently left-aligned */
    .stats-box-1,
    .stats-box-2,
    .stats-box-3 {
        align-items: flex-start; /* Left-align all box content */
        text-align: left; /* Left-align all text */
    }
    
    .stats-box-1 .stats-content,
    .stats-box-2 .stats-content,
    .stats-box-3 .stats-content {
        align-items: flex-start; /* Left-align the stats content */
        text-align: left; /* Left-align text in content */
        width: 100%;
    }
    
    /* Fix the "users" text in box 3 to be left-aligned */
    .stats-text-users {
        text-align: left; /* Override center alignment */
    }
    
    /* Fix stats-columns container to be left-aligned */
    .stats-columns {
        align-items: flex-start; /* Override center alignment for $20M+ container */
    }
}

/* Smaller font size for countdown numbers on very small screens */
@media (max-width: 440px) {
    .countdown-number {
        font-size: 2.6rem; /* Reduced from 3.547rem for better fit on small screens */
        line-height: 2.6rem; /* Maintain consistent line height */
    }
    
    .countdown-separator {
        font-size: 2.6rem; /* Keep separator consistent with numbers */
        line-height: 2.6rem;
    }
}

/* Tablet layout for stats container (550px-1280px) */
@media (min-width: 550px) and (max-width: 1280px) {
    .stats-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    /* First row: Box 1 and Box 3 horizontally */
    .stats-box-1,
    .stats-box-3 {
        width: 48%; /* Nearly half width with some space between */
        display: inline-flex; /* Allow horizontal arrangement */
    }

    /* Create a flex wrapper for first and third boxes */
    .stats-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch; /* Stretch to full width */
    }

    /* Rearrange boxes using flexbox order and wrapping */
    .stats-container {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .stats-box-1 {
        order: 1;
        width: 48%;
    }

    .stats-box-2 {
        order: 2; /* Place second box on second row */
        width: 100%; /* Full width for second box */
    }

    .stats-box-3 {
        order: 1;
        width: 48%;
    }

    /* Make second box content horizontal */
    .stats-box-2 .stats-columns {
        flex-direction: row; /* Horizontal layout for stats items */
        justify-content: space-between; /* Distribute across full width */
        align-items: flex-start;
        width: 100%;
        gap: 2rem; /* Space between the two stat items */
    }

    .stats-box-2 .stats-item {
        flex: 1; /* Each item takes equal space */
        text-align: left; /* Keep text left-aligned */
    }
}