*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:'Garet',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#fff;
    color:#0E2A40;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-top:64px;
}

/* ── NAV ── */
.navbar{
    position:fixed;
    top:0;left:0;
    width:100%;
    background:#fff;
    border-bottom:1px solid rgba(14,42,64,.1);
    z-index:1000;
    height:64px;
    display:flex;
    align-items:center;
}

.nav-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nav-logo-img{height:44px;width:auto;display:block;}

.nav-menu{display:flex;list-style:none;gap:28px;align-items:center;}

.nav-link{
    color:#0E2A40;
    text-decoration:none;
    font-size:15px;
    transition:opacity .2s;
    white-space:nowrap;
}
.nav-link:hover{opacity:.6;}

.nav-cta{
    background:#0E2A40;
    color:#fff !important;
    padding:9px 18px;
    border-radius:999px;
    font-size:14px;
}
.nav-cta:hover{opacity:.85;}

.nav-mobile-login{
    display:none;
    color:#0E2A40;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    padding:6px 2px;
    transition:opacity .2s;
}
.nav-mobile-login:hover{opacity:.6;}

/* ── HOME ── */
.container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    min-height:calc(100vh - 64px);
}

.logo{width:min(200px,55vw);height:auto;display:block;margin:0 auto 36px;}

h1{
    font-size:clamp(26px,5vw,46px);
    font-weight:400;
    line-height:1.4;
    margin-bottom:16px;
}

.word{display:inline-block;opacity:0.28;animation:fadeInOut 4.5s ease-in-out infinite;}
.word-1{animation-delay:0s;}
.word-2{animation-delay:1.5s;}
.word-3{animation-delay:3s;}

@keyframes fadeInOut{
    0%,100%{opacity:0.28;transform:translateY(0);}
    25%,75%{opacity:1;transform:translateY(0);}
}

.hero-subheading{
    font-size:clamp(15px,3vw,19px);
    opacity:.65;
    margin-bottom:24px;
    max-width:460px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:clamp(11px,2.5vw,13px);
    font-weight:600;
    color:#0E2A40;
    background:rgba(14,42,64,.06);
    border:1px solid rgba(14,42,64,.14);
    border-radius:999px;
    padding:6px 14px;
    letter-spacing:.3px;
    margin-bottom:20px;
}
.status-badge::before{
    content:'';
    width:7px;height:7px;
    border-radius:50%;
    background:#f59e0b;
    flex-shrink:0;
    animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.5;transform:scale(.75);}
}

