/* ===== Palette & base ===== */
    :root{
      --c-bg-dark:#0d0d0d; --c-indigo:#4A46FF; --c-aqua:#00CFC8; --radius:14px;
      --transition:.35s cubic-bezier(.4,.2,.2,1);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html,body{width:100%;overscroll-behavior-x:none;touch-action:pan-y;}
    body{font-family:'Inter',sans-serif;color:#fff;background:var(--c-bg-dark);} 
    img{max-width:100%;display:block;border-radius:var(--radius);}
    a{color:inherit;text-decoration:none;}
    h1,h2,h3{font-weight:800;letter-spacing:-.02em;}

    /* ===== Common buttons / tags ===== */
    .btn{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,var(--c-indigo),var(--c-aqua));color:#fff;border:none;padding:.8rem 1.4rem;font-weight:600;border-radius:var(--radius);cursor:pointer;transition:var(--transition);}
    .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.45);}
    .tag{display:inline-block;padding:.3rem .7rem;font-size:.75rem;border-radius:999px;background:rgba(255,255,255,.12);margin-right:.4rem;margin-bottom:.4rem;}

    
    /* ===== Hero banner ===== */
    .hero{padding:calc(64px + 3rem) 6vw 3rem;}
    .hero h1{font-size:clamp(2.2rem,9vw,3.8rem);line-height:1.1;background:linear-gradient(90deg,var(--c-indigo),var(--c-aqua));-webkit-background-clip:text;color:transparent;margin-bottom:1rem;text-align:center;}
    .hero p{text-align:center;font-size:1.05rem;color:#c0c0c0;}


    /* ===== Search ===== */
    .search-wrap{padding:0 6vw 2rem;}
    .search-wrap input{width:100%;padding:1rem 1.2rem;border:none;border-radius:var(--radius);font-size:1rem;color:#000;}
    .search-wrap input::placeholder{color:#555;}

    /* ===== Articles grid ===== */
    #articles{
      display:grid;
      gap:2rem;
      padding:0 6vw 3rem;
      grid-template-columns:1fr;
    }
    @media(min-width:768px){
      #articles{grid-template-columns:repeat(2,1fr);}
    }

    /* ===== Cases grid ===== */
    #cases{
      display:grid;
      gap:2rem;
      padding:0 6vw 3rem;
      grid-template-columns:1fr;
    }
    @media(min-width:768px){
      #cases{grid-template-columns:repeat(2,1fr);}
    }
    .card{position:relative;background:rgba(255,255,255,.05);border-radius:var(--radius);overflow:hidden;transition:transform .25s;display:block;}
    .card:hover{transform:translateY(-4px);}
    .card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
    .card-body{
      position:absolute;inset:0;padding:1rem;display:flex;flex-direction:column;
      justify-content:flex-end;gap:.4rem;
      background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 95%);
    }
    .card-body .tags{display:flex;flex-wrap:wrap;}
    .card-body h3{font-size:1.1rem;margin:0;}
    .card-body p{display:none;}
    .card .meta{font-size:.78rem;color:#cfcfcf;}
    .card .tag{background:rgba(255,255,255,.15);}


    /* ===== Pagination ===== */
    .pagination{display:flex;justify-content:center;gap:.5rem;margin:1rem 0 3rem;}
    .pagination a{padding:.5rem .9rem;background:rgba(255,255,255,.07);border-radius:var(--radius);transition:var(--transition);}
    .pagination a:hover{transform:translateY(-2px);}
    .pagination a.active{background:linear-gradient(135deg,var(--c-indigo),var(--c-aqua));color:#fff;}

    /* ===== Footer ===== */