: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}
  html,body{height:100%}
  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; 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.site-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); }
  .header-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; background:transparent; }
  .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:220px; 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); }

  .hero{ display:grid; place-items:center; padding:44px 18px; }
  .hero-card{ width:min(980px,96%); background:rgba(255,255,255,0.94); padding:22px; border-radius:14px; display:flex; gap:20px; align-items:center; box-shadow:0 12px 34px rgba(0,0,0,0.08); }
  .hero-photo{ width:160px; height:160px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(0,0,0,0.03)); flex:0 0 160px; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-info h1{ margin:0 0 6px 0; font-size:1.45rem; }
  .hero-info p{ margin:0; color:var(--muted); }

  main{ max-width:var(--container); margin:20px auto; padding:0 18px 80px; }
  .cv-wrap{ display:flex; gap:20px; align-items:flex-start; }
  .aside{ flex:0 0 320px; min-width:240px; display:flex; flex-direction:column; gap:12px; }
  .content{ flex:1 1 auto; display:flex; flex-direction:column; gap:18px; }

  .card{ background:rgba(255,255,255,0.95); padding:14px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 20px rgba(0,0,0,0.04); }
  .card h3{ margin:0 0 10px 0; }
  .list{ padding-left:14px; margin:0; color:var(--muted); }
  .list li{ margin-bottom:8px; line-height:1.45; }

  .portfolio-card{ text-align:center; padding:14px; border-radius:12px; background:rgba(255,255,255,0.95); border:1px solid rgba(0,0,0,0.04); box-shadow:0 8px 20px rgba(0,0,0,0.04); cursor:pointer; font-weight:500; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
  .portfolio-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.08); color:var(--accent); }

  .xxss a{ display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; margin-bottom:8px; transition:color .18s var(--ease); }
  .xxss a:hover{ color:var(--accent); }
  .xxss svg{ width:16px; height:16px; display:block; }

  footer.site-footer{ max-width:var(--container); margin:32px auto 60px; 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; }

  @media (max-width:1280px){ .header-inner{ padding:10px 14px } }
  @media (max-width:900px){ .cv-wrap{ flex-direction:column-reverse; } .aside, .content{ width:100%; } }
  @media (max-width:475px){ .hero-card{ flex-direction:column; text-align:center; gap:12px } .hero-photo{ width:140px; height:140px } .menu-panel{ left:10px; right:10px; min-width:unset } .logo-img{ width:36px; height:36px } }