/* ============================================================
   MINIMAN — REVAMP LAYER (loads after styles.css)
   New type, new header, cards, drawers, cursor, page transition.
   ============================================================ */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/sg-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/sg-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/sg-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/kufi-ar-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Kufi Arabic"; src: url("../fonts/kufi-ar-700.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/mono-latin-500.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #09090b; --ink-2: #111115; --surface: #18181d;
  --bone: #efece4; --paper: #efece4; --paper-2: #e3dfd4;
  --text: #121216; --text-muted: #5d5b57;
  --accent: #e7cd84; --accent-ink: #0b0b0d; --glow: #e7cd84;
  --font-display: "Anton", "Noto Kufi Arabic", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-lg: 22px;
  --nav-h: 72px;
}
html { background: var(--ink); }
body { background: var(--ink); color: var(--bone); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .98; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .16em; }
.eyebrow::before { width: 18px; height: 1px; }
.btn { font-family: var(--font-body); font-weight: 700; letter-spacing: .01em; }
::selection { background: var(--glow); color: #000; }

/* ---------- scroll progress + grain ---------- */
.mm-progress { position: fixed; z-index: 300; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--glow); pointer-events: none; }

/* ---------- header ---------- */
.site-header { height: var(--nav-h); transition: background .4s, transform .5s var(--ease-out); }
.site-header--scrolled { background: rgba(9, 9, 11, .9); -webkit-backdrop-filter: none; backdrop-filter: none; height: 64px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-header.is-hidden { transform: translateY(-110%); }
.brand__logo { height: 46px; margin: 0; }
@media (min-width: 900px) {
  .nav__menu { position: relative; inset: auto; gap: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 5px; }
  .nav__menu a { position: relative; z-index: 1; padding: .55rem 1.15rem; font-size: .9rem; font-weight: 500; opacity: 1; border-radius: 999px; transition: color .3s; }
  .nav__menu a::after { display: none; }
  .nav__menu a[aria-current="page"], .nav__menu a:hover { color: #0b0b0d; }
  .nav__ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 60px; border-radius: 999px; background: var(--glow); transition: transform .5s var(--ease-out), width .5s var(--ease-out), background .4s; pointer-events: none; }
}
.nav__wish, .nav__lang, .nav__toggle { border-radius: 999px; }
.nav__toggle { width: 44px; height: 44px; }
.nav__actions .btn--solid { padding: .8rem 1.25rem; font-size: .85rem; }

/* ---------- drawers ---------- */
.wish-drawer__panel { background: var(--ink-2); color: var(--bone); border-left: 1px solid rgba(255, 255, 255, .08); }
.wish-drawer__head h2 { font-size: 1.6rem; }

/* ---------- product cards (used across shop/category/brand/related) ---------- */
.product-card { background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-lg); overflow: hidden; color: var(--bone); transition: transform .5s var(--ease-out), border-color .3s, box-shadow .5s; }
.product-card:hover { transform: translateY(-8px); border-color: var(--glow); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--glow) 55%, transparent); }
.product-card__media { background: radial-gradient(70% 70% at 50% 45%, var(--bg, rgba(231, 205, 132, .25)), transparent 72%), #101014; perspective: 700px; }
.product-card__media img, .product-card__media svg { transition: transform .5s var(--ease-out); transform: translateZ(0) rotate(var(--rz, 0deg)) scale(var(--sc, 1)); will-change: transform; }
.product-card:hover .product-card__media img { --sc: 1.08; --rz: -4deg; }
.product-card__body h3, .product-card__body h3 a { color: var(--bone); font-size: 1.25rem; }
.product-card__body .brand { color: rgba(255, 255, 255, .5); font-family: var(--font-mono); }
.product-card__meta .price { font-family: var(--font-mono); font-weight: 500; color: var(--bone); }
.product-card__meta .price s { color: rgba(255, 255, 255, .4); margin-left: .5rem; }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(3rem, 6vw, 5rem); background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-grid h4 { font-family: var(--font-mono); font-weight: 500; }
.mm-mega { display: flex; justify-content: center; gap: 0; margin: 2rem 0 -1.4rem; font-family: var(--font-display); font-size: clamp(4.5rem, 22vw, 20rem); line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); user-select: none; letter-spacing: -.01em; }
.mm-mega span { display: inline-block; transition: transform .35s var(--ease-out), color .35s, -webkit-text-stroke-color .35s; will-change: transform; }
.mm-mega span.is-hot { color: var(--glow); -webkit-text-stroke-color: var(--glow); }
html[dir="rtl"] .mm-mega { direction: ltr; }

