.login-hero {
    padding: 60rem 0;
    background: var(--login-hero-background, var(--color-primary));
    text-align: center;
}

.login-hero__content h1 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 700;
    font-size: 32rem;
    line-height: 40rem;
    color: var(--login-hero-title, var(--color-white));
    margin-bottom: 16rem;
}

.login-hero__subtitle {
    font-size: 18rem;
    line-height: 28rem;
    color: var(--login-hero-subtitle, var(--color-white));
    opacity: 0.9;
    margin-bottom: 40rem;
    max-width: 600rem;
    margin-left: auto;
    margin-right: auto;
}

.login-steps-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rem;
    max-width: 400rem;
    margin: 0 auto;
}

.step-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rem;
}

.step-number {
    width: 40rem;
    height: 40rem;
    background: var(--login-hero-number, var(--color-accent));
    color: var(--login-hero-number-text, var(--color-black));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16rem;
}

.step-text {
    font-size: 14rem;
    line-height: 20rem;
    color: var(--login-hero-text, var(--color-white));
    font-weight: 600;
}

.registration-guide {
    padding: 65rem 0;
    background: var(--registration-guide-background, var(--color-primary-dark));
}

.registration-guide h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--registration-guide-title, var(--color-white));
    text-align: center;
    margin-bottom: 16rem;
}

.registration-guide .section-subtitle {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--registration-guide-subtitle, var(--color-white));
    opacity: 0.8;
    text-align: center;
    margin-bottom: 48rem;
    max-width: 600rem;
    margin-left: auto;
    margin-right: auto;
}

.guide-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40rem;
    align-items: center;
    color: var(--registration-guide-step-text, var(--color-white));
}

.guide-text h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--registration-guide-step-title, var(--color-accent));
    margin-bottom: 16rem;
}

.guide-text p {
    font-size: 16rem;
    line-height: 24rem;
    opacity: 0.9;
    margin-bottom: 24rem;
    color: var(--registration-guide-step-text, var(--color-white));
}

.step-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.step-item {
    display: flex;
    gap: 16rem;
    align-items: flex-start;
}

.step-icon {
    font-size: 24rem;
    margin-top: 4rem;
    flex-shrink: 0;
    color: var(--registration-guide-list-icon, var(--color-accent));
}

.step-details h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 16rem;
    line-height: 24rem;
    color: var(--registration-guide-step-title, var(--color-accent));
    margin-bottom: 8rem;
}

.step-details p {
    font-size: 14rem;
    line-height: 20rem;
    color: var(--registration-guide-step-text, var(--color-white));
    opacity: 0.9;
    margin: 0;
}

.guide-image img {
    width: 100%;
    height: auto;
    border-radius: var(--global-border-radius);
}

.login-guide {
    padding: 65rem 0;
    background: var(--login-guide-background, var(--color-black));
}

.login-guide h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--login-guide-title, var(--color-white));
    text-align: center;
    margin-bottom: 48rem;
}

.login-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40rem;
    align-items: center;
}

.login-image img {
    width: 100%;
    height: auto;
    border-radius: var(--global-border-radius);
}

.login-text h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--login-guide-subtitle, var(--color-white));
    margin-bottom: 16rem;
}

.login-text p {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--login-guide-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 20rem;
}

.login-steps {
    list-style: none;
    margin: 0 0 32rem 0;
    padding: 0;
}

.login-steps li {
    font-size: 14rem;
    line-height: 20rem;
    color: var(--login-guide-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 12rem;
    position: relative;
    padding-left: 24rem;
}

.login-steps li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--login-guide-list-icon, var(--color-accent));
    font-weight: 700;
}

.security-tip {
    background: var(--login-guide-security-background, var(--color-primary));
    border-radius: var(--global-border-radius);
    padding: 20rem;
}

.security-tip h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 16rem;
    line-height: 24rem;
    color: var(--login-guide-security-title, var(--color-accent));
    margin-bottom: 12rem;
}

.security-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.security-list li {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--login-guide-security-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 8rem;
    position: relative;
    padding-left: 16rem;
}

.security-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--login-guide-security-icon, var(--color-accent));
    font-weight: 700;
}

.deposit-guide {
    padding: 65rem 0;
    background: var(--deposit-guide-background, var(--color-primary-dark));
    color: var(--deposit-guide-step-text, var(--color-white));
}

.deposit-guide h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--deposit-guide-title, var(--color-white));
    text-align: center;
    margin-bottom: 16rem;
}

.deposit-methods {
    margin-bottom: 60rem;
}

.deposit-methods h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--deposit-guide-subtitle, var(--color-white));
    margin-bottom: 32rem;
}

.methods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20rem;
}

.method-card {
    background: var(--deposit-guide-method-background, var(--color-primary));
    border: 1rem solid var(--deposit-guide-method-border, var(--color-secondary));
    border-radius: var(--global-border-radius);
    padding: 20rem;
    text-align: center;
}

