/* ---- Base / Vars ---- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    :root{
      --bg:#000; --card:#0b0b0c; --muted:#b0b4c0; --line:#1e1e22;
      --acc1:#ff2d8d; --acc2:#00e5ff; --white:#fff; --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}
    .section{padding:72px 0}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
    .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:linear-gradient(90deg,var(--acc1),var(--acc2))}
    .gradient-text{background:linear-gradient(90deg,var(--acc1),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .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}

    /* ---- 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 (desktop baseline) ---- */
    .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;
    }

    /* ---- Burger button with morph animation ---- */
    .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}

    /* ---- Page hero ---- */
    .page-hero{padding:48px 0 8px}
    .page-hero h1{font-size:clamp(28px,6vw,56px); margin:0}
    .page-hero p{color:var(--muted); margin:8px 0 0}

    /* ---- Projects Grid ---- */
    .pgrid{
      display:grid;
      grid-template-columns:repeat(auto-fit, 500px);
      gap:16px;
      justify-content:center;
      align-content:start;
    }
    .pcard{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      color:var(--white);
      display:flex; flex-direction:column;
      width:500px;
      box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.45);
      overflow:hidden;
    }
    .pthumb{aspect-ratio:16/9; background:#0d142c}
    .pthumb img{width:100%; height:100%; object-fit:cover; display:block}
    .pbody{padding:14px}
    .pbody h3{margin:0 0 6px}
    .pbody p{margin:0; color:var(--muted)}
    .pactions{padding:0 14px 14px}

    /* ---- Footer ---- */
    footer{border-top:1px solid rgba(255,255,255,.08); color:var(--muted); padding:28px 0; margin-top:24px}
.pagination{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin-top:22px;
  user-select:none;
}
.pagination .page{
  display:inline-flex;
  min-width:36px;
  height:36px;
  padding:0 10px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hairline, #222);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  opacity:.9;
  transition:transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}
.pagination .page:hover{ transform:translateY(-1px); opacity:1; }
.pagination .page.current{
  background:var(--fill, #111);
  border-color:var(--fill, #111);
  font-weight:600;
}
.pagination .page.disabled{
  pointer-events:none;
  opacity:.35;
}
.pagination .page.sep{
  border:none;
  min-width:auto;
  padding:0 4px;
}
.pagination .prev, .pagination .next{
  font-size:18px;
  line-height:1;
}


    /* ---- Mobile menu (animated open) ---- */
    @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){
      .pgrid{ display:flex; flex-direction:column; align-items:center; gap:14px; }
      .pcard{ width:min(92vw, 500px) }
      .header-cta{ display:none !important; }
    }