/* PALEFÒ LANDING V5 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--purple:#7C5CFC;--pink:#E879A8;--text-dark:#1e1e2e;--text-mid:#4B5563;--text-light:#9CA3AF}
html{font-size:16px;-webkit-font-smoothing:antialiased}

/* === GRADIENT: light sky-blue to soft lavender to pale pink === */
body{
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    min-height:100vh;
    /* clip (not hidden): still clips horizontal overflow below the 320px floor,
       but keeps the root element as the scroll container so smooth scrollIntoView
       (the "Log in / Register" jump) works reliably. */
    overflow-x:clip;
    display:flex;align-items:center;justify-content:center;
    padding:40px 24px;
    background:linear-gradient(135deg,
        #60a5fa 0%,
        #7dd3fc 16%,
        #a5b4fc 33%,
        #c4b5fd 50%,
        #d8b4fe 66%,
        #e9d5ff 83%,
        #f5d0fe 100%
    );
    background-attachment:fixed;
}

/* === PHOTOS: large, bright, floating with drop shadows === */
/* Photo wrapper: handles position, size, shadow */
.photo-wrap{
    position:fixed;
    z-index:1;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(0 12px 30px rgba(0,0,0,0.45)) drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}

/* Photo img: fills wrapper, feathered edges via mask */
.photo-wrap img{
    display:block;
    width:calc(100% + 240px);
    height:calc(100% + 240px);
    margin:-120px;
    object-fit:cover;
    -webkit-mask-image:radial-gradient(ellipse at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 42%,
        rgba(0,0,0,0.55) 58%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 82%
    );
    mask-image:radial-gradient(ellipse at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 42%,
        rgba(0,0,0,0.55) 58%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 82%
    );
}

/* Photo 1: Girl — upper-right, overlapping top of card */
.photo-1{
    width:272px;height:304px;
    top:12%;right:14%;
    animation:drift1 161s linear infinite;
}

/* Photo 2: Group — overlapping card from lower-left */
.photo-2{
    width:600px;height:480px;
    bottom:16%;left:10%;
    animation:drift2 142s linear infinite;
}
.photo-2 img{
    -webkit-mask-image:radial-gradient(ellipse at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 42%,
        rgba(0,0,0,0.45) 56%,
        rgba(0,0,0,0.1) 67%,
        rgba(0,0,0,0) 76%
    );
    mask-image:radial-gradient(ellipse at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 42%,
        rgba(0,0,0,0.45) 56%,
        rgba(0,0,0,0.1) 67%,
        rgba(0,0,0,0) 76%
    );
}

/* Photo 3: Conch — right side, lower-center area */
.photo-3{
    width:440px;height:360px;
    bottom:12%;right:10%;
    animation:drift3 130s linear infinite;
}

@keyframes drift1{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-15vw)}
}
@keyframes drift2{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(15vw,2.25vw)}
}
@keyframes drift3{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-15vw,-4.5vw)}
}

/* === CARD: frosted glass, drop shadow, rounded === */
.main-container{
    position:relative;
    z-index:10;
    display:flex;
    width:100%;
    width:calc(100% - 100px);max-width:1456px;
    min-height:min(704px,calc(100vh - 60px));
    border-radius:26px;
    overflow:hidden;
    border-top:1.5px solid rgba(255,255,255,0.6);
    border-left:1.5px solid rgba(255,255,255,0.6);
    border-bottom:1.5px solid rgba(255,255,255,0.2);
    border-right:1.5px solid rgba(255,255,255,0.2);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.32),
        0 12px 24px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,255,255,0.25);
}

/* === WELCOME PANEL: frosted glass — NOT solid white === */
.welcome-panel{
    flex:2 1 66%;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(29px) brightness(1.3) saturate(0.7);
    -webkit-backdrop-filter:blur(29px) brightness(1.3) saturate(0.7);
    padding:16px 34px;
    display:flex;flex-direction:column;justify-content:center;
    color:var(--text-dark);
    border-right:1px solid rgba(255,255,255,0.35);
}

