/* ═══════════════════════════════════════════════════════════
   NAMOVI — Living Canvas v4
   Asymmetric · Glassmorphism · GSAP-Ready
   Terracotta × Cyan on Deep Dark
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
    --bg:          #08080c;
    --bg-soft:     #0e0e14;
    --bg-card:     #12121a;
    --border:      #1e1e2a;
    --text:        #eeeef2;
    --text-2:      #88889a;
    --text-3:      #55556a;
    --accent:      #6366f1;
    --accent-light:#a5b4fc;
    --accent-rgb:  99,102,241;
    --terracotta:  #c2694f;
    --terra-light: #d4836b;
    --terra-rgb:   194,105,79;
    --cyan:        #00d4ff;
    --cyan-light:  #5ce6ff;
    --cyan-rgb:    0,212,255;
    --violet:      #a78bfa;
    --violet-rgb:  167,139,250;
    --font:      'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-logo: 'Unbounded', 'Inter', system-ui, sans-serif;
    --max-w:       1280px;
    --narrow:      760px;
    --radius:      16px;
    --radius-sm:   10px;
    --radius-lg:   24px;
    --ease:        cubic-bezier(.22,1,.36,1);
}

/* ─── Brand Overrides ────────────────────────────────────── */
body.brand-nutrition {
    --bg: #0c0806; --bg-soft: #141008; --bg-card: #16120c; --border: #2a1e14;
    --accent: #c2694f; --accent-light: #d4836b; --accent-rgb: 194,105,79;
    --text-2: #9a8070; --text-3: #6a5040;
}
body.brand-motion {
    --bg: #060a0c; --bg-soft: #080e14; --bg-card: #0a1218; --border: #142028;
    --accent: #00d4ff; --accent-light: #5ce6ff; --accent-rgb: 0,212,255;
    --text-2: #6098a8; --text-3: #385868;
}
body.brand-vitality {
    --bg: #0a080e; --bg-soft: #100e18; --bg-card: #14101e; --border: #201a30;
    --accent: #a78bfa; --accent-light: #c4b5fd; --accent-rgb: 167,139,250;
    --text-2: #8878a8; --text-3: #584878;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Accessible, WCAG 4.5:1+ Contrast
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg:          #f8f7f5;
    --bg-soft:     #efede9;
    --bg-card:     #ffffff;
    --border:      #d8d5ce;
    --text:        #1a1a1a;
    --text-2:      #4a4a4a;
    --text-3:      #777770;
    --accent:      #5046e5;
    --accent-light:#3730a3;
    --accent-rgb:  80,70,229;
    --terracotta:  #a34c33;
    --terra-light: #8b3d28;
    --terra-rgb:   163,76,51;
    --cyan:        #007a94;
    --cyan-light:  #006175;
    --cyan-rgb:    0,122,148;
    --violet:      #7c3aed;
    --violet-rgb:  124,58,237;
}
/* Brand light overrides */
[data-theme="light"] body.brand-nutrition {
    --bg: #faf7f5; --bg-soft: #f2ece7; --bg-card: #ffffff; --border: #ddd2c8;
    --accent: #a34c33; --accent-light: #8b3d28; --accent-rgb: 163,76,51;
    --text-2: #6b5548; --text-3: #8a7568;
}
[data-theme="light"] body.brand-motion {
    --bg: #f5f9fa; --bg-soft: #e8f2f5; --bg-card: #ffffff; --border: #c5d8de;
    --accent: #007a94; --accent-light: #006175; --accent-rgb: 0,122,148;
    --text-2: #3a6878; --text-3: #5a8898;
}
[data-theme="light"] body.brand-vitality {
    --bg: #f8f5fc; --bg-soft: #eee8f5; --bg-card: #ffffff; --border: #d4c8e8;
    --accent: #7c3aed; --accent-light: #6d28d9; --accent-rgb: 124,58,237;
    --text-2: #5a4878; --text-3: #7a6898;
}

/* ─── Light: Global Overrides ─────────────────────────── */
[data-theme="light"] body {
    -webkit-font-smoothing: auto;
}

/* Header */
[data-theme="light"] .nm-header.scrolled {
    background:rgba(248,247,245,.85);
    box-shadow:0 1px 0 rgba(0,0,0,.06);
}
[data-theme="light"] .nm-logo__type { color:var(--text); }
[data-theme="light"] .nm-burger span { background:var(--text); }

/* Overlay */
[data-theme="light"] .nm-overlay {
    background:rgba(248,247,245,.97);
}
[data-theme="light"] .nm-overlay__text { color:var(--text); }
[data-theme="light"] .nm-overlay__cat {
    border-color:var(--border);
    color:var(--text-3);
}
[data-theme="light"] .nm-overlay__cat:hover {
    color:var(--text);
    border-color:var(--text-2);
}

/* Hero orbs: softer in light mode */
[data-theme="light"] .nm-orb { opacity:.06; }

