/* =========================================================
   NEW MORELAND — WOW PASS (Frontend only)
   - Keeps City/Outskirts title treatments
   - Fixes wonky behavior (cart, nav, reveals)
   - Backend hooks preserved in JS
   ========================================================= */

:root{
  --bg0:#05050a;
  --bg1:#070712;
  --ink:#f6f7ff;
  --muted:rgba(246,247,255,.72);

  --cityA:#2ff7ff;
  --cityB:#7a2bff;
  --cityC:#1f49ff;

  --outA:#ffb347;
  --outB:#ff7a18;
  --outC:#3bd6c6;

  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.22);
  --shadow:rgba(0,0,0,.55);

  --radius:16px;
  --radius2:26px;
  --pad:clamp(18px,2.4vw,36px);
  --max:1180px;
  --navH:76px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease2:cubic-bezier(.1,.9,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(122,43,255,.18), transparent 55%),
    radial-gradient(1100px 700px at 80% 20%, rgba(255,122,24,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #05050b);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

/* film grain + vignette */
.nm::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(0,0,0,.0), rgba(0,0,0,.55) 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
  mix-blend-mode:overlay;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.nm::after{
  content:"";
  position:fixed;inset:0;
  background:radial-gradient(900px 700px at 50% 30%, transparent 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:0;
}

.nm-main{position:relative;z-index:1;padding-top:var(--navH)}
.nm-footer{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;gap:12px;
  padding:18px var(--pad);
  border-top:1px solid var(--line);
  color:rgba(255,255,255,.72);
  font-size:12px;
}

/* ---------------- NAV ---------------- */
.nm-nav{
  position:fixed;top:0;left:0;right:0;height:var(--navH);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,10,18,.88), rgba(10,10,18,.35));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nm-logo{display:flex;flex-direction:column;gap:4px;line-height:1.05}
.nm-logo__mark{
  font-weight:950;
  letter-spacing:1px;
  font-size:18px;
  text-transform:uppercase;
}
.nm-logo__tag{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.nm-nav__links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nm-nav__link{
  position:relative;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:13px;
  letter-spacing:.3px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), filter .22s var(--ease);
}
.nm-nav__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}
.nm-nav__link.is-active{
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
}

/* city active underline */
.nm-city .nm-nav__link.is-active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--cityA), var(--cityB));
  filter: drop-shadow(0 0 12px rgba(47,247,255,.25));
}
/* outskirts active glow blob */
.nm-outskirts .nm-nav__link.is-active::before{
  content:""; position:absolute; inset:-7px -9px; border-radius:999px;
  background:
    radial-gradient(140px 70px at 30% 40%, rgba(255,179,71,.35), transparent 70%),
    radial-gradient(110px 60px at 70% 60%, rgba(255,122,24,.24), transparent 70%);
  filter: blur(2px);
  z-index:-1;
}

/* cart badge */
.nm-cartBadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:18px;
  padding:0 6px;
  border-radius:999px;
  margin-left:6px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;
  line-height:1;
}

/* ---------------- UI bits ---------------- */
.nm-location-tag{
  display:inline-flex;align-items:center;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  width:fit-content;
}
.nm-location-tag--city{border-color:rgba(47,247,255,.25); box-shadow:0 0 0 1px rgba(122,43,255,.14) inset;}
.nm-location-tag--outskirts{border-color:rgba(255,179,71,.28); box-shadow:0 0 0 1px rgba(255,122,24,.10) inset;}
.nm-location-tag--preorder{border-color:rgba(255,255,255,.22);}

.nm-btn{
  cursor:pointer;
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-weight:860;
  letter-spacing:.4px;
  color:var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), filter .22s var(--ease);
}
.nm-btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.30); filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));}
.nm-btn--primary{
  background: linear-gradient(135deg, rgba(47,247,255,.20), rgba(122,43,255,.18), rgba(255,122,24,.14));
  border-color: rgba(255,255,255,.22);
}
.nm-btn--ghost{background:rgba(0,0,0,.18)}
.nm-btn--city{
  background: linear-gradient(135deg, rgba(31,73,255,.28), rgba(122,43,255,.18));
  border-color: rgba(47,247,255,.22);
}
.nm-btn--danger{
  background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(0,0,0,.18));
  border-color: rgba(255,122,24,.25);
}
.nm-btn--full{display:block;width:100%;text-align:center}

