/* ============================================================
   RIV // INTERACTIVE SYSTEMS
   TEMPORARY PUBLIC LANDING PAGE
   ============================================================ */

.riv-landing-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(
            circle at 72% 40%,
            color-mix(in srgb,var(--accent) 6%,transparent),
            transparent 32%
        ),
        linear-gradient(180deg,#090a0f,#07080c 72%);
    color:var(--text);
}

.landing-ambient{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.landing-grid{
    position:absolute;
    inset:0;
    opacity:.09;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 90%);
}

.landing-orb{
    position:absolute;
    border-radius:50%;
    background:var(--accent);
    filter:blur(120px);
}

.landing-orb-a{
    width:420px;
    height:420px;
    top:-130px;
    right:9%;
    opacity:.08;
}

.landing-orb-b{
    width:300px;
    height:300px;
    left:-120px;
    bottom:2%;
    opacity:.055;
}

.landing-shell{
    width:min(1580px,calc(100% - 72px));
    min-height:calc(100vh - 76px);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(620px,1.12fr);
    gap:clamp(48px,6vw,110px);
    align-items:center;
    padding:54px 0 34px;
    position:relative;
    z-index:1;
}

.landing-brand{
    display:flex;
    align-items:center;
    gap:17px;
    margin-bottom:clamp(70px,9vh,120px);
}

.landing-brand-mark{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    position:relative;
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            var(--soft-accent),
            rgba(255,255,255,.025)
        );
    border:1px solid var(--line-accent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 14px 50px rgba(0,0,0,.25),
        0 0 30px color-mix(in srgb,var(--accent) 15%,transparent);
    font-size:19px;
    font-weight:950;
}

.landing-brand-slash{
    position:absolute;
    right:9px;
    bottom:9px;
    color:var(--accent);
    font-size:10px;
    letter-spacing:-.12em;
}

.landing-brand-name{
    color:var(--text);
    font-size:17px;
    line-height:1;
    font-weight:950;
    letter-spacing:.035em;
}

.landing-brand-name span{
    color:var(--accent);
}

.landing-brand-kicker{
    margin-top:7px;
    color:var(--muted);
    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:.18em;
}

.landing-eyebrow{
    margin-bottom:19px;
    color:var(--text);
    font-size:12px;
    font-weight:950;
    letter-spacing:.12em;
}

.landing-eyebrow span{
    color:var(--accent);
}

.landing-copy h1{
    margin:0;
    max-width:800px;
    color:var(--text);
    font-size:clamp(56px,5.3vw,92px);
    line-height:.89;
    font-weight:950;
    letter-spacing:-.055em;
    text-wrap:balance;
}

.landing-copy h1 span{
    color:var(--accent);
    text-shadow:
        0 0 34px color-mix(in srgb,var(--accent) 20%,transparent);
}

.landing-lead{
    max-width:650px;
    margin:30px 0 0;
    color:#b5b3bd;
    font-size:clamp(17px,1.15vw,21px);
    line-height:1.55;
    font-weight:650;
}

.landing-actions{
    width:min(100%,560px);
    margin-top:38px;
}

.landing-login{
    min-height:66px;
    width:100%;
    padding:0 22px;
    display:flex;
    align-items:center;
    gap:15px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--accent);
    border-radius:16px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--accent) 92%,#fff 8%),
            var(--accent)
        );
    color:#fff;
    text-decoration:none;
    box-shadow:
        0 18px 48px color-mix(in srgb,var(--accent) 22%,transparent),
        inset 0 1px 0 rgba(255,255,255,.2);
    transition:
        transform .24s var(--ease),
        filter .24s var(--ease),
        box-shadow .24s var(--ease);
}

.landing-login::before{
    content:"";
    position:absolute;
    inset:-30% auto -30% -30%;
    width:32%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
    transform:skewX(-18deg);
    transition:left .55s var(--ease);
}

.landing-login:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:
        0 22px 60px color-mix(in srgb,var(--accent) 28%,transparent),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.landing-login:hover::before{
    left:110%;
}

.landing-login svg{
    width:25px;
    height:25px;
    flex:0 0 25px;
}

.landing-login span{
    flex:1;
    font-size:14px;
    font-weight:950;
    letter-spacing:.055em;
}

.landing-login .landing-arrow{
    width:20px;
    height:20px;
    transition:transform .24s var(--ease);
}

.landing-login:hover .landing-arrow{
    transform:translateX(4px);
}

.landing-auth-note{
    margin-top:12px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
}

.landing-system-strip{
    width:min(100%,680px);
    margin-top:50px;
    padding-top:23px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    border-top:1px solid var(--line);
}

.landing-system{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:#b9b7c0;
    font-size:9px;
    font-weight:900;
    letter-spacing:.065em;
}

.landing-system svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:var(--accent);
}

/* ---------------- PREVIEW ---------------- */