/* Card gradient */
[data-theme="light"] .nm-card__gradient {
    background:linear-gradient(to top, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 50%, transparent 100%);
}
[data-theme="light"] .nm-card {
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .nm-card:hover {
    box-shadow:0 8px 30px rgba(0,0,0,.1);
}
[data-theme="light"] .nm-card--hero .nm-card__foot { color:rgba(0,0,0,.4); }
[data-theme="light"] .nm-card__over { }
[data-theme="light"] .nm-card--hero .nm-card__title { color:var(--text); }

/* Buttons */
[data-theme="light"] .nm-btn--cyan { color:#fff; }
[data-theme="light"] .nm-btn--outline {
    border-color:var(--border);
    color:var(--text);
}
[data-theme="light"] .nm-btn--outline:hover {
    border-color:var(--accent);
    color:var(--accent);
}

/* Portals */
[data-theme="light"] .nm-portal {
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

/* Brand nav pills */
[data-theme="light"] .nm-brand-nav__link {
    background:rgba(0,0,0,.03);
    border-color:var(--border);
}
[data-theme="light"] .nm-brand-nav__link:hover {
    border-color:var(--text-3);
}

/* Hero pills */
[data-theme="light"] .nm-hero-pill {
    background:rgba(0,0,0,.03);
    border-color:var(--border);
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
[data-theme="light"] .nm-hero-pill:hover {
    border-color:rgba(var(--accent-rgb),.4);
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

/* Sub-categories */
[data-theme="light"] .nm-subcat {
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .nm-subcat__count {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-subcat.is-active .nm-subcat__count {
    background:var(--accent);
    color:#fff;
}

/* Filter panel */
[data-theme="light"] .nm-filters {
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
}
[data-theme="light"] .nm-filters__head {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
[data-theme="light"] .nm-filters__select {
    background: #f8f8fa;
}
[data-theme="light"] .nm-filters__pill {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-filters-toggle {
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}

/* Glassmorphism — replace frosted glass with subtle light surface */
[data-theme="light"] .nm-glass {
    background:rgba(255,255,255,.7);
    border-color:var(--border);
    box-shadow:0 4px 20px rgba(0,0,0,.06);
}

/* Prose & Article */
[data-theme="light"] .nm-recipe-hero {
    box-shadow:0 12px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .nm-article-hero-img {
    box-shadow:0 12px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .nm-prose code {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-prose pre {
    background:var(--bg-soft);
    border-color:var(--border);
}
[data-theme="light"] .nm-prose blockquote {
    background:rgba(var(--accent-rgb),.04);
}
[data-theme="light"] .nm-prose img {
    box-shadow:0 8px 30px rgba(0,0,0,.1);
}

/* Recipe panels */
[data-theme="light"] .nm-ing-panel,
[data-theme="light"] .nm-nutri,
[data-theme="light"] .nm-recipe-stat,
[data-theme="light"] .nm-recipe-extra,
[data-theme="light"] .nm-recipe-actions {
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}
[data-theme="light"] .nm-nutri-macro {
    background:var(--bg-soft);
    box-shadow:none;
}
[data-theme="light"] .nm-nutri-macro:hover {
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .nm-nutri-macro__bar {
    background:rgba(0,0,0,.06);
}
[data-theme="light"] .nm-nutri-ring__track {
    stroke:var(--bg-soft);
}
[data-theme="light"] .nm-ing-progress {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-ing-servings {
    background:var(--bg-soft);
}

/* Instructions */
[data-theme="light"] .nm-instruction__number {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-instruction__check {
    background:var(--bg-soft);
}

/* Search */
[data-theme="light"] .nm-search-input {
    background:var(--bg-soft);
}

/* Tags */
[data-theme="light"] .nm-article-tag {
    background:var(--bg-soft);
}
[data-theme="light"] .nm-share-btn {
    background:var(--bg-soft);
}

/* Footer */
[data-theme="light"] .nm-footer {
    background:var(--bg-soft);
    border-top-color:var(--border);
}

/* Cross-brand CTA */
[data-theme="light"] .nm-cross {
    background:var(--bg-card);
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* Pagination */
[data-theme="light"] .pagination-btn,
[data-theme="light"] .pagination-page {
    background:var(--bg-card);
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* Dock — glass to solid surface */
[data-theme="light"] .nm-dock {
    background:rgba(255,255,255,.8);
    border-color:rgba(0,0,0,.08);
    box-shadow:0 4px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .nm-dock__item:hover {
    background:rgba(0,0,0,.05);
}
[data-theme="light"] .nm-dock__item.is-active {
    background:rgba(var(--dock-rgb, var(--accent-rgb)),.1);
}
[data-theme="light"] .nm-dock__sep {
    background:rgba(0,0,0,.1);
}
[data-theme="light"] .nm-dock__item::after {
    background:rgba(0,0,0,.8);
    color:#fff;
}

/* Quick-swap */
[data-theme="light"] .nm-quickswap {
    background:rgba(255,255,255,.8);
    border-color:rgba(0,0,0,.08);
    box-shadow:0 4px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Empty states */
[data-theme="light"] .nm-empty__icon { opacity:.35; }

/* Active filters */
[data-theme="light"] .nm-filters__active {
    border-top-color:var(--border);
}

/* Recipe tag pills */
[data-theme="light"] .nm-recipe-tag-pill {
    background:rgba(var(--accent-rgb),.06);
}

/* Mobile filter overlay */
@media(max-width:900px) {
    [data-theme="light"] .nm-filters-backdrop {
        background:rgba(0,0,0,.3);
    }
    [data-theme="light"] .nm-filters.is-open {
        background:var(--bg-card);
    }
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background .6s var(--ease), color .6s var(--ease);
}
body.menu-open { overflow:hidden; }
a { color: var(--accent-light); text-decoration:none; transition: color .25s; }
a:hover { color: var(--accent); }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; font-family:var(--font); }

/* ─── Layout ─────────────────────────────────────────────── */
.nm-container { max-width:var(--max-w); margin:0 auto; padding:0 2rem; }
.nm-narrow { max-width:var(--narrow); margin:0 auto; padding:0 2rem; }
.nm-section { padding:6rem 0; position:relative; }

/* ═══════════════════════════════════════════════════════════
   HEADER — Minimal, floating
   ═══════════════════════════════════════════════════════════ */
.nm-header {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:0 2rem; height:72px;
    transition: background .4s, backdrop-filter .4s, box-shadow .4s;
}
.nm-header.scrolled {
    background:rgba(8,8,12,.7);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.nm-header__inner {
    max-width:var(--max-w); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; height:100%;
}

/* Logo */
.nm-logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.nm-logo__mark {
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
}
.nm-logo__symbol,
.nm-logo__mark > svg { width:100%; height:100%; display:block; }
.nm-logo__type {
    font-family:var(--font-logo);
    font-weight:800;
    font-size:1.1rem;
    letter-spacing:3px;
    color:#fff;
    text-transform:uppercase;
}

/* Nav links (hidden – moved to bottom dock) */
.nm-nav { display:none; }

.nm-header__right { display:flex; align-items:center; gap:.75rem; }

/* ─── Logo Character Breathing ───────────────────────────── */
.nm-logo__char {
    display:inline-block;
    transition:transform .4s var(--ease), color .4s var(--ease);
    will-change:transform;
    transform-origin:center bottom;
}

/* ─── Theme Toggle ─────────────────────────────────────── */
.nm-theme-toggle {
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
[data-theme="light"] .nm-theme-toggle {
    border-color:rgba(0,0,0,.1);
    background:rgba(0,0,0,.04);
}
.nm-theme-toggle:hover {
    transform:scale(1.08);
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.08);
}
.nm-theme-toggle__icon {
    width:20px; height:20px;
    position:absolute;
    transition:transform .5s var(--ease), opacity .35s var(--ease);
    color:var(--text-2);
}
.nm-theme-toggle__icon--sun {
    opacity:0;
    transform:rotate(180deg) scale(.5);
}
.nm-theme-toggle__icon--moon {
    opacity:1;
    transform:rotate(0) scale(1);
}
/* When light mode: show sun, hide moon */
[data-theme="light"] .nm-theme-toggle__icon--sun {
    opacity:1;
    transform:rotate(0) scale(1);
}
[data-theme="light"] .nm-theme-toggle__icon--moon {
    opacity:0;
    transform:rotate(-180deg) scale(.5);
}

/* Burger */
.nm-burger {
    width:36px; height:36px; background:none; border:none; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nm-burger span {
    display:block; width:20px; height:1.5px; background:var(--text);
    border-radius:2px; transition:all .35s var(--ease);
}
.nm-burger.open span:first-child { transform:rotate(45deg) translate(2.5px,2.5px); }
.nm-burger.open span:last-child { transform:rotate(-45deg) translate(2.5px,-2.5px); }

/* ═══════════════════════════════════════════════════════════
   OVERLAY — Full-screen editorial menu
   ═══════════════════════════════════════════════════════════ */
.nm-overlay {
    position:fixed; inset:0; z-index:90;
    background:rgba(8,8,12,.96);
    backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.nm-overlay.open { opacity:1; pointer-events:all; }
.nm-overlay__nav { text-align:center; }
.nm-overlay__item {
    display:block; padding:1.25rem 2rem; text-decoration:none;
    opacity:0; transform:translateY(30px);
    transition:opacity .5s, transform .5s var(--ease);
}
.nm-overlay.open .nm-overlay__item {
    opacity:1; transform:translateY(0);
}
.nm-overlay.open .nm-overlay__item:nth-child(1) { transition-delay:.1s; }
.nm-overlay.open .nm-overlay__item:nth-child(2) { transition-delay:.2s; }
.nm-overlay.open .nm-overlay__item:nth-child(3) { transition-delay:.3s; }

.nm-overlay__num {
    display:block; font-size:.7rem; font-weight:600; letter-spacing:3px;
    color:var(--text-3); margin-bottom:.25rem;
}
.nm-overlay__text {
    font-family:var(--font-display); font-size:clamp(2.5rem,6vw,5rem);
    font-weight:900; color:var(--text); display:block; line-height:1.1;
    transition:color .3s;
}
.nm-overlay__item:hover .nm-overlay__text { color:var(--item-color); }
.nm-overlay__tag { font-size:.85rem; color:var(--text-3); margin-top:.15rem; display:block; }
.nm-overlay__cats { display:flex; gap:.5rem; justify-content:center; margin-top:.5rem; flex-wrap:wrap; }
.nm-overlay__cat {
    font-size:.8rem; color:var(--text-3); padding:.25rem .7rem;
    border:1px solid var(--border); border-radius:50px;
    transition:all .25s;
}
.nm-overlay__cat:hover { color:var(--text); border-color:var(--text-3); }
@media(max-width:480px) {
    .nm-overlay__item { padding:.85rem 1.25rem; }
    .nm-overlay__text { font-size:clamp(1.8rem,6vw,3rem); }
    .nm-overlay__tag { font-size:.75rem; }
    .nm-overlay__cats { gap:.3rem; }
    .nm-overlay__cat { font-size:.68rem; padding:.2rem .5rem; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — Overlapping Typography
   ═══════════════════════════════════════════════════════════ */
.nm-hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; text-align:center;
    padding:6rem 2rem 4rem;
}
.nm-hero__bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.nm-orb {
    position:absolute; border-radius:50%; filter:blur(120px); opacity:.12;
    animation:orbDrift 16s ease-in-out infinite;
}
.nm-orb--1 { width:500px; height:500px; background:var(--terracotta); top:-15%; left:-10%; }
.nm-orb--2 { width:400px; height:400px; background:var(--cyan); bottom:-10%; right:-5%; animation-delay:-6s; }
.nm-orb--3 { width:250px; height:250px; background:var(--accent); top:40%; right:20%; animation-delay:-10s; opacity:.06; }
@keyframes orbDrift {
    0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)}
    66%{transform:translate(-25px,20px) scale(.94)}
}

.nm-hero__content { position:relative; z-index:2; max-width:900px; }

.nm-hero__title {
    font-family:var(--font-display);
    font-size:clamp(3.5rem,11vw,10rem);
    font-weight:900; line-height:.85;
    letter-spacing:-.04em;
}
.nm-hero__line {
    display:block; will-change:transform,opacity;
}
.nm-hero__line--fuel { color:var(--terracotta); transform:translateX(-6%); }
.nm-hero__line--amp {
    font-size:.35em; color:var(--text-3); display:block;
    letter-spacing:.1em; margin:.2em 0;
}
.nm-hero__line--master { color:var(--cyan); transform:translateX(6%); }

.nm-hero__subtitle {
    font-size:clamp(1.1rem,2.5vw,1.5rem);
    font-weight:300; color:var(--text-2);
    letter-spacing:.15em; text-transform:uppercase;
    margin-top:1.5rem;
}
.nm-hero__desc {
    font-size:1rem; color:var(--text-3); max-width:480px;
    margin:1.25rem auto 0; line-height:1.8;
}
.nm-hero__actions {
    display:flex; gap:1rem; justify-content:center;
    margin-top:2.5rem; flex-wrap:wrap;
}

/* Scroll indicator */
.nm-hero__scroll {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.nm-hero__scroll span { font-size:.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-3); }
.nm-hero__scroll-line {
    width:1px; height:40px; background:linear-gradient(to bottom,var(--text-3),transparent);
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.2)} }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.nm-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.8rem 2rem; border-radius:50px;
    font-weight:600; font-size:.9rem; border:none;
    transition:all .35s var(--ease); text-decoration:none; position:relative;
    overflow:hidden; letter-spacing:.3px;
}
.nm-btn--terra {
    background:var(--terracotta); color:#fff;
    box-shadow:0 0 30px rgba(var(--terra-rgb),.2);
}
.nm-btn--terra:hover { box-shadow:0 0 50px rgba(var(--terra-rgb),.35); transform:translateY(-2px); color:#fff; }
.nm-btn--cyan {
    background:var(--cyan); color:#08080c;
    box-shadow:0 0 30px rgba(var(--cyan-rgb),.2);
}
.nm-btn--cyan:hover { box-shadow:0 0 50px rgba(var(--cyan-rgb),.35); transform:translateY(-2px); color:#08080c; }
.nm-btn--violet {
    background:#a78bfa; color:#fff;
    box-shadow:0 0 30px rgba(167,139,250,.2);
}
.nm-btn--violet:hover { box-shadow:0 0 50px rgba(167,139,250,.35); transform:translateY(-2px); color:#fff; }
.nm-btn--outline {
    background:transparent; color:var(--text);
    border:1px solid var(--border);
}
.nm-btn--outline:hover { border-color:var(--accent); color:var(--accent); }
.nm-btn--accent {
    background:var(--accent); color:#fff;
    box-shadow:0 0 30px rgba(var(--accent-rgb),.2);
}
.nm-btn--accent:hover { box-shadow:0 0 50px rgba(var(--accent-rgb),.35); transform:translateY(-2px); color:#fff; }

/* ═══════════════════════════════════════════════════════════
   BRAND PORTALS — Asymmetric Split
   ═══════════════════════════════════════════════════════════ */
.nm-portals { padding:2rem 0 6rem; }
.nm-portals__grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;
    max-width:var(--max-w); margin:0 auto; padding:0 2rem;
}

.nm-portal {
    position:relative; display:block; text-decoration:none; color:var(--text);
    padding:3rem 2.5rem; border-radius:var(--radius-lg);
    background:var(--bg-card); border:1px solid var(--border);
    overflow:hidden; transition:all .45s var(--ease);
}
.nm-portal:first-child { transform:translateY(3rem); } /* asymmetric offset */
.nm-portal::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 30% 30%, rgba(var(--portal-rgb),.06) 0%, transparent 70%);
    opacity:0; transition:opacity .45s;
}
.nm-portal:hover { transform:translateY(0); border-color:rgba(var(--portal-rgb),.25); }
.nm-portal:hover::before { opacity:1; }

.nm-portal__num {
    font-size:.7rem; font-weight:600; letter-spacing:3px;
    color:var(--text-3); display:block; margin-bottom:1.5rem;
}
.nm-portal__title {
    font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem);
    font-weight:900; line-height:1; margin-bottom:.5rem;
}
.nm-portal__tagline {
    font-size:.9rem; font-weight:600; color:var(--portal-color);
    letter-spacing:.5px;
}
.nm-portal__desc {
    font-size:.9rem; color:var(--text-3); margin-top:1rem; line-height:1.6;
    max-width:360px;
}
.nm-portal__cats {
    display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.25rem;
}
.nm-portal__cat-pill {
    font-size:.75rem; padding:.25rem .7rem; border-radius:50px;
    border:1px solid var(--border); color:var(--text-3); transition:all .25s;
}
.nm-portal:hover .nm-portal__cat-pill { border-color:rgba(var(--portal-rgb),.2); }
.nm-portal__cta {
    display:inline-flex; align-items:center; gap:.3rem;
    margin-top:1.75rem; font-size:.85rem; font-weight:600;
    color:var(--portal-color); letter-spacing:.3px;
    transition:gap .3s;
}
.nm-portal:hover .nm-portal__cta { gap:.6rem; }

/* Decorative glow */
.nm-portal__glow {
    position:absolute; width:200px; height:200px; border-radius:50%;
    background:var(--portal-color); opacity:0; filter:blur(100px);
    bottom:-60px; right:-40px; transition:opacity .5s;
}
.nm-portal:hover .nm-portal__glow { opacity:.08; }

/* ═══════════════════════════════════════════════════════════
   ARTICLE CARDS — Living Canvas
   ═══════════════════════════════════════════════════════════ */
.nm-card {
    border-radius:var(--radius-lg); overflow:hidden;
    background:var(--bg-card); border:1px solid var(--border);
    transition:all .4s var(--ease); position:relative;
}
.nm-card:hover { border-color:rgba(var(--accent-rgb),.2); transform:translateY(-4px); }
.nm-card__link { display:block; text-decoration:none; color:inherit; }
.nm-card__visual { aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); position:relative; }
.nm-card__visual--full { aspect-ratio:auto; min-height:420px; position:relative; }
.nm-card__img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.nm-card:hover .nm-card__img { transform:scale(1.04); }
.nm-card__placeholder {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; opacity:.15;
}
.nm-card__gradient {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,8,12,.92) 0%, rgba(8,8,12,.4) 50%, transparent 100%);
}
.nm-card__over {
    position:absolute; bottom:0; left:0; right:0; padding:2.5rem;
    z-index:2;
}
.nm-card__body { padding:1.25rem; }
.nm-card__badge {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.2rem .65rem; border-radius:50px;
    font-size:.7rem; font-weight:600;
    background:rgba(var(--accent-rgb),.1);
    color:var(--badge-c, var(--accent-light));
    margin-bottom:.6rem;
}
.nm-card__badges {
    display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem;
}
.nm-card__badges .nm-card__badge { margin-bottom:0; }
.nm-card__badge--secondary {
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    color:var(--text-2);
}
.nm-card__title {
    font-size:1rem; font-weight:700; line-height:1.35; color:var(--text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:.4rem;
}
.nm-card--hero .nm-card__title {
    font-family:var(--font-display); font-size:1.75rem; font-weight:800;
    -webkit-line-clamp:3;
}
.nm-card__excerpt {
    font-size:.82rem; color:var(--text-2); line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nm-card__foot {
    display:flex; justify-content:space-between; font-size:.7rem;
    color:var(--text-3); margin-top:.6rem;
}
.nm-card--hero .nm-card__foot { color:rgba(255,255,255,.45); }

/* ─── Mosaic grid ─────────────────────────────────────────── */
.nm-mosaic {
    display:grid;
    grid-template-columns:1.35fr 1fr;
    grid-template-rows:auto auto;
    gap:1.5rem;
}
.nm-mosaic .nm-card--hero { grid-row:span 2; }

/* ─── Asymmetric articles section ─────────────────────────── */
.nm-articles__header {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem;
}
.nm-articles__label {
    font-size:.7rem; font-weight:600; letter-spacing:3px;
    text-transform:uppercase; color:var(--text-3); display:block;
    margin-bottom:.25rem;
}
.nm-articles__title { font-family:var(--font-display); font-size:2rem; font-weight:800; }

/* Standard grid (fallback for many articles) */
.nm-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   GLASSMORPHISM — App Preview
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   APP PREVIEW ECOSYSTEM — Interactive Schema
   ═══════════════════════════════════════════════════════ */
.nm-app-preview {
    position: relative;
    padding: 12rem 0;
    overflow: hidden;
    background: var(--bg);
}
.nm-app-preview__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 8rem;
}
.nm-app-preview__title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    margin-top: 1rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #fff;
    font-family: var(--font-logo);
}
.nm-app-preview__subtitle {
    font-size: 1.25rem;
    color: var(--text-2);
    margin-top: 1.5rem;
    line-height: 1.6;
}

.nm-app-schema {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Abstract Phone Hub */
.nm-app-schema__center {
    position: relative;
    width: 200px;
    height: 400px;
    z-index: 10;
}
.nm-app-schema__phone {
    width: 100%;
    height: 100%;
    background: rgba(15,15,25,0.95);
    backdrop-filter: blur(30px);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 40px;
    padding: 15px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.nm-app-schema__screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nm-app-schema__dashboard {
    text-align: center;
}
.nm-app-schema__ring {
    width: 100px;
    height: 100px;
    border: 6px solid var(--accent);
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
    animation: ring-pulse 3s infinite;
}
.nm-app-schema__bars {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.nm-app-schema__bars span {
    width: 8px;
    height: 24px;
    background: var(--text-3);
    border-radius: 4px;
}
.nm-app-schema__bars span:nth-child(1) { height: 16px; background: var(--terracotta); }
.nm-app-schema__bars span:nth-child(2) { height: 32px; background: var(--cyan); }
.nm-app-schema__bars span:nth-child(3) { height: 24px; background: var(--violet); }

.nm-app-schema__glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    z-index: -1;
    animation: glow-pulse 4s infinite alternate;
}

/* App Nodes */
.nm-app-node {
    position: absolute;
    width: 280px;
    z-index: 20;
    cursor: pointer;
}
.nm-app-node__box {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: all 0.5s var(--ease);
}
.nm-app-node:hover .nm-app-node__box {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.05);
    border-color: rgba(var(--node-rgb, 255,255,255), 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.nm-app-node__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(20,20,30,0.8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--node-color, #fff);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.nm-app-node__icon svg { width: 22px; height: 22px; }
.nm-app-node__title {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}
.nm-app-node__text {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* Node Positions */
.nm-app-node--nutrition { top: 0; left: 0; --node-color: var(--terracotta); --node-rgb: var(--terra-rgb); }
.nm-app-node--activity { top: 0; right: 0; --node-color: var(--cyan); --node-rgb: var(--cyan-rgb); }
.nm-app-node--progress { bottom: 0; left: 0; --node-color: var(--accent); --node-rgb: var(--accent-rgb); }
.nm-app-node--social { bottom: 0; right: 0; --node-color: var(--violet); --node-rgb: 167,139,250; }

/* Connection Lines */
.nm-app-schema__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}
.nm-app-schema__line {
    opacity: 0.15;
    transition: opacity 0.5s ease;
}
.nm-app-node:hover ~ .nm-app-schema__svg .nm-app-schema__line {
    opacity: 0.5;
}

/* Footer Stats */
.nm-app-preview__footer {
    margin-top: 8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}
.nm-app-preview__badges {
    display: flex;
    gap: 5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 4rem;
}
.nm-app-preview__badge {
    display: flex;
    flex-direction: column;
}
.nm-app-preview__badge-val {
    font-size: 2.25rem;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-logo);
}
.nm-app-preview__badge-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-3);
    margin-top: 0.5rem;
}

/* DNA Light Mode Compatibility */
[data-theme="light"] .nm-app-node__box {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.05);
}
[data-theme="light"] .nm-app-node__title { color: #000; }
[data-theme="light"] .nm-app-node__text { color: #4a4a4a; }
[data-theme="light"] .nm-app-preview__title { color: var(--text); }
[data-theme="light"] .nm-app-preview__badge-val { color: var(--text); }

@keyframes ring-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes glow-pulse {
    from { opacity: 0.1; transform: scale(1); }
    to { opacity: 0.25; transform: scale(1.1); }
}

@media (max-width: 900px) {
    .nm-app-schema { height: auto; flex-direction: column; gap: 2rem; }
    .nm-app-node { position: static; width: 100%; }
    .nm-app-schema__center { margin: 4rem auto; }
    .nm-app-schema__svg { display: none; }
    .nm-app-preview__badges { gap: 2rem; flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   BRAND HERO — Category pages
   ═══════════════════════════════════════════════════════════ */
.nm-brand-hero {
    min-height:60vh; display:flex; align-items:center;
    position:relative; overflow:hidden; padding:8rem 2rem 4rem;
}
.nm-brand-hero__bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.nm-brand-hero .nm-orb { opacity:.1; }

.nm-brand-hero__particles { position:absolute; inset:0; pointer-events:none; }
.nm-particle {
    position:absolute; font-size:1.6rem; opacity:.12;
    animation:particleDrift 10s ease-in-out infinite;
}
@keyframes particleDrift {
    0%,100%{transform:translateY(0) rotate(0deg);opacity:.1}
    50%{transform:translateY(-30px) rotate(8deg);opacity:.25}
}

.nm-brand-hero__content {
    position:relative; z-index:2;
    max-width:var(--max-w); margin:0 auto; width:100%;
}
.nm-brand-hero__label {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.7rem; font-weight:600; letter-spacing:3px;
    text-transform:uppercase; color:var(--accent);
    padding:.35rem 1rem; border:1px solid rgba(var(--accent-rgb),.15);
    border-radius:50px; background:rgba(var(--accent-rgb),.04);
    margin-bottom:1.5rem;
}
.nm-brand-hero__title {
    font-family:var(--font-display);
    font-size:clamp(3rem,8vw,7rem);
    font-weight:900; line-height:.88;
    letter-spacing:-.04em;
    background:linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nm-brand-hero__tagline {
    font-size:1.1rem; font-weight:600; color:var(--accent);
    margin-top:1rem; letter-spacing:.5px;
}
.nm-brand-hero__desc {
    font-size:1rem; color:var(--text-2); margin-top:.75rem;
    max-width:500px; line-height:1.7;
}
.nm-brand-hero__stats {
    display:flex; gap:2.5rem; margin-top:2rem;
}
.nm-brand-stat__val {
    font-size:2rem; font-weight:800; color:var(--accent);
    display:block; line-height:1;
}
.nm-brand-stat__label {
    font-size:.75rem; color:var(--text-3); text-transform:uppercase;
    letter-spacing:1px; margin-top:.2rem;
}

/* Brand sub-nav */
.nm-brand-nav {
    display:flex; gap:.4rem; margin-top:2rem; flex-wrap:wrap;
}
.nm-brand-nav__link {
    padding:.5rem 1.2rem; border-radius:50px;
    font-size:.85rem; font-weight:600;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    color:var(--text-2); transition:all .3s;
}
.nm-brand-nav__link:hover { color:var(--text); border-color:rgba(255,255,255,.12); }
.nm-brand-nav__link.is-active { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.06); }

/* ═══════════════════════════════════════════════════════════
   HERO PILLS — Inline category pills inside hero
   ═══════════════════════════════════════════════════════════ */
.nm-brand-hero__pills {
    display:flex; flex-wrap:wrap; gap:.5rem;
    margin-top:1.75rem;
}
.nm-hero-pill {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.5rem 1.15rem;
    border-radius:50px;
    font-size:.85rem; font-weight:600;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-2);
    cursor:pointer;
    transition:all .35s var(--ease);
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.nm-hero-pill::before {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(circle at center, rgba(var(--accent-rgb),.1) 0%, transparent 70%);
    opacity:0;
    transition:opacity .35s;
    border-radius:50px;
}
.nm-hero-pill:hover {
    color:var(--text);
    border-color:rgba(var(--accent-rgb),.35);
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.nm-hero-pill:hover::before { opacity:1; }
.nm-hero-pill.is-active {
    color:var(--accent);
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.08);
}
.nm-hero-pill.is-active::before { opacity:1; }
.nm-hero-pill__icon {
    font-size:1rem; line-height:1;
}
.nm-hero-pill__label {
    white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   SUB-CATEGORY CARDS
   ═══════════════════════════════════════════════════════════ */
.nm-subcats {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:.75rem;
    margin-bottom:2rem;
}
.nm-subcat {
    display:flex; flex-direction:column; align-items:center; gap:.35rem;
    padding:1.25rem 1rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-decoration:none; color:var(--text);
    transition:all .35s var(--ease);
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.nm-subcat::before {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(circle at center, rgba(var(--accent-rgb),.06) 0%, transparent 70%);
    opacity:0;
    transition:opacity .35s;
}
.nm-subcat:hover::before { opacity:1; }
.nm-subcat:hover {
    border-color:rgba(var(--accent-rgb),.3);
    transform:translateY(-3px);
    box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.nm-subcat.is-active {
    border-color:var(--accent);
    background:rgba(var(--accent-rgb),.08);
}
.nm-subcat.is-active::before { opacity:1; }
.nm-subcat__icon {
    font-size:1.75rem;
    line-height:1;
}
.nm-subcat__name {
    font-size:.82rem;
    font-weight:600;
    text-align:center;
    line-height:1.2;
}
.nm-subcat__count {
    font-size:.7rem;
    color:var(--text-3);
    background:var(--bg-soft);
    padding:.15rem .55rem;
    border-radius:20px;
}
.nm-subcat.is-active .nm-subcat__count {
    background:var(--accent);
    color:#fff;
}

/* Smooth scroll + anchor offset for sticky header */
html { scroll-behavior:smooth; }
#content { scroll-margin-top:100px; }

/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGE LAYOUT (sidebar + main)
   ═══════════════════════════════════════════════════════════ */
.nm-cat-layout {
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    align-items:start;
}
.nm-cat-layout.has-filters {
    grid-template-columns:280px 1fr;
}
@media(max-width:900px) {
    .nm-cat-layout.has-filters { grid-template-columns:1fr; }
}

.nm-cat-main { min-width:0; position:relative; }

/* AJAX grid transition */
#nmArticlesGrid {
    transition:opacity .2s ease, transform .2s ease;
}
.nm-cat-main.is-loading #nmArticlesGrid {
    opacity:.35 !important;
    pointer-events:none;
}
.nm-cat-main.is-loading::after {
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:32px;height:32px;
    margin:-16px 0 0 -16px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:nmSpin .6s linear infinite;
}
@keyframes nmSpin { to { transform:rotate(360deg); } }

/* Sub-category cards as buttons */
button.nm-subcat {
    cursor:pointer;
    font:inherit;
    text-align:center;
}

/* Filter tag remove buttons */
.nm-filters__tag button {
    background:none;
    border:none;
    color:inherit;
    cursor:pointer;
    padding:0 0 0 .4rem;
    font-size:.75rem;
    opacity:.6;
    transition:opacity .2s;
}
.nm-filters__tag button:hover { opacity:1; }

/* ═══════════════════════════════════════════════════════════
   FILTER PANEL — Glassmorphic Sidebar
   ═══════════════════════════════════════════════════════════ */
.nm-filters {
    position:sticky; top:90px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    overflow-y:auto;
    max-height: calc(100vh - 120px);
    transition:border-color .4s;
}
.nm-filters:hover { border-color:rgba(var(--accent-rgb),.2); }
.nm-filters__glow {
    position:absolute; top:-50%; right:-30%;
    width:250px; height:250px;
    background:radial-gradient(circle, rgba(var(--accent-rgb),.05) 0%, transparent 70%);
    pointer-events:none;
}

/* Head */
.nm-filters__head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.35rem;
    padding-bottom:.85rem;
    border-bottom:1px solid var(--border);
}
.nm-filters__head-row {
    display:flex; align-items:center; gap:.55rem;
}
.nm-filters__icon {
    width:20px; height:20px; color:var(--accent);
}
.nm-filters__title {
    font-family:var(--font-display);
    font-size:1.05rem; font-weight:800;
    color:var(--text); margin:0;
}
.nm-filters__clear {
    font-size:.7rem; font-weight:600;
    color:var(--accent);
    text-decoration:none;
    padding:.25rem .55rem;
    border:1px solid rgba(var(--accent-rgb),.2);
    border-radius:99px;
    transition:all .2s;
}
.nm-filters__clear:hover {
    background:rgba(var(--accent-rgb),.08);
    border-color:var(--accent);
}

/* Form groups */
.nm-filters__form {
    display:flex; flex-direction:column; gap:1.15rem;
}
.nm-filters__group {}
.nm-filters__label {
    display:flex; align-items:center; gap:.4rem;
    font-size:.72rem; font-weight:700;
    color:var(--text-3); text-transform:uppercase;
    letter-spacing:.6px; margin-bottom:.5rem;
}
.nm-filters__label-icon {
    font-size:.85rem;
}

/* Custom select */
.nm-filters__select-wrap {
    position:relative;
}
.nm-filters__select {
    width:100%;
    padding:.55rem .75rem;
    padding-right:2rem;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-size:.82rem;
    font-family:var(--font);
    font-weight:500;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:all .25s;
}
.nm-filters__select:hover,
.nm-filters__select:focus {
    border-color:rgba(var(--accent-rgb),.35);
    outline:none;
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);
}
.nm-filters__chevron {
    position:absolute; right:.65rem; top:50%;
    transform:translateY(-50%);
    width:14px; height:14px;
    color:var(--text-3);
    pointer-events:none;
}

/* Pill buttons (for difficulty) */
.nm-filters__pills {
    display:flex; flex-wrap:wrap; gap:.35rem;
}
.nm-filters__pill {
    padding:.35rem .65rem;
    border-radius:99px;
    font-size:.72rem; font-weight:600;
    color:var(--text-3);
    background:var(--bg-soft);
    border:1px solid var(--border);
    cursor:pointer; transition:all .25s;
    font-family:var(--font);
}
.nm-filters__pill:hover {
    color:var(--text);
    border-color:rgba(var(--accent-rgb),.3);
    background:rgba(var(--accent-rgb),.06);
}
.nm-filters__pill.is-active {
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    box-shadow:0 2px 8px rgba(var(--accent-rgb),.25);
}

/* Active filter tags */
.nm-filters__active {
    display:flex; flex-wrap:wrap; gap:.4rem;
    margin-top:1.15rem;
    padding-top:.85rem;
    border-top:1px solid var(--border);
}
.nm-filters__active:empty {
    display:none;
}
.nm-filters__tag {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.25rem .55rem;
    background:rgba(var(--accent-rgb),.08);
    border:1px solid rgba(var(--accent-rgb),.15);
    border-radius:99px;
    font-size:.68rem; font-weight:600;
    color:var(--text-2);
}
.nm-filters__tag a,
.nm-filters__tag button[data-remove-filter] {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px;
    border-radius:50%;
    background:rgba(var(--accent-rgb),.15);
    color:var(--accent); text-decoration:none;
    font-size:.6rem; font-weight:800;
    transition:all .2s;
    border:none; cursor:pointer; padding:0;
}
.nm-filters__tag a:hover,
.nm-filters__tag button[data-remove-filter]:hover {
    background:var(--accent); color:#fff;
}

/* Mobile filter toggle */
.nm-filters-toggle {
    display:none;
    align-items:center; gap:.45rem;
    padding:.55rem 1.1rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-2); font-size:.82rem; font-weight:600;
    font-family:var(--font);
    cursor:pointer; transition:all .25s;
    margin-bottom:1rem;
}
.nm-filters-toggle:hover {
    border-color:rgba(var(--accent-rgb),.3);
    color:var(--text);
}
.nm-filters-toggle__badge {
    background:var(--accent); color:#fff;
    font-size:.65rem; font-weight:800;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}

/* Filter close button (shown only on mobile) */
.nm-filters__close {
    display:none;
    position:absolute;
    top:12px; right:12px;
    width:36px; height:36px;
    align-items:center; justify-content:center;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text-2);
    cursor:pointer;
    transition:all .25s;
    z-index:5;
}
.nm-filters__close:hover {
    color:var(--text);
    border-color:rgba(var(--accent-rgb),.3);
    background:rgba(var(--accent-rgb),.08);
}

/* Filter backdrop (mobile only) */
.nm-filters-backdrop {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:9998;
    opacity:0;
    transition:opacity .35s var(--ease);
    pointer-events:none;
}
.nm-filters-backdrop.is-visible {
    opacity:1;
    pointer-events:all;
}

/* Prevent scroll when filters open on mobile */
body.filters-open { overflow:hidden; }

/* Mobile: sidebar becomes overlay */
@media(max-width:900px) {
    /* Filter Toggle Button (Back to original position) */
    .nm-filters-toggle {
        display: inline-flex !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0.7rem 1.2rem !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text-1) !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        box-shadow: none !important;
        z-index: 5 !important;
        width: auto !important;
    }
    .nm-filters-toggle:hover {
        border-color: rgba(var(--accent-rgb), 0.3) !important;
        background: rgba(var(--accent-rgb), 0.05) !important;
    }

    /* Full-Screen Blur Overlay */
    .nm-filters {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        z-index: 10000 !important;
        background: rgba(10, 10, 15, 0.9) !important; 
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        transform: translateY(20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s var(--ease);
        display: flex; flex-direction: column;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .nm-filters.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nm-filters__head {
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        padding: 2rem 1.5rem 1.5rem !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }
    .nm-filters__title { font-size: 1.5rem !important; font-weight: 800 !important; }

    .nm-filters__form {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem 1.5rem 6rem !important;
    }

    /* Close Button at the bottom (Thumb-friendly) */
    .nm-filters__close {
        display: flex !important;
        position: fixed !important;
        bottom: 30px; left: 50%;
        transform: translateX(-50%);
        width: 56px !important; height: 56px !important;
        border-radius: 50% !important;
        background: var(--accent) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 10px 25px rgba(var(--accent-rgb), 0.4) !important;
        z-index: 10001;
        align-items: center; justify-content: center;
    }
    .nm-filters__close svg { width: 24px; height: 24px; }

    .nm-filters__handle { display: none; } /* Not needed for full screen */
    .nm-filters-backdrop { display: none !important; } /* Not needed for full screen */

    .nm-filters__footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.5rem 2.5rem 3.5rem; /* More bottom padding for modern phones */
        background: linear-gradient(to top, rgba(10, 10, 15, 0.98), transparent);
        z-index: 10002;
        display: none;
    }
    .filters-open .nm-filters__footer {
        display: flex;
        justify-content: center;
    }
    .nm-filters__footer button {
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
        height: 60px;
        min-width: 240px;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border-radius: 50px;
    }
    .nm-btn__count {
        background: rgba(255,255,255,0.25);
        padding: 0.2rem 0.6rem;
        border-radius: 50px;
        font-size: 0.85rem;
        margin-left: 0.75rem;
    }
}

/* Legacy pill filter (keep for non-recipe brands) */
.nm-filter-bar {
    display:flex; gap:.4rem; flex-wrap:wrap;
    margin-bottom:1.5rem; padding-bottom:1rem;
    border-bottom:1px solid var(--border);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.nm-filter-pill {
    padding:.45rem 1rem; border-radius:99px;
    font-size:.78rem; font-weight:500;
    color:var(--text-2); background:var(--bg-card);
    border:1px solid var(--border); text-decoration:none;
    white-space:nowrap; transition:all .25s; cursor:pointer;
}
.nm-filter-pill:hover {
    color:var(--text); border-color:rgba(var(--accent-rgb),.3);
    background:rgba(var(--accent-rgb),.06);
}
.nm-filter-pill.is-active {
    background:var(--accent); color:#fff; border-color:var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   CROSS-BRAND CTA
   ═══════════════════════════════════════════════════════════ */
.nm-cross {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:3rem;
    text-align:center; position:relative; overflow:hidden;
}
.nm-cross::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--cross-gradient);
}
.nm-cross__icon { font-size:2.5rem; margin-bottom:.75rem; }
.nm-cross__title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; margin-bottom:.4rem; }
.nm-cross__desc { color:var(--text-3); max-width:400px; margin:0 auto 1.5rem; font-size:.9rem; }

/* ═══════════════════════════════════════════════════════════
   SINGLE ARTICLE
   ═══════════════════════════════════════════════════════════ */
.nm-article-header {
    padding:8rem 0 3rem; text-align:center;
    position:relative;
}
.nm-breadcrumb {
    display:flex; gap:.5rem; align-items:center; justify-content:center;
    font-size:.8rem; color:var(--text-3); margin-bottom:2rem; flex-wrap:wrap;
}
.nm-breadcrumb a { color:var(--text-2); }
.nm-breadcrumb a:hover { color:var(--accent); }

.nm-article-meta {
    display:flex; align-items:center; gap:1rem; justify-content:center;
    margin-bottom:1.5rem;
}
.nm-article-badge {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.3rem .9rem; border-radius:50px;
    font-size:.8rem; font-weight:600;
    background:rgba(var(--accent-rgb),.08);
    color:var(--accent-light);
}
.nm-article-readtime { font-size:.8rem; color:var(--text-3); }

.nm-article-title {
    font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem);
    font-weight:900; line-height:1.1; letter-spacing:-.02em;
    max-width:720px; margin:0 auto;
}
.nm-article-excerpt {
    font-size:1.1rem; color:var(--text-2); margin-top:1.25rem;
    max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7;
}
.nm-article-info {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);
}
.nm-article-author { display:flex; align-items:center; gap:.75rem; }
.nm-article-avatar {
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-light));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem; color:#fff;
}
.nm-article-author-name { font-weight:600; font-size:.85rem; }
.nm-article-date { font-size:.78rem; color:var(--text-3); }
.nm-article-stats { font-size:.8rem; color:var(--text-3); }

/* ─ Recipe / Article Hero Image Container ─ */
.nm-recipe-hero {
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    margin:2.5rem 0;
    background:var(--bg-card);
}
.nm-recipe-hero__img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:var(--radius-lg);
}

/* Keep legacy class for any remaining uses */
.nm-article-hero-img {
    width:100%; border-radius:var(--radius-lg);
    box-shadow:0 20px 60px rgba(0,0,0,.4);
    margin:2.5rem 0;
    aspect-ratio:16 / 9;
    object-fit:cover;
    object-position:center;
}

/* Prose */
.nm-prose { font-size:1.05rem; line-height:1.85; color:var(--text-2); }
.nm-prose h2 { font-size:1.5rem; font-weight:800; color:var(--text); margin:3rem 0 1rem; }
.nm-prose h3 { font-size:1.25rem; font-weight:700; color:var(--text); margin:2.5rem 0 .75rem; }
.nm-prose p { margin-bottom:1.25rem; }
.nm-prose ul,.nm-prose ol { margin:1rem 0 1.5rem 1.5rem; }
.nm-prose li { margin-bottom:.5rem; }
.nm-prose strong { color:var(--text); font-weight:600; }
.nm-prose a { color:var(--accent-light); text-decoration:underline; text-underline-offset:2px; }
.nm-prose img { border-radius:var(--radius); margin:2rem 0; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.nm-prose blockquote {
    border-left:3px solid var(--accent); padding:1rem 1.5rem; margin:1.5rem 0;
    background:rgba(var(--accent-rgb),.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    font-style:italic; color:var(--text);
}
.nm-prose code { background:var(--bg-soft); padding:.15rem .4rem; border-radius:4px; font-size:.9em; }
.nm-prose pre { background:var(--bg-soft); padding:1.25rem; border-radius:var(--radius); overflow-x:auto; margin:1.5rem 0; border:1px solid var(--border); }
.nm-prose pre code { background:none; padding:0; }
.nm-prose table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.nm-prose th,.nm-prose td { padding:.75rem 1rem; border:1px solid var(--border); text-align:left; }
.nm-prose th { background:var(--bg-soft); font-weight:600; color:var(--text); }

/* Tags + Share */
.nm-article-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.nm-article-tag {
    padding:.25rem .75rem; background:var(--bg-soft); border:1px solid var(--border);
    border-radius:50px; font-size:.78rem; color:var(--text-2); transition:all .25s;
}
.nm-article-tag:hover { color:var(--text); border-color:var(--text-3); }
.nm-article-share {
    margin-top:2rem; padding:1.25rem; background:var(--bg-soft); border-radius:var(--radius);
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.nm-article-share__label { font-weight:600; font-size:.85rem; }
.nm-article-share__btns { display:flex; gap:.4rem; }
.nm-share-btn {
    padding:.4rem .9rem; border-radius:var(--radius-sm); font-size:.8rem;
    font-weight:600; border:1px solid var(--border); background:var(--bg-card);
    color:var(--text-2); cursor:pointer; font-family:var(--font); transition:all .25s;
}
.nm-share-btn:hover { color:var(--text); border-color:var(--text-3); }

/* Related */
.nm-related { border-top:1px solid var(--border); }
.nm-related__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.nm-related__title { font-family:var(--font-display); font-size:1.5rem; font-weight:800; }

/* ═══════════════════════════════════════════════════════════
   GUIDE TEMPLATE — Category-Specific Info Cards
   ═══════════════════════════════════════════════════════════ */
/* Guide type badge (next to category badge) */
.nm-guide-type-badge {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.25rem .75rem; border-radius:var(--radius-sm);
    font-size:.75rem; font-weight:600; letter-spacing:.02em;
    background:rgba(var(--accent-rgb,.1)); color:var(--guide-accent,var(--accent));
    border:1px solid rgba(var(--accent-rgb,.15));
}

/* Info card panel */
.nm-guide-info {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.75rem 2rem;
    margin:2rem 0 2.5rem;
    position:relative;
    overflow:hidden;
    transition:border-color .4s;
}
.nm-guide-info::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--guide-accent,var(--accent)),transparent);
    opacity:.6;
}
.nm-guide-info:hover { border-color:var(--guide-accent,var(--accent)); }

.nm-guide-info__header {
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:1.25rem; padding-bottom:1rem;
    border-bottom:1px solid var(--border);
}
.nm-guide-info__icon {
    font-size:1.5rem; line-height:1;
}
.nm-guide-info__type {
    font-family:var(--font-display); font-size:.7rem; font-weight:800;
    letter-spacing:.12em; color:var(--guide-accent,var(--accent));
    text-transform:uppercase;
}
.nm-guide-info__time,
.nm-guide-info__rating {
    margin-left:auto; font-size:.8rem; font-weight:600;
    color:var(--text-2); display:flex; align-items:center; gap:.3rem;
}
.nm-guide-info__rating { margin-left:0; }

/* Card grid */
.nm-guide-info__grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:1rem;
}
.nm-guide-info__card {
    display:flex; align-items:flex-start; gap:.75rem;
    padding:1rem 1.1rem;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:all .3s ease;
}
.nm-guide-info__card:hover {
    border-color:var(--guide-accent,var(--accent));
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.nm-guide-info__card-icon {
    font-size:1.4rem; line-height:1;
    flex-shrink:0; margin-top:.15rem;
}
.nm-guide-info__card-body {
    display:flex; flex-direction:column; gap:.2rem; min-width:0;
}
.nm-guide-info__card-label {
    font-size:.65rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-3);
}
.nm-guide-info__card-value {
    font-size:.95rem; font-weight:700; color:var(--text);
    line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Guide prose enhancements */
.nm-prose--guide h2 {
    margin-top:2.5rem; padding-top:1.5rem;
    border-top:1px solid var(--border);
}
.nm-prose--guide h2:first-child {
    margin-top:0; padding-top:0; border-top:none;
}

/* Responsive */
@media(max-width:768px) {
    .nm-guide-info { padding:1.25rem 1.25rem; }
    .nm-guide-info__grid { grid-template-columns:repeat(2, 1fr); gap:.75rem; }
    .nm-guide-info__card { padding:.75rem .85rem; }
    .nm-guide-info__card-value { font-size:.85rem; }
}
@media(max-width:480px) {
    .nm-guide-info__grid { grid-template-columns:1fr; }
    .nm-guide-info__header { flex-wrap:wrap; }
    .nm-guide-info__time { margin-left:0; }
}

/* Light theme overrides */
[data-theme="light"] .nm-guide-info {
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .nm-guide-info__card {
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .nm-guide-info__card:hover {
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:3rem; flex-wrap:wrap; }
.pagination-btn,.pagination-page {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.55rem 1.1rem; border-radius:var(--radius-sm);
    font-size:.85rem; font-weight:500; border:1px solid var(--border);
    color:var(--text-2); background:var(--bg-card); transition:all .25s; text-decoration:none;
}
.pagination-btn:hover,.pagination-page:hover { color:var(--text); border-color:var(--accent); }
.pagination-page.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination-pages { display:flex; gap:.3rem; }
.pagination-dots { padding:.55rem .4rem; color:var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════ */
.nm-search-hero { padding:8rem 0 2rem; text-align:center; }
.nm-search-title { font-family:var(--font-display); font-size:2.5rem; font-weight:900; margin-bottom:1.5rem; }
.nm-search-form { display:flex; gap:.75rem; max-width:550px; margin:0 auto; }
.nm-search-input {
    flex:1; padding:.9rem 1.4rem; background:var(--bg-soft);
    border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text); font-size:1rem; font-family:var(--font);
    outline:none; transition:border-color .25s;
}
.nm-search-input:focus { border-color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════ */
.nm-empty { text-align:center; padding:5rem 2rem; }
.nm-empty__icon { font-size:3rem; margin-bottom:1rem; opacity:.25; }
.nm-empty h2 { font-size:1.3rem; font-weight:700; margin-bottom:.4rem; }
.nm-empty p { color:var(--text-3); max-width:360px; margin:0 auto 1.5rem; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.nm-footer {
    background:var(--bg-soft); border-top:1px solid var(--border);
    padding:4rem 0 2rem; margin-top:2rem;
    transition:background .5s;
}
.nm-footer__inner {
    max-width:var(--max-w); margin:0 auto; padding:0 2rem;
    display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:2.5rem;
}
.nm-footer__desc { color:var(--text-3); font-size:.85rem; line-height:1.6; margin-top:.75rem; max-width:280px; }
.nm-footer__heading { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:.75rem; }
.nm-footer__link { display:block; color:var(--text-3); font-size:.85rem; padding:.25rem 0; transition:color .25s; }
.nm-footer__link:hover { color:var(--text); }
.nm-footer__app {
    display:inline-flex; align-items:center; gap:.3rem; margin-top:1rem;
    padding:.5rem 1rem; background:var(--accent); color:#fff !important;
    border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; transition:all .3s;
}
.nm-footer__app:hover { opacity:.85; }
.nm-footer__bottom {
    max-width:var(--max-w); margin:0 auto; padding:0 2rem;
    text-align:center; margin-top:3rem; padding-top:2rem;
    border-top:1px solid var(--border); color:var(--text-3); font-size:.8rem;
}

/* ─── Brand Logic Layout (NA·MO·VI) ─── */
.nm-footer__namovi {
    max-width:var(--max-w); margin:2.5rem auto 0; padding:0 2rem;
    text-align:center;
}
.nm-footer__namovi-row {
    display:inline-flex; align-items:center; justify-content:center;
    gap:.75rem; flex-wrap:wrap;
}
.nm-footer__namovi-block {
    display:inline-flex; align-items:center; gap:.4rem;
    white-space:nowrap;
}
.nm-footer__namovi-letters {
    font-family:var(--font-logo, var(--font-head)); font-weight:800;
    font-size:1.1rem; letter-spacing:.06em; text-transform:uppercase;
}
.nm-footer__namovi-meaning {
    font-size:.85rem; color:var(--text-2); letter-spacing:.02em;
}
.nm-footer__namovi-dash {
    opacity:.35; font-weight:300; font-size:.85rem;
}
.nm-footer__namovi-dot {
    opacity:.3; font-size:.75rem; user-select:none; line-height:1;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
    .nm-grid { grid-template-columns:repeat(2,1fr); }
    .nm-mosaic { grid-template-columns:1fr 1fr; }
    .nm-mosaic .nm-card--hero { grid-row:span 1; }
    .nm-mosaic .nm-card__visual--full { min-height:280px; }
    .nm-footer__inner { grid-template-columns:1fr 1fr 1fr; gap:2rem; }
}
@media(max-width:768px) {
    /* ─ Global spacing ─ */
    .nm-container { padding:0 1.5rem; }
    .nm-narrow { padding:0 1.5rem; }
    .nm-section { padding:3.5rem 0; }

    /* ─ Header ─ */
    .nm-header { padding:0 1rem; height:60px; }
    .nm-theme-toggle { width:34px; height:34px; }
    .nm-theme-toggle__icon { width:17px; height:17px; }
    .nm-header__right { gap:.5rem; }

    /* ─ Hero ─ */
    .nm-hero__title { font-size:clamp(2.5rem,12vw,4.5rem); }
    .nm-hero__subtitle { font-size:clamp(.85rem,2vw,1.1rem); letter-spacing:.08em; }
    .nm-hero__desc { font-size:.9rem; }
    .nm-hero__actions { gap:.75rem; }
    .nm-hero__actions .nm-btn { padding:.65rem 1.5rem; font-size:.82rem; }

    /* ─ Portals ─ */
    .nm-portals__grid { grid-template-columns:1fr; padding:0 1.25rem; }
    .nm-portal { padding:2rem 1.5rem; }
    .nm-portal:first-child { transform:none; }
    .nm-portal__title { font-size:clamp(1.6rem,6vw,2.5rem); }

    /* ─ Cards + Grid ─ */
    .nm-mosaic { grid-template-columns:1fr; }
    .nm-grid { grid-template-columns:1fr; gap:1rem; }
    .nm-card__body { padding:1rem; }
    .nm-card--hero .nm-card__title { font-size:1.3rem; }

    /* ─ Brand Hero ─ */
    .nm-brand-hero { min-height:auto; padding:6rem 1.25rem 2.5rem; }
    .nm-brand-hero__title { font-size:clamp(2rem,9vw,3.5rem); }
    .nm-brand-hero__tagline { font-size:.9rem; }
    .nm-brand-hero__desc { font-size:.85rem; }
    .nm-brand-hero__stats { gap:1.5rem; margin-top:1.5rem; }
    .nm-brand-stat__val { font-size:1.5rem; }
    .nm-brand-hero__pills { margin-top:1.25rem; gap:.4rem; }
    .nm-hero-pill { padding:.4rem .9rem; font-size:.78rem; }
    .nm-hero-pill__icon { font-size:.85rem; }
    .nm-brand-nav { gap:.3rem; }
    .nm-brand-nav__link { padding:.4rem .85rem; font-size:.78rem; }

    /* ─ Articles header ─ */
    .nm-articles__header { margin-bottom:1.5rem; }
    .nm-articles__title { font-size:1.4rem; }

    /* ─ Article ─ */
    .nm-article-header { padding:6rem 2rem 2.5rem; }
    .nm-article-title { font-size:1.5rem; margin-bottom: 1rem; }
    .nm-article-info { flex-direction:column; gap:1rem; align-items:center; }
    .nm-article-share { flex-direction:column; align-items:flex-start; }
    .nm-recipe-hero { margin:1.5rem 0; }
    .nm-article-hero-img { margin:1.5rem 0; }
    .nm-prose { font-size:1rem; padding: 0 1rem; line-height: 1.8; }

    /* ─ Search ─ */
    .nm-search-form { flex-direction:column; }
    .nm-search-title { font-size:1.8rem; }

    /* ─ Glass ─ */
    .nm-glass { padding:1.75rem; }
    .nm-glass__title { font-size:1.4rem; }
    .nm-glass__features { flex-direction:column; gap:1rem; }

    /* ─ Cross-brand CTA ─ */
    .nm-cross { padding:2rem 1.5rem; }
    .nm-cross__title { font-size:1.2rem; }

    /* ─ Sub-categories ─ */
    .nm-subcats { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:.5rem; }
    .nm-subcat { padding:.85rem .65rem; }
    .nm-subcat__icon { font-size:1.3rem; }
    .nm-subcat__name { font-size:.72rem; }

    /* ─ Filters ─ */
    .nm-filter-bar { gap:.3rem; }

    /* ─ Footer ─ */
    .nm-footer { padding:2.5rem 0 1.5rem; }
    .nm-footer__inner { grid-template-columns:1fr 1fr; gap:1.5rem; padding:0 1.25rem; }
    .nm-footer__desc { max-width:100%; }
    .nm-footer__bottom { padding:0 1.25rem; margin-top:2rem; }
    .nm-footer__namovi { padding:0 1.25rem; margin-top:1.5rem; }
    .nm-footer__namovi-row { gap:.4rem .6rem; }
    .nm-footer__namovi-letters { font-size:.95rem; }
    .nm-footer__namovi-meaning { font-size:.78rem; }

    /* ─ Pagination ─ */
    .pagination { gap:.25rem; }
    .pagination-btn, .pagination-page { padding:.4rem .75rem; font-size:.78rem; }
}

@media(max-width:480px) {
    /* ─ Ultra small screens ─ */
    .nm-container { padding:0 1.25rem; }
    .nm-narrow { padding:0 1.25rem; }

    .nm-hero { padding:4.5rem 1rem 2.5rem; }
    .nm-hero__title { font-size:clamp(2rem,11vw,3.5rem); }
    .nm-hero__line--fuel { transform:none; }
    .nm-hero__line--master { transform:none; }
    .nm-hero__subtitle { font-size:.8rem; }

    .nm-brand-hero { padding:5rem 1rem 2rem; }
    .nm-brand-hero__title { font-size:clamp(1.8rem,8vw,2.5rem); }
    .nm-brand-hero__stats { flex-direction:column; gap:.75rem; }
    .nm-brand-hero__label { font-size:.6rem; padding:.25rem .65rem; }
    .nm-brand-hero__pills { margin-top:1rem; gap:.35rem; }
    .nm-hero-pill { padding:.35rem .75rem; font-size:.72rem; }
    .nm-hero-pill__icon { font-size:.8rem; }

    .nm-article-title { font-size:1.35rem; }
    .nm-article-header { padding:5rem 0 1.5rem; }

    .nm-portal { padding:1.5rem 1.25rem; }
    .nm-portal__title { font-size:1.4rem; }
    .nm-portal__cats { gap:.25rem; }
    .nm-portal__cat-pill { font-size:.65rem; padding:.2rem .5rem; }

    .nm-subcats { grid-template-columns:repeat(2, 1fr); }

    .nm-grid { grid-template-columns:repeat(2, 1fr); gap:.75rem; }
    .nm-card__body { padding:.85rem; }
    .nm-card__title { font-size:.82rem; -webkit-line-clamp:2; margin-bottom:.2rem; }
    .nm-card__excerpt { display:none; }
    .nm-card__foot { font-size:.62rem; margin-top:.4rem; }
    .nm-card__badges { gap:.3rem; margin-bottom:.4rem; }
    .nm-card__badge { font-size:.6rem; padding:.15rem .5rem; }
    .nm-card__visual { aspect-ratio:1/1; } /* Square on mobile for better grid fit */
    .nm-card__foot--recipe { flex-wrap:wrap; gap:.25rem; }
    .nm-card__foot--recipe span { white-space:nowrap; }

    .nm-search-title { font-size:1.4rem; }

    .nm-card--hero .nm-card__title { font-size:1.15rem; }
    .nm-card__over { padding:1.5rem; }

    .nm-empty { padding:3rem 1rem; }
    .nm-empty h2 { font-size:1.1rem; }

    .nm-cross { padding:1.5rem 1rem; }
    .nm-cross__title { font-size:1.05rem; }
    .nm-cross__desc { font-size:.82rem; }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE RECIPE — Living Canvas v4
   ═══════════════════════════════════════════════════════════ */

/* Recipe Header */
.nm-recipe-header {
    padding:8rem 0 3rem;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.nm-recipe-header__bg {
    position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.nm-recipe-header .nm-orb { opacity:.08; }

.nm-recipe-tags-row {
    display:flex; align-items:center; gap:.5rem; justify-content:center;
    margin-bottom:1.5rem; flex-wrap:wrap;
}
.nm-recipe-tag-pill {
    display:inline-flex; align-items:center; gap:.25rem;
    padding:.2rem .7rem; border-radius:50px;
    font-size:.75rem; font-weight:600;
    background:rgba(var(--accent-rgb),.06);
    border:1px solid rgba(var(--accent-rgb),.12);
    color:var(--text-2);
}
.nm-recipe-tag-pill--easy { color:#10b981; border-color:rgba(16,185,129,.2); }
.nm-recipe-tag-pill--medium { color:#f59e0b; border-color:rgba(245,158,11,.2); }
.nm-recipe-tag-pill--hard { color:#ef4444; border-color:rgba(239,68,68,.2); }

/* Recipe Quick Stats */
.nm-recipe-stats {
    display:flex; gap:1.5rem; justify-content:center;
    margin:2rem 0; flex-wrap:wrap;
}
.nm-recipe-stat {
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    padding:1rem 1.5rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    min-width:90px;
    transition:all .3s var(--ease);
}
.nm-recipe-stat:hover {
    border-color:rgba(var(--accent-rgb),.3);
    transform:translateY(-2px);
}
.nm-recipe-stat__icon { font-size:1.25rem; }
.nm-recipe-stat__label {
    font-size:.65rem; font-weight:600; text-transform:uppercase;
    letter-spacing:1px; color:var(--text-3);
}
.nm-recipe-stat__value {
    font-size:1.1rem; font-weight:800; color:var(--text);
}

/* Recipe Story */
.nm-recipe-story {
    padding-bottom:2rem;
    border-bottom:1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   INGREDIENTS + NUTRITION — Side-by-Side Duo Grid
   ═══════════════════════════════════════════════════════════ */
.nm-recipe-narrow {
    max-width:var(--narrow);
    margin:0 auto;
    padding:0 2rem;
}
.nm-recipe-duo {
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:1.5rem;
    align-items:start;
}
@media(max-width:768px) {
    .nm-recipe-duo { grid-template-columns:1fr; }
}

.nm-recipe-section-title {
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:1.25rem;
}

/* ═══════════════════════════════════════════════════════════
   INGREDIENTS PANEL — Modern Interactive
   ═══════════════════════════════════════════════════════════ */
.nm-ing-panel {
    position:relative;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2rem;
    overflow:hidden;
    transition:border-color .4s;
}
.nm-ing-panel:hover { border-color:rgba(var(--accent-rgb),.25); }
.nm-ing-panel__glow {
    position:absolute; top:-40%; right:-20%;
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(var(--accent-rgb),.06) 0%, transparent 70%);
    pointer-events:none;
}

/* Header */
.nm-ing-panel__header {
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem;
}
.nm-ing-panel__title-row {
    display:flex; align-items:center; gap:.85rem;
}
.nm-ing-panel__icon {
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.08);
    border:1px solid rgba(var(--accent-rgb),.15);
    border-radius:14px;
    font-size:1.4rem;
}
.nm-ing-panel__title {
    font-family:var(--font-display);
    font-size:1.3rem; font-weight:800;
    color:var(--text); margin:0;
}
.nm-ing-panel__sub {
    font-size:.78rem; color:var(--text-3); margin:.15rem 0 0;
    font-weight:500;
}

/* Servings Controls */
.nm-ing-panel__controls {
    display:flex; align-items:center; gap:.65rem;
}
.nm-ing-servings {
    display:flex; align-items:center;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    overflow:hidden;
}
.nm-ing-servings__btn {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
    color:var(--text-2); font-size:1.1rem; font-weight:700;
    cursor:pointer; transition:all .2s;
}
.nm-ing-servings__btn:hover {
    background:rgba(var(--accent-rgb),.12);
    color:var(--accent);
}
.nm-ing-servings__val {
    width:36px; text-align:center;
    font-size:.95rem; font-weight:800;
    color:var(--text);
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    padding:.35rem 0;
}
.nm-ing-panel__reset {
    padding:.4rem .75rem;
    background:transparent; border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-3); font-size:.72rem; font-weight:600;
    font-family:var(--font);
    cursor:pointer; transition:all .25s;
    text-transform:uppercase; letter-spacing:.5px;
}
.nm-ing-panel__reset:hover {
    color:var(--accent); border-color:rgba(var(--accent-rgb),.3);
}

/* Progress Bar */
.nm-ing-progress {
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:1.25rem;
    padding:.55rem .85rem;
    background:var(--bg-soft);
    border-radius:var(--radius-sm);
}
.nm-ing-progress__bar {
    flex:1; height:4px;
    background:rgba(var(--accent-rgb),.1);
    border-radius:2px; overflow:hidden;
    position:relative;
}
.nm-ing-progress__bar::after {
    content:''; position:absolute; inset:0;
    width:0%; background:var(--accent);
    border-radius:2px;
    transition:width .4s var(--ease);
}
.nm-ing-progress__text {
    font-size:.72rem; font-weight:600;
    color:var(--text-3); white-space:nowrap;
}

/* Ingredient Items */
.nm-ing-list {
    list-style:none; padding:0; margin:0;
}
.nm-ing-item {
    padding:.6rem .75rem;
    border-radius:var(--radius-sm);
    margin-bottom:2px;
    transition:background .2s, transform .2s;
    animation:nmIngSlideIn .4s var(--ease) both;
    animation-delay:var(--delay);
}
.nm-ing-item:hover {
    background:rgba(var(--accent-rgb),.04);
}
@keyframes nmIngSlideIn {
    from { opacity:0; transform:translateX(-12px); }
    to   { opacity:1; transform:translateX(0); }
}

.nm-ing-item__label {
    display:flex; align-items:center; gap:.75rem;
    cursor:pointer; user-select:none;
}
.nm-ing-item__input {
    position:absolute; opacity:0; width:0; height:0;
}
.nm-ing-item__check {
    width:22px; height:22px; flex-shrink:0;
    border:2px solid var(--border);
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:all .25s var(--ease);
    background:transparent;
}
.nm-ing-item__check svg {
    width:12px; height:10px;
    stroke:transparent; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
    fill:none;
    transition:stroke .2s;
}
.nm-ing-item__input:checked + .nm-ing-item__check {
    background:var(--accent);
    border-color:var(--accent);
    transform:scale(.9);
    animation:nmCheckBounce .35s var(--ease);
}
.nm-ing-item__input:checked + .nm-ing-item__check svg {
    stroke:#fff;
}
@keyframes nmCheckBounce {
    0%   { transform:scale(.7); }
    50%  { transform:scale(1.15); }
    100% { transform:scale(.9); }
}
.nm-ing-item__text {
    font-size:.9rem; color:var(--text-2);
    line-height:1.6; transition:all .3s;
}
.nm-ing-item__input:checked ~ .nm-ing-item__text {
    text-decoration:line-through;
    color:var(--text-3);
    opacity:.45;
}

/* ═══════════════════════════════════════════════════════════
   NUTRITION PANEL — Animated Rings + Macro Bars
   ═══════════════════════════════════════════════════════════ */
.nm-nutri {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2rem;
    position:sticky;
    top:5.5rem;
    overflow:hidden;
    transition:border-color .4s;
}
@media(max-width:768px) {
    .nm-nutri { position:static; }
}
.nm-nutri:hover { border-color:rgba(var(--accent-rgb),.25); }
.nm-nutri::before {
    content:'';
    position:absolute; top:-60%; left:50%; transform:translateX(-50%);
    width:400px; height:400px;
    background:radial-gradient(circle, rgba(var(--accent-rgb),.05) 0%, transparent 70%);
    pointer-events:none;
}

/* Header */
.nm-nutri__header {
    margin-bottom:2rem;
}
.nm-nutri__title-row {
    display:flex; align-items:center; gap:.85rem;
}
.nm-nutri__icon {
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.08);
    border:1px solid rgba(var(--accent-rgb),.15);
    border-radius:14px;
    font-size:1.4rem;
}
.nm-nutri__title {
    font-family:var(--font-display);
    font-size:1.3rem; font-weight:800;
    color:var(--text); margin:0;
}
.nm-nutri__sub {
    font-size:.78rem; color:var(--text-3); margin:.15rem 0 0;
    font-weight:500;
}

/* Calorie Ring — Hero */
.nm-nutri__hero {
    display:flex; align-items:center; gap:1.5rem;
    padding:1.5rem;
    margin-bottom:1.75rem;
    background:rgba(var(--accent-rgb),.04);
    border:1px solid rgba(var(--accent-rgb),.08);
    border-radius:var(--radius);
}
.nm-nutri-ring {
    position:relative; width:110px; height:110px; flex-shrink:0;
}
.nm-nutri-ring svg {
    width:110px; height:110px;
    transform:rotate(-90deg);
}
.nm-nutri-ring__track {
    fill:none;
    stroke:var(--bg-soft);
    stroke-width:8;
}
.nm-nutri-ring__fill {
    fill:none;
    stroke:var(--ring-color, var(--accent));
    stroke-width:8;
    stroke-linecap:round;
    stroke-dasharray:326.73;
    stroke-dashoffset:calc(326.73 - (326.73 * var(--ring-pct, 0)) / 100);
    transition:stroke-dashoffset 1.2s var(--ease);
    filter:drop-shadow(0 0 6px var(--ring-color, var(--accent)));
}
.nm-nutri-ring__center {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.nm-nutri-ring__val {
    font-size:1.6rem; font-weight:900;
    color:var(--text); line-height:1;
}
.nm-nutri-ring__unit {
    font-size:.65rem; font-weight:600;
    color:var(--text-3); text-transform:uppercase;
    letter-spacing:.5px; margin-top:2px;
}
.nm-nutri__hero-label {
    display:flex; flex-direction:column; gap:.2rem;
}
.nm-nutri__hero-name {
    font-size:1.1rem; font-weight:700; color:var(--text);
}
.nm-nutri__hero-daily {
    font-size:.8rem; font-weight:500; color:var(--text-3);
}

/* Macro Bars */
.nm-nutri__macros {
    display:flex; flex-direction:column; gap:1rem;
}
.nm-nutri-macro {
    padding:1rem 1.15rem;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    transition:all .3s;
}
.nm-nutri-macro:hover {
    border-color:rgba(var(--accent-rgb),.15);
    transform:translateY(-1px);
    box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.nm-nutri-macro__top {
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.6rem;
}
.nm-nutri-macro__icon {
    font-size:1rem;
}
.nm-nutri-macro__name {
    font-size:.82rem; font-weight:700;
    color:var(--text-2); flex:1;
}
.nm-nutri-macro__val {
    font-size:.95rem; font-weight:900;
    color:var(--text);
}
.nm-nutri-macro__bar {
    height:6px;
    background:rgba(255,255,255,.04);
    border-radius:3px;
    overflow:hidden;
    position:relative;
}
.nm-nutri-macro__fill {
    height:100%;
    border-radius:3px;
    background:var(--bar-color, var(--accent));
    width:0%;
    transition:width 1s var(--ease) .3s;
    position:relative;
}
.nm-nutri-macro__fill::after {
    content:'';
    position:absolute; right:0; top:-1px; bottom:-1px;
    width:8px;
    background:var(--bar-color, var(--accent));
    border-radius:50%;
    filter:blur(4px);
    opacity:.6;
}
.nm-nutri-macro__bottom {
    margin-top:.45rem;
}
.nm-nutri-macro__daily {
    font-size:.7rem; font-weight:600;
    color:var(--text-3);
}

/* Animate bars when visible */
.nm-nutri-macro.is-visible .nm-nutri-macro__fill {
    width:var(--bar-pct, 0%);
}

/* Instructions */
.nm-instructions-list {
    list-style:none; padding:0; margin:0;
    counter-reset:step-counter;
}
.nm-instruction {
    display:grid;
    grid-template-columns:48px 1fr 40px;
    gap:1rem;
    align-items:start;
    padding:1.25rem 0;
    border-bottom:1px solid var(--border);
    transition:all .3s var(--ease);
}
.nm-instruction:last-child { border-bottom:none; }
.nm-instruction.is-done {
    opacity:.45;
}
.nm-instruction.is-done .nm-instruction__number {
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}
.nm-instruction__number {
    width:48px; height:48px;
    border-radius:50%;
    background:var(--bg-card);
    border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; font-weight:800;
    color:var(--accent);
    transition:all .3s;
    flex-shrink:0;
}
.nm-instruction__content {
    padding-top:.6rem;
}
.nm-instruction__content p {
    font-size:.95rem; color:var(--text-2); line-height:1.75; margin:0;
}
.nm-instruction__check {
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text-3);
    font-size:.85rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .25s;
    margin-top:.6rem;
}
.nm-instruction__check:hover {
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(var(--accent-rgb),.06);
}
.nm-instruction.is-done .nm-instruction__check {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

/* Recipe Extras (Tips, Substitutions, Storage) */
.nm-recipe-extras {
    display:grid; grid-template-columns:1fr; gap:1rem;
}
.nm-recipe-extra {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.5rem;
}
.nm-recipe-extra__title {
    font-size:1rem; font-weight:700; color:var(--text);
    margin-bottom:.75rem;
}
.nm-recipe-extra .nm-prose {
    font-size:.9rem;
}

/* Recipe Actions */
.nm-recipe-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.25rem 1.5rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    flex-wrap:wrap;
    gap:1rem;
}

/* Recipe Card Footer with meta */
.nm-card__foot--recipe {
    display:flex; gap:.6rem; flex-wrap:wrap;
}
.nm-card__foot--recipe span {
    font-size:.7rem; color:var(--text-3);
}
.nm-card--recipe:hover .nm-card__foot--recipe span {
    color:var(--text-2);
}

/* ─── Recipe Responsive ───────────────────────────────── */
@media(max-width:768px) {
    .nm-recipe-header { padding:6rem 0 2rem; }
    .nm-recipe-narrow { padding:0 1.25rem; }
    .nm-recipe-stats {
        gap:.5rem;
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:.5rem;
        flex-wrap:nowrap;
    }
    .nm-recipe-stat {
        padding:.6rem .85rem; min-width:auto; flex-shrink:0;
    }
    .nm-recipe-stat__value { font-size:.95rem; }
    .nm-recipe-stat__label { font-size:.58rem; }
    .nm-recipe-stat__icon { font-size:1rem; }
    .nm-recipe-tags-row { gap:.35rem; }
    .nm-recipe-tag-pill { font-size:.68rem; padding:.15rem .55rem; }
    .nm-recipe-story { padding-bottom:1.5rem; }

    .nm-instruction {
        grid-template-columns:36px 1fr 28px;
        gap:.6rem;
        padding:1rem .75rem;
    }
    .nm-instruction__number {
        width:36px; height:36px; font-size:.8rem;
    }
    .nm-instruction__check {
        width:28px; height:28px;
    }
    .nm-instruction__text h4 { font-size:.85rem; }
    .nm-instruction__text p { font-size:.82rem; }
    .nm-recipe-actions {
        flex-direction:column; align-items:stretch; text-align:center;
    }
    /* Ingredients */
    .nm-ing-panel { padding:1.15rem; }
    .nm-ing-panel__header { flex-direction:column; align-items:flex-start; gap:.75rem; }
    .nm-ing-panel__icon { width:38px; height:38px; font-size:1.1rem; border-radius:10px; }
    .nm-ing-panel__title { font-size:1.1rem; }
    .nm-ing-panel__controls { gap:.4rem; }
    .nm-ing-servings__btn { width:32px; height:32px; font-size:1rem; }
    .nm-ing-servings__val { width:32px; font-size:.85rem; }
    .nm-ing-panel__reset { font-size:.65rem; padding:.3rem .55rem; }
    .nm-ing-item { padding:.45rem .4rem; }
    .nm-ing-item__text { font-size:.82rem; }
    .nm-ing-item__check { width:20px; height:20px; }
    .nm-ing-progress { padding:.4rem .65rem; }
    .nm-ing-progress__text { font-size:.65rem; }

    /* Nutrition */
    .nm-nutri { padding:1.15rem; }
    .nm-nutri__hero { flex-direction:column; text-align:center; padding:1rem; gap:.75rem; }
    .nm-nutri__hero-label { align-items:center; }
    .nm-nutri-ring { width:80px; height:80px; }
    .nm-nutri-ring svg { width:80px; height:80px; }
    .nm-nutri-ring__val { font-size:1.2rem; }
    .nm-nutri-ring__unit { font-size:.55rem; }
    .nm-nutri-macro { padding:.6rem .75rem; }
    .nm-nutri-macro__name { font-size:.72rem; }
    .nm-nutri-macro__val { font-size:.72rem; }

    .nm-recipe-section-title { font-size:1.15rem; margin-bottom:1rem; }
}
@media(max-width:480px) {
    .nm-recipe-header { padding:5rem 0 1.5rem; }
    .nm-recipe-narrow { padding:0 1rem; }
    .nm-recipe-stats { gap:.4rem; }
    .nm-recipe-stat { padding:.5rem .7rem; }
    .nm-recipe-stat__value { font-size:.85rem; }
    .nm-ing-panel { padding:1rem; }
    .nm-nutri { padding:1rem; }
    .nm-instruction { padding:.85rem .6rem; }
}

/* ─── Print styles for Recipe ─────────────────────────── */
@media print {
    .nm-header, .nm-footer, .nm-overlay,
    .nm-recipe-actions, .nm-article-share,
    .nm-article-tags, .nm-related,
    .nm-recipe-header__bg, .nm-instruction__check,
    .nm-breadcrumb, .nm-ing-panel__reset,
    .nm-ing-panel__controls,
    [data-reveal] { opacity:1 !important; }

    body { background:#fff !important; color:#111 !important; }
    .nm-recipe-stat, .nm-ing-panel, .nm-nutri {
        background:#f8f8f8 !important;
        border-color:#ddd !important;
    }
    .nm-nutri-macro__fill, .nm-nutri-ring__fill {
        print-color-adjust:exact; -webkit-print-color-adjust:exact;
    }
    .nm-ing-panel__glow, .nm-nutri::before { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   GLASSMORPHISM DOCK — Floating Bottom Navigation
   ═══════════════════════════════════════════════════════════ */
.nm-dock {
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:95;
    display:flex;
    align-items:flex-end;
    gap:4px;
    padding:8px 14px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    box-shadow:
        0 8px 32px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);
    opacity:0; /* GSAP reveals */
    transition:opacity .35s var(--ease);
}
body.menu-open .nm-dock,
body.filters-open .nm-dock { opacity:0 !important; pointer-events:none; }

/* Dock item */
.nm-dock__item {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:50px; height:50px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text-2);
    background:transparent;
    transform-origin:center bottom;
    will-change:transform;
    transition:background .2s, color .2s;
}
.nm-dock__item:hover {
    color:var(--text);
    background:rgba(255,255,255,.06);
}
.nm-dock__item.is-active {
    color:var(--dock-c, var(--accent));
    background:rgba(var(--dock-rgb, var(--accent-rgb)),.1);
}

/* Icon */
.nm-dock__icon {
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
}
.nm-dock__icon svg {
    width:22px; height:22px;
    stroke:currentColor;
}

/* Label (appears on hover) */
.nm-dock__label {
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
    margin-top:2px;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .2s, transform .2s;
    white-space:nowrap;
    color:inherit;
}
.nm-dock__item:hover .nm-dock__label {
    opacity:1;
    transform:translateY(0);
}

/* Tooltip (floating above) */
.nm-dock__item::after {
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%) translateY(6px);
    padding:5px 12px;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.5px;
    white-space:nowrap;
    border-radius:8px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s, transform .2s;
    z-index:10;
}
.nm-dock__item:hover::after {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* Active dot indicator */
.nm-dock__item.is-active::before {
    content:'';
    position:absolute;
    bottom:2px;
    left:50%;
    transform:translateX(-50%);
    width:5px; height:5px;
    border-radius:50%;
    background:var(--dock-c, var(--accent));
    box-shadow:0 0 8px var(--dock-c, var(--accent));
}

/* Separator */
.nm-dock__sep {
    width:1px;
    height:22px;
    background:rgba(255,255,255,.07);
    margin:0 4px;
    align-self:center;
    flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   QUICK-SWAP — "I want to Eat" ↔ "I want to Move"
   ═══════════════════════════════════════════════════════════ */
.nm-quickswap {
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:95;
    display:flex;
    align-items:center;
    gap:0;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    padding:4px;
    box-shadow:
        0 4px 24px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.06);
    opacity:0; /* GSAP reveals */
    transition:opacity .35s var(--ease);
}
body.menu-open .nm-quickswap,
body.filters-open .nm-quickswap { opacity:0 !important; pointer-events:none; }

.nm-quickswap__opt {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:50px;
    text-decoration:none;
    color:var(--text-3);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.3px;
    transition:all .35s var(--ease);
    position:relative;
}
.nm-quickswap__opt:hover { color:var(--text-2); }

/* Eat active */
.nm-quickswap__opt--eat.is-active {
    background:rgba(var(--terra-rgb),.15);
    color:var(--terracotta);
    box-shadow:0 0 20px rgba(var(--terra-rgb),.1);
}

/* Move active */
.nm-quickswap__opt--move.is-active {
    background:rgba(var(--cyan-rgb),.15);
    color:var(--cyan);
    box-shadow:0 0 20px rgba(var(--cyan-rgb),.1);
}

/* Vitality active */
.nm-quickswap__opt--vitalize.is-active {
    background:rgba(167,139,250,.15);
    color:#a78bfa;
    box-shadow:0 0 20px rgba(167,139,250,.1);
}

.nm-quickswap__icon { font-size:1rem; line-height:1; }
.nm-quickswap__label { line-height:1; }

/* ─── Dock + QuickSwap Responsive ─────────────────────── */
@media(max-width:768px) {
    .nm-dock {
        bottom:8px;
        padding:5px 8px;
        gap:1px;
        border-radius:18px;
    }
    .nm-dock__item {
        width:40px; height:40px;
        border-radius:11px;
    }
    .nm-dock__icon { width:18px; height:18px; }
    .nm-dock__icon svg { width:18px; height:18px; }
    .nm-dock__label { display:none; }
    .nm-dock__sep { height:16px; margin:0 2px; }
    /* Disable tooltip on mobile (touch devices) */
    .nm-dock__item::after { display:none; }

    /* QuickSwap: move above the dock instead of header */
    .nm-quickswap {
        bottom:62px;
        right:50%;
        transform:translateX(50%);
        padding:3px;
    }
    .nm-quickswap__opt {
        padding:5px 10px;
        font-size:.7rem;
        gap:4px;
    }
    .nm-quickswap__icon { font-size:.85rem; }
}

@media(max-width:480px) {
    .nm-dock {
        bottom:6px;
        padding:4px 6px;
        gap:0;
    }
    .nm-dock__item {
        width:36px; height:36px;
        border-radius:10px;
    }
    .nm-dock__icon { width:16px; height:16px; }
    .nm-dock__icon svg { width:16px; height:16px; }
    .nm-dock__sep { height:14px; }

    .nm-quickswap {
        bottom:52px;
    }
    .nm-quickswap__label { display:none; }
    .nm-quickswap__opt { padding:4px 7px; }
    .nm-quickswap__icon { font-size:.78rem; }
}

/* Extra bottom padding so content isn't hidden behind dock + quickswap */
.nm-footer { padding-bottom:6rem; }

/* On mobile, add even more bottom space for the quickswap above dock */
@media(max-width:768px) {
    .nm-footer { padding-bottom:7rem; }
}

/* ═══════════════════════════════════════════════════════════
   WORKOUT TEMPLATE
   ═══════════════════════════════════════════════════════════ */
.nm-workout-overview {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
    position:relative; overflow:hidden; margin-top:1.5rem;
}
.nm-workout-overview::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--workout-accent,#00d4ff),transparent); opacity:.6;
}
.nm-workout-overview__header {
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.nm-workout-overview__icon { font-size:1.5rem; }
.nm-workout-overview__type {
    font-family:var(--font-display); font-size:.7rem; font-weight:800;
    letter-spacing:.12em; color:var(--workout-accent,#00d4ff);
}
.nm-workout-overview__time { margin-left:auto; font-size:.85rem; font-weight:600; color:var(--text-2); }

.nm-workout-stats {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem;
}
.nm-workout-stat {
    text-align:center; padding:1rem .5rem;
    background:var(--bg-soft); border-radius:var(--radius-sm);
    border:1px solid var(--border);
}
.nm-workout-stat__value { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text-1); }
.nm-workout-stat__label { font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; }

.nm-workout-section-title {
    font-family:var(--font-display); font-size:1.3rem; font-weight:800;
    margin-bottom:1.5rem; color:var(--text-1);
}

/* Exercise cards */
.nm-exercise-list { display:flex; flex-direction:column; gap:1rem; }
.nm-exercise-card {
    display:flex; gap:1rem; padding:1.25rem; background:var(--bg-card);
    border:1px solid var(--border); border-radius:var(--radius-md);
    transition:all .3s ease; position:relative; overflow:hidden;
}
.nm-exercise-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--workout-accent,#00d4ff); opacity:.5;
}
.nm-exercise-card:hover { border-color:var(--workout-accent,#00d4ff); transform:translateX(4px); }
.nm-exercise-card__num {
    flex-shrink:0; width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg,var(--workout-accent,#00d4ff),rgba(0,212,255,.3));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:.85rem; color:#fff;
}
.nm-exercise-card__body { flex:1; min-width:0; }
.nm-exercise-card__header { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; }
.nm-exercise-card__name { font-weight:700; font-size:1.05rem; margin:0; }
.nm-exercise-card__muscle {
    font-size:.7rem; padding:.2rem .6rem; border-radius:999px;
    background:rgba(0,212,255,.08); color:var(--workout-accent,#00d4ff);
    border:1px solid rgba(0,212,255,.15); font-weight:600;
}

.nm-exercise-card__metrics { display:flex; gap:.75rem; flex-wrap:wrap; }
.nm-exercise-metric {
    display:flex; flex-direction:column; align-items:center;
    padding:.5rem .85rem; background:var(--bg-soft); border-radius:var(--radius-sm);
    border:1px solid var(--border); min-width:55px;
}
.nm-exercise-metric__val { font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--text-1); }
.nm-exercise-metric__label { font-size:.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }

.nm-exercise-card__notes { font-size:.82rem; color:var(--text-2); margin:.75rem 0 0; font-style:italic; }

/* ═══════════════════════════════════════════════════════════
   REVIEW TEMPLATE
   ═══════════════════════════════════════════════════════════ */
.nm-review-hero {
    display:flex; justify-content:space-between; align-items:center; gap:2rem;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
    margin-top:1.5rem; position:relative; overflow:hidden; flex-wrap:wrap;
}
.nm-review-hero::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#f59e0b,transparent); opacity:.6;
}
.nm-review-hero__info { flex:1; min-width:200px; }
.nm-review-hero__brand {
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color:var(--text-3); margin-bottom:.25rem; display:block;
}
.nm-review-hero__product {
    font-family:var(--font-display); font-size:1.4rem; font-weight:800;
    margin:0 0 .5rem; color:var(--text-1);
}
.nm-review-hero__cat, .nm-review-hero__price {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.82rem; color:var(--text-2); margin-right:1rem;
}

.nm-review-hero__rating { text-align:center; flex-shrink:0; }
.nm-review-score {
    width:80px; height:80px; border-radius:50%;
    background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,.2));
    display:flex; align-items:baseline; justify-content:center;
    margin:0 auto .5rem; padding-top:1.2rem;
}
.nm-review-score__num { font-family:var(--font-display); font-weight:900; font-size:1.6rem; color:#fff; }
.nm-review-score__max { font-size:.7rem; color:rgba(255,255,255,.6); font-weight:600; }

.nm-review-stars { display:flex; justify-content:center; gap:.15rem; margin-bottom:.25rem; }
.nm-star { font-size:1.1rem; }
.nm-star--full { color:#f59e0b; }
.nm-star--half { color:#f59e0b; opacity:.6; }
.nm-star--empty { color:var(--text-3); opacity:.3; }

.nm-review-label { font-size:.75rem; font-weight:700; color:#f59e0b; text-transform:uppercase; letter-spacing:.05em; }

/* Specs */
.nm-review-specs {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:1.25rem 1.5rem; margin-top:1rem;
}
.nm-review-specs__title { font-size:.9rem; font-weight:700; margin:0 0 1rem; color:var(--text-1); }
.nm-review-specs__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.5rem; }
.nm-review-spec {
    display:flex; justify-content:space-between; padding:.5rem .75rem;
    background:var(--bg-soft); border-radius:var(--radius-sm);
    border:1px solid var(--border); font-size:.82rem;
}
.nm-review-spec__key { color:var(--text-3); font-weight:600; }
.nm-review-spec__val { color:var(--text-1); font-weight:700; }

/* Pros/Cons */
.nm-review-proscons { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:640px) { .nm-review-proscons { grid-template-columns:1fr; } }
.nm-review-col {
    padding:1.25rem; border-radius:var(--radius-md); border:1px solid var(--border);
}
.nm-review-col--pros { background:rgba(34,197,94,.04); border-color:rgba(34,197,94,.15); }
.nm-review-col--cons { background:rgba(239,68,68,.04); border-color:rgba(239,68,68,.15); }
.nm-review-col__title { font-size:1rem; font-weight:700; margin:0 0 .75rem; }
.nm-review-col__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.nm-review-col__list li {
    padding:.5rem .75rem; border-radius:var(--radius-sm);
    background:var(--bg-card); font-size:.85rem; color:var(--text-2);
}
.nm-review-col--pros .nm-review-col__list li::before { content:'✓ '; color:#22c55e; font-weight:700; }
.nm-review-col--cons .nm-review-col__list li::before { content:'✗ '; color:#ef4444; font-weight:700; }

/* Verdict */
.nm-review-verdict {
    background:var(--bg-card); border:2px solid rgba(245,158,11,.2);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem; margin-top:1rem;
}
.nm-review-verdict__header { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.nm-review-verdict__icon { font-size:1.4rem; }
.nm-review-verdict__title { font-family:var(--font-display); font-size:1.1rem; font-weight:800; margin:0; }
.nm-review-verdict__text { font-size:.92rem; color:var(--text-2); line-height:1.6; margin-bottom:1rem; }
.nm-review-verdict__score { display:flex; align-items:center; gap:1rem; }
.nm-review-verdict__num { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:#f59e0b; }

/* ═══════════════════════════════════════════════════════════
   MEAL PLAN TEMPLATE
   ═══════════════════════════════════════════════════════════ */
.nm-mealplan-overview {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
    position:relative; overflow:hidden; margin-top:1.5rem;
}
.nm-mealplan-overview::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--mealplan-accent,#c2694f),transparent); opacity:.6;
}
.nm-mealplan-overview__header {
    display:flex; align-items:center; gap:.75rem;
    margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.nm-mealplan-overview__icon { font-size:1.5rem; }
.nm-mealplan-overview__type {
    font-family:var(--font-display); font-size:.7rem; font-weight:800;
    letter-spacing:.12em; color:var(--mealplan-accent,#c2694f);
}

.nm-mealplan-stats {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem;
}
.nm-mealplan-stat {
    text-align:center; padding:.85rem .5rem;
    background:var(--bg-soft); border-radius:var(--radius-sm); border:1px solid var(--border);
}
.nm-mealplan-stat__value { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--text-1); }
.nm-mealplan-stat__label { font-size:.65rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem; }

.nm-mealplan-section-title {
    font-family:var(--font-display); font-size:1.3rem; font-weight:800;
    margin-bottom:1.25rem; color:var(--text-1);
}

/* Day tabs */
.nm-mealplan-tabs {
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem;
    margin-bottom:1.25rem; scrollbar-width:none;
}
.nm-mealplan-tabs::-webkit-scrollbar { display:none; }
.nm-mealplan-tab {
    flex-shrink:0; padding:.5rem 1rem; border-radius:var(--radius-sm);
    background:var(--bg-card); border:1px solid var(--border);
    font-size:.8rem; font-weight:600; color:var(--text-2);
    cursor:pointer; transition:all .2s; white-space:nowrap;
}
.nm-mealplan-tab:hover { border-color:var(--mealplan-accent,#c2694f); color:var(--text-1); }
.nm-mealplan-tab.active {
    background:var(--mealplan-accent,#c2694f); color:#fff;
    border-color:var(--mealplan-accent,#c2694f);
}

/* Day panels */
.nm-mealplan-day { display:none; }
.nm-mealplan-day.active { display:block; }
.nm-mealplan-day__title { font-size:1.1rem; font-weight:700; margin:0 0 1rem; color:var(--text-1); }

.nm-mealplan-meals { display:flex; flex-direction:column; gap:.75rem; }
.nm-meal-card {
    display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-md); transition:all .3s;
}
.nm-meal-card:hover { border-color:var(--mealplan-accent,#c2694f); transform:translateX(4px); }
.nm-meal-card__icon { font-size:1.4rem; flex-shrink:0; }
.nm-meal-card__body { flex:1; min-width:0; }
.nm-meal-card__type {
    display:block; font-size:.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-3); margin-bottom:.15rem;
}
.nm-meal-card__name { font-weight:600; font-size:.92rem; color:var(--text-1); }
.nm-meal-card__name--link { color:var(--mealplan-accent,#c2694f); text-decoration:none; }
.nm-meal-card__name--link:hover { text-decoration:underline; }
.nm-meal-card__cals {
    flex-shrink:0; font-size:.78rem; font-weight:700;
    color:var(--text-2); background:var(--bg-soft);
    padding:.25rem .6rem; border-radius:999px; border:1px solid var(--border);
}

.nm-mealplan-day__total {
    display:flex; justify-content:space-between; padding:.75rem 1.25rem;
    margin-top:.75rem; border-top:1px solid var(--border);
    font-size:.85rem; color:var(--text-2);
}
.nm-mealplan-day__total strong { color:var(--mealplan-accent,#c2694f); }

/* Shopping list */
.nm-mealplan-shopping {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:1.25rem 1.5rem;
}
.nm-mealplan-shopping__title { font-size:1rem; font-weight:700; margin:0 0 1rem; }
.nm-mealplan-shopping__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.nm-mealplan-shopping__item {
    display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem;
    border-radius:var(--radius-sm); font-size:.85rem; color:var(--text-2);
    transition:background .2s;
}
.nm-mealplan-shopping__item:hover { background:var(--bg-soft); }
.nm-mealplan-check { accent-color:var(--mealplan-accent,#c2694f); width:16px; height:16px; cursor:pointer; }
.nm-mealplan-shopping__amount { margin-left:auto; color:var(--text-3); font-size:.78rem; font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   VISUAL GAUGES — Biometrics & Recovery Status Bars
   ═══════════════════════════════════════════════════════════ */
.nm-gauges-panel {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
}
.nm-gauges-panel__title { font-size:1rem; font-weight:700; margin:0 0 1.25rem; }
.nm-gauges-grid { display:flex; flex-direction:column; gap:1rem; }

.nm-gauge-bar { }
.nm-gauge-bar__header { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.nm-gauge-bar__icon { font-size:1rem; }
.nm-gauge-bar__label { font-size:.82rem; font-weight:600; color:var(--text-2); }
.nm-gauge-bar__value { margin-left:auto; font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--text-1); }

.nm-gauge-bar__track {
    height:8px; background:var(--bg-soft); border-radius:999px;
    overflow:hidden; border:1px solid var(--border);
}
.nm-gauge-bar__fill {
    height:100%; border-radius:999px; width:0%;
    transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.gauge--good .nm-gauge-bar__fill { background:linear-gradient(90deg,#22c55e,#4ade80); }
.gauge--warn .nm-gauge-bar__fill { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.gauge--bad  .nm-gauge-bar__fill { background:linear-gradient(90deg,#ef4444,#f87171); }

/* Small inline gauges (workout difficulty) */
.nm-gauge {
    height:4px; background:var(--bg-soft); border-radius:999px;
    overflow:hidden; margin-top:.5rem; border:1px solid var(--border);
}
.nm-gauge__fill {
    height:100%; border-radius:999px; width:0%;
    background:linear-gradient(90deg,var(--workout-accent,#00d4ff),rgba(0,212,255,.4));
    transition:width 1s ease;
}
.nm-gauge--large { height:10px; flex:1; }
.nm-gauge--large .nm-gauge__fill { background:linear-gradient(90deg,#f59e0b,#fbbf24); }

/* ═══════════════════════════════════════════════════════════
   CROSS-PILLAR BRIDGING — Related Content Across Pillars
   ═══════════════════════════════════════════════════════════ */
.nm-related--bridge { }
.nm-related__label {
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color:var(--text-3); display:block; margin-bottom:.25rem;
}
.nm-grid--bridge { position:relative; }
.nm-bridge-card { position:relative; }
.nm-bridge-pill {
    position:absolute; top:.6rem; right:.6rem; z-index:2;
    padding:.2rem .6rem; border-radius:999px;
    font-size:.65rem; font-weight:700; color:#fff;
    background:var(--bridge-color,var(--accent));
    box-shadow:0 2px 8px rgba(0,0,0,.3);
    pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   PDF DOWNLOAD BAR
   ═══════════════════════════════════════════════════════════ */
.nm-pdf-bar {
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border);
}
.nm-pdf-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    font-weight:600; font-size:.85rem;
}

/* ═══════════════════════════════════════════════════════════
   PRINT / PDF STYLES — Mobile-optimized
   ═══════════════════════════════════════════════════════════ */
@media print {
    body { background:#fff !important; color:#111 !important; font-size:11pt; }
    .nm-header, .nm-dock, .nm-quickswap, .nm-overlay,
    .nm-pdf-bar, .nm-article-share, .nm-related, .nm-related--bridge,
    .nm-footer, .nm-breadcrumb, .nm-hero__scroll,
    [data-barba-prevent], .nm-bridge-pill { display:none !important; }

    .nm-narrow, .nm-container { max-width:100% !important; padding:0 1rem !important; }
    .nm-article-header { padding-top:0 !important; }
    .nm-recipe-hero, .nm-recipe-hero__img { max-height:250px; border-radius:0; }

    .nm-exercise-card, .nm-meal-card, .nm-review-hero,
    .nm-workout-overview, .nm-mealplan-overview, .nm-gauges-panel,
    .nm-review-specs, .nm-review-proscons, .nm-review-verdict,
    .nm-guide-info, .nm-guide-info__card {
        break-inside:avoid; border-color:#ddd !important;
        background:#fafafa !important; color:#111 !important;
    }

    .nm-gauge-bar__fill, .nm-gauge__fill, .nm-dash-gauge__fill { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    .nm-dash-panel, .nm-dash-why, .nm-dash-actions { break-inside:avoid; border-color:#ddd !important; }
    .nm-dash-gauge__status { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    .nm-exercise-card__num { background:#00d4ff !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
    .nm-review-score { background:#f59e0b !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }

    [data-reveal],[data-stagger]>* { opacity:1 !important; transform:none !important; filter:none !important; }
    * { animation:none !important; transition:none !important; }

    @page { size:A5; margin:10mm; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD TEMPLATE — Biometrics & Sleep Data View
   ═══════════════════════════════════════════════════════════ */
.nm-dash-type-badge {
    display:inline-flex; align-items:center; gap:.35rem;
    background:linear-gradient(135deg,var(--dash-accent),rgba(167,139,250,.2));
    color:var(--dash-accent); font-size:.7rem; font-weight:700;
    padding:.25rem .7rem; border-radius:999px; text-transform:uppercase;
    letter-spacing:.04em;
}

/* Info chips bar */
.nm-dash-info-bar {
    display:flex; flex-wrap:wrap; gap:.5rem; padding:1rem 0;
}
.nm-dash-info-chip {
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:999px; padding:.4rem .85rem; font-size:.8rem;
}
.nm-dash-info-chip__icon { font-size:.9rem; }
.nm-dash-info-chip__label { color:var(--text-2); font-weight:500; }
.nm-dash-info-chip__value { font-weight:700; color:var(--text-1); }

/* Main Dashboard Panel */
.nm-dash-panel {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.75rem 2rem;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
}
.nm-dash-panel__header {
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:1.5rem; padding-bottom:1rem;
    border-bottom:1px solid var(--border);
}
.nm-dash-panel__title {
    font-size:1.15rem; font-weight:800; margin:0;
    font-family:var(--font-display);
}
.nm-dash-panel__subtitle {
    font-size:.78rem; color:var(--text-2); font-weight:500;
}

/* Dashboard Gauges Grid */
.nm-dash-gauges {
    display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
@media(max-width:640px) {
    .nm-dash-gauges { grid-template-columns:1fr; }
}

.nm-dash-gauge {
    background:var(--bg-soft); border:1px solid var(--border);
    border-radius:var(--radius); padding:1rem 1.15rem;
    transition:transform .2s ease, box-shadow .2s ease;
}
.nm-dash-gauge:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.nm-dash-gauge__top {
    display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;
}
.nm-dash-gauge__icon { font-size:1.1rem; }
.nm-dash-gauge__name {
    font-size:.82rem; font-weight:600; color:var(--text-2); flex:1;
}
.nm-dash-gauge__status {
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; padding:.15rem .5rem;
    border-radius:999px;
}
.dash-gauge--good .nm-dash-gauge__status { background:rgba(34,197,94,.15); color:#16a34a; }
.dash-gauge--warn .nm-dash-gauge__status { background:rgba(245,158,11,.15); color:#d97706; }
.dash-gauge--bad  .nm-dash-gauge__status { background:rgba(239,68,68,.15); color:#dc2626; }

.nm-dash-gauge__value-row {
    display:flex; align-items:baseline; gap:.3rem; margin-bottom:.6rem;
}
.nm-dash-gauge__number {
    font-family:var(--font-display); font-weight:900;
    font-size:1.6rem; line-height:1; color:var(--text-1);
}
.nm-dash-gauge__unit {
    font-size:.75rem; color:var(--text-2); font-weight:600;
}
.nm-dash-gauge__range {
    margin-left:auto; font-size:.68rem; color:var(--text-3);
    font-weight:500;
}

.nm-dash-gauge__track {
    height:6px; background:var(--border); border-radius:999px;
    overflow:hidden;
}
.nm-dash-gauge__fill {
    height:100%; border-radius:999px; width:0%;
    transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.dash-gauge--good .nm-dash-gauge__fill { background:linear-gradient(90deg,#22c55e,#4ade80); }
.dash-gauge--warn .nm-dash-gauge__fill { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.dash-gauge--bad  .nm-dash-gauge__fill { background:linear-gradient(90deg,#ef4444,#f87171); }

/* "The Why" Box */
.nm-dash-why {
    display:flex; gap:1.25rem; align-items:flex-start;
    background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(129,140,248,.05));
    border:1px solid rgba(167,139,250,.25);
    border-left:4px solid var(--dash-accent);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
}
.nm-dash-why__icon {
    font-size:1.8rem; flex-shrink:0; margin-top:.1rem;
}
.nm-dash-why__title {
    font-size:1rem; font-weight:800; margin:0 0 .6rem;
    font-family:var(--font-display); color:var(--dash-accent);
}
.nm-dash-why__text {
    font-size:.88rem; line-height:1.7; color:var(--text-2);
}
.nm-dash-why__text p { margin:0 0 .5rem; }
.nm-dash-why__text p:last-child { margin-bottom:0; }

/* Action Protocol Checklist */
.nm-dash-actions {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.nm-dash-actions__title {
    font-size:1.05rem; font-weight:800; margin:0 0 1.25rem;
    font-family:var(--font-display);
}
.nm-dash-actions__list {
    list-style:none; padding:0; margin:0; display:flex;
    flex-direction:column; gap:.5rem;
}
.nm-dash-actions__item { margin:0; }

/* Custom checkbox */
.nm-dash-check {
    display:flex; align-items:flex-start; gap:.75rem;
    cursor:pointer; padding:.6rem .85rem;
    border-radius:var(--radius); border:1px solid var(--border);
    background:var(--bg-soft);
    transition:background .2s, border-color .2s, opacity .2s;
}
.nm-dash-check:hover { border-color:var(--dash-accent); }
.nm-dash-check__input { display:none; }
.nm-dash-check__box {
    width:22px; height:22px; border-radius:6px;
    border:2px solid var(--border); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:all .25s ease; margin-top:.05rem;
}
.nm-dash-check__box::after {
    content:'✓'; font-size:.8rem; font-weight:700;
    color:white; opacity:0; transition:opacity .2s;
}
.nm-dash-check__input:checked ~ .nm-dash-check__box {
    background:var(--dash-accent); border-color:var(--dash-accent);
}
.nm-dash-check__input:checked ~ .nm-dash-check__box::after { opacity:1; }
.nm-dash-check__input:checked ~ .nm-dash-check__text {
    text-decoration:line-through; opacity:.5;
}
.nm-dash-check__text {
    font-size:.88rem; line-height:1.5; color:var(--text-1);
    transition:opacity .3s, text-decoration .3s;
}

/* Action progress bar */
.nm-dash-actions__progress {
    margin-top:1rem; padding-top:.75rem;
    border-top:1px solid var(--border);
    display:flex; align-items:center; gap:.75rem;
}
.nm-dash-actions__progress-bar {
    flex:1; height:6px; background:var(--bg-soft);
    border-radius:999px; overflow:hidden;
}
.nm-dash-actions__progress-fill {
    height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg,var(--dash-accent),#818cf8);
    transition:width .4s ease;
}
.nm-dash-actions__progress-text {
    font-size:.75rem; color:var(--text-2); font-weight:600;
    white-space:nowrap;
}

/* Deep dive heading */
.nm-dash-deepdive-title {
    font-size:1.15rem; font-weight:800; margin:0 0 1.25rem;
    padding-bottom:.75rem; border-bottom:2px solid var(--dash-accent);
    font-family:var(--font-display);
}

/* ═══════════════════════════════════════════════════════════
   GSAP-READY: visibility helpers
   Elements start invisible, GSAP reveals them
   ═══════════════════════════════════════════════════════════ */
[data-reveal],[data-stagger]>* {
    opacity:0;
    will-change:transform,opacity,filter;
}

/* ═══════════════════════════════════════════════════════
   VITALITY BLUEPRINT — Architectural Vision
   ═══════════════════════════════════════════════════════ */
.nm-blueprint {
    position: relative;
    padding: 12rem 0;
    background: var(--bg);
    overflow: hidden;
}
.nm-blueprint__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.nm-blueprint__bg .nm-orb--1 { width: 400px; height: 400px; top: 10%; left: -5%; opacity: 0.15; }
.nm-blueprint__bg .nm-orb--2 { width: 350px; height: 350px; bottom: 5%; right: -5%; opacity: 0.15; background: var(--cyan); }

.nm-blueprint__grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    z-index: 2;
}
[data-theme="light"] .nm-blueprint__grid-bg {
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
}
.nm-blueprint__header {
    text-align: left;
    max-width: 700px;
    margin-bottom: 8rem;
    position: relative;
    z-index: 10;
}
[data-theme="light"] .nm-blueprint__header .nm-articles__label {
    color: var(--accent);
}
.nm-blueprint__title {
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 1;
    margin-top: 1rem;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #fff;
    font-family: var(--font-logo); /* Using same DNA as header logo */
}
[data-theme="light"] .nm-blueprint__title {
    color: var(--text);
}
.nm-blueprint__subtitle {
    font-size: 1.15rem;
    color: var(--text-2);
    margin-top: 1.5rem;
    line-height: 1.6;
    max-width: 500px;
    font-weight: 500;
}
[data-theme="light"] .nm-blueprint__subtitle {
    color: var(--text-2);
}

.nm-blueprint__canvas {
    position: relative;
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Central Core */
.nm-blueprint__core {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.nm-blueprint__core-ring {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
}
[data-theme="light"] .nm-blueprint__core-ring {
    border-color: rgba(0,0,0,0.06);
}
.nm-blueprint__core-ring--1 { width: 100%; height: 100%; animation: spin 20s linear infinite; border-style: dashed; }
.nm-blueprint__core-ring--2 { width: 140%; height: 140%; animation: spin 30s linear infinite reverse; border-color: rgba(255,255,255,0.06); }
[data-theme="light"] .nm-blueprint__core-ring--2 { border-color: rgba(0,0,0,0.04); }
.nm-blueprint__core-ring--3 { width: 180%; height: 180%; border-color: rgba(255,255,255,0.04); }
[data-theme="light"] .nm-blueprint__core-ring--3 { border-color: rgba(0,0,0,0.02); }

.nm-blueprint__core-content {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(255,255,255,0.3);
    transition: all 0.4s ease;
}
[data-theme="light"] .nm-blueprint__core-content {
    background: #000;
    box-shadow: 0 0 50px rgba(0,0,0,0.15);
}
.nm-blueprint__core-text {
    color: #000;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
}
[data-theme="light"] .nm-blueprint__core-text {
    color: #fff;
}

/* Layers */
.nm-blueprint__layer {
    position: absolute;
    width: 320px;
    z-index: 25;
    cursor: pointer;
}
.nm-blueprint__layer-info {
    background: var(--bg-card); /* Pure DNA card background */
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: var(--radius);
    transition: all 0.5s var(--ease);
}
[data-theme="light"] .nm-blueprint__layer-info {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.05);
}
.nm-blueprint__layer:hover .nm-blueprint__layer-info {
    border-color: var(--layer-color);
    background: rgba(var(--layer-rgb), 0.1);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
[data-theme="light"] .nm-blueprint__layer:hover .nm-blueprint__layer-info {
    background: #ffffff;
    border-color: var(--layer-color);
    box-shadow: 0 15px 40px rgba(var(--layer-rgb), 0.1);
}
.nm-blueprint__layer-num {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--layer-color);
    display: block;
    margin-bottom: 0.75rem;
    letter-spacing: 0.2em;
}
.nm-blueprint__layer-title {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
[data-theme="light"] .nm-blueprint__layer-title {
    color: #000;
}
.nm-blueprint__layer-desc {
    font-size: 1rem;
    color: var(--text-2);
    line-height: 1.6;
}
[data-theme="light"] .nm-blueprint__layer-desc {
    color: #4a4a4a;
}

.nm-blueprint__layer--nutrition { 
    top: 50px; left: 0; 
    --layer-color: var(--terracotta); 
    --layer-rgb: var(--terra-rgb); 
}
.nm-blueprint__layer--motion { 
    top: 50px; right: 0; 
    --layer-color: var(--cyan); 
    --layer-rgb: var(--cyan-rgb); 
}
.nm-blueprint__layer--recovery { 
    bottom: 50px; left: 50%; transform: translateX(-50%); 
    --layer-color: var(--violet); 
    --layer-rgb: var(--violet-rgb); 
}

/* Technical Lines */
.nm-blueprint__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}
.nm-blueprint__svg-path {
    transition: opacity 0.5s ease, stroke-width 0.5s ease;
    opacity: 0.15;
}

.nm-blueprint__footer {
    display: flex;
    justify-content: flex-start;
    gap: 6rem;
    margin-top: 8rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4rem;
    position: relative;
    z-index: 10;
}
.nm-blueprint__stat-val {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
[data-theme="light"] .nm-blueprint__stat-val {
    color: var(--text);
}
.nm-blueprint__stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-2);
    margin-top: 0.5rem;
    font-weight: 600;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .nm-blueprint__canvas { height: auto; flex-direction: column; gap: 2rem; padding: 4rem 0; }
    .nm-blueprint__layer { position: static; width: 100%; transform: none !important; }
    .nm-blueprint__core { margin: 2rem auto; }
    .nm-blueprint__svg { display: none; }
    .nm-blueprint__footer { gap: 2rem; flex-wrap: wrap; }
}