/* Header menus: Features and Who it's for. Dropdown panels on desktop; stacked sections inside the collapsed menu. */
.nav-group{position:relative;display:flex;align-items:center}
.site-header nav .nav-trigger{position:relative;display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;padding:0 var(--space-2);border:0;background:none;color:var(--text-secondary);font:inherit;cursor:pointer;white-space:nowrap;transition:color var(--transition-fast)}
.nav-trigger .nav-chev{width:10px;height:10px;flex-shrink:0;transition:transform var(--transition-smooth)}
.nav-group.is-open .nav-trigger,.nav-trigger:hover,.nav-trigger[aria-current]{color:var(--text-primary)}
.nav-group.is-open .nav-chev{transform:rotate(180deg)}
.nav-trigger:focus-visible,.site-header nav .nav-panel a:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.nav-panel{position:absolute;top:calc(100% + 12px);left:50%;transform-origin:50% 0;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-half);width:min(704px,calc(100vw - 32px));padding:var(--space-2);background:var(--surface-popover);border:1px solid var(--border-glass);border-radius:var(--radius-card);box-shadow:var(--shadow-floating);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-8px) scale(.97);
  transition:opacity 140ms var(--ease-exit),transform 140ms var(--ease-exit),visibility 0s linear 140ms}
.nav-panel--roles{grid-template-columns:1fr;width:min(340px,calc(100vw - 32px))}
.nav-panel::before{content:'';position:absolute;left:0;right:0;top:-24px;height:24px} /* keeps hover alive across the gap */
.nav-group.is-open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);
  transition:opacity 220ms var(--ease-enter),transform 260ms var(--ease-enter),visibility 0s}
.site-header nav .nav-panel a.nav-item{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:var(--space-3);min-height:0;padding:var(--space-3);border-radius:var(--radius-control);color:var(--text-primary);white-space:normal;transition:background-color var(--transition-fast),transform var(--motion-micro) var(--ease-fluid)}
.site-header nav .nav-panel a::after{display:none}
.site-header nav .nav-panel a.nav-item:hover,.site-header nav .nav-panel a.nav-item:focus-visible{background:var(--surface-hover)}
.site-header nav .nav-panel a.nav-item:active{transform:scale(.985);background:var(--surface-active)}
.nav-item-text{display:grid;gap:var(--space-half);min-width:0}
.nav-item-text strong{font-size:var(--text-md);font-weight:500;line-height:1.3}
.nav-item-text span{font-size:var(--text-sm);line-height:1.45;color:var(--text-muted)}
.site-header nav .nav-panel a.nav-panel-foot{grid-column:1/-1;display:flex;align-items:center;min-height:44px;margin-top:var(--space-1);padding:0 var(--space-3);border-top:1px solid var(--border-standard);border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:var(--text-sm);color:var(--text-muted)}
.site-header nav .nav-panel a.nav-panel-foot:hover{color:var(--text-primary);background:none}