.nm-input,.nm-textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.24);
  color:var(--ink);
  padding:12px 12px;
  outline:none;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.nm-input:focus,.nm-textarea:focus{border-color:rgba(255,255,255,.30); background:rgba(0,0,0,.30)}
.nm-label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:rgba(255,255,255,.74)}

/* ---------------- Sections ---------------- */
.nm-section{
  width:min(var(--max), calc(100% - (var(--pad)*2)));
  margin:0 auto;
  padding:48px 0;
}
.nm-section--tight{padding:24px 0 44px}
.nm-section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.nm-section__title{
  font-size:26px;font-weight:950;letter-spacing:1px;text-transform:uppercase;
}
.nm-section__copy{max-width:560px;color:var(--muted);font-size:13px;line-height:1.55}

/* reveal anim */
[data-reveal]{opacity:0; transform: translateY(18px); transition: opacity .65s var(--ease2), transform .65s var(--ease2);}
[data-reveal].is-in{opacity:1; transform: translateY(0);}

/* ---------------- HOME / PREORDER ---------------- */
.nm-homeHero{
  position:relative;
  min-height: 92vh;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nm-homeHero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(135deg, rgba(47,247,255,.10), rgba(122,43,255,.10), rgba(255,122,24,.10)),
    url("../images/newmoreland.png") center/cover;
  filter:saturate(1.05) contrast(1.05);
  opacity:.90;
}
.nm-homeHero__bg::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.78) 60%, rgba(0,0,0,.92));
}
.nm-homeHero__content{
  position:relative;
  width:min(var(--max), calc(100% - (var(--pad)*2)));
  margin:0 auto;
  padding: clamp(34px, 6vw, 70px) 0;
}
.nm-kicker{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.74)}
.nm-homeHero__title{
  margin-top:12px;
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 980;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: .92;
  text-shadow: 0 20px 80px rgba(0,0,0,.55);
}
.nm-homeHero__sub{
  margin-top:12px;
  max-width: 760px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  font-size: 15px;
}
.nm-homeHero__ctas{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

.nm-portalCards{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nm-portalCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  overflow:hidden;
  padding: 18px;
  position:relative;
  transition: transform .35s var(--ease2), border-color .35s var(--ease2), filter .35s var(--ease2);
}
.nm-portalCard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.45));
}
.nm-portalCard__label{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.70)}
.nm-portalCard__title{margin-top:8px;font-size:28px;font-weight:950;letter-spacing:.8px;text-transform:uppercase}
.nm-portalCard__copy{margin-top:8px;color:rgba(255,255,255,.78);line-height:1.55;font-size:13px;max-width:520px}
.nm-portalCard__arrow{margin-top:10px;font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;opacity:.92}
.nm-portalCard--city::before{
  content:"";position:absolute;inset:-60px;
  background:
    radial-gradient(420px 240px at 25% 30%, rgba(47,247,255,.22), transparent 70%),
    radial-gradient(420px 240px at 70% 55%, rgba(122,43,255,.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 12px);
  opacity:.85;
  mix-blend-mode:screen;
  transform: rotate(-2deg);
  pointer-events:none;
}
.nm-portalCard--out::before{
  content:"";position:absolute;inset:-60px;
  background:
    radial-gradient(420px 240px at 30% 35%, rgba(255,179,71,.20), transparent 70%),
    radial-gradient(420px 240px at 75% 55%, rgba(255,122,24,.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 10px);
  opacity:.85;
  mix-blend-mode:overlay;
  transform: rotate(1deg);
  pointer-events:none;
}

.nm-stickers{
  position:absolute; right: var(--pad); bottom: 18px;
  display:flex; gap:12px; align-items:flex-end;
  z-index:2;
  opacity:.92;
}
.nm-sticker{width: 150px; height:auto; filter: drop-shadow(0 20px 60px rgba(0,0,0,.45)); transform: rotate(2deg);}
.nm-sticker--goomba{width: 120px; transform: rotate(-6deg) translateY(-8px); opacity:.95;}
.nm-sticker--postcard{border-radius: 16px; overflow:hidden;}

/* strip */
.nm-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nm-strip__item{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
}
.nm-strip__tag{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.62)}
.nm-strip__title{margin-top:8px;font-size:18px;font-weight:950;letter-spacing:.8px;text-transform:uppercase}
.nm-strip__copy{margin-top:8px;color:rgba(255,255,255,.78);line-height:1.55;font-size:13px}

/* preorder block */
.nm-preorderBlock{
  width:min(var(--max), calc(100% - (var(--pad)*2)));
  margin: 0 auto 64px;
}
.nm-preorderBlock__inner{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 500px at 30% 10%, rgba(255,255,255,.06), transparent 70%),
    rgba(0,0,0,.22);
  padding: 22px;
  box-shadow: 0 40px 130px rgba(0,0,0,.35);
}
.nm-preorderBlock__title{
  margin-top:10px;
  font-size:34px;
  font-weight:980;
  letter-spacing:1px;
  text-transform:uppercase;
}
.nm-preorderBlock__copy{margin-top:8px;color:rgba(255,255,255,.80);line-height:1.55;max-width:780px}
.nm-emailRow{margin-top:14px;display:flex;gap:10px}
.nm-preorderBlock__note{margin-top:10px;color:rgba(255,255,255,.62);font-size:12px}
.nm-previewGrid{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nm-previewPanel{
  height:150px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;letter-spacing:1px;
  color:rgba(255,255,255,.62);font-size:12px;
}

/* ---------------- HERO (City/Outskirts) ---------------- */
.nm-hero{
  position:relative;
  min-height: clamp(460px, 70vh, 760px);
  display:flex;
  align-items:flex-end;
  padding: var(--pad);
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nm-hero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
.nm-hero__content{position:relative;z-index:1;width:min(var(--max), calc(100% - (var(--pad)*2)));margin:0 auto;padding-bottom:14px}
.nm-hero__subtitle{margin-top:10px;max-width:740px;color:rgba(255,255,255,.84);font-size:16px;line-height:1.55}
.nm-hero__meta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.nm-chip{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
}

/* KEEP THE TITLE LOOK YOU LIKE (background-clip text) */
.nm-hero__title{
  margin-top:10px;
  font-size: clamp(54px, 6.2vw, 96px);
  font-weight: 980;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: .92;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 18px 70px rgba(0,0,0,.55);
}

/* City hero uses city.png */
.nm-city .nm-hero__bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78)),
    url("../images/city.png") center/cover;
  filter: saturate(1.06) contrast(1.05);
}
.nm-city .nm-hero__title{
  background-image:
    linear-gradient(90deg, rgba(47,247,255,.95), rgba(255,255,255,.85), rgba(122,43,255,.95)),
    url("../images/city.png");
  background-size: 200% 200%, cover;
  background-position: 0% 60%, center;
  animation: titleSheen 6.5s infinite linear;
}
.nm-city .nm-location-tag{border-color:rgba(47,247,255,.25)}
.nm-city .nm-chip{border-color:rgba(47,247,255,.18)}

