/* OSR Protocol — Nav only. No global styles. Safe to include on any page. */

/* ═══ Desktop Nav ═══ */
.osr-nav { position: sticky; top: 0; z-index: 100; background: rgba(6,6,8,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.osr-nav-inner { display: flex; justify-content: space-between; align-items: center; height: 56px; max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.osr-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.osr-nav-logo img { border-radius: 5px; }
.osr-nav-logo span { font-family: 'JetBrains Mono', monospace; font-size: clamp(14px, 1.8vw, 17px); font-weight: 700; color: #F5F5F5; }
.osr-nav-links { display: flex; gap: clamp(14px, 3vw, 24px); align-items: center; }
.osr-nav-links a { font-family: 'JetBrains Mono', monospace; font-size: clamp(10px, 1.2vw, 12px); color: #F5F5F5; text-decoration: none; transition: color 0.3s; letter-spacing: 0.3px; font-weight: 500; }
.osr-nav-links a:hover { color: #3ECF8E; }
.osr-nav-cta { font-family: 'JetBrains Mono', monospace; font-size: clamp(9px, 1.1vw, 11px); font-weight: 600; background: #3ECF8E; color: #000; padding: 7px 16px; border-radius: 5px; border: none; cursor: pointer; transition: all 0.3s; letter-spacing: 0.3px; }
.osr-nav-cta:hover { box-shadow: 0 0 24px rgba(62,207,142,0.25); }

/* ═══ Hamburger ═══ */
.osr-burger { display: none; background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; width: 36px; height: 36px; padding: 0; cursor: pointer; position: relative; z-index: 102; -webkit-tap-highlight-color: transparent; }
.osr-burger span { display: block; width: 18px; height: 2px; background: #F5F5F5; border-radius: 1px; position: absolute; left: 50%; transform: translateX(-50%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1); }
.osr-burger span:nth-child(1) { top: 10px; }
.osr-burger span:nth-child(2) { top: 17px; }
.osr-burger span:nth-child(3) { top: 24px; }
.osr-burger.active span:nth-child(1) { top: 17px; transform: translateX(-50%) rotate(45deg); }
.osr-burger.active span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); }
.osr-burger.active span:nth-child(3) { top: 17px; transform: translateX(-50%) rotate(-45deg); }

/* ═══ Mobile overlay ═══ */
.osr-mobile { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(6,6,8,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 101; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 32px 40px; transform: translateY(-100%); opacity: 0; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: none; }
.osr-close { position: absolute; top: 14px; right: clamp(20px, 5vw, 48px); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 103; -webkit-tap-highlight-color: transparent; color: #F5F5F5; font-size: 22px; font-family: -apple-system, sans-serif; line-height: 1; display: flex; align-items: center; justify-content: center; }
.osr-close:active { background: rgba(255,255,255,0.12); }
.osr-mobile.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.osr-mobile a { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: #F5F5F5; text-decoration: none; letter-spacing: 1.5px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%; max-width: 320px; text-align: center; opacity: 0; transform: translateY(-12px); transition: color 0.3s, opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.osr-mobile.open a { opacity: 1; transform: translateY(0); }
.osr-mobile.open a:nth-child(1) { transition-delay: 0.08s; }
.osr-mobile.open a:nth-child(2) { transition-delay: 0.14s; }
.osr-mobile.open a:nth-child(3) { transition-delay: 0.20s; }
.osr-mobile.open a:nth-child(4) { transition-delay: 0.26s; }
.osr-mobile a:hover { color: #3ECF8E; }
.osr-mobile .osr-nav-cta { display: inline-block; margin-top: 28px; font-size: 12px; padding: 14px 32px; width: 100%; max-width: 320px; text-align: center; opacity: 0; transform: translateY(-12px); transition: box-shadow 0.3s, opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.osr-mobile.open .osr-nav-cta { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
body.menu-open { overflow: hidden; position: fixed; width: 100%; }

/* ═══ Mobile breakpoint ═══ */
@media (max-width: 580px) {
  .osr-nav-links { display: none; }
  .osr-burger { display: block; }
  .osr-nav-inner { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
  .osr-nav-logo { grid-column: 2; justify-self: center; }
  .osr-burger { grid-column: 3; justify-self: end; }
}