.header-tools-menu-item { position: relative; }

.header-tools-trigger { gap: .38rem; }
.header-tools-trigger-icon { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; }
.header-tools-trigger-badge { display: inline-flex; align-items: center; padding: .125rem .3125rem; color: #fff; background: #ed513c; border-radius: .25rem; font-size: .5rem; font-weight: 800; line-height: 1; letter-spacing: .035em; text-transform: uppercase; }
.header-tools-trigger::after { content: ""; width: .42rem; height: .42rem; border-right: .1rem solid currentColor; border-bottom: .1rem solid currentColor; transform: rotate(45deg) translateY(-.12rem); transition: transform .2s ease; }
.header-tools-menu-item.is-open > .header-tools-trigger::after { transform: rotate(225deg) translate(-.05rem, -.05rem); }

.header-tools-mega-menu { --menu-top: 5rem; position: fixed; z-index: 1000; top: var(--menu-top); left: 50vw; width: min(70rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; color: #f1f5ff; background: rgba(4,8,15,.985); border: 1px solid #3a5680; border-radius: 1rem; box-shadow: 0 0 0 1px rgba(103,157,231,.16), 0 0 .8rem rgba(66,126,211,.22), 0 .65rem 1.6rem rgba(0,0,0,.46), 0 1.8rem 4.5rem rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 1.75rem rgba(54,94,153,.045); font-family: inherit; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -.65rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.header-tools-menu-item.is-open > .header-tools-mega-menu,
.header-tools-menu-item:hover > .header-tools-mega-menu,
.header-tools-menu-item:focus-within > .header-tools-mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.header-tools-mega-menu__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.35rem; border-bottom: 1px solid #263244; }
.header-tools-mega-menu__topbar > div { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.header-tools-mega-menu__eyebrow { color: #82b2ff; font-size: .7rem; font-weight: 700; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase; }
.header-tools-mega-menu__topbar strong { color: #f7f9fd; font-size: 1.08rem; line-height: 1.35; font-weight: 700; letter-spacing: -.015em; }
.header-tools-mega-menu__view-all { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; flex: 0 0 auto; min-height: 2.55rem; padding: .65rem .9rem; color: #edf3ff; background: #193964; border: 1px solid #3f72b7; border-radius: .7rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-size: .8rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.header-tools-mega-menu__view-all:hover { color: #fff; background: #224a7f; border-color: #5790dc; }
.header-tools-mega-menu__view-all span { font-size: 1rem; font-weight: 400; }
.header-tools-mega-menu__grid { display: grid; grid-template-columns: 1.18fr 1fr 1.12fr .9fr; gap: 0; padding: 1.3rem 1.35rem 1.15rem; }
.header-tools-group { --group-color: #78aaff; --group-bg: #10284d; min-width: 0; padding: 0 1.15rem; border-right: 1px solid #222d3d; }
.header-tools-group:first-child { padding-left: 0; }
.header-tools-group:last-child { padding-right: 0; border-right: 0; }
.header-tools-group--image { --group-color: #a77cff; --group-bg: #2b1b52; }
.header-tools-group--design { --group-color: #59c78d; --group-bg: #103e2d; }
.header-tools-group--files { --group-color: #ee8a8e; --group-bg: #4b272f; }
.header-tools-group__heading { display: flex; align-items: flex-start; gap: .65rem; min-height: 3.7rem; margin-bottom: .45rem; }
.header-tools-group__symbol { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; color: var(--group-color); background: var(--group-bg); border-radius: .55rem; }
.header-tools-group__symbol svg { width: 1.05rem; height: 1.05rem; }
.header-tools-group__heading h3 { margin: .05rem 0 .22rem; color: #f0f3fa; font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.header-tools-group__heading p { margin: 0; color: #8e99ad; font-size: .72rem; font-weight: 400; line-height: 1.5; }
.header-tools-group__items { display: grid; align-content: start; gap: .25rem; }
.header-tools-item { display: flex; align-items: center; gap: .55rem; min-height: 2.55rem; padding: .38rem .45rem; color: #d5dbe7; border: 1px solid transparent; border-radius: .55rem; text-decoration: none; transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease; }
.header-tools-item:hover, .header-tools-item:focus-visible { color: #fff; background: color-mix(in srgb, var(--group-color) 10%, transparent); border-color: color-mix(in srgb, var(--group-color) 20%, transparent); transform: translateX(.12rem); }
.header-tools-item__icon { display: grid; place-items: center; flex: 0 0 1.55rem; width: 1.55rem; height: 1.55rem; color: var(--group-color); background: transparent; }
.header-tools-item__icon svg { width: 1.05rem; height: 1.05rem; }
.header-tools-item__name { min-width: 0; font-size: .82rem; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; }
.header-tools-badge { margin-left: auto; padding: .18rem .4rem; color: #a9c8ff; background: #244c82; border-radius: 999px; font-size: .54rem; font-weight: 700; line-height: 1.25; letter-spacing: .025em; text-transform: uppercase; }
.header-tools-badge--new { color: #ffb48e; background: #603924; }
.header-tools-trigger:focus-visible, .header-tools-mega-menu a:focus-visible { outline: 2px solid #8c75ff !important; outline-offset: 2px; }

.header-tools-mobile-toggle, .header-tools-mobile-panel { display: none; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .header-tools-mega-menu__topbar { padding: .9rem 1.1rem; }
  .header-tools-mega-menu__grid { padding: 1.1rem .9rem 1rem; }
  .header-tools-group { padding: 0 .8rem; }
  .header-tools-group__heading h3 { font-size: .82rem; }
  .header-tools-group__heading p { font-size: .68rem; }
  .header-tools-item { gap: .55rem; padding-inline: .35rem; }
  .header-tools-item__name { font-size: .76rem; }
}

@media (max-width: 1023px) {
  .header-tools-mega-menu { display: none; }
  .header-tools-menu-item { padding-right: 2.5rem; }
  .header-tools-mobile-link { display: flex; align-items: center; gap: .4rem; }
  .header-tools-mobile-toggle { display: grid; place-items: center; position: absolute; top: .12rem; right: 0; width: 2.25rem; height: 2.25rem; color: #fff; background: transparent; border: 0; border-radius: .45rem; font-size: 1.2rem; cursor: pointer; }
  .header-tools-mobile-toggle[aria-expanded="true"] > span[aria-hidden="true"] { transform: rotate(180deg); }
  .header-tools-mobile-toggle > span { transition: transform .2s ease; }
  .header-tools-mobile-panel { display: block; grid-column: 1 / -1; margin: .4rem -2.5rem .2rem 0; padding: .75rem; background: rgba(31,41,55,.72); border: 1px solid rgba(148,163,184,.18); border-radius: .75rem; }
  .header-tools-mobile-panel[hidden] { display: none; }
  .header-tools-mobile-group + .header-tools-mobile-group { margin-top: .8rem; }
  .header-tools-mobile-group h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; color: #a99aff; font: 700 .72rem/1.3 Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .045em; }
  .header-tools-mobile-group h3 svg { width: .95rem; height: .95rem; }
  .header-tools-mobile-group > a { display: flex; align-items: center; gap: .55rem; padding: .42rem .45rem; color: #d8deea; border-radius: .45rem; font-size: .78rem; text-decoration: none; }
  .header-tools-mobile-group > a:hover, .header-tools-mobile-group > a:focus-visible { color: #fff; background: rgba(124,92,255,.2); }
  .header-tools-mobile-group > a svg { width: 1rem; height: 1rem; color: #a99aff; }
  .header-tools-mobile-group small { margin-left: auto; color: #c7bcff; font-size: .55rem; font-weight: 700; text-transform: uppercase; }
  .header-tools-mobile-view-all { display: block; margin-top: .75rem; padding: .55rem; color: #c8beff; border-top: 1px solid rgba(148,163,184,.18); font-size: .75rem; font-weight: 700; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header-tools-mega-menu, .header-tools-trigger::after, .header-tools-item, .header-tools-mobile-toggle > span { transition: none; }
}