/* ======================================================
   HEADER
====================================================== */

.slab-header{

    position:sticky;
    top:0;
    z-index:1000;

    backdrop-filter:blur(20px);

    background:rgba(2,6,23,.82);

    border-bottom:1px solid rgba(59,130,246,.08);
}

.slab-header-inner{

    height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.slab-logo{

    display:flex;
    align-items:center;
    gap:14px;
}

.slab-logo-icon{

    width:16px;
    height:16px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    box-shadow:
        0 0 20px rgba(59,130,246,.65);
}

.slab-logo-text{

    font-size:1.2rem;
    font-weight:700;
}

.slab-nav{

    display:flex;
    align-items:center;
    gap:28px;
}

.slab-nav a{

    color:#cbd5e1;
    transition:.25s ease;
}

.slab-nav a:hover{
    color:#fff;
}

.slab-nav-cta{

    padding:12px 18px;

    border-radius:12px;

    background:rgba(37,99,235,.18);

    border:1px solid rgba(59,130,246,.22);
}

.slab-mobile-toggle{

    display:none;

    background:none;
    border:none;

    flex-direction:column;
    gap:5px;

    cursor:pointer;
}

.slab-mobile-toggle span{

    width:24px;
    height:2px;

    background:#fff;
}

.slab-mobile-menu{

    display:none;

    flex-direction:column;

    padding:20px;

    background:#020617;

    border-top:1px solid rgba(59,130,246,.1);
}

.slab-mobile-menu.active{
    display:flex;
}

.slab-mobile-menu a{
    padding:14px 0;
    color:#fff;
}

/* ======================================================
   HERO
====================================================== */

.slab-hero{

    padding:120px 0;
}

.slab-hero-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.slab-badge{

    display:inline-flex;

    padding:10px 16px;

    margin-bottom:24px;

    border-radius:999px;

    background:rgba(37,99,235,.15);

    border:1px solid rgba(59,130,246,.18);

    color:#cbd5e1;
}

.slab-hero h1{

    font-size:4.2rem;
    line-height:1;

    margin-bottom:28px;
}

.slab-hero p{

    font-size:1.1rem;

    max-width:640px;

    margin-bottom:36px;
}

.slab-hero-actions{

    display:flex;
    gap:16px;
}

.slab-btn-secondary{

    background:transparent;

    border:1px solid rgba(59,130,246,.2);
}

/* ======================================================
   DASHBOARD PREVIEW
====================================================== */

.slab-dashboard-preview{

    padding:26px;

    border-radius:28px;

    background:rgba(15,23,42,.9);

    border:1px solid rgba(59,130,246,.15);

    box-shadow:
        0 20px 60px rgba(37,99,235,.18);
}

.slab-preview-topbar{

    display:flex;
    gap:10px;

    margin-bottom:24px;
}

.slab-preview-topbar span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#334155;
}

.slab-preview-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.slab-preview-card{

    padding:22px;

    border-radius:18px;

    background:#111c34;

    border:1px solid rgba(59,130,246,.08);
}

.slab-preview-card h4{

    margin-bottom:12px;

    color:#94a3b8;

    font-size:.9rem;
}

.slab-preview-card strong{

    font-size:1.1rem;
}

/* ======================================================
   SECTION HEADING
====================================================== */

.slab-section-heading{

    text-align:center;

    margin-bottom:60px;
}

.slab-section-heading span{

    color:#3b82f6;

    letter-spacing:2px;

    font-size:.85rem;
}

.slab-section-heading h2{

    margin-top:18px;

    font-size:3rem;
}

/* ======================================================
   FEATURES
====================================================== */

.slab-feature-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.slab-feature-card{

    padding:32px;
}

.slab-feature-icon{

    font-size:2rem;

    margin-bottom:20px;
}

.slab-feature-card h3{

    margin-bottom:18px;

    font-size:1.3rem;
}

/* ======================================================
   CTA
====================================================== */

.slab-cta-section{

    padding:40px 0 120px;
}

.slab-cta-card{

    padding:70px;

    text-align:center;
}

.slab-cta-card h2{

    font-size:3rem;

    margin-bottom:24px;
}

.slab-cta-card p{

    max-width:760px;

    margin:auto auto 32px;
}

/* ======================================================
   FOOTER
====================================================== */

.slab-footer{

    padding:80px 0 40px;

    border-top:1px solid rgba(59,130,246,.08);

    background:#020617;
}

.slab-footer-grid{

    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px;

    margin-bottom:60px;
}

.slab-footer-logo{

    font-size:1.5rem;
    font-weight:700;

    margin-bottom:20px;
}

.slab-footer-text{

    max-width:520px;
}

.slab-footer-column h4{

    margin-bottom:20px;
}

.slab-footer-column ul{

    display:flex;
    flex-direction:column;
    gap:14px;

    color:#94a3b8;
}

.slab-footer-disclaimer{

    padding-top:30px;

    border-top:1px solid rgba(59,130,246,.08);

    color:#64748b;

    line-height:1.7;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:980px){

    .slab-hero-grid,
    .slab-feature-grid,
    .slab-footer-grid{

        grid-template-columns:1fr;
    }

    .slab-hero h1{
        font-size:3rem;
    }

}

@media(max-width:768px){

    .slab-nav{
        display:none;
    }

    .slab-mobile-toggle{
        display:flex;
    }

    .slab-hero{
        padding:80px 0;
    }

    .slab-hero h1{
        font-size:2.4rem;
    }

    .slab-section-heading h2,
    .slab-cta-card h2{

        font-size:2rem;
    }

    .slab-cta-card{
        padding:40px 24px;
    }

    .slab-hero-actions{
        flex-direction:column;
    }

}