/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    background: #1F2242;
    min-height: 100vh;
    line-height: 1.5;
}

/* Responsive Display Utilities */
.desktop {
    display: none !important;
}

.mobile {
    display: block !important;
}

/* ============================================
   BACKGROUND ZONES
   ============================================ */
.bg-zone-1,
.bg-zone-2,
.bg-zone-3 {
    width: 100%;
    position: relative;
    overflow: visible;
}

.bg-zone-1 {
    background: linear-gradient(180deg, #8380FF 19.65%, #1F2242 65.49%);
}

.bg-zone-2 {
    background: linear-gradient(180deg, #1F2242 37.54%, #8380FF 83.38%);
}

.bg-zone-3 {
    background: linear-gradient(180deg, #8380FF 23.26%, #1F2242 71.61%);
    top: -1px;
}

.bg-zone-1::before,
.bg-zone-2::before,
.bg-zone-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/6e72e1dd1544ce55.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 730%;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.bg-zone-1::after,
.bg-zone-2::after,
.bg-zone-3::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/a432860c048131c6.png');
    background-position: 0 0;
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   LAYOUT
   ============================================ */
.container,
.zone-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    position: relative;
}

.zone-container {
    z-index: 1;
    overflow: visible;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.header-line {
    flex: 1;
    height: 2px;
    background: white;
    border-radius: 2px;
}

.moon-phases {
    display: flex;
    align-items: center;
    gap: 4px;
}

.moon-icon {
    flex-shrink: 0;
}

.center-moon {
    margin: 0 4px;
}

/* ============================================
   SHARED IMAGE COMPONENTS
   ============================================ */
.image-frame {
    position: relative;
    border-radius: 48px 0 4px 48px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 0px 8px 2px;
    overflow: visible;
    height: 341px;
}

.image-frame::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 48px 0 4px 48px;
    border-left: 2px solid #F7D7B7;
    border-bottom: 2px solid #F7D7B7;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
    overflow: visible;
}

.hero-title {
    font-family: 'Cormorant Unicase', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    padding: 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    transition: transform 0.2s ease;
}

.tag:hover {
    transform: translateY(-2px);
}

.tag-outline {
    border: 1px solid #fff;
    color: #fff;
}

.tag-filled {
    border: 1px solid #fff;
    background: #fff;
    color: #1F2242;
}

.hero-image-wrapper {
    margin-top: 110px;
    margin-right: -22px;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.hero-image {
    width: 100%;
    display: block;
    border-radius: 48px 0 4px 48px;
    position: relative;
    top: -180px;
    margin-bottom: -50px;
    height: 510px;
    object-fit: cover;
    z-index: 2;
}

/* ============================================
   BENEFITS SECTION
   ============================================ */
.benefits {
    margin: 64px 0;
}

.benefits-title {
    font-family: 'Cormorant Unicase', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 24px;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 16px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.benefit-card:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.05);
}

.benefit-card-wide {
    align-items: center;
}

.benefit-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-text {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta {
    position: relative;
    margin: 48px 0;
}

.cta-card {
    position: relative;
    padding: 24px 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, #B4BAFC 38.43%, #9099FF 90.38%);
    overflow: hidden;
}

.decoration {
    position: absolute;
    fill: #929EFA;
    pointer-events: none;
}

.decoration-1 {
    top: 345px;
    left: -9px;
    transform: rotate(-58.815deg);
    width: 30px;
    height: 29px;
}

.decoration-2 {
    top: 345px;
    left: 31px;
    transform: rotate(-25.156deg);
    width: 53px;
    height: 50px;
}

.decoration-3 {
    top: 248px;
    right: 86px;
    transform: rotate(45deg);
    width: 20px;
    height: 19px;
}

.decoration-4 {
    top: 139px;
    right: 57px;
    transform: rotate(18.067deg);
    width: 34px;
    height: 32px;
}

.decoration-5 {
    bottom: 50px;
    right: 10px;
    transform: rotate(-25.156deg);
    width: 53px;
    height: 50px;
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cta-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.24px;
    color: #000;
    max-width: 288px;
}

.cta-button, .webinar-cta-button {
    display: inline-flex;
    padding: 20px 56px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(38, 27, 152, 0.88) 1.44%, rgba(63, 54, 161, 0.76) 47.6%, #0D018F 84.13%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover, .webinar-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
}

.cta-button:active, .webinar-cta-button:active {
    transform: translateY(0);
}

.cta-illustration {
    width: 100%;
    max-width: 401px;
    height: auto;
    margin: 0 auto 0;
    display: block;
    position: relative;
    z-index: 1;
}

.badge {
    display: inline-flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background: #FC0101;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin: -18px auto 0;
    position: relative;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    top: -17px;
}

/* ============================================
   STATISTICS SECTION
   ============================================ */
.stats-section {
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    overflow: visible;
}

.stats-content {
    position: relative;
    z-index: 1;
}

.stats-title {
    font-family: 'Cormorant Unicase', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.highlight-purple {
    color: #9099FF;
    font-family: 'Avenir', -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 400;
}

.highlight-purple-text {
    color: #9099FF;
}

.highlight-white {
    font-family: 'Avenir', -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 400;
}

.stats-description {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}

.stats-image-wrapper {
    margin-top: 110px;
    margin-right: -22px;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.stats-image-wrapper .image-frame {
    position: relative;
    border-radius: 48px 0 4px 48px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 0px 8px 8px;
    overflow: visible;
    height: 341px;
}

.stats-image-wrapper .image-frame::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 48px 0 4px 48px;
    border-left: 2px solid #F7D7B7;
    border-bottom: 2px solid #F7D7B7;
    pointer-events: none;
    z-index: 1;
}

.stats-image {
    width: 100%;
    display: block;
    border-radius: 48px 0 4px 48px;
    position: relative;
    top: -180px;
    margin-bottom: -50px;
    height: 510px;
    object-fit: cover;
    z-index: 2;
}

/* ============================================
   WEBINAR TOPICS SECTION
   ============================================ */
.webinar-topics {
    padding: 64px 0;
}

.topics-title {
    font-family: 'Cormorant Unicase', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.topics-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.topics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 1;
}

.topic-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 16px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.topic-card:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.05);
}

.topic-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.topic-text {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #fff;
}

.couple-illustration {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    order: 2;
}

.blob-bg {
    position: absolute;
    transform: rotate(-2deg);
    max-width: 331px;
}

.couple-image {
    position: relative;
    z-index: 1;
    width: 268px;
    height: auto;
}

/* ============================================
   7 STEPS SECTION
   ============================================ */
.steps-section {
    padding: 48px 0;
}

.steps-frame {
    position: relative;
    padding: 48px 24px 60px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 50px;
}

.moon-phases-bottom {
    position: absolute;
    width: 160px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    height: auto;
    max-width: 100%;
}

.steps-text {
    position: relative;
    z-index: 2;
    font-family: 'Cormorant Unicase', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    padding: 0 16px;
}

.highlight-number {
    font-family: 'Avenir', -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 400;
}

/* ============================================
   FINAL CTA SECTION
   ============================================ */
.final-cta {
    margin: 48px 0;
}

.final-cta-card {
    position: relative;
    padding: 24px 16px;
    padding-bottom: 0px;
    border-radius: 24px;
    background: linear-gradient(180deg, #B4BAFC 38.43%, #9099FF 90.38%);
    overflow: hidden;
    min-height: 552px;
    display: flex;
    flex-direction: column;
}

.final-decoration {
    position: absolute;
    fill: #fff;
    pointer-events: none;
}

.final-decoration-1 {
    bottom: 50px;
    left: -150px;
    transform: rotate(5deg);
    width: 476px;
    height: 481px;
}

.final-decoration-2 {
    top: 100px;
    left: -100px;
    transform: rotate(20deg);
    width: 534px;
    height: 187px;
}

.final-decoration-3 {
    bottom: 0px;
    left: -100px;
    transform: rotate(0deg);
    width: 516px;
    height: 318px;
}

.final-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.final-cta-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.24px;
    color: #000;
}

.final-cta-illustration {
    position: relative;
    z-index: 1;
    width: 239px;
    height: auto;
    margin: auto auto 0;
}

/* ============================================
   REGISTRATION SECTION
   ============================================ */
.registration-section {
    padding: 48px 0 0px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    overflow: visible;
}

.registration-content {
    position: relative;
    z-index: 1;
}

.registration-title {
    font-family: 'Cormorant Unicase', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 32px;
    color: #fff;
}

.registration-description {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 32px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input {
    width: 100%;
    padding: 20px 40px;
    border-radius: 24px;
    border: none;
    background: #fff;
    font-family: 'Avenir', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1F2242;
    transition: border 0.2s ease;
}

.form-input::placeholder {
    color: #C8C8DD;
    font-weight: 400;
}

.form-input:focus {
    outline: none;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 40px;
    border-radius: 24px;
    background: #fff;
    cursor: text;
}

.country-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
}

.country-flag {
    width: 33px;
    height: 27px;
    border-radius: 4px;
}

.dropdown-arrow {
    width: 12px;
    height: 8px;
}

.phone-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Avenir', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #1F2242;
}

.phone-input::placeholder {
    color: #C8C8DD;
}

.phone-input:focus {
    outline: none;
}

.form-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.registration-button {
    width: 100%;
    padding: 20px 56px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(38, 27, 152, 0.88) 1.44%, rgba(63, 54, 161, 0.76) 47.6%, #0D018F 84.13%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.registration-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.3);
}

.registration-button:active {
    transform: translateY(0);
}

.privacy-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    max-width: 332px;
}