/* ---------- cursor ---------- */
.mm-cur { position: fixed; z-index: 9990; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--glow); pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .3s; }
.mm-cur.on { opacity: 1; }
.mm-cur.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
.mm-cur.txt { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--glow); mix-blend-mode: normal; display: grid; place-items: center; }
.mm-cur.txt::after { content: attr(data-t); font: 700 .72rem/1 var(--font-mono); letter-spacing: .12em; color: #0b0b0d; text-transform: uppercase; }
@media (hover: none), (pointer: coarse) { .mm-cur { display: none; } }

/* ---------- page transition ---------- */
html.mm-cover body::after { content: ""; position: fixed; inset: 0; background: var(--ink); z-index: 9998; }
.mm-wipe { position: fixed; inset: 0; z-index: 9999; display: flex; pointer-events: none; }
.mm-wipe i { flex: 1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease-out); position: relative; }
.mm-wipe i:nth-child(odd) { background: #0f0f13; }
.mm-wipe i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--glow); opacity: .9; }
.mm-wipe b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); font: 400 clamp(3rem, 12vw, 10rem)/1 var(--font-display); color: var(--bone); letter-spacing: .02em; opacity: 0; transition: opacity .3s .25s, transform .6s var(--ease-out) .2s; text-transform: uppercase; white-space: nowrap; }
.mm-wipe.in { pointer-events: all; }
.mm-wipe.in i { transform: scaleY(1); }
.mm-wipe.in b { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mm-wipe.out i { transform-origin: 50% 0; transform: scaleY(0); }
.mm-wipe.out b { opacity: 0; }

/* ---------- split text ---------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .c { display: inline-block; transform: translateY(105%) rotate(6deg); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 22ms); }
[data-split].is-visible .c, [data-split].is-in .c { transform: none; }
html[dir="rtl"] [data-split] .c { transition-delay: 0s; }

/* ---------- magnetic buttons ---------- */
[data-mag] { will-change: transform; transition: transform .25s var(--ease-out); }

/* ---------- inner pages (about / contact / product / cart / auth) ---------- */
.page-hero { position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(3.2rem, 11vw, 9rem); }
.section[data-theme="dark"], .section--dark { background: var(--ink); }
main > section[data-theme="light"] { color: var(--text); }
.card, .contact-card, .value { border-radius: var(--r-lg); }
input, select, textarea { font-family: var(--font-body); }
.product-top { background: var(--ink); color: var(--bone); padding-top: calc(var(--nav-h) + 1rem); }

/* marquee band (shared) */
.mm-band { overflow: hidden; border-block: 1px solid rgba(255, 255, 255, .1); padding: 1.1rem 0; background: var(--ink); }
.mm-band__track { display: flex; width: max-content; gap: 0; will-change: transform; }
.mm-band__track span { font: 400 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); text-transform: uppercase; padding: 0 1.4rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 2.8rem; color: var(--bone); }
.mm-band__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5); }
.mm-band__track span::after { content: "✦"; font-size: .45em; color: var(--glow); }
html[dir="rtl"] .mm-band__track span { font-family: "Noto Kufi Arabic", var(--font-display); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .mm-wipe, .mm-cur { display: none; }
  [data-split] .c { transform: none; }
}

/* ============================================================
   Cinematic AF1 hero (home page)
   ============================================================ */
