:root{
      --bg:#ffffff;
      --secondary-bg:#f2f2f2;
      --text-main:#111111;
      --accent:#8b0b14;
      --spacing:40px;
      --border:#eaeaea;
      --muted:#6b7280;
      --shadow-soft:0 10px 28px rgba(2,6,23,.08);
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{
      background-color:var(--bg);
      color:var(--text-main);
      font-family:'Jost',sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit}

    /* Header */
    header{
      padding:16px var(--spacing);
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid #eee;
      position:sticky;
      top:0;
      background:rgba(255,255,255,.78);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      z-index:100;
    }
    .logo{
      font-family:'Syne',sans-serif;
      font-size:1.55rem;
      letter-spacing:-1px;
      text-transform:lowercase;
      display:flex;
      align-items:baseline;
      gap:2px;
    }
    .logo span{color:var(--accent)}
    nav{display:flex;align-items:center;gap:18px}
    nav a{
      text-decoration:none;
      color:var(--text-main);
      font-weight:500;
      font-size:.85rem;
      text-transform:uppercase;
      opacity:.9;
      transition:opacity .2s ease;
    }
    nav a:hover{opacity:1}

    /* Burger */
    .burger{
      display:none;
      width:42px;height:42px;
      border:1px solid rgba(15,23,42,.10);
      background:rgba(255,255,255,.7);
      cursor:pointer;
      padding:10px;
      align-items:center;
      justify-content:center;
    }
    .burger span{
      display:block;
      width:20px;height:2px;
      background:var(--text-main);
      position:relative;
      transition:transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .burger span::before,
    .burger span::after{
      content:"";
      position:absolute;left:0;
      width:20px;height:2px;
      background:var(--text-main);
      transition:transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .burger span::before{top:-6px}
    .burger span::after{top:6px}
    header.is-open .burger span{background:transparent}
    header.is-open .burger span::before{top:0;transform:rotate(45deg)}
    header.is-open .burger span::after{top:0;transform:rotate(-45deg)}

    .mobile-panel{
      display:none;
      position:fixed;
      left:0; right:0;
      top:62px;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(15,23,42,.10);
      z-index:99;
    }
    .mobile-panel a{
      display:block;
      padding:16px var(--spacing);
      text-decoration:none;
      text-transform:uppercase;
      font-weight:500;
      letter-spacing:.03em;
      border-top:1px solid rgba(15,23,42,.06);
    }

/* Nav menu compatibility */
nav ul{list-style:none;display:flex;align-items:center;gap:18px;margin:0;padding:0}
nav li{margin:0;padding:0}
nav li a{display:inline-block}


/* Responsive (header/mobile menu) */
@media (max-width: 768px){
  header{padding:14px var(--spacing)}
  nav{display:none}
  .burger{display:inline-flex}
  .mobile-panel{display:block}
  .mobile-panel[hidden]{display:none}
}
@media (max-width: 560px){
  :root{--spacing:18px}
  header{padding:14px var(--spacing)}
  .mobile-panel a{padding:16px var(--spacing)}
}