/* ============================================================================
   Soarcery marketing - redesigned mega-menu (menu.css)
   Hybrid of Anomali (left intro card + multi-column links) and Torq (right
   featured image card). Mystic dark; purple primary, teal/orange accents.
   Injected by site.js on every page, after site.css. Image areas are <image-slot>
   (drop real product shots later) over a gradient-mesh fallback, blog-style.
   ========================================================================== */

/* widen + restructure the panel (overrides site.css .mega) */
.site-header .mega{ max-width:min(96vw, 1080px); padding:0; overflow:hidden; }
.mega-3{ display:grid; grid-template-columns:300px 1fr 300px; align-items:stretch; }
.mega-3 .mz{ padding:24px; }
.mega-3 .mz-cols{ border-left:1px solid var(--border); border-right:1px solid var(--border); }
@media(max-width:1000px){
  .site-header .mega{ max-width:94vw; }
  .mega-3{ grid-template-columns:1fr 280px; }
  .mega-3 .mz-intro{ display:none; }
  .mega-3 .mz-cols{ border-left:0; }
}

/* ---- intro card (left, Anomali-style) ---- */
.mz-intro{ display:flex; flex-direction:column; gap:14px; background:linear-gradient(180deg,rgba(124,58,237,.06),transparent 70%); }
.mz-intro .m-shot{ position:relative; width:100%; height:128px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.mz-intro .m-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple-300); }
.mz-intro h4{ font-size:17px; font-weight:600; letter-spacing:-.02em; margin:0; }
.mz-intro p{ font-size:13px; line-height:1.55; color:var(--fg-muted); margin:0; }
.mz-intro .m-go{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--purple-300); }
.mz-intro .m-go svg{ width:15px; height:15px; transition:transform .2s; }
.mz-intro:hover .m-go svg{ transform:translateX(3px); }

/* ---- columns (middle) ---- */
/* one grid column per group; each group stacks its header + links so the header
   is flush above its own first item (no shared-row gap). */
.mz-cols{ display:grid; grid-template-columns:repeat(var(--mcols,1),1fr); gap:0 26px; align-items:start; }
.mz-group{ display:flex; flex-direction:column; }
.mz-colhead{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); padding:6px 10px 4px; }
.m-link{ display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:var(--radius-md); border:1px solid transparent; transition:background .14s,border-color .14s; }
.m-link:hover{ background:rgba(124,58,237,.07); border-color:var(--border-primary); }
.m-link .mi{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--purple-300); }
.m-link .mi svg{ width:16px; height:16px; stroke-width:1.5; }
.m-link.t .mi{ color:var(--teal-300); } .m-link.o .mi{ color:var(--orange-300); }
.m-link .mt{ font-size:14px; font-weight:600; color:var(--fg); letter-spacing:-.01em; display:block; }
.m-link .md{ font-size:12px; color:var(--fg-muted); margin-top:1px; line-height:1.4; display:block; }

/* ---- featured card (right, Torq-style) ---- */
.mz-feat{ padding:0 !important; position:relative; display:flex; flex-direction:column; justify-content:flex-start; min-height:280px; overflow:hidden; }
.mz-feat .m-cover{ position:absolute; inset:0; z-index:0; }
.mz-feat .m-body{ position:relative; z-index:2; padding:20px; }
.mz-feat .m-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-300); }
.mz-feat h4{ font-size:18px; font-weight:600; letter-spacing:-.02em; margin:8px 0 0; line-height:1.18; text-wrap:balance; }
.mz-feat .m-cta{ margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#fff; }
.mz-feat .m-cta svg{ width:15px; height:15px; transition:transform .2s; }
.mz-feat:hover .m-cta svg{ transform:translateX(3px); }
/* scrim behind the top-left copy so it stays legible over any image (was a
   bottom gradient when the copy lived at the bottom); fades out by ~72% so the
   lower two thirds of the shot read clearly. */
.mz-feat .m-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(6,6,12,.9),rgba(6,6,12,.32) 46%,transparent 74%); }
@media(max-width:1000px){ .mz-feat{ min-height:220px; } }

