:root{
    --bg-start:#FFEAC2; --bg-mid:#FFD3A5; --bg-end:#FFB37A;
    --text:#111; --muted:#6b6b6b; --accent:#ff8b4a;
    --container:1200px; --ease:cubic-bezier(.2,.9,.3,1);
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family:"Fira Code",monospace; color:var(--text);
    background: linear-gradient(120deg,var(--bg-start),var(--bg-mid),var(--bg-end));
    background-size:300% 300%; background-position:var(--bg-pos,50%) 50%;
    animation:bgShift 28s linear infinite; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
  }
  @keyframes bgShift{
    0%{background-position:0% 50%}
    25%{background-position:25% 50%}
    50%{background-position:50% 50%}
    75%{background-position:75% 50%}
    100%{background-position:100% 50%}
  }

  /* HEADER */
  header{ position:sticky; top:0; z-index:90; backdrop-filter: blur(6px); background: rgba(255,255,255,0.45); border-bottom:1px solid rgba(0,0,0,0.06); }
  .hdr-inner{ max-width:var(--container); margin:0 auto; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .brand{ display:flex; align-items:center; gap:12px }
  .logo-img{ width:42px; height:42px; object-fit:contain; }
  .name{ font-weight:500; }

  .lang-select select{ padding:6px 8px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:rgba(255,255,255,0.9); font-family:inherit; }

  .menu-wrap{ position:relative }
  .menu-button{ padding:8px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer }
  .menu-panel{ position:absolute; right:0; top:calc(100% + 10px); min-width:240px; background:rgba(255,255,255,0.98); padding:12px; border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,0.08); display:none; z-index:95; }
  .menu-panel.open{ display:block }
  .menu-panel a{ display:block; padding:8px 10px; color:var(--text); text-decoration:none; border-radius:6px; margin-bottom:6px }
  .menu-panel a:hover{ background:rgba(0,0,0,0.03); color:var(--accent) }

  /* MAIN */
  main{ max-width:var(--container); margin:28px auto; padding:0 18px 80px; }
  h2{ margin:0 0 8px 0 } .muted{ color:var(--muted); font-size:0.95rem }

  /* GRID for portfolio */
  .galeria{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin-top:18px; }
  .projecte{ background:rgba(255,255,255,0.95); padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 26px rgba(0,0,0,0.06); transition:transform 260ms var(--ease), box-shadow 260ms var(--ease); }
  .projecte:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(0,0,0,0.08) }
  .projecte img{ width:100%; height:180px; object-fit:cover; border-radius:8px; display:block }
  .projecte h4{ margin:10px 0 6px 0 } .projecte p{ margin:0; color:var(--muted) }

  /* FOOTER */
  footer.site-footer{ max-width:var(--container); margin:34px auto; padding:12px 18px; display:flex; justify-content:space-between; align-items:center; color:var(--muted) }
  footer .xxss a{ margin-left:10px; text-decoration:none; color:inherit; display:inline-flex; align-items:center; transition:color .18s var(--ease); }
  footer .xxss a:hover{ color:var(--accent); } footer svg{ width:18px; height:18px; }

  /* RESPONSIVE */
  @media (max-width:900px){ .galeria{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
  @media (max-width:475px){ .projecte img{ height:160px } .menu-panel{ left:10px; right:10px; min-width:unset } .logo-img{ width:36px; height:36px } }