/* Outskirts hero uses outskirts.png */
.nm-outskirts .nm-hero__bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.80)),
    url("../images/outskirts.png") center/cover;
  filter: saturate(1.05) contrast(1.05);
}
.nm-outskirts .nm-hero__title{
  background-image:
    linear-gradient(90deg, rgba(255,179,71,.95), rgba(255,255,255,.80), rgba(255,122,24,.95)),
    url("../images/outskirts.png");
  background-size: 200% 200%, cover;
  background-position: 0% 60%, center;
  animation: titleSheen 7.2s infinite linear;
}
.nm-outskirts .nm-location-tag{border-color:rgba(255,179,71,.28)}
.nm-outskirts .nm-chip{border-color:rgba(255,179,71,.18)}

/* City bands/signage stay */
.nm-city-bands{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;padding:0 var(--pad);
  opacity:.45;z-index:0;pointer-events:none;
}
.nm-city-bands span{
  border-left:1px solid rgba(47,247,255,.10);
  border-right:1px solid rgba(122,43,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 25%),
    radial-gradient(220px 120px at 50% 30%, rgba(47,247,255,.08), transparent 70%);
  backdrop-filter: blur(2px);
}
.nm-city-signage{
  position:absolute; right: var(--pad); top: calc(var(--navH) + 22px);
  display:flex;flex-direction:column;gap:10px;
  z-index:2;pointer-events:none;
}
.nm-sign{
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(47,247,255,.18);
  background: rgba(0,0,0,.22);
  box-shadow:0 0 0 1px rgba(122,43,255,.10) inset;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  animation: cityFlicker 4.6s infinite steps(2,end);
}