.method-icon {
    font-size: 32rem;
    margin-bottom: 12rem;
    display: block;
    color: var(--deposit-guide-method-icon, var(--color-accent));
}

.method-card h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 16rem;
    line-height: 24rem;
    color: var(--deposit-guide-method-title, var(--color-white));
    margin-bottom: 8rem;
}

.method-card p {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--deposit-guide-method-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 12rem;
}

.method-limits {
    font-size: 10rem;
    line-height: 16rem;
    color: var(--deposit-guide-method-limits, var(--color-accent));
    font-weight: 600;
}

.deposit-process h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--deposit-guide-subtitle, var(--color-white));
    margin-bottom: 32rem;
}

.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20rem;
}

.process-step {
    display: flex;
    gap: 16rem;
    align-items: flex-start;
}

.process-step .step-number {
    width: 32rem;
    height: 32rem;
    background: var(--deposit-guide-step-number-background, var(--color-accent));
    color: var(--deposit-guide-step-number-text, var(--color-black));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14rem;
    flex-shrink: 0;
}

.step-content h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 14rem;
    line-height: 20rem;
    color: var(--deposit-guide-step-title, var(--color-white));
    margin-bottom: 4rem;
}

.step-content p {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--deposit-guide-step-text, var(--color-white));
    opacity: 0.9;
    margin: 0;
}

.bonus-claiming {
    padding: 65rem 0;
    background: var(--bonus-claiming-background, var(--color-primary));
}

.bonus-claiming h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--bonus-claiming-title, var(--color-white));
    text-align: center;
    margin-bottom: 48rem;
}

.bonus-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40rem;
    align-items: center;
}

.bonus-text h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--bonus-claiming-subtitle, var(--color-white));
    margin-bottom: 16rem;
}

.bonus-text p {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--bonus-claiming-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 24rem;
}

.bonus-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20rem;
}

.bonus-step {
    display: flex;
    gap: 16rem;
    align-items: flex-start;
}

.bonus-step-number {
    width: 32rem;
    height: 32rem;
    background: var(--bonus-claiming-step-number-background, var(--color-accent));
    color: var(--bonus-claiming-step-number-text, var(--color-black));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14rem;
    flex-shrink: 0;
}

.bonus-step-text h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 14rem;
    line-height: 20rem;
    color: var(--bonus-claiming-step-title, var(--color-white));
    margin-bottom: 4rem;
}

.bonus-step-text p {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--bonus-claiming-step-text, var(--color-white));
    opacity: 0.9;
    margin: 0;
}

.bonus-image img {
    width: 100%;
    height: auto;
    border-radius: var(--global-border-radius);
}

.safety-tips {
    padding: 65rem 0;
    background: var(--safety-tips-background, var(--color-black));
}

.safety-tips h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--safety-tips-title, var(--color-white));
    text-align: center;
    margin-bottom: 48rem;
}

.safety-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.safety-card {
    background: var(--safety-tips-card-background, var(--color-primary));
    border-radius: var(--global-border-radius);
    padding: 24rem;
    text-align: center;
}

.safety-icon {
    font-size: 40rem;
    margin-bottom: 16rem;
    display: block;
    color: var(--safety-tips-card-icon, var(--color-accent));
}

.safety-card h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 18rem;
    line-height: 26rem;
    color: var(--safety-tips-card-title, var(--color-white));
    margin-bottom: 12rem;
}

.safety-card p {
    font-size: 14rem;
    line-height: 22rem;
    color: var(--safety-tips-card-text, var(--color-white));
    opacity: 0.9;
}

.login-cta {
    padding: 65rem 0;
    background: var(--login-cta-background, var(--color-primary-dark));
}

.cta-content {
    text-align: center;
    max-width: 600rem;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--login-cta-title, var(--color-white));
    margin-bottom: 16rem;
}

.cta-content p {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--login-cta-text, var(--color-white));
    opacity: 0.9;
}

.cta-content p:not(:last-child) {
    margin-bottom: 32rem;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 16rem;
    align-items: center;
}

.cta-buttons:not(:last-child) {
    margin-bottom: 24rem;
}

.cta-disclaimer {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--login-cta-disclaimer, var(--color-white));
    opacity: 0.6;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .login-hero__content h1 {
        font-size: 48rem;
        line-height: 56rem;
    }

    .login-hero__subtitle {
        font-size: 20rem;
        line-height: 30rem;
    }

    .login-steps-preview {
        grid-template-columns: repeat(4, 1fr);
        max-width: 600rem;
    }

    .guide-content {
        grid-template-columns: 2fr 1fr;
        gap: 60rem;
    }

    .login-content {
        grid-template-columns: 1fr 2fr;
        gap: 60rem;
    }

    .methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bonus-content {
        grid-template-columns: 2fr 1fr;
        gap: 60rem;
    }

    .safety-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .login-hero {
        padding: 100rem 0;
    }

    .login-hero__content h1 {
        font-size: 56rem;
        line-height: 64rem;
    }

    .methods-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .safety-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}