/* ==========================================================
   CoreFlowFlex - Modern Main Stylesheet
   ========================================================== */

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

:root{
    --container-width:1200px;

    --bg:#0d0b16;
    --bg-secondary:#151222;

    --card:#1b172b;
    --card-hover:#241d39;

    --text:#f7f7fb;
    --text-secondary:#a7abc4;

    --border:#322c48;

    --accent:#8b5cf6;
    --accent-hover:#a78bfa;

    --shadow:rgba(0,0,0,.40);
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    color:var(--text);
    font-family:Inter,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;

    background:
        radial-gradient(circle at top,
        rgba(139,92,246,.16) 0%,
        rgba(139,92,246,.05) 30%,
        transparent 60%),
        linear-gradient(180deg,var(--bg),#090812);
}

a{
    color:inherit;
    text-decoration:none;
}

.container,
.navbar{
    width:min(var(--container-width),92%);
    margin:0 auto;
}

.navbar{
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    font-size:2rem;
    font-weight:800;
    letter-spacing:-.04em;
    transition:.25s ease;
}

.logo:hover{
    color:var(--accent);
}

.hero{
    max-width:760px;
    margin:0 auto;
    padding:120px 20px 100px;
    text-align:center;
}

.hero h1{
    font-size:clamp(3.8rem,7vw,5.8rem);
    line-height:.95;
    letter-spacing:-.06em;
    text-shadow:0 0 40px rgba(139,92,246,.15);
}

.hero p{
    max-width:650px;
    margin:30px auto 0;
    color:var(--text-secondary);
    font-size:1.15rem;
    line-height:1.8;
}

.category{
    margin-top:90px;
}

.category-title{
    text-align:center;
    font-size:2.25rem;
    font-weight:700;
}

.category-description{
    max-width:680px;
    margin:18px auto 42px;
    text-align:center;
    color:var(--text-secondary);
    line-height:1.7;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.tool-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:250px;
    padding:34px;

    background:
        linear-gradient(180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.015));

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

    box-shadow:0 14px 40px var(--shadow);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.tool-card:hover{
    transform:translateY(-5px);
    border-color:#5e4bb8;
    background-color:var(--card-hover);
    box-shadow:0 22px 60px rgba(0,0,0,.45);
}

.tool-card h2{
    font-size:1.45rem;
    margin-bottom:16px;
}

.tool-card p{
    color:var(--text-secondary);
    line-height:1.75;
    flex:1;
}

.open-tool{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:28px;
    color:var(--accent);
    font-weight:700;
    transition:.2s ease;
}

.open-tool:hover{
    color:var(--accent-hover);
    transform:translateX(4px);
}

.footer{
    margin-top:120px;
    padding:50px 20px;
    text-align:center;
    color:var(--text-secondary);
    border-top:1px solid var(--border);
}

@media (max-width:768px){

    .navbar{
        height:72px;
    }

    .hero{
        padding:80px 20px 70px;
    }

    .hero h1{
        font-size:3.3rem;
    }

    .hero p{
        font-size:1.05rem;
    }

    .category{
        margin-top:70px;
    }

    .category-title{
        font-size:1.9rem;
    }

    .category-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .tool-card{
        min-height:auto;
        padding:26px;
    }
}