.registration-image-wrapper {
    margin-top: 150px;
    margin-right: -22px;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.registration-frame {
    position: relative;
    border-radius: 48px 0 4px 48px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 0px 8px 8px;
    max-width: 412px;
    overflow: visible;
    height: 392px;
}

.registration-frame::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 48px 0 4px 48px;
    border-left: 2px solid #F7D7B7;
    border-bottom: 2px solid #F7D7B7;
    pointer-events: none;
    z-index: 1;
}

.registration-image {
    display: block;
    border-radius: 48px 0 4px 48px;
    position: relative;
    top: -180px;
    margin-bottom: -50px;
    height: 560px;
    object-fit: cover;
    z-index: 2;
}

.desktop{
    display: none;
}

/* ============================================
   TABLET RESPONSIVE STYLES (768px+)
   ============================================ */
@media (min-width: 768px) {
    /* Layout */
    .container,
    .zone-container {
        padding: 40px;
    }

    /* Hero Section */
    .hero {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    .hero-content {
        flex: 1;
    }

    .hero-title {
        font-size: 32px;
    }

    .tag {
        font-size: 16px;
    }

    .hero-image-wrapper {
        flex-shrink: 0;
        margin: 50px -39px 0 0;
    }

    .image-frame {
        height: 432px;
    }

    .hero-image {
        top: -100px;
        margin-bottom: -100px;
        height: 520px;
    }

    /* Benefits Section */
    .benefits-title {
        font-size: 32px;
    }

    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .benefit-card-wide {
        grid-column: 1 / -1;
    }

    .benefit-text {
        font-size: 20px;
    }

    /* CTA Section */
    .cta-card {
        padding: 40px;
    }

    .cta-title {
        font-size: 32px;
        max-width: 450px;
    }

    .cta-button, .webinar-cta-button {
        font-size: 20px;
        padding: 24px 64px;
    }

    .badge {
        font-size: 14px;
        padding: 16px;
        left: 87%;
        top: -50px;
    }

    /* Statistics Section */
    .stats-section {
        padding: 64px 0;
    }

    .stats-title {
        font-size: 40px;
    }

    .stats-description {
        font-size: 20px;
    }

    .stats-image-wrapper {
        margin-top: 50px;
        margin-right: -39px;
    }

    .stats-image-wrapper .image-frame {
        height: 432px;
    }

    .stats-image {
        top: -100px;
        margin-bottom: -100px;
        height: 520px;
    }

    /* Webinar Topics */
    .topics-title {
        font-size: 32px;
    }

    .topic-text {
        font-size: 20px;
    }

    .couple-illustration {
        min-height: 400px;
    }

    .blob-bg {
        max-width: 450px;
    }

    .couple-image {
        width: 350px;
    }

    /* Steps Section */
    .steps-frame {
        padding: 64px 32px 80px 32px;
    }

    .steps-text {
        font-size: 32px;
        padding: 0 32px;
    }

    /* Final CTA */
    .final-cta-card {
        padding: 40px;
    }

    .final-cta-content {
        max-width: 450px;
    }

    .final-cta-title {
        font-size: 32px;
    }

    .final-cta-illustration {
        width: 320px;
        bottom: -40px;
    }

    /* Registration Section */
    .registration-section {
        padding: 64px 0 100px;
    }

    .registration-content {
        max-width: 600px;
    }

    .registration-title {
        font-size: 40px;
    }

    .registration-description {
        font-size: 20px;
    }

    .form-input,
    .phone-input {
        font-size: 16px;
    }

    .registration-button {
        font-size: 20px;
        padding: 24px 64px;
    }

    .privacy-text {
        font-size: 12px;
    }

    .registration-image-wrapper {
        margin-top: 50px;
        margin-right: -39px;
    }

    .registration-frame {
        max-width: 500px;
        height: 432px;
    }

    .registration-image {
        top: -100px;
        margin-bottom: -100px;
        height: 520px;
    }

    .bg-zone-1::before,
    .bg-zone-2::before,
    .bg-zone-3::before {
        background-size: 300%;
    }
}

/* ============================================
   DESKTOP RESPONSIVE STYLES (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    /* Layout */
    .container,
    .zone-container {
        padding: 40px;
    }

    .space-1 {
        margin-top: -180px;
    }

    .space-2 {
        margin-top: -50px;
    }

    .space-3 {
        margin-top: -50px;
    }

    /* Header */
    .header {
        margin-bottom: 48px;
    }

    /* Hero Section */
    .hero {
        gap: 64px;
        margin-bottom: 80px;
    }

    .hero-title {
        font-size: 56px;
    }

    .hero-content {
        max-width: 757px;
    }

    .hero-image-wrapper {
        margin-top: 150px;
        margin-right: -39px;
    }

    .image-frame {
        border-radius: 84px 0 8px 84px;
        height: 380px;
    }

    .image-frame::after {
        border-radius: 84px 0 8px 84px;
    }

    .hero-image {
        border-radius: 84px 0 8px 84px;
        top: -210px;
        margin-bottom: -210px;
        height: 579px;
    }

    /* Benefits Section */
    .benefits {
        margin: 100px 0;
    }

    .benefits-title {
        font-size: 40px;
        margin-bottom: 48px;
    }

    .benefit-text {
        font-size: 24px;
    }

    .benefit-card {
        min-height: 100px;
        align-items: center;
    }

    /* CTA Section */
    .cta {
        margin: 80px 0;
    }

    .cta-card {
        display: flex;
        align-items: center;
        padding: 60px 80px;
        min-height: 498px;
    }

    .cta-content {
        max-width: 538px;
        gap: 44px;
    }

    .cta-title {
        font-size: 48px;
        max-width: 538px;
    }

    .cta-button, .webinar-cta-button {
        font-size: 28px;
        padding: 30px 80px;
        height: 84px;
    }

    .cta-illustration {
        max-width: 633px;
        position: absolute;
        right: 40px;
        bottom: -100px;
    }

    .decoration-1 {
        top: auto;
        bottom: 150px;
        left: 60px;
        width: 82px;
        height: 78px;
    }

    .decoration-2 {
        top: auto;
        bottom: 80px;
        left: 180px;
        width: 143px;
        height: 137px;
    }

    .decoration-3 {
        top: 100px;
        right: 250px;
        width: 54px;
        height: 52px;
    }

    .decoration-4 {
        top: 240px;
        right: 120px;
        width: 92px;
        height: 88px;
    }

    .decoration-5 {
        bottom: 40px;
        left: 80px;
        width: 143px;
        height: 137px;
        transform: rotate(34.844deg);
    }

    .badge {
        font-size: 16px;
        margin-top: -24px;
        left: 91%;
        top: -50px;
    }

    /* Statistics Section */
    .stats-section {
        padding: 100px 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 64px;
    }

    .stats-content {
        flex: 1;
        max-width: 757px;
    }

    .stats-title {
        font-size: 56px;
    }

    .stats-description {
        font-size: 24px;
    }

    .stats-image-wrapper {
        flex-shrink: 0;
        margin-top: 105px;
        margin-right: -39px;
    }

    .stats-image-wrapper .image-frame {
        border-radius: 84px 0 8px 84px;
        height: 380px;
    }

    .stats-image-wrapper .image-frame::after {
        border-radius: 84px 0 8px 84px;
    }

    .stats-image {
        border-radius: 84px 0 8px 134px;
        top: -210px;
        margin-bottom: -210px;
        height: 579px;
        right: 45px;

    }

    /* Webinar Topics */
    .webinar-topics {
        padding: 100px 0;
    }

    .topics-title {
        font-size: 40px;
        margin-bottom: 48px;
        text-align: right;
        margin-right: 75px;
    }

    .topics-container {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }

    .topics-list {
        flex: 1;
        max-width: 624px;
        order: 0;
    }

    .topic-card {
        min-height: 100px;
        align-items: center;
    }

    .topic-text {
        font-size: 24px;
    }

    .couple-illustration {
        flex-shrink: 0;
        min-height: 500px;
        margin: 0;
        margin-left: 40px;
        order: 0;
    }

    .blob-bg {
        max-width: 534px;
        top: -30px;
        width: 570px;
        height: 470px;
    }

    .couple-image {
        width: 423px;
    }

    /* Steps Section */
    .steps-section {
        padding: 80px 0;
    }

    .steps-frame {
        padding: 80px 64px 100px 64px;
    }

    .steps-text {
        font-size: 40px;
        max-width: 1043px;
        padding: 0 64px;
    }

    /* Responsive Display Utilities */
    .desktop {
        display: block !important;
    }

    .mobile {
        display: none !important;
    }

    /* Final CTA */
    .final-cta {
        margin: 80px 0;
    }

    .final-cta-card {
        padding: 60px 80px;
        padding-bottom: 0px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 498px;
    }

    .final-cta-content {
        max-width: 538px;
        gap: 44px;
    }

    .final-cta-title {
        font-size: 48px;
    }

    .final-cta-illustration {
        width: 500px;
        margin: 0;
        bottom: -80px;
    }

    .final-decoration-1 {
        bottom: 0px;
        left: 0px;
        top: auto;
        right: auto;
        transform: rotate(0deg);
        width: 476px;
        height: 481px;
    }

    .final-decoration-2 {
        top: 427px;
        left: 350px;
        transform: rotate(0deg);
        width: 534px;
        height: 187px;
    }

    /* Registration Section */
    .registration-section {
        padding: 100px 0;
        padding-bottom: 0px;
        flex-direction: row;
        align-items: flex-start;
    }

    .registration-content {
        flex: 1;
        max-width: 809px;
    }

    .registration-title {
        font-size: 56px;
    }

    .registration-description {
        font-size: 24px;
    }

    .registration-form {
        max-width: 554px;
        gap: 40px;
    }

    .form-fields {
        gap: 16px;
    }

    .form-input,
    .phone-input {
        font-size: 18px;
    }

    .registration-button {
        max-width: 538px;
        height: 84px;
        font-size: 28px;
        border-radius: 24px;
    }

    .registration-image-wrapper {
        flex-shrink: 0;
        margin-top: 105px;
        margin-right: -39px;
    }

    .registration-frame {
        max-width: 460px;
        border-radius: 84px 0 8px 84px;
        height: 490px;
    }

    .registration-frame::after {
        border-radius: 84px 0 8px 84px;
    }

    .registration-image {
        border-radius: 84px 0 8px 130px;
        margin-bottom: -210px;
        height: 579px;
        right: 40px;
    }

    .bg-zone-1::before,
    .bg-zone-2::before,
    .bg-zone-3::before {
        background-size: 250%;
    }

    .benefit-card-wide {
        justify-content: center;
    }

    .mobile{
        display: none;
    }

    .desktop{
        display: block;
    }

    .moon-phases-bottom{
        width: 250px;
        bottom: 30px;
    }
}

/* ============================================
   EXTRA LARGE DESKTOP (1440px+)
   ============================================ */
@media (min-width: 1440px) {
    /* Layout - restore larger padding for big screens */
    .container,
    .zone-container {
        padding: 80px;
    }

    .benefits-grid {
        max-width: 1280px;
        margin: 0 auto;
    }

    /* Webinar Topics - restore larger gap for big screens */
    .topics-container {
        gap: 150px;
    }

    .couple-illustration {
        margin-left: 80px;
    }
}