:root{
    --bg:#f7fafc;                 /* light page bg */
    --panel:#ffffff;              /* card & navbar bg */
    --border:#e5e7eb;             /* subtle borders */
    --text:#0f172a;               /* slate-900 */
    --muted:#6b7280;              /* gray-500 */
    --brand:#16a34a;              /* green-600 */
    --brand-2:#22c55e;            /* green-500 */
    --chip:#f1f5f9;               /* slate-100 */
    --radius:16px;
    --shadow:0 10px 30px rgba(2,8,23,.06);
    --dur:600ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color:var(--text);
    background:
            radial-gradient(1200px 700px at 10% -10%, #eef2ff 0%, transparent 60%),
            radial-gradient(1200px 700px at 110% 10%, #dcfce7 0%, transparent 60%),
            var(--bg);
    overflow-x:hidden;
}

/* NAVBAR */
.navbar{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--border);
    transition: box-shadow .3s ease, background .3s ease;
}
.navbar.scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.06); background:#fff; }
.nav-inner{
    width:min(1100px,100%);
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1rem;
}
.brand{
    display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
}
.brand img{
    width:36px; height:36px; border-radius:8px; display:block;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.brand span{
    font-weight:800; letter-spacing:.2px;
}
.nav-links a{
    text-decoration:none; color:var(--muted); font-weight:600; margin-left:1rem;
}
.nav-links a:hover{ color:var(--text); }

header.hero{
    padding: 48px 20px 12px;
    text-align:center;
}
h1{
    margin:.25rem 0 0;
    font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem);
    line-height:1.1;
    font-weight:800;
    background: linear-gradient(90deg, #0f172a, #15803d 60%, #0f172a);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shine 3s ease-in-out infinite;
}
@keyframes shine{
    0%,100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    50%   { filter: drop-shadow(0 0 10px rgba(34,197,94,.12)); }
}
.subtitle{
    margin:.6rem auto 0; max-width:60ch; color:var(--muted); font-size:.98rem;
}

main{ padding: 20px; }
.container{ width:min(1100px, 100%); margin:0 auto; }

/* GRID */
.news-grid{
    display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1.25rem;
}
@media (min-width: 840px){ .news-grid{ grid-template-columns: 1fr 1fr; } }

.news-card{
    border-radius: var(--radius);
    background: var(--panel);
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    overflow:hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
    will-change: transform, box-shadow;
    transform: translateY(6px);
}
.news-card:hover{
    transform: translateY(0) scale(1.01);
    border-color:#d1d5db;
    box-shadow: 0 12px 40px rgba(2,8,23,.08);
}

.news-card-inner{
    display:grid; grid-template-columns: 220px 1fr; gap:1.1rem; padding:1.1rem;
}
@media (max-width: 560px){ .news-card-inner{ grid-template-columns: 1fr; } }

.thumb{
    position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3;
    background:#f3f4f6; border:1px solid var(--border);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.news-card:hover .thumb img{ transform: scale(1.05); }

.date-chip{
    position:absolute; top:.6rem; left:.6rem; padding:.35rem .6rem; font-size:.75rem;
    border-radius:999px; background: var(--chip); border:1px solid var(--border); color:#334155;
}

.news-card-content{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.news-card-content h4{ margin:.1rem 0 .25rem; font-size:1.1rem; line-height:1.25; }
.news-card-content h4 a{
    color:#0f172a; text-decoration:none;
    background-image: linear-gradient(90deg, rgba(22,163,74,0), rgba(22,163,74,0));
    background-size: 0% 2px; background-repeat:no-repeat; background-position: 0 100%;
    transition: background-size .3s ease, color .3s ease;
}
.news-card:hover .news-card-content h4 a{
    background-image: linear-gradient(90deg, var(--brand), var(--brand-2));
    background-size: 100% 2px;
    color:#062b17;
}

.intro{
    color: var(--muted);
    font-size:.95rem; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}

.card-footer{
    margin-top:auto; display:flex; align-items:center; justify-content:flex-end; gap:.75rem;
}

.btn{
    appearance:none; border:0; cursor:pointer;
    padding:.55rem .85rem; border-radius:10px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    color:#ffffff; font-weight:700; letter-spacing:.2px;
    transition: transform .2s ease;
    text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
}
.btn:active{ transform: translateY(1px); }

/* Skeleton */
.skeleton{
    position:relative; overflow:hidden; background: #ffffff; border:1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.skeleton::after{
    content:""; position:absolute; inset:0; transform: translateX(-100%);
    background-image: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
    animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100% { transform: translateX(100%); } }
.sk-inner{ padding:1.1rem; display:grid; grid-template-columns:220px 1fr; gap:1.1rem; }
@media (max-width:560px){ .sk-inner{ grid-template-columns: 1fr; } }
.sk-thumb{ height:160px; border-radius:12px; background:#f3f4f6; border:1px solid var(--border); }
.sk-line{ height:12px; border-radius:8px; background:#eef2f7; margin-bottom:10px; }
.sk-line.w80{ width:80%; } .sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; } .sk-line.w95{ width:95%; }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(14px) scale(.98); }
.reveal.visible{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
    .news-card, .news-card *{ animation: none !important; transition: none !important; }
}

.empty{ text-align:center; color:var(--muted); padding:2rem 0; }