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

body{
    font-family:
    Inter,
    Arial,
    sans-serif;

    background:#f8fafc;
    color:#111827;
}

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

img{
    display:block;
    width:100%;
}

.container{
    width:100%;
    max-width:1280px;

    margin:auto;

    padding:
    0 24px;
}

/* -------------------------
    NAVIGATION
------------------------- */

.navbar{
    position:sticky;
    top:0;

    z-index:999;

    backdrop-filter:blur(20px);

    background:
    rgba(248,250,252,.82);

    border-bottom:
    1px solid rgba(226,232,240,.7);
}

.nav-inner{
    height:82px;

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

.brand{
    display:flex;
    align-items:center;
    gap:14px;

    font-size:20px;
    font-weight:900;

    letter-spacing:-.04em;
}

.brand img{
    width:42px;
    height:42px;

    border-radius:14px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:28px;
}

.nav-links a{
    color:#475569;

    font-size:14px;
    font-weight:700;

    transition:.2s;
}

.nav-links a:hover{
    color:#111827;
}

/* -------------------------
    HERO
------------------------- */

.hero{
    padding:
    90px 0 70px;
}

.hero-grid{
    display:grid;
    grid-template-columns:
    1.1fr .9fr;

    gap:40px;

    align-items:center;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:
    12px 18px;

    border-radius:999px;

    background:#fff8cc;

    color:#7a6300;

    font-size:12px;
    font-weight:800;

    letter-spacing:.08em;

    margin-bottom:24px;
}

.hero h1{
    font-size:64px;
    line-height:1.02;

    letter-spacing:-.06em;

    margin-bottom:24px;
}

.hero p{
    color:#64748b;

    font-size:17px;
    line-height:1.9;

    max-width:680px;

    margin-bottom:34px;
}

.hero-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.btn-primary{
    height:56px;

    padding:
    0 28px;

    border:none;
    outline:none;

    border-radius:18px;

    background:#111827;
    color:#ffffff;

    font-size:14px;
    font-weight:800;

    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    transition:.2s;
}

.btn-primary:hover{
    transform:
    translateY(-2px);
}

.hero-card{
    background:#ffffff;

    border:
    1px solid #edf2f7;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(15,23,42,.06);
}

.hero-card img{
    height:100%;
    object-fit:cover;
}

/* -------------------------
    ARTICLES
------------------------- */

.articles{
    padding:
    20px 0 100px;
}

.section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:36px;
}

.section-header h2{
    font-size:42px;
    line-height:1.05;

    letter-spacing:-.05em;

    margin-bottom:12px;
}

.section-header p{
    color:#64748b;

    font-size:15px;
    line-height:1.8;

    max-width:620px;
}

.search-box{
    position:relative;

    width:320px;
}

.search-box input{
    width:100%;
    height:56px;

    padding:
    0 18px 0 52px;

    border-radius:18px;

    border:
    1px solid #e2e8f0;

    background:#ffffff;

    outline:none;

    font-size:14px;
}

.search-box i{
    position:absolute;

    left:18px;
    top:50%;

    transform:
    translateY(-50%);

    color:#94a3b8;

    font-size:18px;
}

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

    gap:24px;
}

.article-card{
    background:#ffffff;

    border:
    1px solid #edf2f7;

    border-radius:30px;

    overflow:hidden;

    transition:.25s;

    box-shadow:
    0 12px 40px rgba(15,23,42,.05);
}

.article-card:hover{
    transform:
    translateY(-6px);
}

.article-image{
    position:relative;

    height:240px;

    overflow:hidden;
}

.article-image img{
    height:100%;
    object-fit:cover;
}

.article-tag{
    position:absolute;

    top:18px;
    left:18px;

    padding:
    10px 14px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    font-size:11px;
    font-weight:800;

    letter-spacing:.08em;

    color:#111827;
}

.article-content{
    padding:28px;
}

.article-meta{
    display:flex;
    align-items:center;
    gap:14px;

    color:#94a3b8;

    font-size:12px;
    font-weight:700;

    margin-bottom:16px;
}

.article-content h3{
    font-size:26px;
    line-height:1.2;

    letter-spacing:-.04em;

    margin-bottom:16px;
}

.article-content p{
    color:#64748b;

    font-size:14px;
    line-height:1.9;

    margin-bottom:26px;
}

.read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#111827;

    font-size:14px;
    font-weight:800;
}

/* -------------------------
    FOOTER
------------------------- */

footer{
    background:#ffffff;

    border-top:
    1px solid #edf2f7;

    padding:
    70px 0 40px;
}

.footer-grid{
    display:grid;
    grid-template-columns:
    1.2fr .8fr .8fr;

    gap:40px;

    margin-bottom:40px;
}

.footer-brand{
    max-width:420px;
}

.footer-brand img{
    width:48px;
    height:48px;

    border-radius:16px;

    margin-bottom:20px;
}

.footer-brand h3{
    font-size:28px;

    letter-spacing:-.04em;

    margin-bottom:16px;
}

.footer-brand p{
    color:#64748b;

    line-height:1.9;

    font-size:14px;
}

.footer-links h4{
    font-size:14px;
    font-weight:800;

    letter-spacing:.08em;

    margin-bottom:20px;
}

.footer-links a{
    display:block;

    margin-bottom:14px;

    color:#64748b;

    font-size:14px;
    font-weight:600;
}

.footer-bottom{
    padding-top:28px;

    border-top:
    1px solid #edf2f7;

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

    gap:20px;

    flex-wrap:wrap;
}

.footer-bottom p{
    color:#94a3b8;

    font-size:13px;
}

.footer-socials{
    display:flex;
    gap:14px;
}

.footer-socials a{
    width:42px;
    height:42px;

    border-radius:14px;

    background:#f8fafc;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#111827;

    font-size:18px;
}

/* -------------------------
    MOBILE
------------------------- */

@media(max-width:980px){

    .hero-grid{
    grid-template-columns:1fr;
    }

    .hero h1{
    font-size:52px;
    }

    .section-header{
    flex-direction:column;
    align-items:flex-start;
    }

    .search-box{
    width:100%;
    }

    .footer-grid{
    grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .nav-links{
    display:none;
    }

    .hero{
    padding:
        70px 0 50px;
    }

    .hero h1{
    font-size:42px;
    }

    .section-header h2{
    font-size:34px;
    }

    .article-content h3{
    font-size:22px;
    }

}