body.rfv-page-landing {
    min-height: 100vh;
    overflow-x: hidden;
    background: #05060d;
}

.rfv-landing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 28vw);
    min-height: 100vh;
    color: #f7f2fa;
}

.rfv-landing__showcase {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #080a14 url('../SetUse/1_Index/BG1.png') center/cover no-repeat;
}

.rfv-landing__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    transform: scale(1.025);
}

.rfv-landing__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, rgba(3, 5, 16, .48), rgba(3, 5, 16, .06) 53%, rgba(3, 5, 16, .7)), linear-gradient(0deg, rgba(2, 4, 12, .78), transparent 48%);
}

.rfv-landing__showcase:after {
    content: '';
    position: absolute;
    inset: 20px;
    pointer-events: none;
    border: 1px solid rgba(116, 155, 255, .3);
    clip-path: polygon(0 0, 94% 0, 100% 6%, 100% 100%, 6% 100%, 0 94%);
}

.rfv-landing__brand,
.rfv-landing__copy,
.rfv-landing__video-note {
    position: absolute;
    z-index: 1;
}

.rfv-landing__brand {
    top: clamp(28px, 4vw, 62px);
    left: clamp(30px, 5vw, 88px);
    display: grid;
    color: #ff44ba;
    font: 800 clamp(30px, 3vw, 52px)/.78 Orbitron, sans-serif;
    letter-spacing: -3px;
    text-shadow: 0 0 18px rgba(255, 44, 183, .42);
}

.rfv-landing__title-art {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: min(78%, 250px);
    height: auto;
    margin: -12px auto 3px;
    filter: saturate(1.18) contrast(1.08) drop-shadow(0 10px 24px rgba(255, 15, 160, .34));
    animation: rfv-landing-title-float 5s ease-in-out infinite;
}

.rfv-landing__brand { display: none; }

