/* ==========================================
   HubGuard Features Page
   Version: 1.0
========================================== */

:root{

    --primary:#3B82F6;
    --primary-hover:#2563EB;

    --bg:#0F172A;
    --surface:#182131;
    --surface-dark:#111827;

    --text:#E2E8F0;
    --muted:#94A3B8;

    --border:rgba(255,255,255,.08);

    --radius:24px;

    --transition:.35s ease;

}

/* ==========================================
   Hero
========================================== */

.page-hero{

    padding:180px 8% 120px;

    text-align:center;

}

.page-hero h1{

    font-size:clamp(3rem,6vw,4.8rem);

    margin:20px 0;

}

.page-hero p{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    line-height:1.8;

    font-size:1.1rem;

}

/* ==========================================
   Sections
========================================== */

.feature-section{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    padding:120px 6%;

}

.feature-section:nth-child(even){

    background:rgba(255,255,255,.015);

}

.feature-section.reverse{

    direction:rtl;

}

.feature-section.reverse>*{

    direction:ltr;

}

/* ==========================================
   Left Side
========================================== */

.feature-text{

    max-width:600px;

}

.feature-label{

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.feature-text h2{

    font-size:46px;

    margin:20px 0;

    transition:var(--transition);

}

.feature-section:hover h2{

    color:var(--primary);

}

.feature-text p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:35px;

}

.feature-text ul{

    list-style:none;

    padding:0;

}

.feature-text li{

    margin:18px 0;

    color:var(--text);

    font-size:17px;

}

/* ==========================================
   Preview Window
========================================== */

.preview-window{

    width:100%;

    background:var(--surface);

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:

        0 25px 60px rgba(0,0,0,.35);

}

.preview-window:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:

        0 30px 70px rgba(59,130,246,.18);

}

/* ==========================================
   Window Header
========================================== */

.window-header{

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px 22px;

    background:var(--surface-dark);

}

.window-header span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.window-header span:nth-child(1){

    background:#ff5f57;

}

.window-header span:nth-child(2){

    background:#febc2e;

}

.window-header span:nth-child(3){

    background:#28c840;

}

/* ==========================================
   Window Content
========================================== */

.window-content{

    padding:28px;

}

.preview-item{

    padding:18px;

    margin-bottom:16px;

    border-radius:14px;

    background:var(--bg);

    border:1px solid rgba(255,255,255,.05);

    color:var(--text);

    transition:var(--transition);

}

.preview-item:last-child{

    margin-bottom:0;

}

.preview-item:hover{

    transform:translateX(6px);

    border-color:var(--primary);

}

.preview-item.success{

    border-left:4px solid #22C55E;

}

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

.cta{

    padding:140px 8%;

    text-align:center;

}

.cta h2{

    font-size:48px;

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

    color:var(--muted);

    line-height:1.8;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:900px){

    .feature-section{

        grid-template-columns:1fr;

        gap:50px;

        padding:90px 8%;

    }

    .feature-section.reverse{

        direction:ltr;

    }

    .page-hero{

        padding:160px 8% 80px;

    }

    .feature-text{

        max-width:100%;

    }

    .feature-text h2{

        font-size:36px;

    }

    .cta h2{

        font-size:36px;

    }

}

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}