.landing-preview{
    min-height:660px;
    position:relative;
    padding:22px;
    border:1px solid var(--line);
    border-radius:32px;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--panel) 82%,transparent),
            color-mix(in srgb,#0c0d12 91%,transparent)
        );
    box-shadow:
        0 30px 100px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(18px);
    transform:
        perspective(1600px)
        rotateY(-2deg)
        rotateX(1deg);
}

.preview-glow{
    position:absolute;
    width:380px;
    height:380px;
    right:7%;
    top:12%;
    border-radius:50%;
    background:var(--accent);
    opacity:.08;
    filter:blur(95px);
    pointer-events:none;
}

.preview-topline{
    height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4px;
    border-bottom:1px solid var(--line);
    color:var(--text);
    font-size:13px;
    font-weight:950;
    letter-spacing:.03em;
}

.preview-topline b{
    color:var(--accent);
}

.preview-live{
    color:var(--accent);
    font-size:10px;
    letter-spacing:.11em;
}

.preview-stats{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    min-height:112px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.018);
}

.preview-stats > div{
    padding:21px 23px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.preview-stats > div + div{
    border-left:1px solid var(--line);
}

.preview-stats small{
    color:var(--muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
}

.preview-stats strong{
    margin-top:5px;
    color:var(--text);
    font-size:25px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.035em;
}

.preview-stats em{
    color:var(--muted);
    font-size:9px;
    font-style:normal;
}

.preview-meter{
    width:80%;
    height:3px;
    margin-top:10px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.preview-meter i,
.preview-bar i{
    display:block;
    height:100%;
    background:var(--accent);
}

.preview-grid{
    margin-top:15px;
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    gap:15px;
}

.preview-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.012)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.preview-card header{
    color:var(--text);
    font-size:11px;
    font-weight:950;
    letter-spacing:.035em;
}

.preview-card header b{
    color:var(--accent);
}

.preview-chaos{
    min-height:225px;
    padding:20px;
}

.preview-chaos header{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.preview-chaos-ring{
    width:116px;
    height:116px;
    margin:27px auto 0;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:13px solid rgba(255,255,255,.055);
    box-shadow:
        0 -8px 0 -3px var(--accent),
        inset 0 0 45px color-mix(in srgb,var(--accent) 6%,transparent);
}

.preview-chaos-ring svg{
    width:36px;
    height:36px;
    color:var(--accent);
    fill:var(--accent);
    stroke:none;
}

.preview-quest{
    grid-row:span 2;
    min-height:370px;
    padding:22px;
    border-color:var(--line-accent);
    background:
        radial-gradient(
            circle at 88% 5%,
            color-mix(in srgb,var(--accent) 12%,transparent),
            transparent 42%
        ),
        rgba(255,255,255,.018);
}

.preview-rarity{
    display:inline-flex;
    margin-top:15px;
    padding:7px 10px;
    border:1px solid var(--line-accent);
    border-radius:999px;
    color:var(--accent);
    background:var(--soft-accent);
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}

.preview-quest h2,
.preview-poll h2{
    margin:30px 0 0;
    color:var(--text);
    font-size:clamp(30px,2.4vw,44px);
    line-height:.93;
    font-weight:950;
    letter-spacing:-.045em;
}

.preview-quest p{
    margin:13px 0 0;
    color:#b8b6bf;
    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.preview-complete{
    min-height:52px;
    margin-top:45px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:var(--accent);
    color:#fff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.035em;
}

.preview-poll{
    min-height:245px;
    padding:20px;
}

.preview-poll h2{
    margin-top:17px;
    font-size:34px;
}

.preview-option{
    margin-top:19px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    color:#c8c6cd;
    font-size:9px;
    font-weight:900;
}

.preview-option strong{
    color:var(--text);
}

.preview-bar{
    display:block;
    width:100%;
    height:4px;
    margin-top:7px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.preview-caption{
    position:absolute;
    left:22px;
    right:22px;
    bottom:20px;
    padding-top:15px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    text-align:right;
}

.preview-caption span{
    color:var(--accent);
}

.landing-footer{
    width:min(1580px,calc(100% - 72px));
    min-height:76px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:relative;
    z-index:1;
    border-top:1px solid var(--line);
    color:#696873;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.landing-footer b{
    color:var(--accent);
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:1180px){
    .landing-shell{
        grid-template-columns:1fr;
        width:min(920px,calc(100% - 48px));
        padding-top:40px;
    }

    .landing-brand{
        margin-bottom:70px;
    }

    .landing-preview{
        min-height:610px;
        transform:none;
    }

    .landing-footer{
        width:min(920px,calc(100% - 48px));
    }
}

@media(max-width:720px){
    .landing-shell{
        width:min(100% - 28px,620px);
        min-height:auto;
        padding:22px 0 26px;
        gap:42px;
    }

    .landing-brand{
        gap:12px;
        margin-bottom:52px;
    }

    .landing-brand-mark{
        width:48px;
        height:48px;
        flex-basis:48px;
        border-radius:15px;
    }

    .landing-brand-name{
        font-size:13px;
    }

    .landing-brand-kicker{
        font-size:6.5px;
    }

    .landing-eyebrow{
        font-size:9px;
    }

    .landing-copy h1{
        font-size:clamp(44px,13vw,66px);
    }

    .landing-lead{
        margin-top:22px;
        font-size:15px;
    }

    .landing-actions{
        margin-top:28px;
    }

    .landing-login{
        min-height:60px;
        border-radius:14px;
    }

    .landing-login span{
        font-size:12px;
    }

    .landing-system-strip{
        margin-top:35px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:15px 10px;
    }

    .landing-preview{
        min-height:530px;
        padding:13px;
        border-radius:23px;
    }

    .preview-stats > div{
        padding:14px 10px;
    }

    .preview-stats strong{
        font-size:16px;
    }

    .preview-grid{
        grid-template-columns:.8fr 1.2fr;
        gap:9px;
    }

    .preview-chaos,
    .preview-poll{
        padding:13px;
    }

    .preview-quest{
        padding:15px;
    }

    .preview-chaos{
        min-height:180px;
    }

    .preview-chaos-ring{
        width:86px;
        height:86px;
        border-width:10px;
        margin-top:20px;
    }

    .preview-card header{
        font-size:8px;
    }

    .preview-quest{
        min-height:312px;
    }

    .preview-quest h2{
        margin-top:19px;
        font-size:26px;
    }

    .preview-quest p{
        font-size:10px;
    }

    .preview-complete{
        min-height:42px;
        margin-top:28px;
        font-size:9px;
    }

    .preview-poll{
        min-height:185px;
    }

    .preview-poll h2{
        font-size:24px;
    }

    .preview-option{
        margin-top:12px;
        font-size:7px;
    }

    .preview-caption{
        display:none;
    }

    .landing-footer{
        width:min(100% - 28px,620px);
        min-height:64px;
    }
}

@media(max-width:470px){
    .landing-preview{
        min-height:590px;
    }

    .preview-grid{
        grid-template-columns:1fr;
    }

    .preview-chaos{
        display:none;
    }

    .preview-quest{
        grid-row:auto;
        min-height:280px;
    }

    .preview-poll{
        min-height:190px;
    }
}


/* V3 // brand kicker split */
.landing-brand-kicker-prefix{
    color:var(--muted);
}

.landing-brand-kicker-accent{
    color:var(--accent);
}

/*
 * Preview footer caption:
 * place it visually inside the bottom footer band between the two horizontal
 * lines rather than floating above the lower edge.
 */
.preview-caption{
    left:18px;
    right:auto;
    bottom:10px;
    padding-top:8px;
    text-align:left;
    width:auto;
    max-width:calc(100% - 36px);
}

.preview-caption::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:var(--line);
    opacity:.85;
}


/* ============================================================
   V4 // PREVIEW FOOTER CAPTION
   ============================================================ */

.preview-caption{
    left:18px;
    right:auto;
    bottom:7px;
    width:auto;
    max-width:calc(100% - 36px);
    padding:0;
    margin:0;
    border-top:0!important;
    text-align:left;
    line-height:1;
}

.preview-caption::before{
    display:none!important;
    content:none!important;
}

.preview-caption span{
    color:var(--accent);
}


/* ============================================================
   V5 // PREVIEW FOOTER CAPTION — RIGHT SIDE
   ============================================================ */

.preview-caption{
    left:auto!important;
    right:18px!important;
    bottom:7px!important;
    width:auto!important;
    max-width:calc(100% - 36px)!important;
    padding:0!important;
    margin:0!important;
    border-top:0!important;
    text-align:right!important;
    line-height:1!important;
}

.preview-caption::before{
    display:none!important;
    content:none!important;
}

.preview-caption span{
    color:var(--accent);
}


/* V6 // footer caption alignment nudge */
.preview-caption{
    left:auto!important;
    right:28px!important;
}


/* ==========================================================================
   LANDING // PRIVATE BETA ACCESS REQUEST
   ========================================================================== */

.landing-request-access{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:10px;
    padding:11px 15px 11px 17px;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--text);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.018),
            color-mix(in srgb,var(--accent) 5%,transparent)
        );
    text-decoration:none;
    transition:
        border-color .2s var(--ease),
        background .2s var(--ease),
        transform .2s var(--ease);
}

.landing-request-access:hover{
    transform:translateY(-1px);
    border-color:var(--line-accent);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.026),
            var(--soft-accent)
        );
}

.landing-request-copy{
    min-width:0;
    display:grid;
    gap:3px;
}

.landing-request-copy b{
    color:var(--text);
    font-size:10px;
    font-weight:1000;
    letter-spacing:.055em;
}

.landing-request-copy small{
    color:var(--muted);
    font-size:9px;
    line-height:1.35;
    font-weight:750;
}

.landing-request-cta{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--accent);
    font-size:10px;
    font-weight:1000;
    letter-spacing:.05em;
    white-space:nowrap;
}

.landing-request-cta svg{
    width:15px;
    height:15px;
    transition:transform .2s var(--ease);
}

.landing-request-access:hover .landing-request-cta svg{
    transform:translateX(3px);
}

@media(max-width:560px){
    .landing-request-access{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
}