/* grids + cards */
.nm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nm-card--wow{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 18px;
  position:relative;
  overflow:hidden;
  transition: transform .28s var(--ease), border-color .28s var(--ease), filter .28s var(--ease);
}
.nm-card--wow::before{
  content:""; position:absolute; inset:-60px;
  background:
    radial-gradient(520px 260px at 25% 25%, rgba(47,247,255,.10), transparent 70%),
    radial-gradient(520px 260px at 75% 60%, rgba(122,43,255,.10), transparent 70%);
  opacity:.9; pointer-events:none;
}
.nm-card--wow:hover{transform: translateY(-3px) skewX(-.25deg); border-color:rgba(47,247,255,.26); filter: drop-shadow(0 18px 40px rgba(0,0,0,.38));}
.nm-card__title{position:relative;font-weight:950;text-transform:uppercase;letter-spacing:.9px;font-size:16px}
.nm-card__copy{position:relative;margin-top:8px;color:rgba(255,255,255,.80);font-size:13px;line-height:1.55}
.nm-card__meta{position:relative;margin-top:10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* callout */
.nm-callout{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 18px;
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  overflow:hidden;
  position:relative;
}
.nm-callout--city::before{
  content:""; position:absolute; inset:-80px;
  background:
    radial-gradient(820px 360px at 25% 20%, rgba(47,247,255,.12), transparent 70%),
    radial-gradient(820px 360px at 70% 50%, rgba(122,43,255,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 6px);
  opacity:.65; mix-blend-mode:screen; pointer-events:none;
}
.nm-callout__title{margin-top:10px;font-size:26px;font-weight:980;letter-spacing:1px;text-transform:uppercase}
.nm-callout__copy{margin-top:8px;color:rgba(255,255,255,.80);line-height:1.55;max-width:700px}
.nm-scanBox{
  height: 220px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 240px at 30% 12%, rgba(47,247,255,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 6px),
    rgba(0,0,0,.18);
  animation: scanMove 2.9s infinite linear;
}

/* Outskirts panels */
.nm-panels{display:flex;flex-direction:column;gap:14px}
.nm-panel{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), filter .25s var(--ease);
}
.nm-panel::after{
  content:""; position:absolute; inset:-50px;
  background:
    radial-gradient(900px 320px at 20% 30%, rgba(255,179,71,.12), transparent 70%),
    radial-gradient(900px 320px at 75% 60%, rgba(255,122,24,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 10px);
  opacity:.75; mix-blend-mode:overlay; pointer-events:none;
}
.nm-panel:hover{transform: translateY(-2px); border-color: rgba(255,179,71,.24); filter: drop-shadow(0 18px 45px rgba(0,0,0,.36));}
.nm-panel__title{position:relative;font-weight:980;text-transform:uppercase;letter-spacing:1px;font-size:16px}
.nm-panel__copy{position:relative;margin-top:8px;color:rgba(255,255,255,.80);font-size:13px;line-height:1.55}

.nm-signpost__card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,179,71,.18);
  background:
    linear-gradient(135deg, rgba(255,122,24,.18), rgba(0,0,0,.18)),
    radial-gradient(780px 300px at 30% 30%, rgba(255,179,71,.12), transparent 70%),
    rgba(0,0,0,.22);
  padding: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------------- Merch ---------------- */
.nm-products{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nm-product{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 16px;
  overflow:hidden;
  position:relative;
  transition: transform .25s var(--ease), border-color .25s var(--ease), filter .25s var(--ease);
}
.nm-product:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.26); filter: drop-shadow(0 18px 45px rgba(0,0,0,.36));}
.nm-product__thumb{
  height: 190px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 240px at 30% 12%, rgba(255,255,255,.08), transparent 70%),
    rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
}
.nm-product__thumb img{width:100%;height:100%;object-fit:cover;opacity:.95;filter:saturate(1.02) contrast(1.03)}
.nm-product__title{margin-top:12px;font-weight:980;text-transform:uppercase;letter-spacing:.8px;font-size:14px}
.nm-product__meta{margin-top:6px;color:rgba(255,255,255,.72);font-size:12px}
.nm-product__row{margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.nm-price{font-weight:900;letter-spacing:.6px}

/* ---------------- Cart / Checkout ---------------- */
.nm-cartLayout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
}
.nm-cartItems{display:flex;flex-direction:column;gap:12px}
.nm-cartItem{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 14px;
  display:grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items:center;
}
.nm-cartItem__img{
  width:90px;height:90px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;background:rgba(0,0,0,.18);
}
.nm-cartItem__img img{width:100%;height:100%;object-fit:cover}
.nm-cartItem__title{font-weight:950;letter-spacing:.6px;text-transform:uppercase;font-size:13px}
.nm-cartItem__meta{margin-top:6px;color:rgba(255,255,255,.72);font-size:12px}
.nm-qty{
  display:flex;align-items:center;gap:8px;
}
.nm-qty button{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  cursor:pointer;
}
.nm-qty span{min-width:26px;text-align:center;font-weight:900}
.nm-cartSummary__box{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 16px;
  position:sticky; top: calc(var(--navH) + 16px);
}
.nm-cartSummary__row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.82)}
.nm-cartSummary__total{border-bottom:none; padding-top:14px; font-size:16px}
.nm-divider{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.nm-microNote{margin-top:10px;color:rgba(255,255,255,.62);font-size:12px;line-height:1.45}

.nm-checkoutLayout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
}
.nm-formCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 16px;
}
.nm-twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nm-payBox{
  border-radius: 18px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.nm-payNote{color:rgba(255,255,255,.70);font-size:12px;line-height:1.5}
.nm-miniItems{display:flex;flex-direction:column;gap:10px}
.nm-miniItem{display:flex;gap:10px;align-items:center}
.nm-miniItem img{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.12);object-fit:cover}
.nm-miniItem div{font-size:12px;color:rgba(255,255,255,.82)}
.nm-miniItem strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px}