/* ============================================================================
   image-slot + gradient-mesh cover (shared by intro shot + feature cover)
   ========================================================================== */
.m-cover, .m-shot{ background:#0a0a12; }
.m-cover .ec-field, .m-shot .ec-field{ position:absolute; inset:0; z-index:0; }
.m-cover .ec-b1, .m-cover .ec-b2, .m-shot .ec-b1, .m-shot .ec-b2{ position:absolute; border-radius:9999px; filter:blur(34px); z-index:1; mix-blend-mode:screen; }
.m-cover .ec-photo, .m-shot .ec-photo{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:center; }
/* per-image crop focus (object-fit:cover never distorts; object-position picks
   what survives the crop). Humans: keep the face. Screenshots: keep the key
   content; app views are anchored to their top so the title/header stays. */
.ec-photo[data-slot="m-solutions"],
.ec-photo[data-slot="m-company"],
.ec-photo[data-slot="m-resources"]{ object-position:center top; }     /* app screenshots: keep the header */
.ec-photo[data-slot="m-company-feat"]{ object-position:center 35%; }   /* team photo: faces sit in the upper band */
.ec-photo[data-slot="m-resources-feat"]{ object-position:65% 28%; }    /* analyst portrait: face is upper-right */
image-slot.ec-photo::part(frame){ background:transparent; }
image-slot.ec-photo::part(empty){ color:var(--fg-muted); font-size:11px; background:linear-gradient(180deg,transparent,rgba(5,5,8,.35)); }
image-slot.ec-photo::part(ring){ border-color:rgba(255,255,255,.18); }
.m-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* gradient variants */
.ecov--purple .ec-field{ background:radial-gradient(120% 130% at 15% 0%,rgba(124,58,237,.5),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(109,40,217,.42),transparent 55%),linear-gradient(150deg,#120c26,#0a0a12 72%); }
.ecov--purple .ec-b1{ width:56%; height:64%; left:6%; top:-8%; background:radial-gradient(circle,rgba(167,139,250,.85),transparent 60%); }
.ecov--purple .ec-b2{ width:46%; height:56%; right:-6%; bottom:-8%; background:radial-gradient(circle,rgba(94,234,212,.5),transparent 62%); }
.ecov--teal .ec-field{ background:radial-gradient(120% 120% at 100% 0%,rgba(20,184,166,.45),transparent 55%),radial-gradient(120% 120% at 0% 100%,rgba(124,58,237,.5),transparent 58%),linear-gradient(150deg,#0c1320,#0a0a12 72%); }
.ecov--teal .ec-b1{ width:46%; height:60%; left:-6%; top:6%; background:radial-gradient(circle,rgba(94,234,212,.7),transparent 62%); }
.ecov--teal .ec-b2{ width:48%; height:62%; right:-6%; bottom:-6%; background:radial-gradient(circle,rgba(168,85,247,.8),transparent 62%); }
.ecov--orange .ec-field{ background:radial-gradient(120% 120% at 85% 0%,rgba(249,115,22,.4),transparent 52%),radial-gradient(120% 130% at 0% 100%,rgba(124,58,237,.5),transparent 58%),linear-gradient(150deg,#1a0f1a,#0a0a12 72%); }
.ecov--orange .ec-b1{ width:50%; height:58%; right:-4%; top:-8%; background:radial-gradient(circle,rgba(251,146,60,.65),transparent 62%); }
.ecov--orange .ec-b2{ width:50%; height:60%; left:-8%; bottom:-10%; background:radial-gradient(circle,rgba(168,85,247,.8),transparent 62%); }

@media(prefers-reduced-motion:reduce){ .m-cover *, .m-shot *{ animation:none !important; } }