.mm-cine { position: relative; height: 640vh; background: var(--ink); }
.mm-cine__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; transition: opacity .2s linear; }
.mm-cine__bg { position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 50% 38%, rgba(231,205,132,.14), transparent 65%),
  radial-gradient(120% 80% at 50% 110%, rgba(231,205,132,.06), transparent 60%), var(--ink); }
.mm-cine__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out); }
.mm-cine__stage.is-ready .mm-cine__canvas { opacity: 1; }
.mm-cine__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,9,11,.55) 0%, transparent 22%, transparent 78%, rgba(9,9,11,.7) 100%); }

.mm-cine__intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 5vh) 6vw 12vh; pointer-events: none; }
.mm-cine__intro .eyebrow { justify-content: center; }
.mm-cine__intro h1 { font-size: clamp(3.2rem, 10vw, 8.4rem); color: var(--bone); margin: .3rem 0 0; }
.mm-cine__intro h1 .hl { color: var(--glow); }
.mm-cine__intro p { max-width: 36ch; margin: 1rem auto 0; color: rgba(239,236,228,.72); font-size: .98rem; }
.mm-cine__scroll { position: absolute; left: 50%; bottom: 3.4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(239,236,228,.6); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.mm-cine__scroll i { width: 1px; height: 34px; background: linear-gradient(rgba(239,236,228,0), var(--glow)); position: relative; overflow: hidden; }
.mm-cine__scroll i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--glow); animation: mm-scrollcue 1.8s ease-in-out infinite; }
@keyframes mm-scrollcue { to { top: 100%; } }

.mm-cine__label { position: absolute; left: 6vw; bottom: 12vh; max-width: 30ch; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mm-cine.has-label .mm-cine__label, .has-label .mm-cine__label { opacity: 1; transform: none; }
html[dir="rtl"] .mm-cine__label { left: auto; right: 6vw; }
.mm-cine__label .eyebrow { color: var(--glow); }
.mm-cine__label h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--bone); margin-bottom: .4rem; }
.mm-cine__label p { color: rgba(239,236,228,.7); font-size: .95rem; max-width: 30ch; margin: 0; }

.mm-tag { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; transition: opacity .2s linear; }
.mm-tag i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 4px rgba(231,205,132,.22); margin: 0 auto; }
.mm-tag span { display: block; margin-top: 6px; font: 500 .68rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); background: rgba(9,9,11,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 5px 10px; white-space: nowrap; transform: translateX(-50%); }

.mm-cine__swatches { position: absolute; right: 6vw; bottom: 12vh; display: flex; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html[dir="rtl"] .mm-cine__swatches { right: auto; left: 6vw; }
.mm-cine[data-chap="colorway"] .mm-cine__swatches, .is-colorway .mm-cine__swatches { opacity: 1; transform: none; }
.mm-cine__swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--sw); cursor: pointer; transition: transform .3s var(--ease-out), border-color .3s; }
.mm-cine__swatches button:hover, .mm-cine__swatches button.is-active { transform: scale(1.18); border-color: #fff; }

.mm-cine__dots { position: absolute; left: 50%; bottom: 9.4vh; transform: translateX(-50%); display: flex; gap: 7px; }
.mm-cine__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .3s, transform .3s; }
.mm-cine__dots i.on { background: var(--glow); transform: scale(1.6); }

@media (max-width: 760px) {
  .mm-cine { height: 560vh; }
  .mm-cine__label, .mm-cine__swatches { left: 5vw; right: 5vw; bottom: 8vh; max-width: none; }
  .mm-cine__swatches { justify-content: flex-end; bottom: 4vh; }
  .mm-tag span { font-size: .6rem; padding: 4px 8px; }
  .mm-cine__intro { padding: calc(var(--nav-h) + 2vh) 6vw 16vh; justify-content: flex-start; }
  .mm-cine__intro h1 { font-size: clamp(3rem, 15vw, 5.5rem); margin-top: .5rem; }
  .mm-cine__intro p { display: none; }
  .mm-cine__dots { bottom: 7.5vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-cine { height: auto; }
  .mm-cine__stage { position: relative; height: 90vh; }
}

/* ============================================================
   Inner-page energy pass (about / contact / etc.): giant title
   watermark, hover motion on plain cards, split-text on headings.
   ============================================================ */
.page-hero { padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 6vh, 4rem); background: var(--ink); }
.page-hero .container { position: relative; z-index: 1; }
.mm-giant {
  position: absolute; z-index: 0; top: 46%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: clamp(5rem, 16vw, 15rem); line-height: .8;
  letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(231, 205, 132, .16);
  pointer-events: none; user-select: none;
}
html[dir="rtl"] .mm-giant { direction: ltr; }
.page-hero .crumbs, .page-hero .eyebrow, .page-hero h1, .page-hero .lead { position: relative; }