.rfv-landing__brand span:first-child { color: #eef3ff; }
.rfv-landing__brand small { margin-top: 12px; color: #d7dced; font: 600 8px/1 Orbitron, sans-serif; letter-spacing: 4px; }

.rfv-landing__copy {
    left: clamp(30px, 7vw, 132px);
    right: 10%;
    bottom: clamp(68px, 12vh, 150px);
}

.rfv-landing__copy p { margin: 0 0 12px; color: #cbdcff; font: 600 clamp(10px, .8vw, 14px) Orbitron, sans-serif; letter-spacing: 6px; }
.rfv-landing__copy h1 { margin: 0; color: #f3f5ff; font: 800 clamp(42px, 5vw, 88px)/.92 Orbitron, sans-serif; text-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.rfv-landing__copy h1 em { color: #ff3eaf; font-style: normal; text-shadow: 0 0 20px rgba(255, 23, 173, .72); }
.rfv-landing__copy > span { display: block; margin-top: 22px; color: #e7e1eb; font: 500 clamp(17px, 1.4vw, 24px) 'Chakra Petch', sans-serif; }

.rfv-landing__video-note {
    right: clamp(26px, 4vw, 70px);
    bottom: 34px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #dce7ff;
    font: 600 11px Orbitron, sans-serif;
    letter-spacing: 1px;
}

.rfv-landing__signup {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(30px, 4vw, 74px) clamp(26px, 3.3vw, 58px);
    /* Continue the pink RF Home hero language behind the account panel. */
    background-color: #fff4fa;
    background-image:
        linear-gradient(145deg, rgba(255, 250, 253, .36), rgba(255, 139, 204, .28)),
        radial-gradient(circle at 72% 18%, rgba(255, 0, 143, .62), transparent 48%),
        url('../images/rf-assets/bg-head.png');
    background-position: center, center, 67% center;
    background-size: cover, cover, auto 100%;
    background-repeat: no-repeat;
    box-shadow:
        -20px 0 52px rgba(106, 27, 78, .3),
        inset 3px 0 rgba(255, 35, 166, .78),
        inset 0 0 90px rgba(255, 63, 178, .16);
}

/* Desktop side UI: show the title artwork at exactly 200% of its prior size. */
@media (min-width: 961px) {
    .rfv-landing {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 30vw);
    }

    .rfv-landing__signup {
        justify-content: flex-start;
        padding-top: clamp(288px, 23vw, 304px);
    }

    .rfv-landing__title-art {
        position: absolute;
        top: 0;
        right: auto;
        left: 50%;
        width: min(156%, 500px);
        max-width: none;
        margin: 0;
        animation: none;
        transform: translateX(-50%);
    }
}

.rfv-landing__panel-head { margin-bottom: 12px; text-align: center; }
.rfv-landing__panel-head > i,
.rfv-landing__panel-head p { display: none; }
.rfv-landing__panel-head h2 { margin: 0; color: #281323; font: 700 clamp(28px, 2.1vw, 39px)/1.1 'Chakra Petch', sans-serif; text-shadow: 0 2px 0 rgba(255, 255, 255, .72); }
.rfv-landing__panel-head span { position: relative; display: block; margin-top: 10px; padding: 7px 10px; overflow: hidden; color: #fff; background: linear-gradient(100deg, #9f075b, #f31391 46%, #8b2ed4 100%); background-size: 180% 100%; border: 1px solid rgba(255, 255, 255, .7); border-radius: 7px; font: 700 14px/1.35 'Chakra Petch', sans-serif; letter-spacing: .015em; text-shadow: 0 1px 3px rgba(53, 0, 34, .75); box-shadow: 0 7px 18px rgba(198, 9, 111, .26), inset 0 1px rgba(255, 255, 255, .42); animation: rfv-landing-copy-shimmer 4.5s linear infinite, rfv-landing-copy-pulse 2.8s ease-in-out infinite; }

body.rfv-page-landing .rfv-dust {
    position: fixed;
    z-index: 12;
    inset: 0;
    display: block !important;
    overflow: hidden;
    pointer-events: none;
}

body.rfv-page-landing .rfv-dust i {
    --dust-size: 4px;
    --dust-time: 11s;
    --dust-delay: 0s;
    --dust-drift: 32px;
    position: absolute;
    bottom: -28px;
    width: var(--dust-size);
    height: var(--dust-size);
    border-radius: 50%;
    background: #fff4fb;
    box-shadow: 0 0 7px 2px rgba(255, 255, 255, .82), 0 0 16px 6px rgba(255, 17, 165, .52);
    opacity: 0;
    animation: rfv-landing-dust-rise var(--dust-time) linear infinite var(--dust-delay);
}

body.rfv-page-landing .rfv-dust i:nth-child(1) { left: 4%; --dust-time: 10s; --dust-delay: -2s; --dust-drift: 38px; }
body.rfv-page-landing .rfv-dust i:nth-child(2) { left: 12%; --dust-size: 2px; --dust-time: 14s; --dust-delay: -9s; --dust-drift: -26px; }
body.rfv-page-landing .rfv-dust i:nth-child(3) { left: 21%; --dust-time: 12s; --dust-delay: -5s; --dust-drift: 58px; }
body.rfv-page-landing .rfv-dust i:nth-child(4) { left: 31%; --dust-size: 3px; --dust-time: 16s; --dust-delay: -12s; --dust-drift: -44px; }
body.rfv-page-landing .rfv-dust i:nth-child(5) { left: 42%; --dust-size: 5px; --dust-time: 13s; --dust-delay: -7s; --dust-drift: 30px; background: #ff82d0; }
body.rfv-page-landing .rfv-dust i:nth-child(6) { left: 51%; --dust-size: 2px; --dust-time: 15s; --dust-delay: -4s; --dust-drift: -36px; }
body.rfv-page-landing .rfv-dust i:nth-child(7) { left: 60%; --dust-time: 11s; --dust-delay: -8s; --dust-drift: 46px; }
body.rfv-page-landing .rfv-dust i:nth-child(8) { left: 69%; --dust-size: 5px; --dust-time: 17s; --dust-delay: -14s; --dust-drift: -54px; background: #d67cff; }
body.rfv-page-landing .rfv-dust i:nth-child(9) { left: 77%; --dust-size: 3px; --dust-time: 12s; --dust-delay: -10s; --dust-drift: 24px; }
body.rfv-page-landing .rfv-dust i:nth-child(10) { left: 85%; --dust-size: 2px; --dust-time: 15s; --dust-delay: -6s; --dust-drift: -30px; }
body.rfv-page-landing .rfv-dust i:nth-child(11) { left: 92%; --dust-size: 4px; --dust-time: 13s; --dust-delay: -11s; --dust-drift: 40px; background: #ff79c9; }
body.rfv-page-landing .rfv-dust i:nth-child(12) { left: 97%; --dust-size: 3px; --dust-time: 18s; --dust-delay: -15s; --dust-drift: -62px; }

@keyframes rfv-landing-title-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -5px, 0) scale(1.018); }
}

@keyframes rfv-landing-copy-shimmer {
    0% { background-position: 0 50%; }
    100% { background-position: 180% 50%; }
}

@keyframes rfv-landing-copy-pulse {
    0%, 100% { box-shadow: 0 7px 18px rgba(198, 9, 111, .24), inset 0 1px rgba(255, 255, 255, .42); }
    50% { box-shadow: 0 8px 26px rgba(245, 13, 148, .46), 0 0 12px rgba(211, 74, 255, .26), inset 0 1px rgba(255, 255, 255, .55); }
}

@keyframes rfv-landing-dust-rise {
    0% { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
    10% { opacity: .9; }
    68% { opacity: .62; }
    100% { transform: translate3d(var(--dust-drift), -112vh, 0) scale(1.45); opacity: 0; }
}

.rfv-landing__form { display: grid; gap: 14px; }
.rfv-landing__form label { display: grid; gap: 6px; color: #35172d; font: 700 13px 'Chakra Petch', sans-serif; text-shadow: 0 1px rgba(255, 255, 255, .8); }
.rfv-landing__form input[type='text'],
.rfv-landing__form input[type='email'],
.rfv-landing__form input[type='password'] { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid rgba(156, 36, 106, .32); outline: 0; background: rgba(255, 255, 255, .88); color: #27101f; font: 600 15px 'Chakra Petch', sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 14px rgba(118, 28, 82, .08); transition: border-color .2s ease, box-shadow .2s ease; }
.rfv-landing__form input:focus { border-color: #ff4cbe; box-shadow: 0 0 0 3px rgba(255, 45, 180, .14); }
.rfv-landing__form input::placeholder { color: #8c7184; }

.rfv-landing__agreement { display: flex !important; grid-template-columns: 18px 1fr; align-items: start; gap: 10px !important; margin: 6px 0 2px; padding: 7px 9px; color: #35142b !important; background: rgba(255, 255, 255, .76); border: 1px solid rgba(197, 16, 116, .2); border-radius: 7px; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5; text-shadow: none !important; }
.rfv-landing__agreement input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #ff43bb; }
.rfv-landing__agreement a { color: #a4005a; font-weight: 700; }

.rfv-landing__form button,
.rfv-landing__enter { min-height: clamp(72px, 5vw, 94px); border: 0; color: #fff; font: 700 14px Orbitron, sans-serif; letter-spacing: .7px; text-align: center; text-decoration: none; cursor: pointer; background-color: transparent; background-position: center; background-size: 100% auto; background-repeat: no-repeat; text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 48, 188, .95); filter: saturate(1.75) contrast(1.32) brightness(1.08) drop-shadow(0 0 11px rgba(241, 0, 148, .68)); transition: transform .2s ease, filter .2s ease; }
.rfv-landing__form button { background-image: url('../images/rf-assets/buttons/landing-create-account-frame.png'), linear-gradient(90deg, #22072d, #070b25 52%, #22072d); background-size: 100% auto, 76% 50%; }
.rfv-landing__form button:hover,
.rfv-landing__enter:hover { transform: scale(1.045); filter: saturate(1.95) contrast(1.4) brightness(1.14) drop-shadow(0 0 18px rgba(255, 16, 167, .9)); }
.rfv-landing__form button small { display: block; margin-top: 5px; color: #ffe5f5; font: 500 11px 'Chakra Petch', sans-serif; letter-spacing: 0; }

.rfv-landing__actions { display: grid; gap: 14px; margin-top: 22px; text-align: center; }
.rfv-landing__actions > a:first-child { color: #604458; font: 500 13px 'Chakra Petch', sans-serif; }
.rfv-landing__actions > a:first-child strong { color: #c30a70; }
.rfv-landing__enter { display: grid; grid-template-columns: 1fr auto; place-items: center; min-height: clamp(68px, 4.5vw, 88px); padding: 0 58px 0 72px; background-image: url('../images/rf-assets/buttons/landing-enter-site-frame.png'), linear-gradient(90deg, #21052d, #060a25 52%, #21052d); background-size: 100% auto, 76% 50%; }
.rfv-landing__enter b { color: #df90ff; font-size: 25px; }

/* Keep the complete registration journey visible on laptop-height screens. */
@media (min-width: 961px) and (max-height: 820px) {
    .rfv-landing__signup { padding-top: 242px; padding-bottom: 14px; }
    .rfv-landing__title-art { top: 0; right: auto; left: 50%; width: min(140%, 420px); margin: 0; transform: translateX(-50%); }
    .rfv-landing__panel-head { margin-bottom: 8px; }
    .rfv-landing__panel-head > i { width: 38px; height: 38px; font-size: 21px; }
    .rfv-landing__panel-head p { margin-top: 12px; }
    .rfv-landing__panel-head span { margin-top: 6px; }
    .rfv-landing__panel-head h2 { font-size: 27px; }
    .rfv-landing__panel-head span { padding-block: 5px; font-size: 12.5px; }
    .rfv-landing__form { gap: 6px; }
    .rfv-landing__form input[type='text'],
    .rfv-landing__form input[type='email'],
    .rfv-landing__form input[type='password'] { min-height: 38px; padding-block: 6px; }
    .rfv-landing__agreement { margin-block: 1px; padding-block: 5px; }
    .rfv-landing__form button,
    .rfv-landing__enter { min-height: 62px; }
    .rfv-landing__enter { min-height: 58px; }
    .rfv-landing__actions { gap: 5px; margin-top: 7px; }
}

@media (max-width: 960px) {
    .rfv-landing { grid-template-columns: 1fr; }
    .rfv-landing__showcase { min-height: 54vh; }
    .rfv-landing__signup { min-height: auto; padding: 46px max(22px, 8vw); }
    .rfv-landing__copy { bottom: 48px; }
    .rfv-landing__brand { top: 30px; }
}

@media (max-width: 560px) {
    .rfv-landing__showcase { min-height: 48vh; }
    .rfv-landing__showcase:after { inset: 10px; }
    .rfv-landing__brand { left: 24px; font-size: 28px; }
    .rfv-landing__copy { left: 24px; right: 24px; bottom: 42px; }
    .rfv-landing__copy > span { margin-top: 14px; font-size: 15px; }
    .rfv-landing__video-note { display: none; }
    .rfv-landing__signup { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    body.rfv-page-landing .rfv-dust { display: none !important; }
    .rfv-landing__title-art,
    .rfv-landing__panel-head span { animation: none !important; }
}
