/* ==========================================
   Nuro Landing Page
========================================== */

body{

    background:var(--color-background);

    color:var(--color-text);

    font-family:var(--font-main);

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}


/* ==========================================
   Landing
========================================== */

.landing{

    width:100%;

    display:flex;

    justify-content:center;

    padding:32px;

    box-sizing:border-box;

}


/* ==========================================
   Container
========================================== */

.container{

    width:100%;

    max-width:360px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


/* ==========================================
   Logo
========================================== */

.logo{

    width:120px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    position:relative;

}


.logo img{

    width:100%;

    height:100%;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    transform-origin:center center;

    will-change:transform;

    animation:nuroBreathing 5.5s ease-in-out infinite;

    filter:drop-shadow(
        0px 12px 18px rgba(0,0,0,.18)
    );

}


.logo::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:2px;

    transform:translateX(-50%);

    width:68px;

    height:10px;

    border-radius:50%;

    background:rgba(0,0,0,.16);

    filter:blur(10px);

    z-index:0;

}


/* ==========================================
   Title
========================================== */

.title{

    text-align:center;

    font-size:34px;

    font-weight:var(--weight-extrabold);

    letter-spacing:-0.6px;

    line-height:1.2;

    margin-bottom:14px;

}


/* ==========================================
   Subtitle
========================================== */

.subtitle{

    text-align:center;

    color:var(--color-text-light);

    font-size:17px;

    font-weight:var(--weight-medium);

    line-height:1.85;

    margin-bottom:42px;

    max-width:300px;

}


/* ==========================================
   Buttons Container
========================================== */

.buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:16px;

}


/* ==========================================
   Landing Buttons
   Same Visual Language As Answer Cards
========================================== */

.buttons button{

    width:100%;

    height:56px;

    margin-top:0;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        #5E8EFF 0%,
        #4E7EF0 100%
    );

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    padding:0 18px;

    cursor:pointer;

    box-sizing:border-box;

    box-shadow:
        0 8px 20px rgba(78,126,240,.35),
        inset 0 2px 0 rgba(255,255,255,.25);

    transition:all .18s ease;

    -webkit-tap-highlight-color:transparent;

}


/* ==========================================
   Start Button
========================================== */

#register_btn{

    background:linear-gradient(
        180deg,
        #5E8EFF 0%,
        #4E7EF0 100%
    );

    color:#FFFFFF;

    border:none;

}


/* ==========================================
   Login Button
========================================== */

#login_btn{

    background:var(--color-surface);

    color:var(--color-primary);

    border:2px solid var(--color-primary);

    box-shadow:none;

}


/* ==========================================
   Button Active
========================================== */

.buttons button:active{

    transform:
        translateY(2px)
        scale(.985);

}


/* ==========================================
   Start Button Active
========================================== */

#register_btn:active{

    background:#3E6FE6;

    box-shadow:
        0 2px 8px rgba(62,111,230,.28),
        inset 0 2px 6px rgba(0,0,0,.08);

}


/* ==========================================
   Login Button Active
========================================== */

#login_btn:active{

    background:#EEF5FF;

    box-shadow:none;

}


/* ==========================================
   Focus
========================================== */

.buttons button:focus{

    outline:none;

}


.buttons button:focus-visible{

    outline:none;

}


/* ==========================================
   Stats
========================================== */

.stats{

    margin-top:64px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    text-align:center;

    color:var(--color-text-light);

}


.stats p:first-child{

    font-size:30px;

    font-weight:var(--weight-bold);

}


.stats p:last-child{

    font-size:14px;

    font-weight:var(--weight-medium);

    color:var(--color-text-light);

}