/* Fallback for no backdrop-filter */
@supports not (backdrop-filter:blur(1px)){
    .welcome-panel{background:rgba(255,255,255,0.65)}
}

.welcome-content{position:relative;display:flex;flex-direction:column;height:100%;justify-content:flex-start}

.text-frame{
    background:rgba(255,255,255,0.35);
    border-radius:18px;
    padding:12px 24px;
    margin-bottom:12px;
}

.welcome-eyebrow{
    font-size:1rem;font-weight:800;
    text-transform:uppercase;letter-spacing:0.12em;
    color:#9a9ab0;margin-bottom:10px;font-weight:800;letter-spacing:0.08em;
}

.welcome-title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:3.2rem;font-weight:800;
    color:#1a1a2e;line-height:1.12;
    margin-bottom:12px;
}

.welcome-subtitle{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:1.25rem;
    font-weight:400;
    font-style:normal;text-transform:uppercase;letter-spacing:0.08em;
    color:#374151;
    line-height:1.7;
    margin-bottom:16px;
}

.welcome-body{
    font-size:1.1rem;color:#1e1e2e;font-weight:500;
    line-height:1.75;margin-bottom:36px;
    max-width:400px;
}

.welcome-footer{margin-top:auto}

.contribute-link{
    display:inline-block;
    font-size:0.9rem;font-weight:700;font-family:inherit;
    color:#fff;text-decoration:none;
    padding:12px 28px;
    background:linear-gradient(135deg,var(--purple) 0%,#9F7AEA 50%,var(--pink) 100%);
    border:none;
    border-radius:10px;
    transition:all 0.3s ease;
    margin-bottom:12px;
    box-shadow:0 4px 14px rgba(124,92,252,0.28);
}
.contribute-link:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,92,252,0.4)}

.nvidia-line{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,0.35)}
.nvidia-line img{height:36px;width:auto;opacity:0.85;border-radius:4px}
.nvidia-line:hover img{opacity:1}
.nvidia-line span{font-size:0.85rem;color:var(--text-dark);font-weight:600}

/* === LOGIN PANEL: frosted glass, slightly more translucent === */
.login-panel{
    flex:1 1 34%;
    background:rgba(255,255,255,0.10);
    backdrop-filter:blur(28px) saturate(1.3);
    -webkit-backdrop-filter:blur(28px) saturate(1.3);
    padding:28px 28px;
    display:flex;flex-direction:column;justify-content:center;
    color:var(--text-dark);
}

@supports not (backdrop-filter:blur(1px)){
    .login-panel{background:rgba(255,255,255,0.55)}
}

.login-header-frame{margin-bottom:22px!important;
    background:rgba(255,255,255,0.55);
    border-radius:18px;
    padding:20px 24px 10px;
    margin-bottom:10px;
    text-align:center;
}

.login-content{max-width:360px;margin:0 auto;width:100%}

.login-logo{
    width:105px;height:auto;
    margin:0 auto 14px;display:block;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.login-title{font-size:1.3rem;font-weight:700;color:var(--text-dark);margin-bottom:4px;text-align:center}
.login-subtitle{font-size:0.84rem;color:var(--text-mid);margin-bottom:12px;text-align:center}

/* Toggles */
.toggle-group{
    display:flex;
    background:rgba(255,255,255,0.35);
    border-radius:10px;padding:3px;margin-bottom:10px;
    border:1px solid rgba(255,255,255,0.4);
}
.toggle-btn{
    flex:1;padding:9px 12px;font-size:0.82rem;font-weight:500;
    color:var(--text-mid);background:transparent;
    border:none;border-radius:8px;cursor:pointer;
    transition:all 0.2s ease;font-family:inherit;
}
.toggle-btn.active{
    background:#fff;color:var(--text-dark);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);font-weight:600;
}

/* SSO */
.sso-buttons{display:flex;justify-content:center;gap:14px;margin-bottom:18px}
.sso-btn{
    width:54px;height:46px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.6);
    border-radius:10px;cursor:pointer;transition:all 0.2s ease;
}
.sso-btn:hover{background:rgba(255,255,255,0.8);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}