.feature, .value-card {
  transition: transform .5s var(--ease-out), border-color .3s, box-shadow .5s;
  will-change: transform;
}
.feature:hover, .value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--glow) 45%, transparent);
}
.feature__icon { transition: transform .4s var(--ease-out), color .3s; }
.feature:hover .feature__icon { transform: scale(1.12) rotate(-4deg); color: var(--glow); }
.value-card { position: relative; overflow: hidden; }
.value-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: 0;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 60%);
  transition: opacity .4s;
}
.value-card:hover::before { opacity: 1; }
.value-card h3, .value-card p { position: relative; z-index: 1; }

.split__media { position: relative; }
.split__media .card-art { overflow: hidden; border-radius: var(--r-lg); }
.split__media .card-art img { transition: transform .6s var(--ease-out); }
.split__media:hover .card-art img { transform: scale(1.06) rotate(-1deg); }
.split__media .badge { transition: transform .4s var(--ease-out); }
.split__media:hover .badge { transform: translateY(-3px); }

.stat-row { position: relative; }
.stat-box { background: var(--surface); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
.stat-box b { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--glow); display: block; line-height: 1; }
.stat-box span { color: rgba(239, 236, 228, .68); font-size: .9rem; }
.stat-box { position: relative; padding-top: 1.2rem; }
.stat-box::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--glow); }

@media (max-width: 760px) {
  .mm-giant { font-size: clamp(3.5rem, 22vw, 7rem); }
}

/* generic gold accent span, usable in any heading (not just the old hero scope) */
h1 .accent, h2 .accent, h3 .accent { color: var(--glow); }

/* ============================================================
   Safety net: components that keep their ORIGINAL white/paper
   card background (forms, tables, receipts, admin panels …) need
   their own dark text colour again now that body{} is light for
   the new dark theme. Without this their text inherits the light
   body colour and goes near-invisible on a white card.
   ============================================================ */
.card-form, .info-card, .receipt, .table, .admin-card, .admin-nav,
.panel-card, .addr-card, .value-card, .filters, .order-status,
.qty, .coupon-box, .ship-opt, .form-stack, .auth-card {
  color: var(--text);
}
.card-form :is(.muted, .text-muted), .info-card :is(.muted, .text-muted),
.receipt :is(.muted, .text-muted), .table :is(.muted, .text-muted),
.admin-card :is(.muted, .text-muted), .panel-card :is(.muted, .text-muted),
.addr-card :is(.muted, .text-muted), .value-card :is(.muted, .text-muted) {
  color: var(--text-muted);
}

/* side nav drawer: was styled for a light panel, panel is dark now */
.side-menu a { color: var(--bone); border-bottom-color: rgba(255, 255, 255, .12); }
.side-menu a:hover, .side-menu a[aria-current="page"] { color: var(--glow); }

/* wishlist/cart mini-drawer body: also a light-theme leftover, panel is dark now */
.wish-drawer__body { color: var(--bone); }
.wish-drawer__body .muted, .wish-empty p:last-child { color: rgba(239, 236, 228, .6); }

/* ============================================================
   Homepage hero (2D — real product photography, cutout PNGs)
   ============================================================ */