/* Branded icon tile: the logo's orange square, at rest; the tile takes the inspector's selected state and the glyph moves on hover. */
.nav-glyph{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border-standard);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--text-muted);transition:color var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}
.nav-glyph svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-glyph .g-brand{fill:var(--accent);stroke:none}
.nav-item:hover .nav-glyph,.nav-item:focus-visible .nav-glyph{color:var(--accent);border-color:var(--border-selected);background:var(--surface-selected-subtle)}
.nav-glyph [class^=g-]{transform-box:fill-box;transform-origin:center;transition:transform var(--transition-smooth)}
.nav-glyph .g-lines{transform-origin:12px 12px}
.nav-item:hover .nav-glyph,.nav-item:focus-visible .nav-glyph{box-shadow:0 0 0 4px var(--accent-glow);transform:scale(1.06)}
.nav-glyph{transition:color var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-smooth)}
.nav-item:hover .g-box,.nav-item:focus-visible .g-box{animation:g-march .6s linear infinite,g-breathe 1.4s ease-in-out infinite}
.nav-item:hover .g-cursor,.nav-item:focus-visible .g-cursor{animation:g-point 1.4s ease-in-out infinite}
.nav-item:hover .g-desk,.nav-item:focus-visible .g-desk{transform-origin:left center;animation:g-resize 1.2s ease-in-out infinite alternate}
.nav-item:hover .g-phone,.nav-item:focus-visible .g-phone{animation:g-hop 1.2s ease-in-out infinite alternate}
.nav-item:hover .g-lines,.nav-item:focus-visible .g-lines{animation:g-flip 2.2s ease-in-out infinite}
.nav-item:hover .g-check,.nav-item:focus-visible .g-check{animation:g-draw 1.6s var(--ease-fluid) infinite}
.nav-item:hover .g-scan,.nav-item:focus-visible .g-scan{animation:g-scan 1s ease-in-out infinite alternate}
.nav-item:hover .g-star,.nav-item:focus-visible .g-star{animation:g-spin 2s ease-in-out infinite}
.nav-item:hover .g-spark,.nav-item:focus-visible .g-spark{animation:g-pulse .8s ease-in-out infinite alternate}
.nav-item:hover .g-plus,.nav-item:focus-visible .g-plus{animation:g-turn 1.8s ease-in-out infinite}
.nav-item:hover .g-tile,.nav-item:focus-visible .g-tile{animation:g-nudge 1.2s ease-in-out infinite alternate}
.nav-item:hover .g-brand,.nav-item:focus-visible .g-brand{animation:g-pop 1.2s ease-in-out infinite}
.nav-item:hover .g-nib,.nav-item:focus-visible .g-nib{animation:g-write 1.2s ease-in-out infinite}
.nav-item:hover .g-code,.nav-item:focus-visible .g-code{animation:g-brackets 1.2s ease-in-out infinite alternate}
.nav-item:hover .g-layer,.nav-item:focus-visible .g-layer{animation:g-stack 1s ease-in-out infinite alternate}
@keyframes g-march{to{stroke-dashoffset:-11}}
@keyframes g-breathe{50%{transform:scale(1.14)}}
@keyframes g-point{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-7px)}}
@keyframes g-resize{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
@keyframes g-hop{from{transform:translate(0,0) scale(1)}to{transform:translate(-3px,-3px) scale(1.25)}}
@keyframes g-flip{0%,35%{transform:scaleX(1)}50%,85%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes g-draw{0%{stroke-dashoffset:10}45%,100%{stroke-dashoffset:0}}
@keyframes g-scan{from{transform:translateY(-2px)}to{transform:translateY(8px)}}
@keyframes g-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.2)}100%{transform:rotate(180deg) scale(1)}}
@keyframes g-pulse{from{transform:scale(.6);opacity:.5}to{transform:scale(1.35);opacity:1}}
@keyframes g-turn{0%,100%{transform:rotate(0)}50%{transform:rotate(135deg) scale(1.15)}}
@keyframes g-nudge{from{transform:translate(0,0)}to{transform:translate(-2px,-2px)}}
@keyframes g-pop{50%{transform:scale(1.5)}}
@keyframes g-write{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3px,-3px) rotate(10deg)}}
@keyframes g-brackets{from{transform:scaleX(1)}to{transform:scaleX(1.3)}}
@keyframes g-stack{from{transform:translateY(0)}to{transform:translateY(-3px)}}

@media(max-width:1000px){
  .nav-group{grid-column:1/-1;display:grid;gap:var(--space-half)}
  .site-header nav .nav-trigger{pointer-events:none;min-height:0;padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-sm);color:var(--text-muted)}
  .nav-trigger .nav-chev{display:none}
  .nav-panel,.nav-panel--roles{position:static;width:auto;padding:0;background:none;border:0;box-shadow:none;opacity:1;visibility:inherit;pointer-events:inherit;transform:none;transition:none}
  .nav-panel::before{display:none}
  .nav-group.is-open .nav-panel{transform:none}
  .site-header nav .nav-panel a.nav-item{min-height:56px;align-items:center}
  .nav-item-text span{display:none}
  .site-header nav .nav-panel a.nav-panel-foot{display:none}
  .nav-glyph{width:32px;height:32px}
  .nav-glyph svg{width:20px;height:20px}
}
@media(max-width:520px){.nav-panel{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.nav-panel,.nav-chev,.nav-glyph [class^=g-]{transition:none}.nav-item:hover [class^=g-],.nav-item:focus-visible [class^=g-]{animation:none}}

@media(min-width:1001px){
  .nav-group.is-open .nav-panel>a{animation:nav-menu-in 280ms var(--ease-enter) both}
  .nav-group.is-open .nav-panel>a:nth-child(2){animation-delay:30ms}.nav-group.is-open .nav-panel>a:nth-child(3){animation-delay:60ms}
  .nav-group.is-open .nav-panel>a:nth-child(4){animation-delay:90ms}.nav-group.is-open .nav-panel>a:nth-child(5){animation-delay:120ms}
  .nav-group.is-open .nav-panel>a:nth-child(6){animation-delay:150ms}.nav-group.is-open .nav-panel>a:nth-child(7){animation-delay:180ms}
}
@keyframes nav-menu-in{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.nav-group.is-open .nav-panel>a{animation:none}}

@media(min-width:1001px){
  .site-header nav .nav-trigger::after{content:'';position:absolute;left:var(--space-2);right:var(--space-2);bottom:10px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-fast)}
  .site-header nav .nav-trigger:hover::after,.site-header nav .nav-trigger[aria-current]::after,.nav-group.is-open .nav-trigger::after{transform:scaleX(1)}
}