/* ---------------- Contact ---------------- */
.nm-contactHead{display:flex;align-items:center;gap:12px;margin-top:10px}
.nm-eotlLogo{width:54px;height:auto;filter: drop-shadow(0 18px 50px rgba(0,0,0,.45))}
.nm-contact-wrap{width:min(var(--max), calc(100% - (var(--pad)*2)));margin:0 auto;padding:54px 0 64px}
.nm-contact-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 22px;
  box-shadow: 0 40px 130px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
.nm-contact-card::after{
  content:"";position:absolute;inset:-60px;
  background:
    radial-gradient(420px 220px at 25% 35%, rgba(47,247,255,.08), transparent 70%),
    radial-gradient(420px 220px at 75% 55%, rgba(255,179,71,.08), transparent 70%);
  opacity:.75;pointer-events:none;
}
.nm-contact-title{
  font-weight:980;text-transform:uppercase;letter-spacing:1px;font-size:34px;
}
.nm-contact-copy{margin-top:8px;color:rgba(255,255,255,.78);line-height:1.55;font-size:13px;max-width:760px}

/* ---------------- Contact HERO (matches City/Outskirts) ---------------- */
.nm-contact .nm-hero__bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)),
    url("../images/contact.png") center/cover;
  filter: saturate(1.04) contrast(1.05);
}
.nm-contact .nm-hero__title{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.86), rgba(47,247,255,.78), rgba(255,179,71,.78)),
    url("../images/contact.png");
  background-size: 200% 200%, cover;
  background-position: 0% 60%, center;
  animation: titleSheen 7.0s infinite linear;
}
.nm-location-tag--contact{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(47,247,255,.08) inset;
}
.nm-contact .nm-chip{
  border-color: rgba(255,255,255,.16);
}

