/* ---- Base / Vars ---- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    :root{
      --bg:#000000;
      --card:#0b0b0c;
      --muted:#b0b4c0;
      --line:#1e1e22;
      --acc1:#ff2d8d;
      --acc2:#00e5ff;
      --white:#ffffff;
      --container:1240px;
      --radius:20px;
      --shadow:0 10px 30px rgba(0,0,0,.45);
    }
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; line-height:1.6; color:var(--white); background:var(--bg)}
    .container{max-width:var(--container); margin:0 auto; padding:0 20px}

    /* ---- Header ---- */
    header.site{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(3px); background: rgb(0 0 0 / 62%); border-bottom:1px solid rgba(255,255,255,.08)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:12px; color:var(--white); font-weight:800; text-decoration:none}
    .brand .logo{
      width:58px; height:58px; border-radius:8px;
      background:center / cover no-repeat url("/media/img/IMG_3451.webp");
    }
    .menu{
      display:flex; gap:1px; align-items:center;
      border:1px solid #f63492; border-radius:3rem; padding:5px 17px;
    }
    .menu a{
      display:inline-block; padding:8px 12px; color:#e5e9f2; text-decoration:none;
      transition:color .2s ease, text-shadow .2s ease, filter .2s ease;
    }
    .menu a:is(:hover,:focus-visible,.active,[aria-current="page"]){
      background-image:linear-gradient(90deg,var(--acc1,#ff2d8d),var(--acc2,#00e5ff));
      -webkit-background-clip:text; background-clip:text;
      color: transparent; -webkit-text-fill-color: transparent;
      filter: brightness(1.12);
      text-shadow: 0 0 10px rgb(255 255 255 / 61%);
      box-shadow: 0 0 8px 0 rgb(255 255 255 / 61%);
      border-radius: 2rem;
    }
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#000; font-weight:700; box-shadow:var(--shadow); border:none; text-decoration: none;}
    .btn.ghost{background:linear-gradient(#000,#000) padding-box, linear-gradient(90deg,var(--acc1),var(--acc2)) border-box; border:1px solid transparent; color:#fff; text-decoration: none;}
    .btn svg{width:18px; height:18px}

    /* Burger */
    .burger{
      display:none; width:40px; height:40px; align-items:center; justify-content:center;
      border:1px solid var(--line); border-radius:10px; color:var(--white); background:transparent;
      position:relative; cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease;
    }
    .burger:hover{box-shadow:0 6px 20px rgba(0,0,0,.35)}
    .burger .bar{
      position:absolute; width:20px; height:2px; left:50%; transform:translateX(-50%);
      background:#e5e9f2; border-radius:2px;
      transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, background .25s ease;
    }
    .burger .bar:nth-child(1){ top:13px }
    .burger .bar:nth-child(2){ top:19px }
    .burger .bar:nth-child(3){ top:25px }
    .burger.active .bar{ background:linear-gradient(90deg,var(--acc1),var(--acc2)) }
    .burger.active .bar:nth-child(1){ transform:translateX(-50%) translateY(6px) rotate(45deg) }
    .burger.active .bar:nth-child(2){ opacity:0 }
    .burger.active .bar:nth-child(3){ transform:translateX(-50%) translateY(-6px) rotate(-45deg) }

    .lang{display:flex; gap:8px; align-items:center}
    .lang button{background:transparent; color:#cfd2dc; border:1px solid var(--line); border-radius:8px; padding:6px 10px}
    .lang button.active{background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#000; font-weight:700}

    /* ---- Blog page hero ---- */
    .page-hero{padding:32px 0 8px}
    .page-hero h1{margin:0 0 6px; font-size:28px; letter-spacing:.3px}
    .page-hero p{margin:0; color:var(--muted)}

    /* ---- Blog grid ---- */
    .grid{max-width:var(--container); margin:12px auto 60px; padding:0 20px;
          display:grid; grid-template-columns:repeat(auto-fill,minmax(345px,1fr)); gap:18px}
    .card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
    .thumb{aspect-ratio:16/10; background:#0b0d12; display:block; width:100%; object-fit:cover}
    .body{padding:14px 14px 8px}
    .title{margin:0 0 6px; font-weight:600; font-size:16px}
    .meta{margin:0 0 6px; color:var(--muted); font-size:12px}
    .desc{margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.35;
          display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
          line-clamp:3; box-orient:vertical;}
    .actions{margin-top:auto; padding:0 14px 14px}
    .empty{color:var(--muted); text-align:center; padding:48px 0}
    
    .pager { display:flex; gap:10px; justify-content:center; align-items:center; margin:22px 0; text-align: center; margin-bottom: 3rem;}
    .numchip { padding:6px 10px; border:1px solid var(--border, #2a2a2a); border-radius:10px; color:var(--muted, #aaa); }
    .pager .disabled { pointer-events:none; opacity:.45; }

    /* ---- Responsive ---- */
    @media (max-width:990px){
      .burger{display:flex}
      .menu{
        position:absolute; top:64px; left:12px; right:12px;
        display:grid; grid-auto-flow:row; gap:14px;
        padding:14px 20px; border-radius:16px; border:1px solid #f63492;
        background:rgba(0,0,0,.96);
        transform-origin:top center;
        transform:translateY(-8px) scaleY(.96);
        opacity:0; pointer-events:none;
        transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
        box-shadow:0 18px 40px rgba(0,0,0,.45);
      }
      .menu a{opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1)}
      .menu.open{transform:translateY(0) scaleY(1); opacity:1; pointer-events:auto}
      .menu.open a{opacity:1; transform:translateY(0)}
    }
    @media (max-width:760px){
      .header-cta{display:none !important;}
    }