/* ==========================================================================
   Arshan – Mega menus (8 styles)
   Load after style.css and headers.css. A mega menu is a .hdr-mega panel
   inside a .has-dd.has-mega menu item; add a .mm--{style} modifier for the
   layout. Add .is-pinned to the item to keep the panel open (showcases).
   --------------------------------------------------------------------------
   0. Shared            3. Corporate (03)     6. Blog (06)
   1. Demos (01)        4. Ecommerce (04)     7. Agency (07)
   2. SaaS (02)         5. Fashion (05)       8. Real estate (08)
                                              9. Responsive
   ========================================================================== */

/* 0. Shared ------------------------------------------------------------- */
.hdr-menu--pill .hdr-menu__link.is-active { background: var(--primary-50); border-radius: var(--radius-pill); padding-inline: 16px; }
.hdr-menu__link--deal { color: #ef3e5c; font-weight: 600; }
.hdr-signin { padding: 8px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.hdr-signin:hover { color: var(--primary); }
.hdr-count--zero { background: #ef3e5c; }

/* navy header (03, 07) */
.hdr--navy { --hdr-bg: #0f1436; --hdr-fg: rgba(255,255,255,.82); --hdr-accent: #fff; }
.hdr--navy .hdr-logo { color: #fff; }
.hdr--navy .hdr-logo svg { --logo-ring: #0f1436; }
.hdr--navy .hdr-menu--pill .hdr-menu__link.is-active { background: rgba(255,255,255,.12); color: #fff; }
.hdr--navy .hdr-icon:hover { background: rgba(255,255,255,.1); }
.btn--white-solid { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--white-solid:hover { --btn-bg: #eceafe; }

/* panel base */
.hdr-mega.mm { display: grid; gap: 22px; padding: 22px; grid-template-columns: var(--mm-cols, 1fr); align-items: stretch; }
.mm h6, .mm-label, .mm .ar-h6 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.mm-col + .mm-col { border-left: 1px solid var(--line); padding-left: 22px; }
.mm-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; }
.mm-links li + li { margin-top: 7px; }
.mm-links a { font-size: 13px; color: var(--muted); transition: color .2s; }
.mm-links a:hover { color: var(--primary); }
.mm-links--ink a { color: var(--ink-2); }
.mm-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.mm-more .icon { width: 13px; height: 13px; transition: transform .2s; }
.mm-more:hover .icon { transform: translateX(3px); }
.mm .hdr-mega__item { padding: 7px 8px; }
.mm .hdr-mega__item + .hdr-mega__item { margin-top: 2px; }
.mm .hdr-mega__ico--plain { background: none; color: var(--primary); width: 28px; }
.mm .btn { height: 38px; padding: 0 18px; font-size: 12.5px; border-radius: var(--radius-pill); }

/* promo / feature cards */
.mm-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 22px; border-radius: 14px; background: linear-gradient(140deg, #f3f1ff, #e2ddff); }
.mm-card > * { position: relative; z-index: 1; }
.mm-card h5, .mm-card .ar-h5 { font-size: 20px; line-height: 1.15; letter-spacing: 0; margin: 8px 0; max-width: 13ch; }
.mm-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 26ch; margin-bottom: 14px; }
.mm-card .btn, .mm-card .mm-more { align-self: flex-start; }
.mm-card--dark { background: linear-gradient(150deg, #1d1f6e, #312a9e); color: #fff; }
.mm-card--dark h5 { color: #fff; }
.mm-card--dark p { color: rgba(255,255,255,.75); }
.mm-pill { align-self: flex-start; padding: 2px 8px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mm-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.mm-art { position: absolute; z-index: 0 !important; pointer-events: none; }

/* 1. Demos (01) --------------------------------------------------------- */
.mm--demos { --mm-cols: 0.95fr 3fr; }
.mm--demos .mm-card { justify-content: center; }
.mm--demos .mm-card h5, .mm--demos .mm-card .ar-h5 { font-size: 22px; }
.mm-demos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 18px; }
.mm-demo .thumb { border-radius: 8px; transition: transform .25s, box-shadow .25s; }
.mm-demo:hover .thumb { transform: translateY(-3px); box-shadow: var(--shadow); }
.mm-demo strong { display: block; margin-top: 8px; font-size: 13px; color: var(--ink); }
.mm-demo small { font-size: 11.5px; color: var(--muted); }
.mm-demo .thumb__copy strong { margin: 0; }
.thumb--food { background: linear-gradient(135deg, #2a1a12, #6a3a1e); }
.art-food { right: 6%; bottom: 8%; width: 48%; height: 60%; background: radial-gradient(ellipse 46% 30% at 50% 60%, #f4e3c8 0 60%, #d79a52 62% 70%, transparent 72%), radial-gradient(circle at 70% 30%, rgba(255,190,110,.6), transparent 40%); }
.thumb--estate { background: linear-gradient(180deg, #bcd5ef, #e8f0f8); }
.art-estate { left: 30%; right: 4%; bottom: 0; height: 64%; background: linear-gradient(#3b4252 0 0) 50% 0 / 100% 14% no-repeat, linear-gradient(#f7f3ec 0 0) 50% 100% / 92% 86% no-repeat, linear-gradient(transparent 0 0); }
.thumb--agency { background: linear-gradient(135deg, #f6f4f2, #e7e2dc); }
.thumb--portfolio { background: #121522; }

/* 2. SaaS (02) ---------------------------------------------------------- */
.mm--saas { --mm-cols: 1fr 1fr 1fr 1.25fr; }
.mm--saas .mm-card { background: radial-gradient(240px 160px at 90% 20%, #d9d3ff, transparent 70%), linear-gradient(140deg, #f4f2ff, #e6e2ff); }
.art-laptop { right: -30px; top: 16px; width: 150px; height: 110px; border-radius: 8px; transform: perspective(300px) rotateY(-24deg) rotate(6deg); background:
  linear-gradient(var(--primary) 0 0) 10% 14% / 30% 8% no-repeat, linear-gradient(#e8e6ff 0 0) 10% 34% / 76% 8% no-repeat,
  linear-gradient(#e8e6ff 0 0) 10% 50% / 60% 8% no-repeat, linear-gradient(#cfc8ff 0 0) 10% 86% / 80% 22% no-repeat, #fff;
  box-shadow: 0 18px 30px -12px rgba(47,38,150,.45); }

/* 3. Corporate (03) ----------------------------------------------------- */
.mm--corp { --mm-cols: 1.15fr 3fr 1fr; }
.mm-photo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 20px; border-radius: 12px; color: #fff; background: #1b2550; }
.mm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,54,.2), rgba(15,20,54,.9)); }
.mm-photo > * { position: relative; z-index: 1; }
.mm-photo .mm-kicker { color: rgba(255,255,255,.75); }
.mm-photo h5, .mm-photo .ar-h5 { font-size: 20px; line-height: 1.15; color: #fff; margin: 6px 0; letter-spacing: 0; }
.mm-photo p { font-size: 12px; color: rgba(255,255,255,.8); }
.mm-photo .mm-more { color: #fff; }
.ph-tower2 { position: absolute !important; inset: 0; z-index: 0 !important; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 11px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 1px, transparent 1px 13px),
  linear-gradient(170deg, #7d95c8, #2e4479 60%, #182456);
  clip-path: polygon(30% 0, 78% 6%, 100% 20%, 100% 100%, 0 100%, 0 12%); }
.mm--corp .mm-card--dark { justify-content: flex-start; }

/* 4. Ecommerce (04) ----------------------------------------------------- */
.mm--shop { --mm-cols: 0.95fr 3fr 1.15fr; gap: 0; padding: 0; overflow: hidden; }
.mm-cats { padding: 14px 10px; background: #f8f8fd; border-right: 1px solid var(--line); }
.mm-cats a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.mm-cats a .icon { width: 15px; height: 15px; color: var(--muted); }
.mm-cats a:hover, .mm-cats a.is-active { background: var(--primary-50); color: var(--primary); }
.mm-cats a:hover .icon, .mm-cats a.is-active .icon { color: var(--primary); }
.mm--shop .mm-cols { padding: 18px 22px; --n: 4; }
.mm--shop .mm-cols h6, .mm--shop .mm-cols .ar-h6 { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.mm--shop .mm-card { border-radius: 0; background: linear-gradient(150deg, #f3f2fb, #e8e6f6); }
.mm-card .mm-kicker { color: var(--primary); }
.mm-card .mm-off { color: #ef3e5c; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.art-headphones { right: -14px; top: 22%; width: 120px; height: 130px; background:
  radial-gradient(ellipse 22% 26% at 24% 70%, #2a2d36 0 70%, transparent 72%),
  radial-gradient(ellipse 22% 26% at 76% 70%, #2a2d36 0 70%, transparent 72%),
  radial-gradient(ellipse 46% 50% at 50% 50%, transparent 0 78%, #3a3e4a 80% 90%, transparent 92%); }

/* 5. Fashion (05) ------------------------------------------------------- */
.mm--fashion { --mm-cols: 1.6fr 3fr 0.9fr; }
.mm-banner { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-height: 150px; padding: 18px; border-radius: 12px; background:
  radial-gradient(ellipse 15% 16% at 32% 40%, #e2ad8b 0 70%, transparent 72%),
  radial-gradient(ellipse 28% 13% at 32% 26%, #d9b77c 0 70%, transparent 72%),
  radial-gradient(ellipse 26% 40% at 32% 100%, #f5f0e8 0 70%, transparent 72%),
  linear-gradient(90deg, #e6c8a2 0 45%, #f7efe5 55%); }
.mm-banner > div { width: 56%; }
.mm-banner h5, .mm-banner .ar-h5 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.05; color: #1f1a17; }
.mm-banner p { font-size: 11.5px; color: #5b5048; margin: 6px 0 12px; }
.mm-banner .btn { --btn-bg: #1f1a17; }
.mm--fashion .mm-cols { --n: 4; align-content: start; }
.mm-sale { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; border-radius: 12px; background:
  radial-gradient(circle at 70% 26%, #c58f6c 0 7%, transparent 8%), radial-gradient(ellipse 14% 26% at 70% 50%, #4b7fbf 0 70%, transparent 72%),
  linear-gradient(180deg, #dfe7ee 0 50%, #ece7df 50%); }
.mm-sale strong { font-size: 17px; line-height: 1.2; color: var(--ink); }
.mm-sale .btn { margin-top: 10px; align-self: flex-start; --btn-bg: var(--ink); }

/* 6. Blog (06) ---------------------------------------------------------- */
.mm--blog { --mm-cols: 1.4fr 0.8fr 0.9fr 1.5fr; }
.mm-post { display: flex; gap: 12px; align-items: center; }
.mm-post + .mm-post { margin-top: 12px; }
.mm-post__img { flex-shrink: 0; width: 64px; height: 46px; border-radius: 6px; background: var(--ph); }
.mm-post strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; transition: color .2s; }
.mm-post:hover strong { color: var(--primary); }
.mm-post small { font-size: 11px; color: var(--muted); }
.mm-news { padding: 22px; border-radius: 14px; background: radial-gradient(240px 140px at 100% 0%, #d9d3ff, transparent 70%), linear-gradient(140deg, #f4f2ff, #e6e2ff); position: relative; overflow: hidden; }
.mm-news h5 { font-size: 18px; line-height: 1.25; letter-spacing: 0; max-width: 16ch; }
.mm-news p { font-size: 12px; color: var(--muted); margin: 8px 0 14px; max-width: 30ch; }
.mm-news .icon-plane { position: absolute; right: 22px; top: 20px; width: 34px; height: 34px; color: var(--primary); }
.mm-news .ftr-form__field, .mm-news .mm-field { display: flex; padding: 4px 4px 4px 14px; background: #fff; border-radius: 10px; border: 1px solid #e3e0fb; }
.mm-field input { flex: 1; min-width: 0; height: 36px; border: 0; font: inherit; font-size: 12.5px; outline: none; background: transparent; }
.mm-field button { display: grid; place-items: center; width: 40px; border-radius: 8px; background: var(--primary); color: #fff; }
.mm-field button .icon { width: 16px; height: 16px; }
.mm-field:focus-within { border-color: var(--primary); }
.mm-news .newsletter__msg { margin-top: 6px; min-height: 16px; font-size: 11.5px; color: var(--primary); }

/* 7. Agency (07) -------------------------------------------------------- */
.mm--agency { --mm-cols: 1.15fr 4fr; background: #0f1436; border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.mm--agency .mm-kicker { color: #a99bff; }
.mm--agency h5, .mm--agency .ar-h5 { font-size: 20px; line-height: 1.2; color: #fff; margin: 8px 0; }
.mm--agency p { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 12px; }
.mm--agency .mm-more { color: #fff; }
.mm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mm-tile__img { display: block; aspect-ratio: 1 / 0.82; border-radius: 8px; background: var(--ph); transition: transform .25s; }
.mm-tile:hover .mm-tile__img { transform: translateY(-3px); }
.mm-tile strong { display: block; margin-top: 10px; font-size: 13px; color: #fff; }
.mm-tile small { font-size: 11.5px; color: rgba(255,255,255,.6); }
.tile-1 { --ph: radial-gradient(circle at 70% 30%, rgba(160,140,255,.8), transparent 40%), linear-gradient(135deg, #2b2a8f, #6a4cf0); }
.tile-2 { --ph: linear-gradient(#ff6a3d 0 0) 30% 40% / 18% 50% no-repeat, linear-gradient(#ff6a3d 0 0) 70% 40% / 18% 50% no-repeat, linear-gradient(-30deg, transparent 45%, #ff8a3d 45% 55%, transparent 55%), #2a1410; }
.tile-3 { --ph: linear-gradient(160deg, transparent 50%, #7fa3ff 50% 52%, transparent 52%), radial-gradient(ellipse 40% 30% at 50% 60%, #b8c8ff 0 30%, transparent 32%), linear-gradient(135deg, #1a2350, #3b4c96); }
.tile-4 { --ph: linear-gradient(#e7ecf5 0 0) 50% 40% / 50% 34% no-repeat, linear-gradient(#5b4cf0 0 0) 50% 64% / 30% 6% no-repeat, linear-gradient(135deg, #1f2a4c, #2f3b66); }
.tile-5 { --ph: radial-gradient(circle at 50% 38%, #c9946f 0 10%, transparent 11%), radial-gradient(ellipse 30% 30% at 50% 100%, #2c3a7a 0 70%, transparent 72%), linear-gradient(135deg, #263070, #4b55b8); }

/* 8. Real estate (08) --------------------------------------------------- */
.mm--estate { --mm-cols: 1fr 0.85fr 0.85fr 1.6fr; }
.mm-feature-photo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; padding: 18px; border-radius: 12px; color: #fff; background:
  linear-gradient(180deg, rgba(10,14,35,0) 30%, rgba(10,14,35,.75)),
  linear-gradient(#e9edf2 0 0) 88% 34% / 40% 26% no-repeat,
  linear-gradient(#2e3340 0 0) 90% 18% / 46% 6% no-repeat,
  linear-gradient(#9fb6c8 0 0) 80% 32% / 8% 12% no-repeat,
  linear-gradient(180deg, #7aa5d6 0 66%, #4e7a46 66%); }
.mm-feature-photo .mm-kicker { color: rgba(255,255,255,.85); }
.mm-feature-photo h5 { font-size: 22px; line-height: 1.15; margin: 6px 0 12px; color: #fff; max-width: 12ch; }
.mm-feature-photo .btn { align-self: flex-start; }

/* 9. Responsive --------------------------------------------------------- */
@container hdr (max-width: 1100px) {
  .mm--demos { --mm-cols: 1fr; }
  .mm--saas { --mm-cols: repeat(3, 1fr); }
  .mm--saas .mm-card { grid-column: 1 / -1; }
  .mm--corp { --mm-cols: 1fr 3fr; }
  .mm--corp .mm-card--dark { display: none; }
  .mm--shop { --mm-cols: 0.9fr 3fr; }
  .mm--shop .mm-card { display: none; }
  .mm--fashion { --mm-cols: 1.2fr 3fr; }
  .mm--fashion .mm-sale { display: none; }
  .mm--blog { --mm-cols: 1.4fr 0.8fr 0.9fr; }
  .mm--blog .mm-news { grid-column: 1 / -1; }
  .mm--agency { --mm-cols: 1fr; }
  .mm--estate { --mm-cols: 1fr 1fr 1fr; }
  .mm--estate .mm-feature-photo { grid-column: 1 / -1; min-height: 150px; }
}
@container hdr (max-width: 760px) {
  .mm-demos, .mm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-tiles .mm-tile:nth-child(n+4) { display: none; }
  .mm--corp, .mm--fashion { --mm-cols: 1fr; }
  .mm--shop .mm-cols, .mm--fashion .mm-cols { --n: 2; }
}
/* Burger mode: panels become simple stacked lists */
@container hdr (max-width: 600px) {
  .hdr-mega.mm { --mm-cols: 1fr; padding: 4px 0 8px 8px; gap: 14px; background: none; border: 0; }
  .mm .mm-hide-sm, .mm .mm-card, .mm .mm-photo, .mm .mm-banner, .mm .mm-sale, .mm .mm-news, .mm .mm-feature-photo { display: none; }
  .mm-col + .mm-col { border: 0; padding-left: 0; }
  .mm-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mm-demos, .mm-tiles { grid-template-columns: 1fr 1fr; }
  .mm .thumb { display: none; }
  .mm-demo strong { margin-top: 0; }
  .hdr .mm--agency, .hdr .mm--agency .mm-tile strong, .hdr .mm--agency .mm-tile small { color: var(--ink-2); }
  .hdr--navy .hdr-menu--pill .hdr-menu__link.is-active { background: var(--primary-50); color: var(--primary); }
  .mm-tile__img { display: none; }
  .mm-tiles .mm-tile:nth-child(n+4) { display: block; }
  .mm-cats { background: none; border: 0; padding: 0; }
}
.hdr.is-collapsed .hdr-mega.mm { --mm-cols: 1fr; padding: 4px 0 8px 8px; gap: 14px; background: none; border: 0; }
.hdr.is-collapsed .mm .mm-hide-sm, .hdr.is-collapsed .mm .mm-card, .hdr.is-collapsed .mm .mm-photo, .hdr.is-collapsed .mm .mm-banner, .hdr.is-collapsed .mm .mm-sale, .hdr.is-collapsed .mm .mm-news, .hdr.is-collapsed .mm .mm-feature-photo, .hdr.is-collapsed .mm .thumb, .hdr.is-collapsed .mm-tile__img { display: none; }
.hdr.is-collapsed .mm-col + .mm-col { border: 0; padding-left: 0; }
.hdr.is-collapsed .mm-cols, .hdr.is-collapsed .mm-demos, .hdr.is-collapsed .mm-tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
.hdr.is-collapsed .mm--agency, .hdr.is-collapsed .mm--agency .mm-tile strong, .hdr.is-collapsed .mm--agency .mm-tile small { color: var(--ink-2); }
.hdr--navy.is-collapsed .hdr-menu--pill .hdr-menu__link.is-active { background: var(--primary-50); color: var(--primary); }
.hdr.is-collapsed .mm-cats { background: none; border: 0; padding: 0; }
.hdr.is-collapsed .mm-tiles .mm-tile:nth-child(n+4) { display: block; }