/* ── AUDIENCE SPLIT ── */
.audience-split{
    display:flex;
    align-items:stretch;
    max-width:520px;
    width:100%;
    margin-top:4px;
    border:1.5px solid rgba(14,42,64,.1);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 24px rgba(14,42,64,.06);
}
.audience-card{
    flex:1;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:left;
}
.audience-employee{background:#fff;}
.audience-employer{background:rgba(14,42,64,.03);}
.audience-rule{
    width:1px;
    background:rgba(14,42,64,.08);
    flex-shrink:0;
    margin:16px 0;
}
.audience-tag{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:rgba(14,42,64,.38);
}
.audience-desc{
    font-size:13.5px;
    color:rgba(14,42,64,.65);
    line-height:1.5;
    margin:0;
    flex:1;
}
.audience-form{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.audience-email{
    width:100%;
    padding:10px 14px;
    border:1.5px solid rgba(14,42,64,.13);
    border-radius:8px;
    font-size:14px;
    font-family:inherit;
    color:#0E2A40;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
    background:#fff;
    box-sizing:border-box;
}
.audience-email:focus{
    border-color:#0E2A40;
    box-shadow:0 0 0 3px rgba(14,42,64,.07);
}
.audience-submit{
    width:100%;
    padding:10px 14px;
    background:#0E2A40;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:opacity .2s;
}
.audience-submit:hover{opacity:.88;}
.audience-submit:disabled{opacity:.4;cursor:default;}
.audience-msg{font-size:12px;min-height:16px;margin:0;opacity:.65;}
.audience-employer-btn{
    display:block;
    padding:10px 14px;
    border:1.5px solid rgba(14,42,64,.2);
    border-radius:8px;
    color:#0E2A40;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    text-align:center;
    transition:background .18s,color .18s,border-color .18s;
    margin-top:auto;
}
.audience-employer-btn:hover{
    background:#0E2A40;
    color:#fff;
    border-color:#0E2A40;
}

/* ── MODAL ── */
.cta-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(14,42,64,.5);
    z-index:2000;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.cta-overlay.active{display:flex;}

.cta-modal{
    background:#fff;
    border-radius:10px;
    padding:40px 30px;
    max-width:460px;
    width:100%;
    position:relative;
    text-align:center;
}

.cta-close{
    position:absolute;top:12px;right:16px;
    background:none;border:none;
    font-size:26px;color:#0E2A40;
    cursor:pointer;opacity:.4;line-height:1;
}

.cta-heading{font-size:clamp(18px,4vw,24px);margin-bottom:8px;font-weight:600;}
.cta-text{font-size:15px;opacity:.65;margin-bottom:22px;}

.early-access-form{display:flex;gap:10px;flex-wrap:wrap;}

.email-input{
    flex:1;min-width:0;
    padding:11px 14px;
    border:1px solid rgba(14,42,64,.2);
    border-radius:999px;
    font-size:15px;
    font-family:inherit;
}
.email-input:focus{outline:none;border-color:#0E2A40;}

.submit-btn{
    padding:11px 24px;
    background:#0E2A40;color:#fff;
    border:none;border-radius:999px;
    font-size:15px;font-weight:500;
    cursor:pointer;font-family:inherit;
    transition:opacity .2s;
    white-space:nowrap;
}
.submit-btn:hover{opacity:.85;}

/* ── INNER PAGES ── */
.page-container{
    max-width:780px;
    margin:0 auto;
    padding:60px 20px 80px;
    width:100%;
}

.page-header{text-align:center;margin-bottom:56px;}

.page-header h1{
    font-size:clamp(28px,6vw,44px);
    font-weight:600;
    margin-bottom:12px;
}

.page-subtitle{
    font-size:clamp(15px,3.5vw,19px);
    opacity:.65;
}

.story-content,.how-it-works-content{max-width:660px;margin:0 auto;}

.story-section,.step-section,.info-section{
    margin-bottom:48px;
    padding-bottom:48px;
    border-bottom:1px solid rgba(14,42,64,.08);
}
.story-section:last-of-type,.step-section:last-of-type,.info-section:last-of-type{
    border-bottom:none;
}

.story-section h2,.step-section h2,.info-section h2{
    font-size:clamp(20px,4.5vw,26px);
    font-weight:600;
    margin-bottom:16px;
    line-height:1.3;
}

.story-section p,.step-section p,.info-section p{
    font-size:clamp(15px,3vw,17px);
    line-height:1.75;
    margin-bottom:14px;
    opacity:.82;
}

.highlight-text{
    font-size:clamp(17px,3.5vw,21px);
    font-weight:600;
    margin-top:24px;
    opacity:1;
    line-height:1.4;
}

.step-number{
    width:48px;height:48px;
    background:#0E2A40;color:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:700;
    margin-bottom:18px;
}

.step-note{font-style:italic;opacity:.6;font-size:clamp(13px,2.8vw,15px);margin-top:10px;}

.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:24px;
}

.feature-item{
    padding:22px;
    background:rgba(14,42,64,.03);
    border-radius:8px;
    border:1px solid rgba(14,42,64,.07);
}

.feature-item h3{font-size:clamp(15px,3vw,18px);font-weight:600;margin-bottom:8px;}
.feature-item p{font-size:clamp(13px,2.8vw,15px);margin:0;line-height:1.6;opacity:.8;}

.benefits-list{list-style:none;padding:0;margin-top:18px;}
.benefits-list li{
    font-size:clamp(14px,3vw,17px);
    opacity:.82;
    padding:9px 0 9px 28px;
    position:relative;
    line-height:1.6;
}
.benefits-list li:before{content:'✓';position:absolute;left:0;font-weight:700;}

/* ── EMPLOYER PAGE ── */
.emp-hero{
    background:#0E2A40;
    color:#fff;
    padding:100px 20px 80px;
    text-align:center;
}
.emp-hero-inner{max-width:720px;margin:0 auto;}
.emp-eyebrow{
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.5;
    margin-bottom:20px;
}
.emp-hero-title{
    font-size:clamp(28px,5.5vw,48px);
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
    color:#fff;
}
.emp-hero-sub{
    font-size:clamp(15px,3vw,18px);
    opacity:.65;
    line-height:1.7;
    max-width:560px;
    margin:0 auto 32px;
}
.emp-hero-btn{
    display:inline-block;
    padding:14px 32px;
    background:#fff;
    color:#0E2A40;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:opacity .2s;
    font-family:inherit;
}
.emp-hero-btn:hover{opacity:.88;}

/* Sections */
.emp-section{padding:72px 20px;}
.emp-section-alt{background:rgba(14,42,64,.025);}
.emp-section-inner{max-width:900px;margin:0 auto;}
.emp-narrow{max-width:660px;}
.emp-section-title{
    font-size:clamp(22px,4.5vw,32px);
    font-weight:700;
    margin-bottom:16px;
    text-align:center;
    line-height:1.3;
}
.emp-section-sub{
    font-size:clamp(14px,3vw,17px);
    opacity:.6;
    text-align:center;
    margin-bottom:40px;
}
.emp-body-text{
    font-size:clamp(15px,3vw,17px);
    line-height:1.75;
    opacity:.8;
    margin-bottom:14px;
}

/* Two column */
.emp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px;}
.emp-col p{font-size:clamp(14px,2.8vw,16px);line-height:1.75;opacity:.78;}

/* Steps */
.emp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.emp-step{text-align:center;}
.emp-step-num{
    width:40px;height:40px;
    background:#0E2A40;color:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:700;
    margin:0 auto 14px;
}
.emp-step h3{font-size:clamp(14px,2.8vw,16px);font-weight:700;margin-bottom:8px;}
.emp-step p{font-size:clamp(13px,2.5vw,14px);opacity:.65;line-height:1.6;}

/* 3-col grid */
.emp-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:32px;
}
.emp-card{
    padding:28px 24px;
    border:1px solid rgba(14,42,64,.08);
    border-radius:10px;
    background:#fff;
}
.emp-card h3{font-size:clamp(15px,3vw,17px);font-weight:700;margin-bottom:8px;}
.emp-card p{font-size:clamp(13px,2.5vw,15px);opacity:.65;line-height:1.6;margin:0;}

