@import url('./navbar.css');
@import url('./footer.css');
@import url('./responsive.css');

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

/* Fixed navbar spacing */
body {
    padding-top: calc(80px + var(--banner-height, 0px));
}

body.home-page {
    padding-top: 0;
}

main {
    display: block;
}

/* =========================================
CTA SECTION (DARK THEME)
========================================= */

.homepage-cta{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        #022c22,
        #064e3b,
        #065f46
    );
    position:relative;
    overflow:hidden;
}

/* BLUE GLOW */
.cta-blue-glow{
    position:absolute;
    bottom:-200px;
    left:-200px;
    width:500px;
    height:500px;
    background:radial-gradient(
        circle,
        rgba(90,130,255,0.35),
        transparent 70%
    );
    filter:blur(140px);
    z-index:0;
}

/* CONTENT */
.cta-container{
    position:relative;
    z-index:2;
    color:white;
}

/* TITLE */
.cta-title{
    font-size:40px;
    font-weight:700;
    margin-bottom:16px;
}

/* SUBTITLE */
.cta-subtitle{
    font-size:18px;
    max-width:650px;
    margin:auto;
    margin-bottom:30px;
    color:#cbd5ff;
    line-height:1.7;
}

.cta-btn{
    display:inline-block;
    padding:14px 36px;
    border-radius:40px;
    background:linear-gradient(
        135deg,
        #10b981,
        #059669
    );
    color:white;
    font-weight:600;
    transition:all .35s ease;
    box-shadow:
        0 10px 30px rgba(16,185,129,0.4);
}

.cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:
        0 20px 45px rgba(16,185,129,0.6);
}

@media (max-width:768px){
    .cta-title{
        font-size:28px;
    }

    .cta-subtitle{
        font-size:16px;
    }

    .homepage-cta{
        padding:80px 0;
    }
}

.homepage-cta{
    border-top:1px solid rgba(255,255,255,0.05);
}

/* ===============================
   TOAST (FINAL PREMIUM)
=============================== */

#toastContainer{
    position: fixed;
    top: calc(1rem + 5rem + var(--banner-height, 0px));
    right: 1rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
    max-width: min(380px, calc(100vw - 2rem));
}

#toastContainer .toast{
    pointer-events: auto;
}

.toast{
    position:relative;
    background:#fff;
    border-radius:14px;
    padding:14px 44px 14px 14px;
    width: min(360px, calc(100vw - 2rem));
    box-shadow:0 18px 45px rgba(15,23,42,.16);
    border:1px solid rgba(15,23,42,.08);
    animation:slideIn .25s ease;
    overflow:hidden;
}

.toast-content{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.toast-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    background:#16a34a;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:800;
    line-height:1;
}

.toast-error .toast-icon{
    background:#dc2626;
}

.toast-copy{
    min-width:0;
}

.toast-title{
    color:#111827;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
}

.toast-text{
    color:#6b7280;
    font-size:13px;
    line-height:1.35;
    margin-top:3px;
}

.toast-close{
    position:absolute;
    top:10px;
    right:12px;
    border:0;
    background:transparent;
    cursor:pointer;
    color:#9ca3af;
    font-size:22px;
    line-height:1;
    transition:color .2s ease;
}

.toast-close:hover{
    color:#374151;
}

.toast-progress{
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    background:#16a34a;
    animation:progressBar 1.8s linear forwards;
}

.toast-error .toast-progress{
    background:#dc2626;
}

@keyframes slideIn{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes progressBar{
    from{
        width:100%;
    }
    to{
        width:0%;
    }
}