/* Niche pages wear the same theme as the niche demo (apps/crm/public/css/themes.css):
   <html data-theme="…"> is set by the niche view. Only tokens change here; layout stays in site.css. */

/* ---------- Blush · beauty ---------- */
:root[data-theme="blush"] {
  --bg: #fffdfc; --tint: #f8f1ef; --tint-2: #eee2de;
  --ink: #2a1622; --ink-2: #6e5563; --ink-3: #8f7784; --line: #f0e4e0; --line-strong: #e2d2cd;
  --dark: #3b1530; --dark-2: #4d1f40; --dark-line: #5a2a4b; --dark-ink-2: #d7b3c6;
  --signal: #7a2e5c; --signal-hover: #62224a; --btn-bg: #3b1530; --btn-hover: #4d1f40;
  --header-bg: rgba(255, 253, 252, .92); --input-hover: #cdb7b0;
  --radius: 20px; --radius-sm: 14px;
  --hero-deco: radial-gradient(60% 70% at 100% 0%, rgba(232, 123, 164, .22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(122, 46, 92, .08), transparent 70%);
  --section-deco: radial-gradient(70% 80% at 0% 0%, rgba(232, 123, 164, .22), transparent 65%);
}

/* ---------- Clinic · dental ---------- */
:root[data-theme="clinic"] {
  --bg: #ffffff; --tint: #eef4f5; --tint-2: #e0eaec;
  --ink: #0e2a30; --ink-2: #4c666c; --ink-3: #6f878c; --line: #e2ebed; --line-strong: #cddcdf;
  --dark: #0e2a30; --dark-2: #173a41; --dark-line: #1f444b; --dark-ink-2: #9fb8bd;
  --signal: #0e7c86; --signal-hover: #0a646c; --btn-bg: #0e2a30; --btn-hover: #173a41;
  --radius: 10px; --radius-sm: 8px; --display-tracking: -.015em;
  --hero-deco: linear-gradient(to bottom, #0e7c86 0 6px, transparent 6px), linear-gradient(90deg, rgba(14, 124, 134, .05) 1px, transparent 1px), linear-gradient(rgba(14, 124, 134, .05) 1px, transparent 1px);
  --section-deco: linear-gradient(90deg, rgba(47, 181, 196, .06) 1px, transparent 1px), linear-gradient(rgba(47, 181, 196, .06) 1px, transparent 1px);
}
:root[data-theme="clinic"] .hero { background-size: auto, 32px 32px, 32px 32px; }
:root[data-theme="clinic"] .section--dark { background-size: 32px 32px; }

/* ---------- Energy · fitness ---------- */
:root[data-theme="energy"] {
  --bg: #ffffff; --tint: #f3f1ef; --tint-2: #e6e1dc;
  --ink: #151211; --ink-2: #5c5550; --ink-3: #7c746e; --line: #ebe6e2; --line-strong: #d9d2cc;
  --dark: #151211; --dark-2: #221c1a; --dark-line: #2c2724; --dark-ink-2: #a8a09a;
  --signal: #c2361b; --signal-hover: #a42c15; --btn-bg: #151211; --btn-hover: #2c2724;
  --radius: 6px; --radius-sm: 4px; --display-weight: 800; --display-tracking: -.04em;
  --hero-deco: linear-gradient(115deg, transparent 62%, rgba(194, 54, 27, .09) 62% 70%, transparent 70% 74%, rgba(255, 138, 76, .1) 74% 80%, transparent 80%);
  --section-deco: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 16px, transparent 16px 32px);
}

/* ---------- Campus · education ---------- */
:root[data-theme="campus"] {
  --bg: #fffefb; --tint: #f6f4ec; --tint-2: #e7e2d3;
  --ink: #141c3a; --ink-2: #545b76; --ink-3: #767c93; --line: #ebe7da; --line-strong: #d9d3c1;
  --dark: #16255c; --dark-2: #1f3072; --dark-line: #283a7a; --dark-ink-2: #aab4dd;
  --signal: #1e3a8a; --signal-hover: #172e6e; --btn-bg: #16255c; --btn-hover: #1f3072;
  --header-bg: rgba(255, 254, 251, .92);
  --hero-deco: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(30, 58, 138, .07) 35px 36px);
  --section-deco: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
:root[data-theme="campus"] .section--dark { background-size: 24px 24px; }
:root[data-theme="campus"] .badge { border-color: #eda100; background: rgba(237, 161, 0, .12); }

/* ---------- Playroom · kids ---------- */
:root[data-theme="playroom"] {
  --bg: #ffffff; --tint: #f5f1ff; --tint-2: #e8e0fa;
  --ink: #231a3a; --ink-2: #625a7c; --ink-3: #847c9c; --line: #ece6fa; --line-strong: #dcd3f3;
  --dark: #4b2a8c; --dark-2: #5a36a3; --dark-line: #6a45b5; --dark-ink-2: #d9ccf7;
  --signal: #6d3fc0; --signal-hover: #5a30a6; --btn-bg: #231a3a; --btn-hover: #3a2d5c;
  --radius: 26px; --radius-sm: 18px; --display-weight: 700;
  --hero-deco: radial-gradient(circle at 8% 20%, rgba(245, 180, 0, .5) 0 7px, transparent 8px), radial-gradient(circle at 92% 14%, rgba(109, 63, 192, .35) 0 10px, transparent 11px), radial-gradient(circle at 52% 8%, rgba(232, 123, 164, .45) 0 6px, transparent 7px), radial-gradient(circle at 96% 70%, rgba(27, 175, 122, .35) 0 8px, transparent 9px), radial-gradient(circle at 3% 80%, rgba(42, 120, 214, .3) 0 9px, transparent 10px);
  --section-deco: radial-gradient(circle at 10% 20%, rgba(245, 180, 0, .5) 0 6px, transparent 7px), radial-gradient(circle at 90% 30%, rgba(255, 255, 255, .25) 0 9px, transparent 10px), radial-gradient(circle at 70% 85%, rgba(232, 123, 164, .45) 0 7px, transparent 8px);
}

/* ---------- Garage · car service (dark) ---------- */
:root[data-theme="garage"] {
  --bg: #1d2026; --tint: #16181c; --tint-2: #2e333d;
  --ink: #eef0f3; --ink-2: #a7adb8; --ink-3: #7f8692; --line: #2b2f37; --line-strong: #3a3f4a;
  --dark: #0f1114; --dark-2: #181b20; --dark-line: #262a31; --dark-ink-2: #8f96a2;
  --signal: #e8561f; --signal-hover: #cf4814; --btn-bg: #e8561f; --btn-ink: #ffffff; --btn-hover: #cf4814;
  --header-bg: rgba(29, 32, 38, .9); --focus-ring: rgba(255, 255, 255, .12); --input-hover: #4a505c;
  --bad-soft: #3d1d1a;
  --radius: 8px; --radius-sm: 6px; --display-weight: 700;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  --hero-deco: linear-gradient(to top, transparent 10px, #1d2026 10px), repeating-linear-gradient(135deg, #e8561f 0 14px, #1d2026 14px 28px);
  --section-deco: linear-gradient(to bottom, transparent 8px, #0f1114 8px), repeating-linear-gradient(135deg, #ffb020 0 12px, #0f1114 12px 24px);
}

/* ---------- Aqua · car wash ---------- */
:root[data-theme="aqua"] {
  --bg: #ffffff; --tint: #edf5fc; --tint-2: #dde9f5;
  --ink: #0c2340; --ink-2: #4a6180; --ink-3: #6f84a0; --line: #e1ebf5; --line-strong: #cbdaea;
  --dark: #073f7c; --dark-2: #0a4f96; --dark-line: #11559f; --dark-ink-2: #a9c7ea;
  --signal: #0a66c2; --signal-hover: #0854a0; --btn-bg: #0c2340; --btn-hover: #173863;
  --radius: 16px; --radius-sm: 12px;
  --hero-deco: radial-gradient(circle at 88% 18%, rgba(34, 193, 238, .16) 0 90px, transparent 91px), radial-gradient(circle at 76% 72%, rgba(10, 102, 194, .08) 0 150px, transparent 151px), radial-gradient(circle at 6% 88%, rgba(34, 193, 238, .12) 0 40px, transparent 41px), linear-gradient(180deg, #eef6fd, #ffffff);
  --section-deco: radial-gradient(circle at 85% 25%, rgba(255, 255, 255, .1) 0 60px, transparent 61px), radial-gradient(circle at 12% 80%, rgba(255, 255, 255, .08) 0 30px, transparent 31px), linear-gradient(180deg, #0a66c2, #073f7c);
}

/* ---------- Calm · spa ---------- */
:root[data-theme="calm"] {
  --bg: #fffdf8; --tint: #f2eee4; --tint-2: #e8e1d2;
  --ink: #22302a; --ink-2: #5d6b63; --ink-3: #808b84; --line: #ebe5d8; --line-strong: #dcd4c3;
  --dark: #2f4a3e; --dark-2: #3a5a4b; --dark-line: #426253; --dark-ink-2: #c6d1c9;
  --signal: #3f6b57; --signal-hover: #325746; --btn-bg: #2f4a3e; --btn-hover: #3a5a4b;
  --header-bg: rgba(255, 253, 248, .92); --input-hover: #c8bfa9;
  --radius: 22px; --radius-sm: 16px; --display-weight: 500; --display-tracking: -.015em;
  --hero-deco: radial-gradient(55% 80% at 100% 10%, rgba(200, 162, 107, .18), transparent 70%);
  --section-deco: radial-gradient(60% 90% at 100% 100%, rgba(200, 162, 107, .2), transparent 65%);
}

/* ---------- Fresh · vet ---------- */
:root[data-theme="fresh"] {
  --bg: #ffffff; --tint: #edf6f3; --tint-2: #ddebe6;
  --ink: #12302b; --ink-2: #4e6a64; --ink-3: #718a85; --line: #e0ece8; --line-strong: #cbdcd6;
  --dark: #0f5f58; --dark-2: #137069; --dark-line: #1c7a71; --dark-ink-2: #b6d6cf;
  --signal: #0f766e; --signal-hover: #0c5f58; --btn-bg: #12302b; --btn-hover: #1d4640;
  --radius: 18px; --radius-sm: 12px;
  --hero-deco: radial-gradient(circle at 92% 12%, rgba(245, 158, 11, .2) 0 34px, transparent 35px), radial-gradient(circle at 84% 4%, rgba(245, 158, 11, .16) 0 14px, transparent 15px), radial-gradient(circle at 99% 4%, rgba(245, 158, 11, .16) 0 14px, transparent 15px);
  --section-deco: radial-gradient(circle at 88% 30%, rgba(255, 255, 255, .1) 0 40px, transparent 41px), radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .08) 0 16px, transparent 17px), radial-gradient(circle at 96% 18%, rgba(255, 255, 255, .08) 0 16px, transparent 17px);
}

/* ---------- Soft · therapy ---------- */
:root[data-theme="soft"] {
  --bg: #ffffff; --tint: #f0f1f8; --tint-2: #e3e6f2;
  --ink: #1f2340; --ink-2: #5c6282; --ink-3: #7f84a0; --line: #e7e9f4; --line-strong: #d6daea;
  --dark: #3b4670; --dark-2: #465383; --dark-line: #4d5a8a; --dark-ink-2: #c3c9e6;
  --signal: #4a5a8c; --signal-hover: #3c4a77; --btn-bg: #1f2340; --btn-hover: #333a63;
  --radius: 24px; --radius-sm: 18px; --display-weight: 500; --display-tracking: -.015em;
  --hero-deco: radial-gradient(50% 70% at 90% 20%, rgba(157, 180, 224, .3), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(157, 180, 224, .18), transparent 70%);
  --section-deco: radial-gradient(70% 90% at 100% 0%, rgba(157, 180, 224, .25), transparent 65%);
}

/* ---------- Neon · game club (dark) ---------- */
:root[data-theme="neon"] {
  --bg: #161127; --tint: #0e0a1a; --tint-2: #2a2247;
  --ink: #f1edff; --ink-2: #b3a9d6; --ink-3: #8a80ad; --line: #262040; --line-strong: #372e5a;
  --dark: #0b0816; --dark-2: #151027; --dark-line: #231c3d; --dark-ink-2: #9d93c4;
  --signal: #22d3ee; --signal-ink: #0b0816; --signal-hover: #0fb9d4; --btn-bg: #5b21b6; --btn-hover: #6d2fd0;
  --header-bg: rgba(22, 17, 39, .88); --focus-ring: rgba(34, 211, 238, .2); --input-hover: #4a3f78;
  --bad-soft: #3a1626;
  --radius: 12px; --radius-sm: 8px; --display-weight: 700;
  --shadow: 0 24px 60px -24px rgba(91, 33, 182, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --hero-deco: radial-gradient(50% 60% at 95% 0%, rgba(91, 33, 182, .45), transparent 70%), radial-gradient(35% 50% at 0% 100%, rgba(34, 211, 238, .14), transparent 70%);
  --section-deco: radial-gradient(60% 80% at 0% 0%, rgba(91, 33, 182, .5), transparent 65%), radial-gradient(40% 60% at 100% 100%, rgba(34, 211, 238, .18), transparent 70%);
}
:root[data-theme="neon"] .btn--signal { box-shadow: 0 0 24px -6px #22d3ee; }
:root[data-theme="neon"] .h1 { text-shadow: 0 0 30px rgba(91, 33, 182, .6); }

/* ---------- Cyber · computer club (dark): graphite, the emerald glow, a grid ---------- */
:root[data-theme="cyber"] {
  --bg: #12171c; --tint: #0b0f13; --tint-2: #1f2830;
  --ink: #e8f5f0; --ink-2: #a3b6b0; --ink-3: #788b84; --line: #1f2830; --line-strong: #2d3943;
  --dark: #070a0d; --dark-2: #0f1418; --dark-line: #1b232a; --dark-ink-2: #8fa39c;
  --signal: #10b981; --signal-ink: #03140d; --signal-hover: #0ea371; --btn-bg: #047857; --btn-hover: #059669;
  --header-bg: rgba(18, 23, 28, .88); --focus-ring: rgba(16, 185, 129, .22); --input-hover: #3a4955;
  --bad-soft: #3a1520;
  --radius: 10px; --radius-sm: 6px; --display-weight: 700; --display-tracking: -.02em;
  --shadow: 0 24px 60px -24px rgba(16, 185, 129, .32), 0 0 0 1px rgba(255, 255, 255, .06);
  --hero-deco: radial-gradient(50% 60% at 95% 0%, rgba(16, 185, 129, .26), transparent 70%), radial-gradient(35% 50% at 0% 100%, rgba(244, 63, 94, .12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(16, 185, 129, .05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(16, 185, 129, .05) 0 1px, transparent 1px 32px);
  --section-deco: radial-gradient(60% 80% at 100% 0%, rgba(16, 185, 129, .22), transparent 65%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px);
}
:root[data-theme="cyber"] .btn--signal { box-shadow: 0 0 24px -6px #10b981; }
:root[data-theme="cyber"] .h1 { text-shadow: 0 0 34px rgba(16, 185, 129, .35); }

/* ---------- Court · sports courts ---------- */
:root[data-theme="court"] {
  --bg: #ffffff; --tint: #eef3ea; --tint-2: #dde6d5;
  --ink: #122616; --ink-2: #4f6553; --ink-3: #728676; --line: #e1e9dc; --line-strong: #ccd8c5;
  --dark: #0f3d22; --dark-2: #144d2b; --dark-line: #1c5a34; --dark-ink-2: #b3d1bb;
  --signal: #15803d; --signal-hover: #106631; --btn-bg: #0f3d22; --btn-hover: #144d2b;
  --radius: 10px; --radius-sm: 8px; --display-weight: 700;
  --hero-deco: linear-gradient(90deg, transparent calc(86% - 2px), rgba(21, 128, 61, .12) calc(86% - 2px) calc(86% + 2px), transparent calc(86% + 2px)), linear-gradient(transparent calc(78% - 2px), rgba(21, 128, 61, .12) calc(78% - 2px) calc(78% + 2px), transparent calc(78% + 2px)), linear-gradient(180deg, #f1f6ed, #ffffff);
  --section-deco: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent calc(50% - 1px), rgba(255, 255, 255, .1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
:root[data-theme="court"] .tag--signal, :root[data-theme="court"] .dot { background: #c6d93a; color: #0f3d22; }

/* ---------- Wood · sauna (dark) ---------- */
:root[data-theme="wood"] {
  --bg: #231812; --tint: #1a120d; --tint-2: #3a291f;
  --ink: #f6ebe2; --ink-2: #c9b3a3; --ink-3: #9c8575; --line: #33251d; --line-strong: #4a3629;
  --dark: #140d09; --dark-2: #1f1510; --dark-line: #2e2019; --dark-ink-2: #b89f8b;
  --signal: #f08a3c; --signal-ink: #1a0f08; --signal-hover: #e0772a; --btn-bg: #8a3b12; --btn-hover: #a14718;
  --header-bg: rgba(35, 24, 18, .9); --focus-ring: rgba(240, 138, 60, .22); --input-hover: #5c4433;
  --bad-soft: #3e1d16;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
  --hero-deco: radial-gradient(50% 70% at 90% 100%, rgba(240, 138, 60, .22), transparent 70%), repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, transparent 1px 56px);
  --section-deco: radial-gradient(60% 80% at 50% 100%, rgba(240, 138, 60, .2), transparent 70%), repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px);
}

/* ---------- Razor · barbershop (dark) ---------- */
:root[data-theme="razor"] {
  --bg: #1c1a19; --tint: #131211; --tint-2: #302c29;
  --ink: #f3ede6; --ink-2: #b9aea4; --ink-3: #8f847b; --line: #2c2826; --line-strong: #403a36;
  --dark: #0f0e0d; --dark-2: #1a1817; --dark-line: #262220; --dark-ink-2: #a89c91;
  --signal: #e3b35a; --signal-ink: #1a140c; --signal-hover: #d19f45; --btn-bg: #b4532a; --btn-hover: #c4612f;
  --header-bg: rgba(28, 26, 25, .9); --focus-ring: rgba(227, 179, 90, .24); --input-hover: #5a514b;
  --bad-soft: #3d1c18;
  --radius: 10px; --radius-sm: 8px; --display-weight: 700;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
  --hero-deco: linear-gradient(90deg, #141211 calc(100% - 14px), transparent calc(100% - 14px)), repeating-linear-gradient(160deg, #b4532a 0 18px, #f3ede6 18px 26px, #e3b35a 26px 40px, #f3ede6 40px 48px);
  --section-deco: radial-gradient(60% 80% at 100% 0%, rgba(227, 179, 90, .12), transparent 70%);
}

/* ---------- Road · driving school ---------- */
:root[data-theme="road"] {
  --bg: #ffffff; --tint: #f1f1ee; --tint-2: #e3e3de;
  --ink: #17181b; --ink-2: #56585f; --ink-3: #797b82; --line: #e7e7e2; --line-strong: #d4d4ce;
  --dark: #2b2d31; --dark-2: #36383d; --dark-line: #3d4046; --dark-ink-2: #b3b5bb;
  --signal: #b91c1c; --signal-hover: #991616; --btn-bg: #17181b; --btn-hover: #2b2d31;
  --radius: 8px; --radius-sm: 6px; --display-weight: 700;
  --hero-deco: linear-gradient(to top, transparent 0 34px, #ffffff 34px), linear-gradient(to top, transparent 0 14px, #fbbf24 14px 20px, transparent 20px), linear-gradient(#3a3d42, #3a3d42);
  --section-deco: linear-gradient(90deg, #2b2d31 0 22px, transparent 22px 28px, #2b2d31 28px), repeating-linear-gradient(to bottom, #fbbf24 0 26px, transparent 26px 48px);
}

/* dark niche pages: native controls */
:root[data-theme="garage"] body, :root[data-theme="neon"] body, :root[data-theme="cyber"] body, :root[data-theme="wood"] body, :root[data-theme="razor"] body { color-scheme: dark; }

/* ---------- niche hero: the signature colour of each theme ---------- */
/* dark heroes re-scope the text tokens inside .hero */
.hero--niche { position: relative; }
:root[data-theme="energy"] .hero--niche, :root[data-theme="campus"] .hero--niche, :root[data-theme="court"] .hero--niche, :root[data-theme="road"] .hero--niche {
  --ink: #ffffff; --ink-2: rgba(255, 255, 255, .72); --ink-3: rgba(255, 255, 255, .55);
  --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .28); --bg: transparent;
  color: var(--ink);
}
:root[data-theme="energy"] .hero--niche .btn--dark, :root[data-theme="campus"] .hero--niche .btn--dark,
:root[data-theme="court"] .hero--niche .btn--dark, :root[data-theme="road"] .hero--niche .btn--dark { background: var(--signal); color: var(--signal-ink); }
:root[data-theme="court"] .hero--niche .btn--dark { background: #c6d93a; color: #0f3d22; }
:root[data-theme="road"] .hero--niche .btn--dark { background: #fbbf24; color: #17181b; }
:root[data-theme="campus"] .hero--niche .btn--dark { background: #eda100; color: #141c3a; }

:root[data-theme="blush"] .hero--niche { background-color: #f6e3ea; }
:root[data-theme="clinic"] .hero--niche { background-color: #e3f1f3; }
:root[data-theme="energy"] .hero--niche { background-color: #151211; background-image: linear-gradient(115deg, transparent 58%, rgba(194, 54, 27, .55) 58% 66%, transparent 66% 70%, rgba(255, 138, 76, .35) 70% 75%, transparent 75%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 16px, transparent 16px 32px); }
:root[data-theme="campus"] .hero--niche { background-color: #16255c; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; }
:root[data-theme="playroom"] .hero--niche { background-color: #ece2ff; }
:root[data-theme="aqua"] .hero--niche { background-image: radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .5) 0 90px, transparent 91px), radial-gradient(circle at 6% 88%, rgba(255, 255, 255, .45) 0 40px, transparent 41px), radial-gradient(circle at 40% 10%, rgba(255, 255, 255, .35) 0 18px, transparent 19px), linear-gradient(180deg, #cfe6fa, #e8f3fd); }
:root[data-theme="calm"] .hero--niche { background-color: #e9e2d2; }
:root[data-theme="fresh"] .hero--niche { background-color: #d9eee6; }
:root[data-theme="soft"] .hero--niche { background-color: #e4e7f6; }
:root[data-theme="court"] .hero--niche { background-color: #0f3d22; background-image: linear-gradient(90deg, transparent calc(58% - 2px), rgba(255, 255, 255, .12) calc(58% - 2px) calc(58% + 2px), transparent calc(58% + 2px)), linear-gradient(transparent calc(50% - 2px), rgba(255, 255, 255, .12) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(180deg, #11472a, #0c331c); }
:root[data-theme="razor"] .hero--niche { background-color: #141211; background-image: radial-gradient(50% 60% at 85% 0%, rgba(227, 179, 90, .14), transparent 70%), linear-gradient(90deg, #141211 calc(100% - 18px), transparent calc(100% - 18px)), repeating-linear-gradient(160deg, #b4532a 0 18px, #f3ede6 18px 26px, #e3b35a 26px 40px, #f3ede6 40px 48px); }
:root[data-theme="road"] .hero--niche { background-color: #2b2d31; background-image: linear-gradient(to top, transparent 0 22px, #2b2d31 22px), repeating-linear-gradient(90deg, #fbbf24 0 60px, transparent 60px 100px); }
:root[data-theme="blush"] .hero--niche .badge, :root[data-theme="clinic"] .hero--niche .badge, :root[data-theme="playroom"] .hero--niche .badge,
:root[data-theme="calm"] .hero--niche .badge, :root[data-theme="fresh"] .hero--niche .badge, :root[data-theme="soft"] .hero--niche .badge { background: rgba(255, 255, 255, .6); }