/* ==========================================
   Home Page
   Hero
========================================== */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 10%;

    overflow:hidden;

    position:relative;

    background:
        radial-gradient(circle at top left,#2563EB40,transparent 35%),
        radial-gradient(circle at bottom right,#3B82F620,transparent 40%),
        linear-gradient(180deg,#0F172A,#111827);

}

.hero-content{

    max-width:900px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin:auto;

    z-index:2;

}

.hero-logo{

    width:150px;

    margin:110px auto 30px;

    filter:drop-shadow(0 0 40px rgba(59,130,246,.45));

    animation:float 5s ease-in-out infinite;

}

.badge{
    margin-bottom: 25px;
}

.brand-name{

    font-size:48px;

    font-weight:800;

    margin-bottom:18px;

    background:linear-gradient(
        90deg,
        #60A5FA,
        #3B82F6,
        #2563EB
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero h1{

    font-size:clamp(3.2rem,4vw,5.7rem);

    font-weight:800;

    line-height:1.3;

    margin-bottom:20px;

}

.hero p{

    max-width:720px;

    color:var(--muted);

    font-size:20px;

    line-height:1.9;

    margin-bottom:50px;

}

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   Features
========================================== */

.features{

    padding:140px 10%;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.feature-card{

    background:var(--surface);

    padding:35px;

    border-radius:22px;

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

    transition:var(--transition);

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 15px 45px rgba(59,130,246,.15);

}

.feature-card .icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    border-radius:18px;

    background:rgba(59,130,246,.12);

    font-size:34px;

}

.feature-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.feature-card p{

    color:var(--muted);

    line-height:1.8;

}

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

@media (max-width:900px){

    .hero{

        padding:150px 8% 90px;

    }

    .hero-logo{

        width:120px;

        margin-top:70px;

    }

    .brand-name{

        font-size:40px;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero p{

        font-size:18px;

    }

    .buttons{

        flex-direction:column;

        align-items:center;

    }

    .buttons a{

        width:100%;

        max-width:320px;

    }

    .features{

        padding:100px 8%;

    }

}

/* ==========================================
   Why HubGuard
========================================== */

.why{

    padding:140px 10%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.why-left h2{

    font-size:clamp(2.6rem,4vw,3.6rem);

    margin:20px 0;

    line-height:1.2;

}

.why-left p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:35px;

}

.section-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(59,130,246,.12);

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

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.why-left ul{

    list-style:none;

}

.why-left li{

    padding:16px 0;

    font-size:17px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.why-left li:last-child{

    border-bottom:none;

}

.why-right{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.stat-card{

    background:var(--surface);

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

    border-radius:24px;

    padding:35px;

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}

.stat-card h3{

    font-size:28px;

    margin-bottom:18px;

}

.stat-card p{

    color:var(--muted);

    line-height:1.8;

}

/* ==========================================
   Statistics
========================================== */

.stats{

    padding:140px 10%;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

}

.stat-box{

    background:var(--surface);

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

    border-radius:22px;

    padding:45px 30px;

    text-align:center;

    transition:var(--transition);

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}

.stat-box h3{

    font-size:52px;

    color:var(--primary);

    margin-bottom:15px;

}

.stat-box span{

    color:#CBD5E1;

    font-size:18px;

}

/* ==========================================
   Documentation
========================================== */

.documentation{

    padding:140px 10%;

}

.docs-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:60px;

}

.doc-card{

    display:block;

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #1E293B,
        #172033
    );

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

    border-radius:22px;

    padding:35px;

    color:var(--text);

    transition:var(--transition);

}

.doc-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:var(--transition);

}

.doc-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

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

}

.doc-card:hover::before{

    transform:scaleY(1);

}

.doc-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.doc-card p{

    color:var(--muted);

    line-height:1.8;

}

.docs-button{

    margin-top:70px;

    text-align:center;

}

/* ==========================================
   Support
========================================== */

.support{

    padding:140px 10%;

}

.support-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.support-card{

    background:var(--surface);

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

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:var(--transition);

}

.support-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 18px 45px rgba(59,130,246,.18);

}

.support-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:rgba(59,130,246,.12);

    font-size:40px;

}

.support-card h3{

    margin-bottom:16px;

    font-size:24px;

}

.support-card p{

    color:var(--muted);

    line-height:1.8;

    margin-bottom:25px;

}

.support-card a{

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.support-card a:hover{

    color:var(--primary-light);

}

/* ==========================================
   Shared Hover Animation
========================================== */

.feature-card,
.stat-card,
.stat-box,
.doc-card,
.support-card{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:900px){

    .why{

        grid-template-columns:1fr;

        gap:60px;

        padding:100px 8%;

    }

    .stats{

        padding:100px 8%;

    }

    .documentation{

        padding:100px 8%;

    }

    .support{

        padding:100px 8%;

    }

    .docs-grid,
    .support-grid,
    .stats-grid{

        gap:20px;

    }

    .stat-box h3{

        font-size:42px;

    }

}