/* Divider */
.divider{display:flex;align-items:center;margin-bottom:16px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.4)}
.divider span{padding:0 12px;font-size:0.78rem;color:var(--text-mid);white-space:nowrap}

/* Form */
.form-group{margin-bottom:14px}
.form-group.hidden{display:none}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:14px;color:var(--text-light);pointer-events:none}
.input-wrapper input{
    width:100%;padding:12px 14px 12px 42px;
    font-size:0.9rem;font-family:inherit;color:var(--text-dark);
    background:rgba(255,255,255,0.55);
    border:1.5px solid rgba(255,255,255,0.5);
    border-radius:10px;outline:none;transition:all 0.25s ease;
}
.input-wrapper input::placeholder{color:var(--text-light)}
.input-wrapper input:focus{border-color:var(--purple);background:rgba(255,255,255,0.8);box-shadow:0 0 0 3px rgba(124,92,252,0.12)}
.input-wrapper:focus-within .input-icon{color:var(--purple)}
.password-toggle{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:var(--text-light);display:flex;padding:4px}
.password-toggle:hover{color:var(--purple)}

/* Login button */
.btn-login{
    /* Sized to frame its label (centered) rather than spanning the full frame. */
    display:block;width:fit-content;min-width:150px;
    padding:13px 48px;font-size:0.95rem;font-weight:700;font-family:inherit;
    color:#fff;
    background:linear-gradient(135deg,var(--purple) 0%,#9F7AEA 50%,var(--pink) 100%);
    border:none;border-radius:10px;cursor:pointer;
    transition:all 0.3s ease;margin:12px auto 0;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,92,252,0.4)}

/* Footer */
.login-footer{text-align:center;margin-top:18px}
.forgot-link{font-size:0.82rem;color:var(--purple);text-decoration:none;font-weight:500}
.forgot-link:hover{text-decoration:underline}
.signup-prompt{font-size:0.82rem;color:var(--text-light);margin-top:10px}
.create-link{color:var(--purple);font-weight:600;text-decoration:none}
.create-link:hover{text-decoration:underline}

/* Responsive */
@media(max-width:900px){
    /* Anchor the card to the TOP in one-column mode. The desktop rule centers
       it vertically (align-items:center), but once the stack is taller than the
       screen that centering lands the viewport on the login section and clips
       the info/carousel above it. Top-align so info/carousel is the entry point
       and only the "Log in / Register" pill scrolls down to the login card. */
    body{align-items:flex-start}
    /* 1-column: use the screen (drop the desktop 100px gutter) and floor the
       whole card at 320px so it never collapses past the smallest phone.
       Below the floor the card simply clips at the viewport edge (body keeps
       overflow-x:hidden) — acceptable since no real phone is that narrow. */
    .main-container{flex-direction:column;max-width:520px;width:100%;min-width:320px}
    .welcome-panel{border-right:none;border-bottom:1px solid rgba(255,255,255,0.3)}
    /* Login section is the last block; make it at least a full screen tall with
       its content anchored to the top, so the "Log in / Register" button can
       scroll it cleanly to the very top of the viewport. */
    .login-panel{justify-content:flex-start;min-height:100vh}
    .bg-photo{opacity:0.5!important;width:300px!important;height:250px!important}
}
@media(max-width:600px){
    body{padding:12px;align-items:flex-start}
    .welcome-panel,.login-panel{padding:24px 20px}
    .welcome-title{font-size:1.8rem}
    .bg-photo{display:none}
}

:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
input:focus-visible{outline:none}