.mm-hero { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; padding-top: var(--nav-h); background: var(--ink); }
.mm-hero .mm-giant { top: 50%; opacity: .9; }
.mm-hero__glow { position: absolute; z-index: 0; width: min(900px, 90vw); aspect-ratio: 1; right: -10%; top: 50%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(231, 205, 132, .22), transparent 72%); pointer-events: none; }
.mm-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding-block: clamp(3rem, 8vh, 5rem); }
.mm-hero__copy h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); color: var(--bone); }
.mm-hero__copy .lead { color: rgba(239, 236, 228, .74); max-width: 52ch; }
.mm-hero__copy .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0; }
.hero__stats { display: flex; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap: wrap; margin: 0; }
.hero__stats b { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--glow); line-height: 1; }
.hero__stats span { font-size: .82rem; color: rgba(239, 236, 228, .6); }
.mm-hero__art { display: none; position: relative; z-index: 1; }
.mm-hero__art img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); animation: mm-float 5s ease-in-out infinite; }
@keyframes mm-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
@media (min-width: 900px) {
  .mm-hero__inner { grid-template-columns: 1.05fr 1fr; gap: var(--space-4); }
  .mm-hero__art { display: block; }
}
@media (prefers-reduced-motion: reduce) { .mm-hero__art img { animation: none; } }

/* CTA band: original design was solid gold + white text (low contrast).
   Unify with the rest of the dark theme; buttons stay gold pills. */
.cta { background: var(--ink-2) !important; color: var(--bone); }
.cta p { opacity: 1; color: rgba(239, 236, 228, .72); }
.cta::after { background: radial-gradient(circle, rgba(231, 205, 132, .18), transparent 65%); }
.cta__row .btn--ghost { background: transparent; color: var(--bone); border: 1px solid rgba(255, 255, 255, .2); }
.cta__row .btn--ghost:hover { border-color: var(--glow); color: var(--glow); }

/* ============================================================
   Sitewide floating 3D watermark — fixed, golden-glow "MINIMAN",
   stays put as the page scrolls beneath it. Sits BEHIND real content
   in normal stacking order (z-index 0, no blend mode) so any actual
   text/card/widget in front of it simply covers it, like a true
   background layer — not a screen-blended watermark bleeding through
   everything.
   ============================================================ */
.mm-float-mark {
  position: fixed; z-index: -1; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; perspective: 1400px;
}
.mm-float-mark span {
  font-family: var(--font-display); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(4.5rem, 15vw, 13rem); line-height: .8; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(231, 205, 128, .3);
  text-shadow: 0 0 30px rgba(231, 205, 128, .16), 0 0 70px rgba(231, 205, 128, .08);
  transform: rotateX(14deg) rotateY(-10deg) translateZ(0);
  animation: mm-drift 14s ease-in-out infinite;
  will-change: transform;
}
html[dir="rtl"] .mm-float-mark span { direction: ltr; }
@keyframes mm-drift {
  0%, 100% { transform: rotateX(14deg) rotateY(-10deg) translateY(0) translateZ(0); }
  50%      { transform: rotateX(10deg) rotateY(8deg) translateY(-22px) translateZ(30px); }
}
@media (max-width: 760px) {
  .mm-float-mark span { font-size: clamp(3rem, 20vw, 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-float-mark span { animation: none; }
}

/* ============================================================
   About "story split" — was flat; bring in the established
   techniques (glow blob, fading-border frame, hover tilt, parallax).
   ============================================================ */
.mm-story { position: relative; overflow: clip; }
.mm-story__glow {
  position: absolute; z-index: 0; top: 10%; left: -10%; width: min(700px, 70vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(231, 205, 128, .16), transparent 72%);
  pointer-events: none;
}
.mm-story .split { position: relative; z-index: 1; }
.mm-story .split__media { position: relative; }
.mm-story .card-art { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.mm-story .card-art::after {
  /* fading-border technique: soft edge vignette so the photo melts into the dark page instead of a hard crop */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -50px 70px -30px rgba(9, 9, 11, .85), inset 0 50px 70px -30px rgba(9, 9, 11, .5);
}