@font-face {
  font-family: 'Inter';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  font-display: swap;
}
:root {
  --bg:#f7f8fa;--white:#fff;--border:#e5e7eb;--border2:#d1d5db;
  --accent:#1a56db;--accent-h:#1547c0;--accent-l:#eff4ff;--accent-m:#c7d7fd;
  --green:#0f7b55;--green-l:#edfaf4;--green-m:#6ee7b7;
  --gold:#b45309;--gold-l:#fffbeb;--gold-m:#fcd34d;
  --teal:#0e7490;--teal-l:#ecfeff;--teal-m:#a5f3fc;
  --violet:#6d28d9;--violet-l:#f5f3ff;--violet-m:#c4b5fd;
  --text:#111827;--text2:#6b7280;--text3:#9ca3af;--text4:#d1d5db;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Inter",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}

/* HEADER */
header{background:var(--white);border-bottom:1px solid var(--border);height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px;position:sticky;top:0;z-index:100;}
.logo img{height:42px;width:auto;display:block;}
nav{display:flex;gap:28px;justify-content:center;}
nav a{color:var(--text2);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .15s;}
nav a:hover{color:var(--text);}
.h-btn{font-family:"Inter",sans-serif;font-size:13px;font-weight:600;padding:8px 18px;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s;white-space:nowrap;}
.h-btn:hover{background:var(--accent-h);}
.mob-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--text2);}

/* ── Shared article nav active state ── */
nav a.active{color:var(--text)!important;font-weight:600!important;}

/* ── BURGER & MOBILE MENU ──────────────────────────────────── */
.header-logo{display:flex;align-items:center;text-decoration:none;}
.header-right{display:flex;justify-content:flex-end;align-items:center;gap:10px;}

/* Burger button */
.burger-btn{display:none;flex-direction:column;justify-content:space-between;width:26px;height:18px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;}
.burger-btn span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .25s ease, opacity .2s ease;}
.burger-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger-btn.open span:nth-child(2){opacity:0;}
.burger-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Overlay */
.mobile-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.mobile-overlay.visible{opacity:1;pointer-events:auto;}

/* Mobile menu drawer */
.mobile-menu{position:fixed;top:0;right:0;width:min(340px,90vw);height:100%;background:#fff;z-index:200;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.12);}
.mobile-menu.open{transform:translateX(0);}

.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.mobile-close-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text2);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .15s;}
.mobile-close-btn:hover{background:var(--bg);}

.mobile-menu-links{flex:1;padding:12px 0;overflow-y:auto;}
.mobile-nav-link{display:flex;align-items:center;gap:14px;padding:14px 24px;text-decoration:none;color:var(--text);font-size:15px;font-weight:500;transition:background .15s;border-left:3px solid transparent;}
.mobile-nav-link:hover{background:var(--bg);border-left-color:var(--accent);}
.mobile-nav-link.active{background:#eff4ff;border-left-color:var(--accent);color:var(--accent);font-weight:700;}
.mobile-nav-icon{font-size:18px;width:26px;text-align:center;flex-shrink:0;}
.mobile-nav-pro{color:var(--accent);}

.mobile-menu-cta{padding:20px;border-top:1px solid var(--border);background:#f8fafc;}
.mobile-cta-btn{width:100%;justify-content:center;padding:13px 20px;font-size:14px;border-radius:10px;}
.mobile-menu-sub{text-align:center;font-size:11.5px;color:var(--text3);margin:8px 0 0;letter-spacing:.2px;}

/* ── Responsive ────────────────────────────────── */
@media(max-width:768px){
  header{padding:0 16px;height:56px;}
  header nav{display:none;}
  .header-right .h-btn:not(.mobile-cta-btn){display:none;}
  .burger-btn{display:flex;}
  .mobile-overlay{display:block;}
  .header-logo{order:3;justify-content:flex-end;}
  header>:nth-child(2){order:2;}
  .header-right{order:1;justify-content:flex-start;}
}
@media(min-width:769px){
  .mobile-menu{display:none!important;}
  .mobile-overlay{display:none!important;}
  .burger-btn{display:none!important;}
}