/* Payroll logos */
.emp-payroll-logos{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:28px;
}
.emp-payroll-logos span{
    padding:10px 20px;
    border:1px solid rgba(14,42,64,.1);
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:#0E2A40;
    opacity:.7;
}

/* Form section */
.emp-section-form{background:#0E2A40;padding:80px 20px;}
.emp-section-form .emp-section-title{color:#fff;}
.emp-form-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
}
.emp-form-copy{color:rgba(255,255,255,.75);}
.emp-form-copy .emp-body-text{color:rgba(255,255,255,.6);opacity:1;}
.emp-form-points{margin-top:28px;display:flex;flex-direction:column;gap:16px;}
.emp-form-point{
    display:flex;align-items:center;gap:12px;
    color:rgba(255,255,255,.7);
    font-size:15px;
}
.emp-form-point svg{flex-shrink:0;stroke:rgba(255,255,255,.5);}
.emp-form-card{
    background:#fff;
    border-radius:12px;
    padding:32px 28px;
}

/* Form fields */
.employer-form{text-align:left;}
.employer-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:4px;}
.form-group-full{grid-column:1/-1;}
.form-group label{font-size:13px;font-weight:600;color:#0E2A40;}
.form-optional{font-weight:400;opacity:.45;}
.form-group input,.form-group select,.form-group textarea{
    padding:10px 12px;
    border:1px solid rgba(14,42,64,.18);
    border-radius:8px;
    font-size:14px;
    font-family:inherit;
    color:#0E2A40;
    background:#fff;
    transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#0E2A40;}
.form-group textarea{resize:vertical;min-height:60px;}
.employer-form-disclosure{font-size:12px;opacity:.45;margin:14px 0 12px;line-height:1.5;}
.employer-form-disclosure a{color:inherit;text-decoration:underline;}
.employer-submit{width:100%;margin-top:4px;border-radius:8px;padding:13px;font-size:15px;}

@media(max-width:820px){
    .emp-steps{grid-template-columns:repeat(2,1fr);gap:20px;}
    .emp-grid-3{grid-template-columns:1fr 1fr;}
    .emp-form-layout{grid-template-columns:1fr;gap:32px;}
    .emp-two-col{grid-template-columns:1fr;gap:20px;}
}
@media(max-width:600px){
    .emp-hero{padding:80px 20px 60px;}
    .emp-section{padding:48px 16px;}
    .emp-steps{grid-template-columns:1fr 1fr;}
    .emp-grid-3{grid-template-columns:1fr;}
    .emp-form-card{padding:24px 18px;}
    .employer-form-grid{grid-template-columns:1fr;}
    .emp-section-form{padding:48px 16px;}
    .emp-payroll-logos span{padding:8px 14px;font-size:13px;}
}

/* ── FOOTER ── */
footer{
    width:100%;
    padding:40px 20px 28px;
    text-align:center;
    border-top:1px solid rgba(14,42,64,.1);
    margin-top:auto;
}

.footer-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 24px;
    margin-bottom:28px;
}
.footer-link{
    color:#0E2A40;
    text-decoration:none;
    font-size:13px;
    opacity:.55;
    transition:opacity .2s;
}
.footer-link:hover{opacity:1;}

.social-link{display:inline-block;color:#0E2A40;margin-bottom:12px;transition:opacity .2s;}
.social-link:hover{opacity:.6;}
footer p{font-size:13px;opacity:.5;}

/* ── SEO hidden ── */
.seo-content{
    position:absolute;left:-9999px;
    width:1px;height:1px;overflow:hidden;
}

/* ── HAMBURGER ── */
.hamburger{
    display:none;
    background:none;border:none;cursor:pointer;
    width:32px;height:24px;position:relative;
    padding:0;
}
.hamburger span{
    display:block;width:100%;height:2px;background:#0E2A40;
    position:absolute;left:0;transition:all .3s;
}
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:11px;}
.hamburger span:nth-child(3){top:22px;}
.hamburger.open span:nth-child(1){top:11px;transform:rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){top:11px;transform:rotate(-45deg);}


/* ── MOBILE ── */
/* ── BOTTOM NAV ── */
.bottom-nav{
    display:none;
}
@media(max-width:600px){
    .bottom-nav{
        display:flex;
        position:fixed;
        bottom:0;left:0;
        width:100%;
        background:#fff;
        border-top:1px solid rgba(14,42,64,.1);
        z-index:1000;
        padding:6px 0 max(8px, env(safe-area-inset-bottom));
        justify-content:space-around;
    }
    .bottom-nav-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:3px;
        color:rgba(14,42,64,.35);
        text-decoration:none;
        font-size:10px;
        flex:1;
        transition:color .2s;
    }
    .bottom-nav-item.bottom-nav-active,
    .bottom-nav-item:hover{color:#0E2A40;}
    body{padding-bottom:64px;}
}

@media(max-width:600px){
    .hamburger{display:none;}
    .nav-menu{display:none !important;}
    .nav-mobile-login{display:block;}
    .nav-logo-img{height:36px;}

    .logo{width:min(160px,50vw);margin-bottom:28px;}

    .page-container{padding:48px 16px 60px;}
    .page-header{margin-bottom:40px;}

    .cta-modal{padding:32px 20px;}
    .early-access-form{flex-direction:column;}
    .submit-btn{width:100%;}
    .audience-split{flex-direction:column;max-width:100%;}
    .audience-rule{width:auto;height:1px;margin:0 16px;}

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

    footer{padding:22px 16px;}
}


/* ── APP MOCKUPS ── */
.mockup-section{margin-top:80px;text-align:center;padding-bottom:20px;}
.mockup-heading{font-size:clamp(20px,4.5vw,28px);font-weight:600;margin-bottom:6px;}
.mockup-subheading{font-size:13px;opacity:.45;margin-bottom:48px;letter-spacing:.4px;}

.mockup-row{
    display:flex;
    justify-content:center;
    gap:24px;
    align-items:flex-start;
    flex-wrap:nowrap;
}

/* iPhone 15 frame — 393:852 ratio at 220px wide = 477px tall */
.phone-frame{
    width:220px;
    min-width:220px;
    background:#1a1a1a;
    border-radius:46px;
    padding:10px;
    box-shadow:0 0 0 1px #3a3a3a,0 28px 70px rgba(14,42,64,.22),inset 0 0 0 1px #2a2a2a;
    flex-shrink:0;
    position:relative;
}
.phone-frame:nth-child(2){
    width:220px;
    min-width:220px;
    border-radius:46px;
    padding:10px;
    transform:none;
    opacity:1;
    box-shadow:0 0 0 1px #3a3a3a,0 28px 70px rgba(14,42,64,.22),inset 0 0 0 1px #2a2a2a;
}

/* side buttons */
.phone-frame::before{
    content:'';position:absolute;right:-3px;top:72px;
    width:3px;height:52px;background:#2e2e2e;
    border-radius:0 2px 2px 0;box-shadow:0 72px 0 #2e2e2e;
}
.phone-frame::after{
    content:'';position:absolute;left:-3px;top:54px;
    width:3px;height:32px;background:#2e2e2e;
    border-radius:2px 0 0 2px;box-shadow:0 44px 0 #2e2e2e,0 88px 0 #2e2e2e;
}

.phone-screen{
    background:#f4f6f9;
    border-radius:38px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:477px;
}

/* Dynamic Island */
.phone-notch{background:#0E2A40;display:flex;justify-content:center;padding:8px 0 4px;}
.phone-island{width:76px;height:20px;background:#1a1a1a;border-radius:16px;}

/* Status bar */
.app-status-bar{background:#0E2A40;display:flex;justify-content:space-between;align-items:center;padding:1px 14px 5px;}
.app-time{color:#fff;font-size:11px;font-weight:600;}
.app-status-icons{display:flex;align-items:center;gap:4px;}

/* Dashboard header */
.app-header-bar{background:#0E2A40;display:flex;justify-content:space-between;align-items:center;padding:6px 14px 10px;}
.app-greeting{color:rgba(255,255,255,.6);font-size:10px;margin-bottom:1px;}
.app-username{color:#fff;font-size:13px;font-weight:700;}
.app-avatar{width:28px;height:28px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;border:1.5px solid rgba(255,255,255,.2);}

/* Inner screen nav */
.app-nav-row{background:#0E2A40;display:flex;justify-content:space-between;align-items:center;padding:6px 14px 10px;}
.app-back{color:rgba(255,255,255,.7);font-size:12px;cursor:default;}
.app-nav-title{color:#fff;font-size:13px;font-weight:700;}

/* Body */
.app-body{padding:9px 11px 7px;display:flex;flex-direction:column;gap:7px;flex:1;overflow:hidden;}
.app-body-center{align-items:center;text-align:center;}

/* Hero card */
.app-hero-card{background:#0E2A40;border-radius:14px;padding:11px;color:#fff;}
.app-hero-label{font-size:9px;opacity:.6;margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px;}
.app-hero-amount{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;}
.app-hero-meta{display:flex;justify-content:space-between;font-size:9px;opacity:.7;margin-bottom:7px;}
.app-hero-badge{color:#4ade80;font-weight:600;}
.app-progress-bar{background:rgba(255,255,255,.15);border-radius:3px;height:4px;margin-bottom:3px;}
.app-progress-fill{background:#4ade80;border-radius:3px;height:100%;}
.app-progress-labels{display:flex;justify-content:space-between;font-size:8px;opacity:.5;}

/* Stats */
.app-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.app-stat-box{background:#fff;border-radius:10px;padding:6px 4px;text-align:center;border:1px solid rgba(14,42,64,.06);}
.app-stat-label{font-size:7px;opacity:.5;margin-bottom:1px;text-transform:uppercase;letter-spacing:.2px;}
.app-stat-val{font-size:10px;font-weight:700;color:#0E2A40;}
.app-stat-sub{font-size:7px;opacity:.4;margin-top:1px;}

/* Action button */
.app-action-btn{background:#0E2A40;color:#fff;border-radius:11px;padding:9px;font-size:12px;font-weight:700;text-align:center;cursor:default;}

/* Recent */
.app-recent{background:#fff;border-radius:11px;padding:8px;border:1px solid rgba(14,42,64,.06);}
.app-recent-title{font-size:8px;font-weight:700;opacity:.4;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.app-recent-item{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid rgba(14,42,64,.05);}
.app-recent-item:last-child{border-bottom:none;padding-bottom:0;}
.app-recent-icon{width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.app-recent-icon-blue{background:#3b82f6;}
.app-recent-icon-green{background:#22c55e;}
.app-recent-info{flex:1;}
.app-recent-text{font-size:10px;font-weight:600;color:#0E2A40;}
.app-recent-time{font-size:8px;opacity:.4;}

/* Tab bar */
.app-tab-bar{background:#fff;border-top:1px solid rgba(14,42,64,.08);display:flex;justify-content:space-around;padding:5px 0 3px;}
.app-tab{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(14,42,64,.3);font-size:8px;cursor:default;min-width:34px;}
.app-tab-active{color:#0E2A40;}

/* Home indicator */
.phone-home-bar{background:#fff;display:flex;justify-content:center;padding:4px 0 6px;}
.phone-home-bar::after{content:'';width:80px;height:3px;background:#0E2A40;border-radius:3px;opacity:.2;}

/* Withdraw screen */
.app-section-label{font-size:10px;font-weight:700;opacity:.45;text-transform:uppercase;letter-spacing:.4px;}
.app-amount-display{font-size:32px;font-weight:800;color:#0E2A40;letter-spacing:-1px;text-align:center;}
.app-amount-sub{font-size:9px;opacity:.4;text-align:center;margin-top:-3px;}
.app-slider-track{background:rgba(14,42,64,.1);border-radius:5px;height:5px;position:relative;margin:4px 0;}
.app-slider-fill{background:#0E2A40;border-radius:5px;height:100%;}
.app-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;background:#fff;border-radius:50%;border:2px solid #0E2A40;box-shadow:0 2px 5px rgba(14,42,64,.2);}
.app-slider-labels{display:flex;justify-content:space-between;font-size:8px;opacity:.4;margin-top:1px;}

.app-breakdown{background:#fff;border-radius:11px;padding:8px;border:1px solid rgba(14,42,64,.06);}
.app-breakdown-title{font-size:9px;font-weight:700;opacity:.4;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.app-info-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#0E2A40;padding:3px 0;border-bottom:1px solid rgba(14,42,64,.05);}
.app-info-row-last{border-bottom:none !important;}
.app-info-val{font-weight:700;}
.app-info-green{color:#16a34a;}
.app-notice{background:rgba(14,42,64,.05);border-radius:8px;padding:6px 10px;font-size:10px;font-weight:600;color:#0E2A40;opacity:.7;text-align:center;}

/* Confirmation */
.app-success-ring{width:50px;height:50px;border-radius:50%;background:rgba(22,163,74,.1);display:flex;align-items:center;justify-content:center;margin:4px auto 6px;}
.app-success-icon{width:38px;height:38px;background:#16a34a;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;}
.app-success-title{font-size:15px;font-weight:800;color:#0E2A40;}
.app-success-amount{font-size:26px;font-weight:800;color:#0E2A40;letter-spacing:-1px;margin:1px 0;}
.app-success-sub{font-size:9px;opacity:.45;margin-bottom:7px;}
.app-receipt{background:#fff;border-radius:11px;padding:8px;width:100%;border:1px solid rgba(14,42,64,.06);margin-bottom:6px;}
.app-status{color:#16a34a;font-weight:700;}
.app-remaining{font-size:10px;opacity:.5;margin-bottom:4px;}
.app-remaining strong{opacity:1;color:#0E2A40;}

@media(max-width:820px){
    .mockup-row{gap:16px;overflow-x:auto;justify-content:flex-start;padding:0 20px 16px;}
    .phone-frame,.phone-frame:nth-child(2){width:200px;min-width:200px;border-radius:42px;}
    .phone-screen{height:434px;}
}
@media(max-width:600px){
    .mockup-row{gap:12px;overflow-x:auto;justify-content:flex-start;padding:0 20px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
    .mockup-row::-webkit-scrollbar{display:none;}
    .phone-frame,.phone-frame:nth-child(2),.phone-frame:last-child{display:block;width:62vw;min-width:180px;border-radius:36px;flex-shrink:0;scroll-snap-align:center;}
    .phone-screen{height:auto;aspect-ratio:393/852;}
}


/* ── LOGIN PANEL ── */
.login-panel{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
}
.login-panel.login-open{display:block;}

.login-overlay{
    position:absolute;
    inset:0;
    background:rgba(14,42,64,.45);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.login-inner{
    position:absolute;
    top:0;right:0;
    width:100%;
    max-width:440px;
    height:100%;
    background:#fff;
    box-shadow:-20px 0 60px rgba(14,42,64,.15);
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    animation:loginSlideIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes loginSlideIn{
    from{transform:translateX(100%);}
    to{transform:translateX(0);}
}

.login-close{
    position:absolute;top:20px;right:20px;
    background:none;border:none;
    font-size:28px;color:#0E2A40;
    cursor:pointer;opacity:.3;line-height:1;
    padding:4px;
    transition:opacity .2s;
}
.login-close:hover{opacity:.8;}

.login-brand{
    margin-bottom:32px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(14,42,64,.08);
}
.login-logo{height:36px;width:auto;display:block;margin-bottom:6px;}
.login-tagline{font-size:13px;opacity:.4;margin:0;}

.login-title{
    font-size:24px;
    font-weight:700;
    color:#0E2A40;
    margin:0 0 6px;
}
.login-sub{
    font-size:15px;
    opacity:.55;
    margin:0 0 24px;
    line-height:1.5;
}

.login-otp-icon{
    width:56px;height:56px;
    background:rgba(14,42,64,.05);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
}

.login-field{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.login-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(14,42,64,.5);}
.login-input{
    padding:13px 16px;
    border:1.5px solid rgba(14,42,64,.12);
    border-radius:10px;
    font-size:16px;
    font-family:inherit;
    color:#0E2A40;
    transition:border-color .2s,box-shadow .2s;
    background:#fff;
}
.login-input:focus{
    outline:none;
    border-color:#0E2A40;
    box-shadow:0 0 0 3px rgba(14,42,64,.08);
}

.login-otp-input{
    text-align:center;
    letter-spacing:10px;
    font-size:28px;
    font-weight:700;
    padding:16px;
}

.login-error{
    color:#c0392b;
    font-size:13px;
    min-height:18px;
    margin:0 0 4px;
}

.login-btn{
    width:100%;
    padding:14px;
    background:#0E2A40;
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:opacity .2s,transform .1s;
}
.login-btn:hover{opacity:.9;}
.login-btn:active{transform:scale(.99);}
.login-btn:disabled{opacity:.35;cursor:default;transform:none;}

.login-back{
    display:block;
    width:100%;
    margin-top:12px;
    padding:10px;
    background:none;
    border:none;
    color:rgba(14,42,64,.45);
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
    text-align:center;
    transition:color .2s;
}
.login-back:hover{color:#0E2A40;}

.login-footer{
    margin-top:auto;
    padding-top:24px;
}

.login-trust{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:rgba(14,42,64,.4);
    margin-bottom:12px;
}

.login-employee-hint{
    font-size:13px;
    opacity:.4;
    margin:0;
    line-height:1.5;
}

@media(max-width:600px){
    .login-inner{
        max-width:100%;
        padding:24px 20px;
        box-shadow:none;
    }
    .login-title{font-size:22px;}
    .login-otp-input{font-size:24px;letter-spacing:8px;}
}


/* ── FAQ ACCORDION ── */
.faq-list{display:flex;flex-direction:column;gap:0;}

.faq-item{
    border-bottom:1px solid rgba(14,42,64,.08);
}
.faq-item:last-child{border-bottom:none;}

.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    font-size:clamp(15px,3vw,17px);
    font-weight:600;
    color:#0E2A40;
    cursor:pointer;
    list-style:none;
    line-height:1.4;
}
.faq-question::-webkit-details-marker{display:none;}
.faq-question::after{
    content:'+';
    font-size:22px;
    font-weight:400;
    opacity:.35;
    flex-shrink:0;
    margin-left:16px;
    transition:transform .2s;
}
details[open] .faq-question::after{
    content:'−';
}

.faq-answer{
    font-size:clamp(14px,2.8vw,16px);
    line-height:1.75;
    opacity:.75;
    padding:0 0 20px;
}
.faq-answer p{margin:0 0 10px;}
.faq-answer p:last-child{margin-bottom:0;}
.faq-answer .benefits-list{margin-top:10px;}