/* === ENRICHED WELCOME PANEL additions (v56) === */
.welcome-image{
    position:relative;
    /* Fluid frame width: ~60% at full width, growing continuously toward 90%
       as the viewport narrows (no stepped 60%→jump-to-90%). Keeps the frame a
       wide landscape through the two-column range instead of dipping to a
       square. Tuned across 1456→390 in preview. */
    margin:8px auto 12px;width:clamp(60%, 300px + 11.7vw, 90%);
    border-radius:14px;
    overflow:hidden;
    box-shadow:
        0 14px 32px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,255,255,0.45),
        inset 0 1px 0 rgba(255,255,255,0.55);
}
.welcome-image img{
    display:block;
    width:100%;
    height:260px;
    object-fit:cover;
    object-position:center 35%;
}
.welcome-image-overlay{
    position:absolute;inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 35%, rgba(26,26,46,0.12) 100%),
        linear-gradient(90deg, rgba(124,92,252,0.08) 0%, rgba(255,255,255,0) 60%);
    pointer-events:none;
}

.welcome-title{font-size:2rem;margin-bottom:2px}
.welcome-subtitle{font-size:0.9rem;margin-bottom:6px;font-weight:800;color:#9a9ab0;text-align:center}
.welcome-body{font-size:0.88rem;line-height:1.5;margin-bottom:10px;max-width:none;text-align:center}
.welcome-body + .welcome-body{margin-bottom:22px}

.welcome-stats{margin-top:10px;
    display:flex;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.stat-chip{
    flex:1 1 0;
    min-width:100px;
    display:flex;flex-direction:column;
    padding:10px 14px;
    background:rgba(255,255,255,0.38);
    border:1px solid rgba(255,255,255,0.55);
    border-radius:12px;
    backdrop-filter:blur(8px) saturate(1.05);
    -webkit-backdrop-filter:blur(8px) saturate(1.05);
    box-shadow:0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
    transition:transform .25s ease, box-shadow .25s ease;
}
.stat-chip:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6)}
.stat-num{
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.1rem;font-weight:700;
    color:#1a1a2e;line-height:1.1;
    letter-spacing:0.01em;
}
.stat-label{
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:#4a4a5e;font-weight:700;
    margin-top:4px;
}

@media (max-width:900px){
    .welcome-title{font-size:2rem}
    .welcome-image img{height:180px}
    .welcome-stats{margin-top:10px;gap:8px}
    .stat-chip{min-width:80px;padding:8px 10px}
    .stat-num{font-size:0.95rem}
    .stat-label{font-size:0.6rem}
}

/* v66: center eyebrow + title above pic */
.welcome-eyebrow{text-align:center}
.welcome-title{text-align:center}


/* === v101: functional auth wiring — login/phone-OTP/status elements === */
.is-hidden{display:none!important}

/* Login button: contain the ripple + show disabled state */
.btn-login{position:relative;overflow:hidden}
.btn-login:disabled{opacity:0.65;cursor:default;transform:none;box-shadow:none}

