/* Hero Section - Mobile First */
.hero {
    min-height: 100vh;
    padding-top: 10.8125rem; /* Account for fixed header 132px + content padding */
    display: flex;
    align-items: flex-start;
    background: url('../../../../assets/img/product/hero/hero-bg.png') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

/* Background Light C - Mobile */
.hero-bg-light {
    width: 300px;
    height: 387px;
    position: absolute;
    right: -200px;
    top: 341px;
    border-radius: 387px;
    background: #FFF;
    mix-blend-mode: plus-lighter;
    filter: blur(200px);
    z-index: 1;
}

/* Hero Content Container */
.hero-content {
    width: 100%;
    padding: 0 1rem; /* 16px mobile margins */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Vertical on mobile */
    gap: 4.25rem; /* 68px gap */
    position: relative;
    z-index: 2;
}

/* Section A - Text Content */
.hero-text {
    display: flex;
    flex-direction: column;
    gap: 2.25rem; /* 36px gap */
    align-items: center; /* Center on mobile */
}

/* X - Hero Title */
.hero-title {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.25rem; /* 36px */
    font-style: normal;
    font-weight: 900;
    line-height: 2.281rem; /* 36.502px - 101.395% */
    background: radial-gradient(658.18% 141.21% at -6.01% 100%, var(--sy-fu-neutral-light, #F7F7F7) 0%, var(--SyFu-Mint, #3EE8B5) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/* Y - Hero Description */
.hero-description {
    color: var(--SyFu-Dark, #0D1B2B);
    text-align: center;
    font-family: Barlow;
    font-size: 1.25rem; /* 22px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

/* Z - Hero Buttons */
.hero-buttons {
    display: flex;
    flex-direction: column; /* Vertical on mobile */
    gap: 1.688rem; /* 27px gap */
    width: 100%;
}

/* Primary Button with gradient */
.btn-primary {
    display: flex;
    padding: 1rem 1.75rem; /* 16px 28px */
    justify-content: center;
    align-items: center;
    gap: 0.7rem; /* 11.2px */
    align-self: stretch;
    border-radius: 2.625rem; /* 42px */
    background: var(--Grad-full, radial-gradient(124.2% 56.39% at 100% 100%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(100.18% 100.18% at -33.11% -21.62%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(221deg, #9AF9FF 5.62%, #FF8 104.83%));
    box-shadow: 0 4px 13.7px 0 rgba(13, 27, 43, 0.30);
    border: none;
    cursor: pointer;
    font-family: Barlow;
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
}

.btn-primary span {
    color: #333333;
}

.btn-primary svg {
    flex-shrink: 0;
}

/* Secondary Button with border */
.btn-secondary {
    display: flex;
    padding: 1rem 1.75rem; /* 16px 28px */
    justify-content: center;
    align-items: center;
    gap: 0.7rem; /* 11.2px */
    align-self: stretch;
    border-radius: 2.625rem; /* 42px */
    border: 1px solid var(--SyFu-Dark, #0D1B2B);
    background: transparent;
    cursor: pointer;
    font-family: Barlow;
    font-size: 1rem;
    font-weight: 600;
    color: var(--SyFu-Dark, #0D1B2B);
}

/* Section B - Video */
.hero-media {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Video Placeholder - Mobile */
.video-placeholder {
    display: flex;
    width: calc(100vw - 2rem); /* 408px */
    height: 52.15vw; /* 229.5px */
    max-width: 43.731rem; /* 699.695px */
    max-height: 24.599rem; /* 393.579px */
    padding: 6.182rem 9.023rem; /* 98.909px 144.375px */
    justify-content: center;
    align-items: center;
    gap: 0.938rem; /* 15px */
    border-radius: var(--borderRadius, 16px);
    background: url('../../../../assets/img/product/hero/hero-bg.png') lightgray 0px -64.023px / 100% 130.769% no-repeat;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Video Logo - Mobile */
.video-logo {
    width: 7.413rem; /* 118.607px */
    height: 1.994rem; /* 31.906px */
    flex-shrink: 0;
    fill: var(--SyFu-Neutral-Dark, #333);
}

/* Play Button - Mobile */
.play-button {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

/* Hidden Video */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--borderRadius, 16px);
}

/* Active video state */
.video-placeholder.playing .video-logo,
.video-placeholder.playing .play-button {
    display: none;
}

.video-placeholder.playing .hero-video {
    display: block !important;
}