/* ---------------- Modal ---------------- */
.nm-modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  padding: var(--pad);
  z-index: 100;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
}
.nm-modal.is-open{display:flex}
.nm-modal__panel{
  width:min(720px,100%);
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.40);
  padding: 18px;
  box-shadow: 0 40px 160px rgba(0,0,0,.60);
}
.nm-modal__close{
  float:right; cursor:pointer;
  border:none;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  border-radius: 12px;
  padding: 8px 10px;
}

/* ---------------- Small redirect page ---------------- */
.nm-redirectBox{
  width:min(720px, calc(100% - (var(--pad)*2)));
  margin: 80px auto;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 22px;
}

/* ---------------- Animations ---------------- */
@keyframes cityFlicker{
  0%{opacity:.92} 10%{opacity:.55} 22%{opacity:.96} 36%{opacity:.62}
  52%{opacity:.93} 68%{opacity:.58} 84%{opacity:.95} 100%{opacity:.86}
}
@keyframes titleSheen{
  0%{background-position:0% 60%, center}
  50%{background-position:100% 60%, center}
  100%{background-position:0% 60%, center}
}
@keyframes scanMove{
  0%{filter: hue-rotate(0deg)}
  100%{filter: hue-rotate(12deg)}
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .nm-portalCards{grid-template-columns:1fr}
  .nm-strip{grid-template-columns:1fr}
  .nm-previewGrid{grid-template-columns:1fr}
  .nm-grid{grid-template-columns:1fr}
  .nm-products{grid-template-columns:1fr}
  .nm-cartLayout{grid-template-columns:1fr}
  .nm-checkoutLayout{grid-template-columns:1fr}
  .nm-callout{grid-template-columns:1fr}
  .nm-city-signage{display:none}
  .nm-emailRow{flex-direction:column}
}
@media (max-width: 560px){
  .nm-nav{height:auto;padding:12px var(--pad);align-items:flex-start}
  .nm-nav__links{gap:8px}
  .nm-twoCol{grid-template-columns:1fr}
  .nm-stickers{display:none}
}

/* === MERCH HERO TITLE FIX (bring back ARTIFACTS) === */
.nm-merch .nm-hero--merch .nm-hero__title{
  color: rgba(255,255,255,.92) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  text-shadow: 0 18px 60px rgba(0,0,0,.65);
  margin-top: 10px;
}

/* Optional: tighten the top spacing so it doesn't feel empty */
.nm-merch .nm-hero--merch{
  min-height: clamp(360px, 56vh, 540px);
}

/* === MERCH HERO BACKGROUND (merch.png) === */
.nm-merch .nm-hero--merch::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.78)),
    url("../images/merch.png") center/cover no-repeat;
  z-index:0;
}

.nm-merch .nm-hero--merch .nm-hero__content{
  position: relative;
  z-index: 1;
}
/* =========================================
   MERCH: "ARTIFACT INDEX" — match City/Outskirts index vibe
   (Replaces duplicated nm-index blocks)
   ========================================= */

.nm-chip--warm{
  border-color: rgba(255,179,71,.22);
  box-shadow: 0 0 0 1px rgba(255,122,24,.10) inset;
}

.nm-index{
  padding-top: 34px;
}