/* Inline status message (errors / confirmations) */
.auth-msg{
    font-size:0.82rem;font-weight:600;
    padding:10px 12px;border-radius:10px;margin-bottom:12px;
    text-align:center;line-height:1.4;
}
.auth-msg.is-error{color:#9f1239;background:rgba(244,63,94,0.14);border:1px solid rgba(244,63,94,0.3)}
.auth-msg.is-success{color:#0f766e;background:rgba(16,185,129,0.14);border:1px solid rgba(16,185,129,0.3)}

/* Phone row: country code + number */
.phone-row{display:flex;gap:8px}
.phone-code{
    flex:0 0 auto;width:96px;padding:12px 8px;
    font-size:0.85rem;font-family:inherit;color:var(--text-dark);
    background:rgba(255,255,255,0.55);
    border:1.5px solid rgba(255,255,255,0.5);
    border-radius:10px;outline:none;cursor:pointer;transition:all 0.25s ease;
}
.phone-code:focus{border-color:var(--purple);background:rgba(255,255,255,0.8);box-shadow:0 0 0 3px rgba(124,92,252,0.12)}
.phone-number-wrap{flex:1 1 auto}
.phone-hint{font-size:0.74rem;color:var(--text-mid);margin-top:6px;line-height:1.4}

/* OTP delivery channel selector */
.otp-channel{margin-bottom:14px}
.otp-channel-label{display:block;font-size:0.78rem;font-weight:600;color:var(--text-mid);margin-bottom:6px}
.otp-channel-options{display:flex;gap:8px}
.otp-channel-btn{
    flex:1;padding:9px 12px;font-size:0.82rem;font-weight:600;font-family:inherit;
    color:var(--text-mid);background:rgba(255,255,255,0.4);
    border:1.5px solid rgba(255,255,255,0.5);border-radius:10px;cursor:pointer;
    transition:all 0.2s ease;
}
.otp-channel-btn.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--purple) 0%,#9F7AEA 50%,var(--pink) 100%)}

/* Spacing between stacked buttons in phone mode */
#phone-group .btn-login + .form-group{margin-top:14px}

/* v100: carousel arrow overlay buttons — only addition to Landing 2 CSS */
.carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;padding:0;border-radius:50%;
    background:rgba(0,0,0,0.35);
    color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:5;
    transition:background .25s ease, transform .25s ease;
    opacity:0.75;
}
.carousel-arrow:hover{background:rgba(0,0,0,0.65);opacity:1;transform:translateY(-50%) scale(1.06)}
.carousel-arrow svg{width:18px;height:18px}
.carousel-prev{left:10px}
.carousel-next{right:10px}

/* v110: language switcher (flag → English / Français / Kreyòl) at the bottom of
   the login card. Markup + wiring come from the shared i18n.js; ported from the
   platform stylesheet, recoloured to the landing's --purple accent. */
.lang-selector{position:relative;display:block;width:fit-content;margin:16px auto 0}
.lang-selector__btn{background:none;border:none;padding:2px;font-size:18px;line-height:1;cursor:pointer;border-radius:4px;transition:background .15s ease}
.lang-selector__btn:hover{background:rgba(0,0,0,0.06)}
.lang-selector__menu{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(187,213,246,0.6);border-radius:8px;box-shadow:0 4px 16px rgba(53,56,67,0.12);overflow:hidden;min-width:110px;z-index:20}
.lang-selector__menu.is-open{display:block}
.lang-selector__option{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:6px 12px;font-size:0.78rem;color:#333;cursor:pointer;text-align:left;white-space:nowrap;transition:background .12s ease}
.lang-selector__option:hover{background:rgba(235,244,255,0.9)}
.lang-selector__option.is-active{color:var(--purple);font-weight:600;background:rgba(235,244,255,0.5)}
.lang-selector__flag{font-size:14px;line-height:1}

/* v106: mobile-only "Log in / Register" jump button under the title.
   Glassy pill, sized to its text and centered. Hidden on desktop, where the
   login card already sits beside the info column. */
.login-jump{display:none}
@media(max-width:900px){
    .login-jump{
        display:flex;align-items:center;gap:7px;
        width:fit-content;margin:6px auto 16px;
        padding:9px 20px;
        font-family:inherit;font-size:0.82rem;font-weight:600;letter-spacing:0.01em;
        color:#3a3a52;
        background:rgba(255,255,255,0.42);
        border:1px solid rgba(255,255,255,0.65);
        border-radius:999px;
        cursor:pointer;
        -webkit-backdrop-filter:blur(8px) saturate(1.1);
        backdrop-filter:blur(8px) saturate(1.1);
        box-shadow:0 2px 10px rgba(80,60,160,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
        transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .login-jump:hover{background:rgba(255,255,255,0.7);transform:translateY(-1px);box-shadow:0 6px 16px rgba(80,60,160,0.16), inset 0 1px 0 rgba(255,255,255,0.7)}
    .login-jump:active{transform:translateY(0)}
    .login-jump__chevron{opacity:0.7;flex-shrink:0}
}