/* Meet MANEKINEKO Section - Desktop Styles */
.meet-manekineko {
    background-position: 0 35.875rem; /* left 0, top 574px */
    margin: 0;
    padding: 0;
}
/* Learn More Button Container - Desktop */
.learn-more-container {
    margin-bottom: 1.594rem; /* 25.5px to first header on desktop */
}

/* Hide background softening rectangle on desktop */
.manekineko-background::after {
    display: none;
}

/* Character and Titles Container - Desktop */
.manekineko-header-container {
    margin-top: 4rem;
    position: relative;
    width: 100%;
}

/* Left Manekineko Image - Desktop */
.manekineko-character {
    width: 84.499rem; /* 1351.985px */
    height: 54.924rem; /* 878.79px */
    top: 0;
    left: 0;
}

/* Desktop NFT Images Styles */
.manekineko-titles {
    padding-top: 0; /* Reset padding on desktop */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* Below character image */
}

.nft-image {
    width: 100%;
    height: 38.875rem; /* 622px height */
}

.nft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Area - Desktop */
.manekineko-content {
    flex-direction: row;
    gap: 4rem;
    max-width: 1200px;
    margin: 52rem auto 0; /* Simplified margin */
    padding: 3rem 2rem;
}

/* Responsive layout for intermediate desktop sizes (1280px-1600px) */
@media (min-width: 1280px) and (max-width: 1600px) {
    .manekineko-content {
        max-width: none; /* Remove fixed width constraint */
        width: auto; /* Allow natural width */
        margin-left: 0%; /* Left margin based on 360px/1920px ratio */
        margin-right: 0%; /* Right margin based on 360px/1920px ratio */
        margin-top: 52rem; /* Keep existing top margin */
        gap:0.5%;
        /* Content will now expand to fill remaining 62.5% width */
    }
}

.content-column {
    flex: 1;
}

/* Meet Your Digital Cat Section - Desktop */
.meet-cat-title {
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3.375rem; /* 54px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.375rem; /* 54px - 100% */
    background: linear-gradient(90deg, #FFF 0%, #58B2D4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
}

.manekineko-title {
    font-size: 3.375rem; /* Same as desktop title above */
    line-height: 3.375rem;
}

/* Desktop styles for "Introducing..." text */
.meet-cat-intro {
    color: var(--Main, #D3D3D3);
    font-family: Inter;
    font-size: 1.375rem; /* 22px */
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 28.6px */
    letter-spacing: 0.014rem; /* 0.22px */
    width: 25.563rem; /* 409px */
}

/* Desktop styles for Japan's traditional text block */
.meet-cat-tradition {
    color: var(--Main, #D3D3D3);
    font-family: Inter;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 23.4px */
    letter-spacing: 0.011rem; /* 0.18px */
    width: 22.625rem; /* 362px */
}

.meet-cat-buttons {
    flex-direction: column; /* Keep vertical alignment on desktop */
    gap: 1rem; /* 16px gap between buttons */
    align-items: flex-start; /* Align buttons to the left */
    width: auto; /* Reset width on desktop */
    margin-left: 0; /* Reset margin on desktop */
    margin-right: 0; /* Reset margin on desktop */
}

.btn-marketplace,
.btn-gitbook {
    width: auto; /* Auto width on desktop */
}

/* Feature Highlights Section - Desktop */
.feature-title {
    color: var(--SyFu-Mint, #3EE8B5);
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
    letter-spacing: 0.024rem; /* 0.24px */
    text-align: left;
    margin-bottom: 2rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 25.807rem); /* 412.903px each column */
    grid-auto-rows: min-content; /* Each row takes its natural height */
    gap: 1.419rem 0.607rem; /* 22.71px vertical, 9.71px horizontal */
    align-items: start; /* Don't stretch items to equal height */
    /* Grid layout: 
       1st top left    2nd top right
       3rd bottom left 4th bottom right */
}

.feature-box {
    width: 25.807rem; /* 412.903px */
    max-width: none;
    height: auto; /* Height based on content */
}

/* Desktop styles for feature box titles */
.feature-box-title {
    color: var(--10, #FFF);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.548rem; /* 24.774px */
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 29.729px */
    letter-spacing: 0.015rem; /* 0.248px */
}

/* Desktop styles for feature box descriptions - same as mobile */
.feature-box-description {
    color: rgba(255, 255, 255, 0.60);
    font-family: Inter;
    font-size: 1.032rem; /* 16.516px */
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 19.819px */
    letter-spacing: 0.01rem; /* 0.165px */
}

/* Token Area - Desktop */
.token-area {
    margin-top: 6rem;
}

.token-content {
    max-width: 80rem; /* 1280px content area */
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 5;
}

/* Token Title - Desktop */
.token-title {
    padding-top: 8rem; /* 128px to top on desktop */
    margin-bottom: 3.188rem; /* Same 51px gap */
    font-size: 3rem; /* Larger on desktop */
    line-height: 3rem;
}

/* Dropdown Columns - Desktop */
.token-dropdowns {
    flex-direction: row;
    gap: 2rem;
    height: 50rem;  
    align-items: flex-start;
}

.dropdown-column {
    display: flex;
    padding: 2rem 1rem; /* 32px 16px */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem; /* 32px */
    flex: 1 0 0;
}

/* City Scene - Desktop (behind content) */
.city-scene-desktop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 72rem; /* 1152px area coverage */
    background: url('../../../../assets/img/product/token/syfu-city-scene.png') center/cover no-repeat;
    z-index: 3; /* Behind content but above backgrounds */
    display: block;
}

/* Hide mobile city scene on desktop */
.city-scene-mobile {
    display: none;
}

/* Security Area - Desktop */
.security-area {
    
    display: flex;
    justify-content: center;
    margin-top: 6rem;
    width: 100%;
    padding: 0; /* Remove padding to allow proper centering */
}

.security-content {
    display: flex;
    width: 66.25rem; /* 1060px */
    padding: 2rem; /* 32px */
    align-items: center;
    gap: 2rem; /* 32px */
    border-radius: 1.25rem; /* 20px */
    background: #0D1B2B;
    flex-direction: row; /* Override mobile column layout */
}

.security-text {
    width: 27.375rem; /* 438px width on desktop */
    flex-shrink: 0;
}

/* Security Title - Desktop (same as mobile) */
.security-title {
    leading-trim: both;
    text-edge: cap;
    font-family: "FRIZON", 'Noto Sans JP', sans-serif;
    font-size: 3rem; /* 48px */
    font-style: normal;
    font-weight: 400;
    line-height: 3.25rem; /* 52px - 108.333% */
    background: linear-gradient(90deg, #FFF 0%, #58B2D4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Security Subtitle - Desktop (same as mobile) */
.security-subtitle {
    color: #3EE8B5;
    font-family: Barlow;
    font-size: 1.625rem; /* 26px */
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 31.2px */
}

/* Security Description - Desktop */
.security-description {
    color: #EEE;
    font-family: Inter;
    font-size: 1.5rem; /* 24px */
    font-style: normal;
    font-weight: 400;
    line-height: 2rem; /* 30px - 125% */
    letter-spacing: -0.031rem; /* -0.5px */
}

.security-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.security-img {
    width: 32.891rem; /* 526.25px on desktop */
    height: 31.633rem; /* 506.13px */
    background: url('../../../../assets/img/product/security/security-syfu-wallet-p3.jpg') lightgray -1.281rem 0.001px / 109.074% 99.999% no-repeat;
    border-radius: 0.5rem;
}