/* The "blue band" header feel (like ROADSIDE/DISTRICT index) */
.nm-index__bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;

  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(135deg, rgba(47,247,255,.10), rgba(122,43,255,.10), rgba(255,122,24,.08)),
    rgba(0,0,0,.18);

  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  margin-bottom: 16px;
}

.nm-index__title{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nm-index__note{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .4px;
  max-width: 420px;
  text-align:right;
  line-height: 1.5;
}

.nm-index__body{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(47,247,255,.06), transparent 70%),
    radial-gradient(900px 380px at 80% 20%, rgba(255,179,71,.06), transparent 70%),
    rgba(0,0,0,.18);
  padding: 16px;
}

.nm-index__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 14px;
  opacity:.95;
}

.nm-merch .nm-products{
  margin-top: 6px;
}

@media (max-width: 720px){
  .nm-index__bar{
    flex-direction:column;
    align-items:flex-start;
  }
  .nm-index__note{
    text-align:left;
    max-width: none;
  }
}

/* === MERCH HERO (match CONTACT hero structure: uses .nm-hero__bg) === */
.nm-merch .nm-hero__bg{
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)),
    url("../images/merch.png") center/cover;
  filter: saturate(1.04) contrast(1.05);
}

/* Keep the same “clip” title treatment style as Contact (but merch-flavored) */
.nm-merch .nm-hero__title{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.86), rgba(47,247,255,.72), rgba(255,179,71,.72)),
    url("../images/merch.png");
  background-size: 200% 200%, cover;
  background-position: 0% 60%, center;
  animation: titleSheen 7.0s infinite linear;
}

/* Merch tag styling similar to contact */
.nm-location-tag--merch{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(47,247,255,.08) inset;
}

/* =========================================================
   OUTSKIRTS: Transmission callout + scanbox (Outskirts skin)
   ========================================================= */

.nm-callout--outskirts{
  border-radius: var(--radius2);
  border:1px solid rgba(255,179,71,.18);
  background: rgba(0,0,0,.22);
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  overflow:hidden;
  position:relative;
}

.nm-callout--outskirts::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(820px 360px at 25% 20%, rgba(255,179,71,.14), transparent 70%),
    radial-gradient(820px 360px at 70% 55%, rgba(255,122,24,.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 8px);
  opacity:.70;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.nm-scanBox--outskirts{
  height: 220px;
  border-radius: 18px;
  border:1px solid rgba(255,179,71,.16);
  background:
    radial-gradient(520px 240px at 30% 12%, rgba(255,179,71,.12), transparent 70%),
    radial-gradient(480px 220px at 70% 70%, rgba(59,214,198,.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 7px),
    rgba(0,0,0,.18);
  animation: nmScanLinesOut 3.2s infinite linear;
}

/* separate keyframes so we don't conflict with your existing scanMove hue-rotate */
@keyframes nmScanLinesOut{
  0%{background-position: 0 0, 0 0, 0 0, 0 0}
  100%{background-position: 0 0, 0 0, 0 66px, 0 0}
}

/* =========================================================
   Typewriter + subtle flicker (modal transmission)
   (pairs with JS: .nm-typewriter + .is-flicker)
   ========================================================= */

.nm-typewriter{
  white-space: pre-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  letter-spacing: .02em;
  line-height: 1.5;
  position:relative;
}

.nm-typewriter::after{
  content:"";
  display:inline-block;
  width:10px;
  height:1.1em;
  border-right: 2px solid rgba(255,255,255,.65);
  margin-left: 2px;
  transform: translateY(2px);
  animation: nmCaretBlink 1.05s steps(1) infinite;
}

.nm-typewriter--outskirts{
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(255,179,71,.10);
}

.nm-typewriter.is-flicker{
  animation: nmFlicker .12s steps(2) 1;
}

@keyframes nmCaretBlink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes nmFlicker{
  0% { opacity: .82; filter: contrast(1.02); }
  50% { opacity: 1; filter: contrast(1.10); }
  100% { opacity: .90; filter: contrast(1.02); }
}