/* ==========================================================================
   Websites by Sky
   Every visual decision lives in a CSS variable. Each "style" in the
   Try-On switcher is just a different set of values for those variables.
   ========================================================================== */

/* ---------- 0. FONTS for the default style (other styles load their own) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-normal-400-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. STYLES (themes) ------------------------------------------- */

/* Websites by Sky (default) */
[data-theme="sky"] {
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-btn: var(--font-body);
  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: 1;
  --h3-scale: 1;
  --accent-style: italic;
  --accent-weight: 400;
  --accent-size: 1.1em;
  --accent-tracking: -0.01em;

  --bg: #F7FAFF;
  --bg-alt: #EDF4FE;
  --surface: #FFFFFF;
  --surface-2: #EAF3FF;
  --ink: #0A1A3F;
  --ink-soft: #45557A;
  --line: rgba(10, 26, 63, .1);
  --primary: #0B2150;
  --on-primary: #FFFFFF;
  --primary-hover: #163A80;
  --accent: #3D9BF5;
  --accent-2: #9BD5FF;
  --accent-ink: #1A6BD0;
  --focus: #3D9BF5;
  --danger: #C62828;
  --swatch: linear-gradient(135deg, #0B2150 0 48%, #5AB4FF 48% 100%);

  --em-bg: linear-gradient(100deg, #1A6BD0 0%, #3D9BF5 50%, #1A6BD0 100%);
  --em-clip: text;
  --em-color: transparent;

  --hero-bg: linear-gradient(165deg, #06112E 0%, #0B2150 45%, #1D4FA6 100%);
  --hero-page-bg:
    linear-gradient(0deg, #F7FAFF 0, #CBE7FF calc(var(--hz) * .28), #6CB2F0 calc(var(--hz) * .6), rgba(29, 79, 166, 0) var(--hz)),
    linear-gradient(180deg, #040C22 0%, #0A1D4A 38%, #16398A 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: #D5E4FA;
  --hero-em-bg: linear-gradient(100deg, #8ACFFF 0%, #EAF6FF 50%, #8ACFFF 100%);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #FFFFFF;
  --hero-btn-ink: #0B2150;
  --hero-btn-hover: #EAF5FF;
  --hero-btn-shadow: 0 10px 30px -8px rgba(125, 196, 255, .65);
  --hero-line: rgba(255, 255, 255, .28);
  --glow: radial-gradient(closest-side, rgba(255, 214, 160, .55), rgba(255, 190, 140, .12) 60%, transparent);
  --stars-opacity: 1;
  --rays-opacity: .5;
  --clouds-opacity: 1;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 1;

  --feature-bg: #081739;
  --feature-bg-image: radial-gradient(60% 50% at 15% 0%, rgba(61, 155, 245, .35), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(155, 213, 255, .18), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #C5D5EE;
  --feature-line: rgba(255, 255, 255, .14);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #7CC4FF;
  --feature-em-bg: linear-gradient(100deg, #8ACFFF, #EAF6FF 50%, #8ACFFF);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-input: 14px;
  --btn-radius: 999px;
  --btn-weight: 700;
  --btn-transform: none;
  --btn-tracking: -0.005em;
  --btn-size: 1rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 10px 24px -10px rgba(11, 33, 80, .55);
  --btn-shadow-hover: 0 16px 34px -12px rgba(11, 33, 80, .6);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;

  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(10, 26, 63, .07);
  --card-shadow: 0 1px 2px rgba(10, 26, 63, .04), 0 12px 32px -16px rgba(10, 26, 63, .18);
  --card-shadow-hover: 0 2px 4px rgba(10, 26, 63, .04), 0 28px 60px -24px rgba(23, 63, 140, .35);
  --card-hover-move: translateY(-6px);
  --spot: rgba(61, 155, 245, .10);
  --icon-tile-bg: linear-gradient(135deg, #E3F1FF, #CFE6FF);
  --icon-tile-ink: #1A5FC0;
  --icon-radius: 14px;

  --input-bg: #FFFFFF;
  --input-border: rgba(10, 26, 63, .18);

  --eyebrow-font: var(--font-body);
  --eyebrow-size: .8rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .16em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #1A6BD0;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;

  --header-bg: rgba(247, 250, 255, .8);
  --space-scale: 1;
  --body-size: 1.0625rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .45s;
  --rv-dur: .9s;
  --rv-ease: cubic-bezier(.16, 1, .3, 1);
  --rv-x: 0px;
  --rv-y: 28px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 6px;
  --rv-stagger: 90ms;
}

/* Classic Elegant */
[data-theme="classic"] {
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-body: "Jost", "Futura", system-ui, sans-serif;
  --font-accent: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-btn: var(--font-body);
  --display-weight: 500;
  --display-tracking: -0.015em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: 1.14;
  --h3-scale: 1.2;
  --accent-style: italic;
  --accent-weight: 500;
  --accent-size: 1em;
  --accent-tracking: 0;

  --bg: #FBF7EE;
  --bg-alt: #F4ECDC;
  --surface: #FFFDF8;
  --surface-2: #F1E7D3;
  --ink: #221D15;
  --ink-soft: #5B5140;
  --line: rgba(34, 29, 21, .14);
  --primary: #221D15;
  --on-primary: #F6E7C4;
  --primary-hover: #3B3222;
  --accent: #B8914F;
  --accent-2: #DCC393;
  --accent-ink: #80602A;
  --focus: #9A7433;
  --danger: #A12622;
  --swatch: linear-gradient(135deg, #221D15 0 48%, #C9A465 48% 100%);

  --em-bg: linear-gradient(100deg, #80602A, #A8813F 50%, #80602A);
  --em-clip: text;
  --em-color: transparent;

  --hero-bg: radial-gradient(70% 60% at 78% 18%, #FFF9EA 0%, rgba(255, 249, 234, 0) 70%), linear-gradient(180deg, #F7EFDF 0%, #F2E6CF 100%);
  --hero-ink: #221D15;
  --hero-muted: #594E3D;
  --hero-em-bg: linear-gradient(100deg, #7A5B26, #A07A38 50%, #7A5B26);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #221D15;
  --hero-btn-ink: #F6E7C4;
  --hero-btn-hover: #3B3222;
  --hero-btn-shadow: none;
  --hero-line: rgba(34, 29, 21, .25);
  --glow: radial-gradient(closest-side, rgba(220, 195, 147, .45), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFDF8;
  --cloudbank-opacity: 0;

  --feature-bg: #1D1912;
  --feature-bg-image: radial-gradient(50% 60% at 50% 0%, rgba(201, 164, 101, .18), transparent 70%);
  --feature-ink: #F6EEDC;
  --feature-ink-soft: #CFC3A8;
  --feature-line: rgba(220, 195, 147, .25);
  --feature-card: rgba(246, 238, 220, .04);
  --feature-accent: #DCC393;
  --feature-em-bg: linear-gradient(100deg, #C9A465, #EAD7AE 50%, #C9A465);

  --radius-sm: 0px;
  --radius: 2px;
  --radius-lg: 4px;
  --radius-input: 0px;
  --btn-radius: 0px;
  --btn-weight: 500;
  --btn-transform: uppercase;
  --btn-tracking: .16em;
  --btn-size: .84rem;
  --btn-border-w: 1px;
  --btn-shadow: none;
  --btn-shadow-hover: 0 14px 30px -18px rgba(34, 29, 21, .6);
  --btn-hover-move: translateY(-1px);
  --btn-shine: 0;

  --card-bg: #FFFDF8;
  --card-border: 1px solid rgba(184, 145, 79, .35);
  --card-shadow: none;
  --card-shadow-hover: 0 24px 50px -30px rgba(34, 29, 21, .35);
  --card-hover-move: translateY(-3px);
  --spot: rgba(201, 164, 101, .08);
  --icon-tile-bg: transparent;
  --icon-tile-ink: #80602A;
  --icon-radius: 50%;

  --input-bg: #FFFDF8;
  --input-border: rgba(34, 29, 21, .25);

  --eyebrow-font: var(--font-body);
  --eyebrow-size: .78rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: .28em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #80602A;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;

  --header-bg: rgba(251, 247, 238, .88);
  --space-scale: 1.12;
  --body-size: 1.0625rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: .6s;
  --rv-dur: 1.4s;
  --rv-ease: cubic-bezier(.25, .1, .25, 1);
  --rv-x: 0px;
  --rv-y: 14px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 140ms;
}

/* Salon Luxe */
[data-theme="salon"] {
  --font-display: "Playfair Display", "Didot", Georgia, serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-accent: "Pinyon Script", "Snell Roundhand", cursive;
  --font-btn: var(--font-body);
  --display-weight: 500;
  --display-tracking: -0.02em;
  --display-leading: 1.04;
  --display-transform: none;
  --display-scale: .98;
  --h3-scale: 1.05;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1.2em;
  --accent-tracking: 0;

  --bg: #FFF7F5;
  --bg-alt: #FCECE8;
  --surface: #FFFFFF;
  --surface-2: #FBE6E2;
  --ink: #161113;
  --ink-soft: #664F54;
  --line: rgba(22, 17, 19, .1);
  --primary: #161113;
  --on-primary: #FFE9E6;
  --primary-hover: #3A2A2F;
  --accent: #E6A9B0;
  --accent-2: #F6D5D1;
  --accent-ink: #A2405A;
  --focus: #C25B74;
  --danger: #B3261E;
  --swatch: linear-gradient(135deg, #161113 0 48%, #EFB8BE 48% 100%);

  --em-bg: linear-gradient(100deg, #A2405A, #C8697F 50%, #A2405A);
  --em-clip: text;
  --em-color: transparent;

  --hero-bg: radial-gradient(45% 55% at 12% 30%, #F9D2D2 0%, rgba(249, 210, 210, 0) 70%), radial-gradient(40% 50% at 88% 16%, #F8E1D5 0%, rgba(248, 225, 213, 0) 70%), linear-gradient(180deg, #FFF4F2 0%, #FBE3E0 100%);
  --hero-ink: #161113;
  --hero-muted: #5E4A4F;
  --hero-em-bg: linear-gradient(100deg, #9C3A55, #C25B74 50%, #9C3A55);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #161113;
  --hero-btn-ink: #FFE9E6;
  --hero-btn-hover: #3A2A2F;
  --hero-btn-shadow: 0 16px 36px -14px rgba(162, 64, 90, .55);
  --hero-line: rgba(22, 17, 19, .2);
  --glow: radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: .55;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 1;

  --feature-bg: #161113;
  --feature-bg-image: radial-gradient(45% 55% at 10% 10%, rgba(230, 169, 176, .28), transparent 70%), radial-gradient(40% 50% at 95% 90%, rgba(246, 213, 209, .16), transparent 70%);
  --feature-ink: #FFF3F1;
  --feature-ink-soft: #D9C4C6;
  --feature-line: rgba(246, 213, 209, .18);
  --feature-card: rgba(255, 243, 241, .05);
  --feature-accent: #F2B8BE;
  --feature-em-bg: linear-gradient(100deg, #F2B8BE, #FFE4E0 50%, #F2B8BE);

  --radius-sm: 12px;
  --radius: 24px;
  --radius-lg: 36px;
  --radius-input: 16px;
  --btn-radius: 999px;
  --btn-weight: 500;
  --btn-transform: uppercase;
  --btn-tracking: .18em;
  --btn-size: .8rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 14px 30px -14px rgba(162, 64, 90, .5);
  --btn-shadow-hover: 0 20px 44px -16px rgba(162, 64, 90, .6);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;

  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(230, 169, 176, .35);
  --card-shadow: 0 20px 50px -34px rgba(162, 64, 90, .45);
  --card-shadow-hover: 0 30px 70px -30px rgba(162, 64, 90, .5);
  --card-hover-move: translateY(-6px);
  --spot: rgba(246, 213, 209, .45);
  --icon-tile-bg: linear-gradient(135deg, #FDE7E4, #F7CFD1);
  --icon-tile-ink: #8E3550;
  --icon-radius: 50%;

  --input-bg: #FFFFFF;
  --input-border: rgba(22, 17, 19, .16);

  --eyebrow-font: var(--font-body);
  --eyebrow-size: .74rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .32em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #A2405A;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;

  --header-bg: rgba(255, 247, 245, .85);
  --space-scale: 1.08;
  --body-size: 1rem;

  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .7s;
  --rv-dur: 1.2s;
  --rv-ease: cubic-bezier(.33, 1, .68, 1);
  --rv-x: 0px;
  --rv-y: 10px;
  --rv-scale: .95;
  --rv-rot: 0deg;
  --rv-blur: 10px;
  --rv-stagger: 120ms;
}

/* Rugged Trades */
[data-theme="trades"] {
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-accent: "Bebas Neue", Impact, sans-serif;
  --font-btn: "Barlow Condensed", "Arial Narrow", sans-serif;
  --display-weight: 400;
  --display-tracking: .005em;
  --display-leading: .92;
  --display-transform: uppercase;
  --display-scale: 1.3;
  --h3-scale: 1.35;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: .005em;

  --bg: #F1EFEA;
  --bg-alt: #E6E2D9;
  --surface: #FFFFFF;
  --surface-2: #E9E5DC;
  --ink: #17191C;
  --ink-soft: #464A51;
  --line: rgba(23, 25, 28, .18);
  --primary: #FFB400;
  --on-primary: #17191C;
  --primary-hover: #FFC533;
  --accent: #FFB400;
  --accent-2: #E8590C;
  --accent-ink: #A34100;
  --focus: #E8590C;
  --danger: #B3261E;
  --swatch: linear-gradient(135deg, #17191C 0 48%, #FFB400 48% 100%);

  --em-bg: linear-gradient(180deg, transparent 58%, #FFB400 58%, #FFB400 90%, transparent 90%);
  --em-clip: border-box;
  --em-color: #17191C;

  --hero-bg: linear-gradient(180deg, #16181B 0%, #1E2125 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: #C9CDD3;
  --hero-em-bg: none;
  --hero-em-clip: border-box;
  --hero-em-color: #FFB400;
  --hero-btn-bg: #FFB400;
  --hero-btn-ink: #17191C;
  --hero-btn-hover: #FFC533;
  --hero-btn-shadow: 5px 5px 0 #000000;
  --hero-line: rgba(255, 255, 255, .3);
  --glow: radial-gradient(closest-side, rgba(255, 180, 0, .14), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;

  --feature-bg: #17191C;
  --feature-bg-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px);
  --feature-ink: #F6F4EF;
  --feature-ink-soft: #C3C7CD;
  --feature-line: rgba(255, 255, 255, .22);
  --feature-card: #202327;
  --feature-accent: #FFB400;
  --feature-em-bg: none;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 2px;
  --radius-input: 0px;
  --btn-radius: 2px;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-tracking: .06em;
  --btn-size: 1.08rem;
  --btn-border-w: 2px;
  --btn-shadow: 4px 4px 0 #17191C;
  --btn-shadow-hover: 7px 7px 0 #17191C;
  --btn-hover-move: translate(-3px, -3px);
  --btn-shine: 0;

  --card-bg: #FFFFFF;
  --card-border: 2px solid #17191C;
  --card-shadow: 6px 6px 0 #17191C;
  --card-shadow-hover: 10px 10px 0 #17191C;
  --card-hover-move: translate(-4px, -4px);
  --spot: rgba(255, 180, 0, .12);
  --icon-tile-bg: #FFB400;
  --icon-tile-ink: #17191C;
  --icon-radius: 0px;

  --input-bg: #FFFFFF;
  --input-border: #17191C;

  --eyebrow-font: "Barlow Condensed", "Arial Narrow", sans-serif;
  --eyebrow-size: .95rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .1em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #17191C;
  --eyebrow-bg: #FFB400;
  --eyebrow-pad: .25em .7em;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;

  --header-bg: rgba(241, 239, 234, .94);
  --space-scale: .86;
  --body-size: 1.075rem;

  --ease: cubic-bezier(.2, .9, .1, 1);
  --ease-soft: cubic-bezier(.2, .9, .1, 1);
  --dur: .18s;
  --rv-dur: .45s;
  --rv-ease: cubic-bezier(.2, .9, .1, 1);
  --rv-x: -48px;
  --rv-y: 0px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 55ms;
}

/* Warm Local */
[data-theme="warm"] {
  --font-display: "Fraunces", "Cooper", Georgia, serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-btn: var(--font-body);
  --display-weight: 700;
  --display-tracking: -0.025em;
  --display-leading: 1.04;
  --display-transform: none;
  --display-scale: 1;
  --h3-scale: 1.05;
  --accent-style: italic;
  --accent-weight: 600;
  --accent-size: 1em;
  --accent-tracking: -0.02em;

  --bg: #FBF4E8;
  --bg-alt: #F6E9D4;
  --surface: #FFFBF4;
  --surface-2: #F3E2C8;
  --ink: #3A2A1F;
  --ink-soft: #6A5243;
  --line: rgba(58, 42, 31, .14);
  --primary: #A6481F;
  --on-primary: #FFF8EE;
  --primary-hover: #8F3C18;
  --accent: #E6A640;
  --accent-2: #8A9A62;
  --accent-ink: #9C4219;
  --focus: #C2571F;
  --danger: #A12622;
  --swatch: linear-gradient(135deg, #A6481F 0 48%, #E6A640 48% 100%);

  --em-bg: linear-gradient(#9C4219, #9C4219);
  --em-clip: text;
  --em-color: transparent;

  --hero-bg: radial-gradient(50% 60% at 82% 12%, #FFD99A 0%, rgba(255, 217, 154, 0) 70%), linear-gradient(180deg, #FBE6CC 0%, #F8DDBF 60%, #FBF1E2 100%);
  --hero-ink: #3A2A1F;
  --hero-muted: #634A3A;
  --hero-em-bg: linear-gradient(#9C4219, #9C4219);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #A6481F;
  --hero-btn-ink: #FFF8EE;
  --hero-btn-hover: #8F3C18;
  --hero-btn-shadow: 0 5px 0 #6E2E12;
  --hero-line: rgba(58, 42, 31, .25);
  --glow: radial-gradient(closest-side, rgba(255, 210, 130, .7), transparent);
  --stars-opacity: 0;
  --rays-opacity: .25;
  --clouds-opacity: .9;
  --cloud-fill: #FFF8EE;
  --cloudbank-opacity: 1;

  --feature-bg: #3A2A1F;
  --feature-bg-image: radial-gradient(45% 55% at 90% 0%, rgba(230, 166, 64, .22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(138, 154, 98, .22), transparent 70%);
  --feature-ink: #FBF1E3;
  --feature-ink-soft: #DCC8B4;
  --feature-line: rgba(251, 241, 227, .16);
  --feature-card: rgba(251, 241, 227, .06);
  --feature-accent: #F0B85A;
  --feature-em-bg: linear-gradient(#F0B85A, #F0B85A);

  --radius-sm: 12px;
  --radius: 24px;
  --radius-lg: 34px;
  --radius-input: 16px;
  --btn-radius: 999px;
  --btn-weight: 800;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-size: 1.04rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 5px 0 #6E2E12;
  --btn-shadow-hover: 0 8px 0 #6E2E12;
  --btn-hover-move: translateY(-3px);
  --btn-shine: 0;

  --card-bg: #FFFBF4;
  --card-border: 2px solid rgba(58, 42, 31, .08);
  --card-shadow: 0 14px 34px -22px rgba(110, 60, 20, .45);
  --card-shadow-hover: 0 26px 50px -24px rgba(110, 60, 20, .45);
  --card-hover-move: translateY(-7px) rotate(-.6deg);
  --spot: rgba(230, 166, 64, .14);
  --icon-tile-bg: #F7DDB0;
  --icon-tile-ink: #8A3A15;
  --icon-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;

  --input-bg: #FFFDF9;
  --input-border: rgba(58, 42, 31, .22);

  --eyebrow-font: var(--font-body);
  --eyebrow-size: .82rem;
  --eyebrow-weight: 800;
  --eyebrow-tracking: .08em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #7A3413;
  --eyebrow-bg: #F7DDB0;
  --eyebrow-pad: .45em 1em;
  --eyebrow-radius: 999px;
  --eyebrow-dot: 0;

  --header-bg: rgba(251, 244, 232, .9);
  --space-scale: 1;
  --body-size: 1.08rem;

  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .5s;
  --rv-dur: .85s;
  --rv-ease: cubic-bezier(.34, 1.56, .64, 1);
  --rv-x: 0px;
  --rv-y: 34px;
  --rv-scale: .9;
  --rv-rot: -2deg;
  --rv-blur: 0px;
  --rv-stagger: 90ms;
}

/* Bold Modern */
[data-theme="bold"] {
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-accent: "Unbounded", system-ui, sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 700;
  --display-tracking: -0.04em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: .86;
  --h3-scale: .9;
  --accent-style: normal;
  --accent-weight: 800;
  --accent-size: 1em;
  --accent-tracking: -0.04em;

  --bg: #0A0A10;
  --bg-alt: #0F0F17;
  --surface: #15151F;
  --surface-2: #1D1D2A;
  --ink: #F3F3F8;
  --ink-soft: #A9A9C2;
  --line: rgba(255, 255, 255, .1);
  --primary: #C8FF3C;
  --on-primary: #0A0A10;
  --primary-hover: #DAFF78;
  --accent: #FF3EA5;
  --accent-2: #7C5CFF;
  --accent-ink: #C8FF3C;
  --focus: #C8FF3C;
  --danger: #FF6B6B;
  --swatch: linear-gradient(135deg, #0A0A10 0 40%, #C8FF3C 40% 70%, #FF3EA5 70% 100%);

  --em-bg: linear-gradient(90deg, #C8FF3C, #3CF2FF 50%, #FF6BC1);
  --em-clip: text;
  --em-color: transparent;

  --hero-bg: radial-gradient(50% 60% at 85% 20%, rgba(124, 92, 255, .38), transparent 70%), radial-gradient(40% 50% at 5% 70%, rgba(255, 62, 165, .25), transparent 70%), #0A0A10;
  --hero-ink: #FFFFFF;
  --hero-muted: #B8B8CF;
  --hero-em-bg: linear-gradient(90deg, #C8FF3C, #3CF2FF 50%, #FF6BC1);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #C8FF3C;
  --hero-btn-ink: #0A0A10;
  --hero-btn-hover: #DAFF78;
  --hero-btn-shadow: 0 0 0 1px rgba(200, 255, 60, .5), 0 12px 40px -8px rgba(200, 255, 60, .55);
  --hero-line: rgba(255, 255, 255, .25);
  --glow: radial-gradient(closest-side, rgba(124, 92, 255, .35), transparent);
  --stars-opacity: .6;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;

  --feature-bg: #111119;
  --feature-bg-image: radial-gradient(40% 60% at 0% 0%, rgba(255, 62, 165, .2), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(124, 92, 255, .3), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #B8B8CF;
  --feature-line: rgba(255, 255, 255, .12);
  --feature-card: rgba(255, 255, 255, .03);
  --feature-accent: #C8FF3C;
  --feature-em-bg: linear-gradient(90deg, #C8FF3C, #3CF2FF 50%, #FF6BC1);

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-input: 12px;
  --btn-radius: 12px;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-tracking: .04em;
  --btn-size: .92rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 0 0 1px rgba(200, 255, 60, .45), 0 10px 34px -10px rgba(200, 255, 60, .5);
  --btn-shadow-hover: 0 0 0 1px rgba(200, 255, 60, .8), 0 16px 50px -8px rgba(200, 255, 60, .7);
  --btn-hover-move: translateY(-2px) scale(1.02);
  --btn-shine: 1;

  --card-bg: #14141E;
  --card-border: 1px solid rgba(255, 255, 255, .09);
  --card-shadow: none;
  --card-shadow-hover: 0 0 0 1px rgba(200, 255, 60, .35), 0 24px 70px -24px rgba(124, 92, 255, .55);
  --card-hover-move: translateY(-5px);
  --spot: rgba(200, 255, 60, .12);
  --icon-tile-bg: linear-gradient(135deg, rgba(200, 255, 60, .16), rgba(124, 92, 255, .22));
  --icon-tile-ink: #C8FF3C;
  --icon-radius: 12px;

  --input-bg: #101018;
  --input-border: rgba(255, 255, 255, .2);

  --eyebrow-font: var(--font-body);
  --eyebrow-size: .8rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .22em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #C8FF3C;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;

  --header-bg: rgba(10, 10, 16, .78);
  --space-scale: 1;
  --body-size: 1.0625rem;

  --ease: cubic-bezier(.68, -0.4, .27, 1.45);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .35s;
  --rv-dur: .7s;
  --rv-ease: cubic-bezier(.19, 1, .22, 1);
  --rv-x: 0px;
  --rv-y: 60px;
  --rv-scale: .98;
  --rv-rot: 1.5deg;
  --rv-blur: 0px;
  --rv-stagger: 70ms;
}

/* ---------- 2. BASE ------------------------------------------------------ */

:root {
  --header-h: 72px;
  --hz: clamp(190px, 22vw, 320px);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-pad: calc(clamp(72px, 9vw, 128px) * var(--space-scale));
  --fs-h1: calc(clamp(2.7rem, 1.5rem + 4.2vw, 4.9rem) * var(--display-scale));
  --fs-h2: calc(clamp(2rem, 1.35rem + 2.5vw, 3.4rem) * var(--display-scale));
  --fs-h3: calc(1.3rem * var(--h3-scale));
  --fs-lead: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  interpolate-size: allow-keywords;
  color-scheme: light;
}
:root:is([data-theme="bold"], [data-theme="neon"], [data-theme="noir"]) { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--on-primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg use { stroke: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 18px; background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. TYPE & BUILDING BLOCKS ----------------------------------- */

.h2, .hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-transform: var(--display-transform);
  text-wrap: balance;
}
.h2 { font-size: var(--fs-h2); }
.h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-tracking) * .6);
  text-transform: var(--display-transform);
  line-height: 1.15;
}
.h3 { font-size: var(--fs-h3); margin-bottom: .45em; }
.h4 { font-size: calc(1.1rem * var(--h3-scale)); margin-bottom: .8em; }
[data-theme="sky"] .h3, [data-theme="sky"] .h4 { font-weight: 700; }
:is([data-theme="bold"], [data-theme="neon"]) .h3, :is([data-theme="bold"], [data-theme="neon"]) .h4 { font-weight: 600; letter-spacing: -0.02em; }

/* the highlighted phrase in headings */
.h2 em, .hero__title em {
  font-family: var(--font-accent);
  font-style: var(--accent-style);
  font-weight: var(--accent-weight);
  font-size: var(--accent-size);
  letter-spacing: var(--accent-tracking);
  line-height: .9;
  background-image: var(--em-bg);
  background-size: 200% 100%;
  -webkit-background-clip: var(--em-clip);
  background-clip: var(--em-clip);
  color: var(--em-color);
  padding-inline: .04em .08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:is([data-theme="trades"], [data-theme="industrial"]) .h2 em { background-size: 100% 100%; padding-inline: .1em; }
:is([data-theme="salon"], [data-theme="blush"]) .h2 { line-height: 1.12; }
:is([data-theme="salon"], [data-theme="blush"]) .h2 em, :is([data-theme="salon"], [data-theme="blush"]) .hero__title em { line-height: 1; padding-inline: .06em .14em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.1rem;
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--eyebrow-color);
  background: var(--eyebrow-bg);
  padding: var(--eyebrow-pad);
  border-radius: var(--eyebrow-radius);
  line-height: 1.3;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: var(--eyebrow-dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
  display: var(--eyebrow-dot-display, inline-block);
}
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .eyebrow::before, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .eyebrow::after { content: ""; width: 28px; height: 1px; border-radius: 0; box-shadow: none; opacity: .7; background: currentColor; }
:is([data-theme="salon"], [data-theme="blush"]) .eyebrow::before { content: "✦"; width: auto; height: auto; background: none; box-shadow: none; opacity: 1; font-size: 1.1em; letter-spacing: 0; }
:is([data-theme="trades"], [data-theme="industrial"]) .eyebrow::before, [data-theme="warm"] .eyebrow::before { display: none; }
:is([data-theme="bold"], [data-theme="neon"]) .eyebrow::before { border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 12px currentColor; }

.section { position: relative; padding-block: var(--section-pad); overflow-x: clip; }
.site-footer { overflow-x: clip; }
.section--alt { background: var(--bg-alt); }
.hero + .section { padding-top: calc(var(--section-pad) * .55); }
.section-head { max-width: 760px; margin-bottom: calc(clamp(40px, 5vw, 64px) * var(--space-scale)); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-bottom: .45em; }
.section-lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 640px; line-height: 1.6; }
.section-head--center .section-lead { margin-inline: auto; }
:is([data-theme="trades"], [data-theme="industrial"]) .section--alt { background-image: repeating-linear-gradient(-45deg, rgba(23, 25, 28, .035) 0 2px, transparent 2px 16px); }

/* Buttons */
.btn {
  --_bg: transparent; --_ink: var(--ink); --_bd: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .85em 1.5em;
  font-family: var(--font-btn); font-size: var(--btn-size); font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking); text-transform: var(--btn-transform); line-height: 1.2;
  text-decoration: none; text-align: center;
  color: var(--_ink); background: var(--_bg);
  border: var(--btn-border-w) solid var(--_bd); border-radius: var(--btn-radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color .25s, color .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn .btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary {
  --_bg: var(--primary); --_ink: var(--on-primary); --_bd: var(--primary);
  box-shadow: var(--btn-shadow);
}
:is([data-theme="trades"], [data-theme="industrial"]) .btn--primary { --_bd: var(--hard, #17191C); }
.btn--primary:hover { --_bg: var(--primary-hover); transform: var(--btn-hover-move); box-shadow: var(--btn-shadow-hover); }
.btn--primary:active { transform: scale(.97); }
[data-theme="warm"] .btn--primary:active, :is([data-theme="trades"], [data-theme="industrial"]) .btn--primary:active { transform: translate(2px, 3px); box-shadow: 0 1px 0 #6E2E12; }
:is([data-theme="trades"], [data-theme="industrial"]) .btn--primary:active { box-shadow: 1px 1px 0 var(--hard, #17191C); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); opacity: var(--btn-shine);
}
.btn--primary:hover::after { transform: translateX(120%); transition: transform .9s var(--ease-soft); }
.btn--ghost {
  --_bd: color-mix(in srgb, currentColor 32%, transparent);
  --_bg: color-mix(in srgb, var(--surface) 0%, transparent);
  border-width: max(var(--btn-border-w), 1.5px);
}
.btn--ghost:hover { --_bd: currentColor; --_bg: color-mix(in srgb, currentColor 7%, transparent); transform: var(--btn-hover-move); }
.btn--soft { --_bg: var(--surface-2); --_ink: var(--ink); }
.btn--soft:hover { --_bg: var(--accent-2); }
.btn--sm { min-height: 40px; padding: .6em 1.15em; font-size: calc(var(--btn-size) * .92); }
.btn--lg { min-height: 56px; padding: 1em 1.75em; font-size: calc(var(--btn-size) * 1.06); }
.btn--block { width: 100%; }

/* Cards */
.card {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur), background-color .5s;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.card:hover::after { opacity: 1; }
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: var(--icon-radius);
  background: var(--icon-tile-bg); color: var(--icon-tile-ink);
  transition: transform var(--dur) var(--ease), background .4s, color .4s;
}
.icon-tile .icon { width: 24px; height: 24px; }
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .icon-tile { border: 1px solid var(--fine-line, rgba(184, 145, 79, .5)); }
:is([data-theme="trades"], [data-theme="industrial"]) .icon-tile { border: 2px solid var(--hard, #17191C); }
.tag {
  display: inline-block; padding: .3em .8em; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-2); color: var(--ink-soft);
}
:is([data-theme="trades"], [data-theme="industrial"]) .tag, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .tag { border-radius: 0; }

/* ---------- 4. HEADER ---------------------------------------------------- */

.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 70;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  pointer-events: none;
}
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  color: var(--hero-ink);
  transition: background-color .35s, box-shadow .35s, color .35s, backdrop-filter .35s;
}
.site-header.is-scrolled {
  color: var(--ink);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(0, 0, 0, .25);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; border-radius: 8px; }
.brand__mark { width: 40px; height: 40px; transition: transform .6s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
.brand__mark .stop-a { stop-color: var(--logo-a, #9BD5FF); }
.brand__mark .stop-b { stop-color: var(--logo-b, #3D9BF5); }
.brand__cloud, .am-cloud, .fm-cloud { fill: var(--logo-cloud, #FFFFFF); }
.brand__bar, .am-bar, .fm-bar { fill: var(--logo-frame, #0B2150); }
.brand__frame, .am-frame, .fm-frame { stroke: var(--logo-frame, #0B2150); }
.brand__dots { fill: var(--logo-a, #9BD5FF); }
.am-sky, .fm-sky { fill: var(--logo-b, #3D9BF5); }
.brand__name {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: calc(1.2rem * min(var(--display-scale), 1.15)); letter-spacing: calc(var(--display-tracking) * .5);
  text-transform: var(--display-transform); white-space: nowrap; line-height: 1;
}
.brand__by { font-weight: 500; opacity: .75; }
[data-theme="sky"] .brand__by { font-weight: 600; }
.brand__sky { color: var(--brand-sky, var(--accent)); }
.site-header:not(.is-scrolled):not(.nav-open) .brand__sky { color: var(--brand-sky-hero, var(--brand-sky, var(--accent))); }

[data-theme="sky"] { --brand-sky: #1F7BE0; --brand-sky-hero: #8ACFFF; }
[data-theme="classic"] { --logo-frame: #221D15; --logo-a: #EAD7AE; --logo-b: #B8914F; --logo-cloud: #FFFDF8; --brand-sky: #80602A; }
[data-theme="salon"] { --logo-frame: #161113; --logo-a: #F9D7D6; --logo-b: #E6A9B0; --logo-cloud: #FFFFFF; --brand-sky: #A2405A; }
[data-theme="trades"] { --logo-frame: #17191C; --logo-a: #FFD166; --logo-b: #FFB400; --logo-cloud: #FFFFFF; --brand-sky: #A34100; --brand-sky-hero: #FFB400; }
[data-theme="warm"] { --logo-frame: #3A2A1F; --logo-a: #F7C77A; --logo-b: #D9832F; --logo-cloud: #FFF8EE; --brand-sky: #9C4219; }
[data-theme="bold"] { --logo-frame: #2A2A3A; --logo-a: #C8FF3C; --logo-b: #7C5CFF; --logo-cloud: #FFFFFF; --brand-sky: #C8FF3C; }

.nav-toggle {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 0; background: transparent; color: inherit; border-radius: 12px;
}
.nav-toggle .icon { width: 28px; height: 28px; }
.nav {
  position: fixed; inset: var(--header-h) 0 auto 0;
  background: var(--surface); color: var(--ink);
  padding: 12px var(--gutter) 28px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
  border-top: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
.nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
.nav-open.site-header { background: var(--surface); color: var(--ink); }
.nav__list a:not(.btn) {
  display: block; padding: 14px 4px; font-size: 1.15rem; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.nav__cta-item { margin-top: 18px; }
.nav__cta-item .btn { width: 100%; min-height: 54px; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav {
    position: static; inset: auto; padding: 0; background: none; color: inherit;
    box-shadow: none; border: 0; opacity: 1; visibility: visible; transform: none;
  }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__list a:not(.btn) {
    position: relative; padding: 10px 14px; font-size: .95rem; border: 0; border-radius: 999px;
  }
  .nav__list a:not(.btn)::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
  }
  .nav__list a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
  .nav__cta-item { margin: 0 0 0 10px; }
  .nav__cta-item .btn { width: auto; min-height: 44px; }
  .site-header:not(.is-scrolled) .nav__cta-item .btn {
    --_bg: var(--hero-btn-bg); --_ink: var(--hero-btn-ink); --_bd: var(--hero-btn-bg);
    box-shadow: var(--hero-btn-shadow);
  }
}

/* ---------- 5. HERO ------------------------------------------------------ */

.hero {
  --em-bg: var(--hero-em-bg);
  --em-clip: var(--hero-em-clip);
  --em-color: var(--hero-em-color);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 1000px);
  padding: calc(var(--header-h) + clamp(28px, 5vw, 64px)) 0 var(--hz);
  display: flex; align-items: center;
  color: var(--hero-ink);
  background: var(--hero-page-bg, var(--hero-bg));
}
.hero .btn--ghost { --_ink: var(--hero-ink); }
.hero .btn--primary {
  --primary: var(--hero-btn-bg); --on-primary: var(--hero-btn-ink); --primary-hover: var(--hero-btn-hover);
  --btn-shadow: var(--hero-btn-shadow);
}
:is([data-theme="trades"], [data-theme="industrial"]) .hero .btn--primary { --_bd: #000000; --btn-shadow-hover: 8px 8px 0 #000000; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow {
  position: absolute; width: min(90vw, 900px); aspect-ratio: 1; right: -18%; top: 12%;
  background: var(--glow); filter: blur(10px); transition: background .8s;
  animation: breathe 9s ease-in-out infinite;
}
.hero__rays {
  position: absolute; width: 180vmax; aspect-ratio: 1; right: -70vmax; top: -60vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ray, rgba(255, 255, 255, .09)) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
  opacity: var(--rays-opacity); transition: opacity .8s;
  animation: spin 120s linear infinite; will-change: transform;
}
.hero__stars { position: absolute; inset: 0; opacity: var(--stars-opacity); transition: opacity .8s; }
.hero__stars i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: var(--star, #fff); box-shadow: 0 0 8px 2px var(--star-glow, rgba(255, 255, 255, .6));
  animation: twinkle 4s ease-in-out var(--d) infinite;
}

.clouds { position: absolute; inset: 0; opacity: var(--clouds-opacity); transition: opacity .8s; }
.cloud-layer { position: absolute; inset: 0; will-change: transform; }
.cloud { position: absolute; fill: var(--cloud-fill); height: auto; aspect-ratio: 2 / 1; animation: drift var(--t, 60s) ease-in-out infinite alternate; transition: fill .8s; will-change: transform; }
.cloud.c1 { width: clamp(140px, 18vw, 260px); top: 13%; left: -4%; opacity: .16; --t: 70s; filter: blur(2px); }
.cloud.c2 { width: clamp(110px, 13vw, 200px); top: 30%; right: 2%; opacity: .2; --t: 55s; animation-direction: alternate-reverse; filter: blur(1.5px); }
.cloud.c3 { width: clamp(160px, 20vw, 300px); top: 44%; right: 36%; opacity: .12; --t: 80s; filter: blur(1.5px); }
.cloud.c4 { width: clamp(100px, 11vw, 170px); top: 7%; right: 26%; opacity: .1; --t: 90s; filter: blur(2px); }
.cloud.c5 { width: clamp(280px, 34vw, 520px); bottom: calc(var(--hz) * .18); right: -10%; opacity: .95; --t: 65s; animation-direction: alternate-reverse; }
.cloud.c6 { width: clamp(240px, 30vw, 460px); bottom: calc(var(--hz) * .12); left: -12%; opacity: .92; --t: 75s; }
.cloudbank {
  position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(90px, 14vw, 220px);
  opacity: var(--cloudbank-opacity); transition: opacity .8s;
}
.cloudbank__back { fill: var(--bg); opacity: .55; }
.cloudbank__front { fill: var(--bg); }

/* theme backdrops */
.deco { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; overflow: hidden; }
[data-theme="classic"] .deco--classic,
[data-theme="salon"] .deco--salon,
[data-theme="trades"] .deco--trades,
[data-theme="warm"] .deco--warm,
[data-theme="bold"] .deco--bold { opacity: 1; }
.deco--classic span:nth-child(1) {
  position: absolute; width: min(760px, 120vw); aspect-ratio: 1; right: -18%; top: -22%;
  border-radius: 50%; border: 1px solid var(--fine-line, rgba(184, 145, 79, .4));
  box-shadow: 0 0 0 28px var(--fine-wash, rgba(184, 145, 79, .05)), inset 0 0 0 60px var(--fine-wash, rgba(184, 145, 79, .04));
}
.deco--classic span:nth-child(2) { position: absolute; inset: calc(var(--header-h) + 8px) 18px 18px; border: 1px solid var(--fine-line, rgba(184, 145, 79, .35)); }
.deco--classic span:nth-child(2)::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--fine-line, rgba(184, 145, 79, .35)); opacity: .5; }
.deco--salon span { position: absolute; border-radius: 50%; filter: blur(40px); animation: floaty 14s ease-in-out infinite alternate; }
.deco--salon span:nth-child(1) { width: 40vw; height: 40vw; left: -8vw; top: 10%; background: var(--orb-1, rgba(240, 170, 180, .45)); }
.deco--salon span:nth-child(2) { width: 30vw; height: 30vw; right: 5vw; top: -6vw; background: var(--orb-2, rgba(255, 214, 196, .6)); animation-delay: -4s; }
.deco--salon span:nth-child(3) { width: 22vw; height: 22vw; right: 30vw; bottom: 8%; background: var(--orb-3, rgba(214, 190, 255, .35)); animation-delay: -8s; }
.deco--trades .deco__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line, rgba(255, 255, 255, .05)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line, rgba(255, 255, 255, .05)) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.deco--trades .deco__stripe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: repeating-linear-gradient(-45deg, var(--hard-accent, #FFB400) 0 24px, var(--hard, #17191C) 24px 48px);
  animation: stripes 1.6s linear infinite;
}
.deco--warm span { position: absolute; border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; animation: morph 16s ease-in-out infinite alternate; }
.deco--warm span:nth-child(1) { width: 34vw; height: 30vw; right: -6vw; top: 14%; background: var(--blob-1, rgba(230, 166, 64, .28)); }
.deco--warm span:nth-child(2) { width: 22vw; height: 20vw; left: -6vw; top: 40%; background: var(--blob-2, rgba(138, 154, 98, .22)); animation-delay: -5s; }
.deco--warm span:nth-child(3) { width: 14vw; height: 13vw; left: 38%; top: 8%; background: var(--blob-3, rgba(214, 120, 70, .16)); animation-delay: -9s; }
.deco--bold .deco__grid {
  position: absolute; left: -50%; right: -50%; bottom: -8%; height: 55%;
  background-image: linear-gradient(var(--grid-a, rgba(200, 255, 60, .35)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-b, rgba(124, 92, 255, .45)) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  animation: gridmove 3s linear infinite;
}
.deco--bold span:not(.deco__grid) { position: absolute; border-radius: 50%; filter: blur(60px); animation: floaty 10s ease-in-out infinite alternate; }
.deco--bold span:nth-child(2) { width: 28vw; height: 28vw; right: 4vw; top: 12%; background: var(--orb-1, rgba(124, 92, 255, .45)); }
.deco--bold span:nth-child(3) { width: 20vw; height: 20vw; left: 2vw; bottom: 18%; background: var(--orb-2, rgba(255, 62, 165, .35)); animation-delay: -5s; }

.hero__inner { display: grid; gap: clamp(40px, 6vw, 56px); align-items: center; }
.hero__copy { max-width: 700px; }
.hero__eyebrow { color: var(--hero-eyebrow, var(--hero-muted)); }
[data-theme="sky"] .hero__eyebrow { --hero-eyebrow: #BFE0FF; }
[data-theme="bold"] .hero__eyebrow { --hero-eyebrow: #C8FF3C; }
[data-theme="salon"] .hero__eyebrow { --hero-eyebrow: #A2405A; }
[data-theme="classic"] .hero__eyebrow { --hero-eyebrow: #80602A; }
[data-theme="trades"] .hero__eyebrow { --hero-eyebrow: #17191C; }
[data-theme="warm"] .hero__eyebrow { --hero-eyebrow: #7A3413; }
.hero__eyebrow::before { display: none; }
.hero__pin { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent); }
.hero__pin .icon { width: 15px; height: 15px; }
:is([data-theme="trades"], [data-theme="industrial"]) .hero__pin { border-radius: 0; background: rgba(0, 0, 0, .12); }
.hero__title { font-size: var(--fs-h1); margin-bottom: .45em; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .08em .14em 0; margin: -.04em -.08em -.14em 0; }
.hero__title .w > span { display: inline-block; }
.hero__lead { font-size: var(--fs-lead); color: var(--hero-muted); max-width: 560px; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.8rem; }
.hero__actions .btn { flex: 1 1 auto; }
.hero__promises { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; font-weight: 600; color: var(--hero-muted); }
.hero__promises li { display: inline-flex; align-items: center; gap: 8px; }
.hero__promises .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; stroke-width: 3; background: color-mix(in srgb, currentColor 18%, transparent); color: var(--hero-ink); }
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(20px, 3vw, 36px); z-index: 3; translate: -50% 0;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--ink-on-bg, var(--primary)); background: var(--surface);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
  animation: bob 2.4s ease-in-out infinite;
}
:is([data-theme="bold"], [data-theme="neon"]) .hero__scroll, :is([data-theme="trades"], [data-theme="industrial"]) .hero__scroll { color: var(--hero-ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--hero-line); }

.hero__visual { position: relative; display: none; contain: layout; }
.hero__visual .ms__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__visual .ms__sub { min-height: 2.9em; }
.browser {
  container-type: inline-size;
  position: relative; overflow: hidden;
  background: var(--surface);
  border-radius: calc(min(var(--radius-lg), 22px));
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 40px 90px -30px rgba(0, 0, 0, .45);
  transition: border-radius .6s, background-color .6s;
}
:is([data-theme="trades"], [data-theme="industrial"]) .browser { border: 3px solid #000; box-shadow: 12px 12px 0 #000; }
:is([data-theme="bold"], [data-theme="neon"]) .browser { border-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(200, 255, 60, .1), 0 40px 100px -30px rgba(124, 92, 255, .6); }
.browser__bar {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.browser__dots i:nth-child(2) { background: #FEBC2E; }
.browser__dots i:nth-child(3) { background: #28C840; }
.browser__url {
  flex: 0 1 60%; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; padding: 0 12px; border-radius: 999px; background: var(--surface);
  font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden;
}
:is([data-theme="trades"], [data-theme="industrial"]) .browser__url, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .browser__url { border-radius: 0; }
.browser__url .icon { width: 12px; height: 12px; }
.caret { width: 1px; height: 13px; background: currentColor; animation: blink 1s steps(1) infinite; }

.hero__visual .browser { transform: perspective(1600px) rotateY(var(--ry, -9deg)) rotateX(var(--rx, 4deg)); transition: transform .8s var(--ease-soft), border-radius .6s; transform-style: preserve-3d; }
.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .45);
  border: var(--card-border);
  font-size: .85rem; line-height: 1.3;
  animation: floaty 6s ease-in-out infinite alternate;
}
:is([data-theme="trades"], [data-theme="industrial"]) .float-card { box-shadow: 5px 5px 0 #000; border-color: #000; }
.float-card strong { display: block; font-weight: 700; }
.float-card small { color: var(--ink-soft); font-size: .8rem; }
.float-card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--icon-radius); background: var(--icon-tile-bg); color: var(--icon-tile-ink); }
.float-card__icon .icon { width: 20px; height: 20px; }
.float-card--a { top: -26px; left: -30px; }
.float-card--b { bottom: -28px; right: -18px; animation-delay: -3s; }

@media (min-width: 700px) {
  .hero__visual { display: block; width: min(100%, 560px); margin: 24px auto 0; }
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hero__visual { width: auto; margin: 0; }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* ---------- 6. MINI WEBSITE MOCKUP -------------------------------------- */

.ms {
  --m: 1cqi;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(9px, calc(var(--m) * 1.9), 15px);
  line-height: 1.45;
  transition: background-color .6s;
}
.ms__nav { display: flex; align-items: center; gap: 1em; padding: 1.1em 1.6em; border-bottom: 1px solid var(--line); background: var(--surface); }
.ms__logo { display: flex; align-items: center; gap: .6em; min-width: 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: calc(var(--display-tracking) * .5); }
.ms__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms__mono {
  display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary); font-size: .9em; letter-spacing: 0;
}
.ms__links { display: flex; gap: 1.4em; margin-left: auto; color: var(--ink-soft); font-size: .9em; }
.ms__navbtn {
  padding: .5em 1.1em; border-radius: var(--btn-radius); background: var(--primary); color: var(--on-primary);
  font-family: var(--font-btn); font-weight: var(--btn-weight); text-transform: var(--btn-transform); letter-spacing: var(--btn-tracking); font-size: .8em;
}
.ms__hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.5em; align-items: center;
  padding: 3em 1.6em; background: var(--hero-bg); color: var(--hero-ink);
}
.ms__copy { display: flex; flex-direction: column; align-items: flex-start; gap: .7em; min-width: 0; }
.ms__eyebrow { font-size: .75em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-muted); }
.ms__title {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform); line-height: var(--display-leading);
  font-size: calc(3.3em * var(--display-scale)); overflow-wrap: anywhere; max-width: 100%;
}
.ms__sub { color: var(--hero-muted); font-size: 1.05em; max-width: 30em; }
.ms__btns { display: flex; flex-wrap: wrap; gap: .6em; margin-top: .3em; }
.ms__btn {
  padding: .75em 1.3em; border-radius: var(--btn-radius); background: var(--hero-btn-bg); color: var(--hero-btn-ink);
  font-family: var(--font-btn); font-weight: var(--btn-weight); text-transform: var(--btn-transform); letter-spacing: var(--btn-tracking); font-size: .82em;
  box-shadow: var(--hero-btn-shadow);
}
:is([data-theme="trades"], [data-theme="industrial"]) .ms__btn { box-shadow: 3px 3px 0 #000; border: 2px solid #000; }
.ms__btn--ghost { background: transparent; color: var(--hero-ink); box-shadow: inset 0 0 0 1px var(--hero-line); }
:is([data-theme="trades"], [data-theme="industrial"]) .ms__btn--ghost { box-shadow: none; border-color: var(--hero-line); }
.ms__art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent-2) 90%, #fff), var(--accent) 70%);
  color: var(--on-primary); overflow: hidden;
}
[data-theme="sky"] .ms__art { background: radial-gradient(circle at 30% 25%, #CFEAFF, #3D9BF5 75%); color: #fff; }
[data-theme="classic"] .ms__art { background: radial-gradient(circle at 30% 25%, #F1E2BF, #B8914F 80%); color: #221D15; }
[data-theme="salon"] .ms__art { background: radial-gradient(circle at 30% 25%, #FFF0EE, #E6A9B0 80%); color: #161113; }
[data-theme="trades"] .ms__art { background: repeating-linear-gradient(-45deg, #FFB400 0 14px, #F2A900 14px 28px); color: #17191C; border: 3px solid #000; }
[data-theme="warm"] .ms__art { background: radial-gradient(circle at 30% 25%, #FFE2A8, #E6A640 60%, #C8612E); color: #3A2A1F; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }
[data-theme="bold"] .ms__art { background: radial-gradient(circle at 30% 25%, #7C5CFF, #FF3EA5 55%, #0A0A10 100%); color: #C8FF3C; }
.ms__ring { position: absolute; inset: 12%; border-radius: 50%; border: 2px dashed currentColor; opacity: .35; animation: spin 26s linear infinite; }
.ms__icon { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ms__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; padding: 1.8em 1.6em 2em; }
.ms__card {
  display: flex; flex-direction: column; gap: .5em; padding: 1.1em;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow);
  font-weight: 700; font-size: .95em;
}
:is([data-theme="trades"], [data-theme="industrial"]) .ms__card { box-shadow: 3px 3px 0 var(--hard, #17191C); }
.ms__card-icon { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: var(--icon-radius); background: var(--icon-tile-bg); color: var(--icon-tile-ink); }
.ms__card-icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms__card i { display: block; height: .45em; border-radius: 99px; background: var(--line); }
.ms__card i:last-child { width: 65%; }
.ms__footer { padding: 1.1em 1.6em; background: var(--feature-bg); color: var(--feature-ink-soft); font-size: .8em; }
.ms__footer span { color: var(--feature-ink); font-weight: 700; }

@container (max-width: 430px) {
  .ms { font-size: clamp(11px, 3.6cqi, 14px); }
  .ms__links { display: none; }
  .ms__navbtn { margin-left: auto; }
  .ms__hero { grid-template-columns: 1fr; padding: 2.2em 1.4em; }
  .ms__art { display: none; }
  .ms__title { font-size: calc(2.6em * var(--display-scale)); }
  .ms__cards { grid-template-columns: 1fr; padding: 1.4em; }
  .ms__card { flex-direction: row; align-items: center; }
  .ms__card i { display: none; }
}
.ms [data-slot] { transition: opacity .3s; }
.ms.is-swapping [data-slot] { opacity: 0; }

/* ---------- 7. PROBLEM --------------------------------------------------- */

.problem-grid { display: grid; gap: 20px; }
.problem { padding: 16px 16px 28px; }
.problem > .h3, .problem > p { padding-inline: 10px; }
.problem p { color: var(--ink-soft); margin: 0; }
.problem__art {
  position: relative; height: 170px; margin-bottom: 22px; overflow: hidden;
  border-radius: calc(var(--radius-lg) - 8px); background: var(--surface-2);
  display: grid; place-items: center;
}
:is([data-theme="trades"], [data-theme="industrial"]) .problem__art { border: 2px solid var(--hard, #17191C); }
.oldsite {
  width: 78%; padding: 10px; background: #C0C0C0; border: 3px outset #E0E0E0;
  font-family: "Times New Roman", Times, serif; color: #000080; display: grid; gap: 6px;
  transform: rotate(-2deg); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .4);
}
.oldsite__title { font-size: 15px; font-weight: 700; text-decoration: underline; color: #800080; text-align: center; }
.oldsite__marquee { font-size: 11px; background: #FFFF00; color: #FF0000; white-space: nowrap; overflow: hidden; }
.oldsite__marquee { animation: marquee-old 7s linear infinite; }
.oldsite__row { display: flex; gap: 6px; }
.oldsite__row i { flex: 1; height: 26px; background: repeating-linear-gradient(45deg, #808080 0 4px, #A0A0A0 4px 8px); }
.oldsite__counter { justify-self: center; font: 10px/1 "Courier New", monospace; background: #000; color: #0F0; padding: 3px 6px; }
.tinyphone { width: 92px; height: 150px; margin-top: 30px; border-radius: 16px; background: #1B1B1F; padding: 7px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transform: rotate(6deg); }
.tinyphone__screen { width: 100%; height: 100%; border-radius: 10px; background: #fff; overflow: hidden; position: relative; }
.tinyphone__page { position: absolute; top: 8px; left: 6px; width: 210px; display: grid; gap: 5px; animation: sideways 5s ease-in-out infinite alternate; }
.tinyphone__page span { height: 6px; background: #D5D8DE; border-radius: 3px; }
.tinyphone__page span:first-child { height: 14px; width: 70%; background: #9AA3B2; }
.tinyphone__page b { justify-self: end; font: 700 7px/1 Arial, sans-serif; color: #fff; background: #3366CC; padding: 4px 6px; }
.pinch { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-soft); font-style: italic; }
.fakesearch {
  display: flex; align-items: center; gap: 8px; width: 80%; padding: 10px 14px; border-radius: 999px;
  background: #fff; color: #3C4043; font: 13px/1.2 Arial, sans-serif; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .3);
}
.fakesearch .icon { width: 16px; height: 16px; color: #5F6368; }
.fakesearch__q { overflow: hidden; white-space: nowrap; border-right: 1px solid #3C4043; animation: typing 5s steps(22) infinite; width: 0; }
.fakeresults { position: absolute; bottom: 18px; left: 10%; right: 10%; display: grid; gap: 6px; }
.fakeresults span { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.fakeresults span:nth-child(2) { width: 70%; }
.fakeresults em { font: italic 600 12px/1 Arial, sans-serif; color: #C5221F; margin-top: 4px; }
.problem__good {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: clamp(32px, 5vw, 56px) auto 0; text-align: center;
  font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  font-size: calc(clamp(1.2rem, 1rem + .9vw, 1.6rem) * min(var(--display-scale), 1.2)); letter-spacing: calc(var(--display-tracking) * .5);
}
[data-theme="sky"] .problem__good { font-weight: 700; }
.problem__good-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.problem__good-icon .icon { width: 22px; height: 22px; }
@media (min-width: 760px) { .problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 8. STEPS ----------------------------------------------------- */

.steps { position: relative; display: grid; gap: 22px; counter-reset: step; }
.step {
  position: relative; padding: 28px 24px 28px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
}
.step p:last-child { margin: 0; color: var(--ink-soft); }
.step__badge {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px;
  border-radius: var(--icon-radius); background: var(--icon-tile-bg); color: var(--icon-tile-ink);
}
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .step__badge { border: 1px solid var(--fine-line, rgba(184, 145, 79, .5)); }
:is([data-theme="trades"], [data-theme="industrial"]) .step__badge { border: 2px solid var(--hard, #17191C); }
.step__badge .icon { width: 30px; height: 30px; }
.step__num {
  position: absolute; top: -8px; right: -10px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: .95rem; line-height: 1;
  box-shadow: 0 0 0 4px var(--card-bg);
}
:is([data-theme="trades"], [data-theme="industrial"]) .step__num { border-radius: 0; border: 2px solid var(--hard, #17191C); box-shadow: none; }
.step__when { margin: 0 0 .35em; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.steps__line { display: none; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .steps__line {
    display: block; position: absolute; z-index: 0; left: 12%; right: 12%; top: -34px; width: 76%; height: 40px; overflow: visible; pointer-events: none;
  }
  .steps__line path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; vector-effect: non-scaling-stroke; }
  .steps.is-in .steps__line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-soft) .3s; }
  .js .steps:not(.is-in) .steps__line path { stroke-dashoffset: 1; }
}
.step:hover { transform: var(--card-hover-move); box-shadow: var(--card-shadow-hover); }
.step { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.step:hover .step__badge { transform: rotate(-6deg) scale(1.05); }
.step__badge { transition: transform var(--dur) var(--ease); }

/* ---------- 9. SERVICES -------------------------------------------------- */

.services { display: grid; gap: 20px; }
.service { padding: 28px 26px; }
.service .icon-tile { margin-bottom: 22px; }
.service p { margin: 0; color: var(--ink-soft); }
.service .tag { position: absolute; top: 20px; right: 20px; }
.service:hover, .biz:hover, .contact-card:hover { transform: var(--card-hover-move); box-shadow: var(--card-shadow-hover); }
.service:hover .icon-tile { transform: rotate(-8deg) scale(1.08); }
.included { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.included li {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .95rem;
}
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .included li, :is([data-theme="trades"], [data-theme="industrial"]) .included li { border-radius: 0; }
:is([data-theme="trades"], [data-theme="industrial"]) .included li { border: 2px solid var(--hard, #17191C); background: #fff; }
.included .icon { color: var(--accent-ink); stroke-width: 2.6; width: 18px; height: 18px; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 10. TRY ON A NEW LOOK -------------------------------------- */

.section--feature {
  --ink: var(--feature-ink);
  --ink-soft: var(--feature-ink-soft);
  --em-bg: var(--feature-em-bg);
  --em-clip: text;
  --em-color: transparent;
  --line: var(--feature-line);
  --eyebrow-color: var(--feature-accent);
  --accent-ink: var(--feature-accent);
  overflow: hidden; isolation: isolate;
  background: var(--feature-bg-image), var(--feature-bg);
  color: var(--ink);
}
:is([data-theme="trades"], [data-theme="industrial"]) .section--feature { --em-clip: border-box; --em-color: var(--hard-accent, #FFB400); --eyebrow-color: var(--hard, #17191C); }
[data-theme="warm"] .section--feature { --eyebrow-color: #7A3413; }
.section--feature .btn--ghost { color: var(--feature-ink); }
.section--feature .btn--primary { --primary: var(--hero-btn-bg); --on-primary: var(--hero-btn-ink); --primary-hover: var(--hero-btn-hover); }
[data-theme="classic"] .section--feature .btn--primary { --primary: #DCC393; --on-primary: #1D1912; --primary-hover: #EAD7AE; }
[data-theme="salon"] .section--feature .btn--primary { --primary: #F2B8BE; --on-primary: #161113; --primary-hover: #F8D0D3; }
[data-theme="warm"] .section--feature .btn--primary { --primary: #F0B85A; --on-primary: #3A2A1F; --primary-hover: #F5C877; --btn-shadow: 0 5px 0 #A76F17; --btn-shadow-hover: 0 8px 0 #A76F17; }
:is([data-theme="trades"], [data-theme="industrial"]) .section--feature .btn--primary { --btn-shadow: 5px 5px 0 #000; --_bd: #000; }
.feature-bg span { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); opacity: .5; animation: floaty 12s ease-in-out infinite alternate; }
.feature-bg span:nth-child(1) { width: 40vw; height: 40vw; left: -10vw; top: -10vw; background: var(--accent); opacity: .18; }
.feature-bg span:nth-child(2) { width: 30vw; height: 30vw; right: -8vw; bottom: -8vw; background: var(--accent-2); opacity: .16; animation-delay: -6s; }

.style-grid { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.style-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 20px;
  border-radius: var(--radius-lg); background: var(--feature-card); border: 1px solid var(--feature-line);
  cursor: pointer; transition: transform var(--dur) var(--ease), border-color .3s, box-shadow .3s, background-color .3s;
}
.style-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--feature-accent) 60%, transparent); }
.style-card:has(input:checked) { border-color: var(--feature-accent); box-shadow: 0 0 0 2px var(--feature-accent), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.style-card:has(input:focus-visible) { outline: 3px solid var(--feature-accent); outline-offset: 4px; }
.style-card__preview {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: max(var(--radius), 4px); background: var(--hero-bg);
  font-family: var(--font-body); color: var(--hero-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sp__hero { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 16px 18px; }
.sp__title {
  font-family: var(--font-preview, var(--font-display)); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: calc(3rem * var(--display-scale)); text-transform: var(--display-transform); line-height: .9; color: var(--hero-ink);
  transition: transform .6s var(--ease);
}
.style-card:hover .sp__title { transform: translateY(-3px) scale(1.04); }
.sp__lines { display: grid; gap: 5px; width: 55%; }
.sp__lines i { height: 6px; border-radius: 3px; background: var(--hero-ink); opacity: .22; }
.sp__lines i:last-child { width: 70%; }
.sp__btn {
  padding: 6px 12px; border-radius: var(--btn-radius); background: var(--hero-btn-bg); color: var(--hero-btn-ink);
  font-family: var(--font-btn); font-weight: var(--btn-weight); letter-spacing: var(--btn-tracking); text-transform: var(--btn-transform);
  font-size: 11px; line-height: 1.2; box-shadow: var(--hero-btn-shadow);
}
.style-card__preview:is([data-theme="trades"], [data-theme="industrial"]) .sp__btn { border: 2px solid #000; box-shadow: 3px 3px 0 #000; font-size: 13px; }
.style-card__preview:is([data-theme="trades"], [data-theme="industrial"]) .sp__lines i { border-radius: 0; }
.style-card__preview:is([data-theme="trades"], [data-theme="industrial"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--hard-accent, #FFB400) 0 10px, var(--hard, #17191C) 10px 20px); }
.style-card__preview:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"])::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--fine-line, rgba(184, 145, 79, .5)); pointer-events: none; }
.style-card__preview:is([data-theme="sky"], [data-theme="coastal"], [data-theme="sunny"])::before { content: ""; position: absolute; right: -10%; bottom: -30%; width: 70%; aspect-ratio: 2; background: #fff; border-radius: 50%; box-shadow: -60px 10px 0 -8px #fff, 40px -10px 0 -18px rgba(255, 255, 255, .8); opacity: .9; }
.style-card__preview:is([data-theme="bold"], [data-theme="neon"])::before { content: ""; position: absolute; right: -10%; top: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 255, 60, .45), transparent); }
.style-card__preview:is([data-theme="salon"], [data-theme="blush"]) .sp__title { font-style: italic; }
.sp__swatches { position: absolute; top: 12px; right: 12px; display: flex; }
.sp__swatches i { width: 18px; height: 18px; margin-left: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.sp__swatches .sw-1 { background: var(--primary); }
.sp__swatches .sw-2 { background: var(--accent); }
.sp__swatches .sw-3 { background: var(--accent-2); }
.sp__swatches .sw-4 { background: var(--bg); }
.style-card__body { display: grid; gap: 4px; padding: 0 6px; }
.style-card__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.style-card__badge { padding: .15em .6em; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--feature-accent) 22%, transparent); color: var(--feature-accent); }
.style-card__for { color: var(--feature-ink-soft); font-size: .95rem; line-height: 1.5; }
.style-card__feel { font-size: .82rem; font-weight: 600; color: var(--feature-accent); letter-spacing: .02em; }
.style-card__check {
  position: absolute; top: 20px; left: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--feature-accent); color: var(--feature-bg); transform: scale(0); transition: transform .4s var(--ease);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .5);
}
.style-card__check .icon { width: 17px; height: 17px; stroke-width: 3.2; }
.style-card:has(input:checked) .style-card__check { transform: scale(1); }
@media (min-width: 620px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

.styles__footer { display: grid; justify-items: center; gap: 18px; margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.styles__now { margin: 0; font-size: 1.05rem; color: var(--feature-ink-soft); }
.styles__now strong { color: var(--feature-ink); }
.styles__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.styles__tip { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; color: var(--feature-ink-soft); }

/* ---------- 11. SEE YOUR BUSINESS ON IT --------------------------------- */

.preview { display: grid; gap: 28px; align-items: start; }
.preview__controls { padding: 26px 22px; display: grid; gap: 22px; }
.preview__controls:hover { transform: none; }
.field { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 700; font-size: .98rem; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; font-size: 1.05rem;
  color: var(--ink); background: var(--input-bg);
  border: 1.5px solid var(--input-border); border-radius: var(--radius-input);
  transition: border-color .2s, box-shadow .2s, background-color .4s;
  -webkit-appearance: none; appearance: none;
}
:is([data-theme="trades"], [data-theme="industrial"]) .field input, :is([data-theme="trades"], [data-theme="industrial"]) .field select, :is([data-theme="trades"], [data-theme="industrial"]) .field textarea { border-width: 2px; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 80%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent);
}
.select { position: relative; }
.select select { padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg);
}
.mini-styles { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-styles label { position: relative; cursor: pointer; border-radius: 50%; }
.mini-dot, .style-opt__dot, .style-fab__swatch {
  display: block; width: 42px; height: 42px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .3s var(--ease), box-shadow .3s;
}
.mini-styles label:hover .mini-dot { transform: scale(1.08); }
.mini-styles input:checked + .mini-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--ink); }
.mini-styles input:focus-visible + .mini-dot { outline: 3px solid var(--focus); outline-offset: 6px; }
.mini-styles__name { margin: 2px 0 0; font-size: .9rem; color: var(--ink-soft); }
.suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.suggest[hidden] { display: none; }
.suggest p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.suggest .icon { color: var(--accent-ink); margin-top: 1px; }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.privacy-note .icon { margin-top: 2px; color: var(--accent-ink); }

.preview__stage { display: grid; gap: 18px; justify-items: center; min-width: 0; }
.device-toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
:is([data-theme="trades"], [data-theme="industrial"]) .device-toggle, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .device-toggle { border-radius: 0; }
.device-toggle__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: .92rem;
  transition: background-color .3s, color .3s;
}
:is([data-theme="trades"], [data-theme="industrial"]) .device-toggle__btn, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .device-toggle__btn { border-radius: 0; }
.device-toggle__btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.preview__frame { width: 100%; display: grid; justify-items: center; }
.browser--preview { width: 100%; transition: width .7s var(--ease-soft), border-radius .7s var(--ease-soft), border-width .7s; }
.preview__frame[data-device="phone"] .browser--preview {
  width: min(360px, 100%); border-radius: 38px; border: 10px solid #121216; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.preview__frame[data-device="phone"] .browser__dots { display: none; }
.preview__cta { display: grid; justify-items: center; width: 100%; }
.preview__cta .btn { max-width: 100%; white-space: normal; }
@media (min-width: 1000px) {
  .preview { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }
  .preview__controls { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- 12. WHO IT'S FOR ------------------------------------------- */

.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.biz {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow);
  font-weight: 700; line-height: 1.3;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.biz .icon-tile { width: 44px; height: 44px; }
.biz .icon-tile .icon { width: 21px; height: 21px; }
.biz:hover .icon-tile { transform: rotate(-10deg) scale(1.1); }
.local {
  display: grid; gap: 18px; margin-top: clamp(32px, 4vw, 48px); padding: 22px;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
  overflow: hidden;
}
.local__head { display: flex; align-items: center; gap: 14px; }
.local__head p { margin: 0; font-size: 1.05rem; }
.icon-tile--accent { background: var(--primary); color: var(--on-primary); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 10px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--surface-2); font-weight: 600; font-size: .95rem; white-space: nowrap;
}
.marquee__track li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
:is([data-theme="trades"], [data-theme="industrial"]) .marquee__track li, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .marquee__track li { border-radius: 0; }
@media (min-width: 900px) { .local { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 18px 22px; } .local__head { max-width: 340px; } }

/* ---------- 12b. PRICES ------------------------------------------------- */

.paying { padding: clamp(24px, 4vw, 40px); }
.paying:hover, .addons:hover, .referral:hover { transform: none; }
.paying__title { margin-bottom: 1em; }
.paying__steps { display: grid; gap: 14px; counter-reset: pay; }
.paying__steps li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 16px; border-radius: var(--radius); background: var(--surface-2); }
.paying__steps strong { font-size: 1.08rem; line-height: 1.3; }
.paying__steps p { grid-column: 2; margin: 2px 0 0; color: var(--ink-soft); line-height: 1.5; }
.paying__num {
  grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1;
}
:is([data-theme="trades"], [data-theme="industrial"]) .paying__num, :is([data-theme="trades"], [data-theme="industrial"]) .paying__steps li { border-radius: 0; }
:is([data-theme="trades"], [data-theme="industrial"]) .paying__steps li { border: 2px solid var(--hard, #17191C); }
:is([data-theme="trades"], [data-theme="industrial"]) .paying__num { border: 2px solid var(--hard, #17191C); }
.paying__note { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 14px; font-weight: 600; font-size: 1.05rem; }
.paying__note .icon { color: var(--accent-ink); margin-top: 3px; }
.paying__own { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.paying__fine { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .95rem; color: var(--ink-soft); }
.paying__own li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .95rem; }
.paying__own .icon { width: 18px; height: 18px; stroke-width: 2.6; color: var(--accent-ink); }
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .paying__own li, :is([data-theme="trades"], [data-theme="industrial"]) .paying__own li { border-radius: 0; }
@media (min-width: 820px) { .paying__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.price-group { margin-top: clamp(40px, 6vw, 72px); }
.price-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.price-group__head .price-group__title { margin: 0; }
.price-group__title {
  margin: 0 0 20px; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  letter-spacing: calc(var(--display-tracking) * .7); font-size: calc(clamp(1.5rem, 1.2rem + 1vw, 2rem) * var(--display-scale)); line-height: 1.1;
}
.price-group__note { margin: 0; color: var(--ink-soft); font-weight: 600; }

.price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; color: var(--ink); }
.price__num { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: calc(var(--display-tracking) * .6); font-size: calc(1.9rem * min(var(--display-scale), 1.2)); line-height: 1.1; }
.price__word { color: var(--ink-soft); font-weight: 600; font-size: 1rem; }
[data-theme="sky"] .price__num { font-weight: 800; }

.price-grid { display: grid; gap: 18px; }
.price-card { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; }
.price-card:hover { transform: var(--card-hover-move); box-shadow: var(--card-shadow-hover); }
.price-card:hover .icon-tile { transform: rotate(-8deg) scale(1.08); }
.price-card__name { font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.price-card__sub { display: block; font-weight: 500; font-size: .95rem; color: var(--ink-soft); }
.price-card .price { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.price-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--accent-ink); text-decoration: none; width: fit-content; border-radius: 4px; }
:is([data-theme="bold"], [data-theme="neon"]) .price-card__link { color: var(--primary); }
.price-card__link .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.price-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.price-card__link:hover .icon { transform: translateX(4px); }
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bundle {
  --ink: var(--feature-ink); --ink-soft: var(--feature-ink-soft); --line: var(--feature-line);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 24px; align-items: center; margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-lg);
  background: var(--feature-bg-image), var(--feature-bg); color: var(--ink);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .55);
}
:is([data-theme="trades"], [data-theme="industrial"]) .bundle { border: 3px solid #000; box-shadow: 10px 10px 0 var(--hard-accent, #FFB400); }
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .bundle { outline: 1px solid var(--fine-line, rgba(220, 195, 147, .45)); outline-offset: -10px; }
.bundle__glow { position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; right: -120px; top: -160px; border-radius: 50%; background: var(--feature-accent); opacity: .18; filter: blur(70px); }
.bundle__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, var(--feature-accent) 20%, transparent); color: var(--feature-accent); }
:is([data-theme="trades"], [data-theme="industrial"]) .bundle__tag { border-radius: 0; background: var(--hard-accent, #FFB400); color: var(--hard, #17191C); }
.bundle__tag .icon { width: 16px; height: 16px; }
.bundle__name { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); font-size: calc(clamp(2rem, 1.5rem + 2vw, 3rem) * var(--display-scale)); line-height: 1.05; margin-bottom: .35em; }
.bundle__text { margin: 0; color: var(--ink-soft); font-size: 1.1rem; max-width: 520px; }
.bundle__side { display: grid; gap: 16px; justify-items: start; }
.bundle .price__num { font-size: calc(2.6rem * min(var(--display-scale), 1.2)); color: var(--feature-ink); }
.bundle .btn--primary { --primary: var(--hero-btn-bg); --on-primary: var(--hero-btn-ink); --primary-hover: var(--hero-btn-hover); }
[data-theme="classic"] .bundle .btn--primary { --primary: #DCC393; --on-primary: #1D1912; --primary-hover: #EAD7AE; }
[data-theme="salon"] .bundle .btn--primary { --primary: #F2B8BE; --on-primary: #161113; --primary-hover: #F8D0D3; }
[data-theme="warm"] .bundle .btn--primary { --primary: #F0B85A; --on-primary: #3A2A1F; --primary-hover: #F5C877; --btn-shadow: 0 5px 0 #A76F17; --btn-shadow-hover: 0 8px 0 #A76F17; }
:is([data-theme="trades"], [data-theme="industrial"]) .bundle .btn--primary { --btn-shadow: 5px 5px 0 #000; --_bd: #000; }
@media (min-width: 860px) { .bundle { grid-template-columns: minmax(0, 1fr) auto; } .bundle__side { justify-items: end; text-align: right; } }

.plans { display: grid; gap: 18px; }
.plan { padding: 26px 26px 28px; }
.plan:hover { transform: var(--card-hover-move); box-shadow: var(--card-shadow-hover); }
.plan__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.plan__name { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: calc(var(--display-tracking) * .6); font-size: calc(1.4rem * min(var(--display-scale), 1.25)); line-height: 1.1; }
[data-theme="sky"] .plan__name { font-weight: 700; }
.plan .price { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--line); }
.price--plan .price__word { margin-left: -.3em; }
.plan__list { display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.plan__list .icon { width: 20px; height: 20px; margin-top: 2px; stroke-width: 2.6; color: var(--accent-ink); flex: none; }
:is([data-theme="bold"], [data-theme="neon"]) .plan__list .icon { color: var(--primary); }
.plan--plus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--card-shadow); }
:is([data-theme="trades"], [data-theme="industrial"]) .plan--plus { border-color: var(--hard, #17191C); box-shadow: 6px 6px 0 var(--hard-accent, #FFB400), 6px 6px 0 2px var(--hard, #17191C); }
.plan--plus .icon-tile { background: var(--primary); color: var(--on-primary); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.addons { display: grid; padding: 8px clamp(14px, 3vw, 28px); }
.addon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.addon:last-child { border-bottom: 0; }
.addon__icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--icon-radius); background: var(--icon-tile-bg); color: var(--icon-tile-ink); }
:is([data-theme="trades"], [data-theme="industrial"]) .addon__icon { border: 2px solid var(--hard, #17191C); }
.addon__icon .icon { width: 20px; height: 20px; }
.addon__name { font-weight: 600; line-height: 1.4; }
.addon__for { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: .8rem; font-weight: 700; vertical-align: 2px; }
:is([data-theme="trades"], [data-theme="industrial"]) .addon__for, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .addon__for { border-radius: 0; }
.addon__price { font-weight: 800; color: var(--ink); }
.addon__price small { display: block; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
@media (min-width: 720px) {
  .addon { grid-template-columns: auto minmax(0, 1fr) auto; }
  .addon__icon { grid-row: auto; }
  .addon__price { text-align: right; max-width: 230px; }
}

.referral { display: flex; align-items: center; gap: 18px; margin-top: clamp(28px, 4vw, 40px); padding: 22px 24px; }
.referral p { margin: 2px 0 0; color: var(--ink-soft); font-size: 1.05rem; }
.referral__title { font-weight: 700; font-size: 1.15rem; }

/* ---------- 13. ABOUT --------------------------------------------------- */

.about { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; }
.about__art { display: grid; place-items: center; padding: 24px; overflow: hidden; }
.about__orb {
  position: relative; display: grid; place-items: center; width: min(100%, 440px); aspect-ratio: 1;
  border-radius: 50%; background: var(--hero-bg); overflow: visible;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line);
}
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .about__orb { border-radius: 50% 50% 0 0; }
:is([data-theme="trades"], [data-theme="industrial"]) .about__orb { border-radius: 0; border: 3px solid var(--hard, #17191C); box-shadow: 14px 14px 0 var(--hard, #17191C); }
:is([data-theme="warm"], [data-theme="fresh"], [data-theme="prairie"]) .about__orb { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; animation: morph 18s ease-in-out infinite alternate; }
.about__orb::before {
  content: ""; position: absolute; inset: -14px; border-radius: inherit; border: 1.5px dashed var(--accent); opacity: .45;
  animation: spin 40s linear infinite;
}
:is([data-theme="trades"], [data-theme="industrial"]) .about__orb::before, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .about__orb::before { animation: none; }
.about__mark {
  width: 50%; height: auto; padding: 5%; border-radius: 26%; background: var(--surface);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
  animation: floaty 6s ease-in-out infinite alternate;
}
:is([data-theme="trades"], [data-theme="industrial"]) .about__mark { border-radius: 0; border: 3px solid var(--hard, #17191C); box-shadow: 8px 8px 0 var(--hard, #17191C); }
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .about__mark { border-radius: 4px; border: 1px solid var(--fine-line, rgba(184, 145, 79, .5)); }
.about__pin {
  position: absolute; bottom: 10%; right: 2%; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: .92rem; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4);
}
:is([data-theme="trades"], [data-theme="industrial"]) .about__pin, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .about__pin { border-radius: 0; }
:is([data-theme="trades"], [data-theme="industrial"]) .about__pin { border: 2px solid var(--hard, #17191C); box-shadow: 4px 4px 0 var(--hard, #17191C); }
.about__pin .icon { color: var(--accent-ink); width: 18px; height: 18px; }
.about__copy p:not(.eyebrow):not(.signature) { color: var(--ink-soft); font-size: 1.08rem; }
.about__copy .h2 { margin-bottom: .6em; }
.signature {
  margin: .2em 0 1.2em; font-family: var(--font-accent); font-style: var(--accent-style); font-weight: var(--accent-weight);
  font-size: calc(2.4rem * var(--sig-scale, 1)); line-height: 1; color: var(--accent-ink);
}
.signature::before { content: "— "; font-family: var(--font-body); font-style: normal; font-size: .6em; vertical-align: middle; opacity: .6; }
:is([data-theme="salon"], [data-theme="blush"]) { --sig-scale: 1.3; }
:is([data-theme="trades"], [data-theme="industrial"]) .signature { color: var(--ink); }
:is([data-theme="trades"], [data-theme="industrial"]) { --sig-scale: 1.2; }
.values { display: flex; flex-wrap: wrap; gap: 10px; }
.values li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .93rem; }
:is([data-theme="trades"], [data-theme="industrial"]) .values li, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .values li { border-radius: 0; }
.values .icon { color: var(--accent-ink); width: 18px; height: 18px; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ---------- 14. FAQ ----------------------------------------------------- */

.faq { display: grid; gap: 12px; }
.faq .section-head { margin-bottom: 24px; }
.faq__item {
  margin-bottom: 12px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius);
  box-shadow: var(--card-shadow); overflow: hidden; transition: box-shadow .3s, border-color .3s;
}
.faq__item[open] { box-shadow: var(--card-shadow-hover); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.1rem; line-height: 1.35;
  border-radius: var(--radius);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-ink); }
:is([data-theme="bold"], [data-theme="neon"]) .faq__item summary:hover { color: var(--primary); }
.faq__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); transition: transform .4s var(--ease), background-color .3s, color .3s; }
:is([data-theme="trades"], [data-theme="industrial"]) .faq__icon, :is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .faq__icon { border-radius: 0; }
.faq__icon .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.faq__item[open] .faq__icon { transform: rotate(135deg); background: var(--primary); color: var(--on-primary); }
.faq__answer { padding: 0 22px 22px; }
.faq__answer p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-soft), content-visibility .45s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@media (min-width: 960px) {
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .faq .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ---------- 15. CONTACT ------------------------------------------------- */

.contact { display: grid; gap: 24px; align-items: start; }
.contact__form-wrap { padding: clamp(22px, 4vw, 40px); }
.contact__form-wrap:hover { transform: none; }
.contact-form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px; }
.req { color: var(--danger); }
.optional { font-weight: 500; color: var(--ink-soft); font-size: .9em; }
.field__hint { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.field__error { margin: 0; font-size: .9rem; font-weight: 600; color: var(--danger); }
.field__error:empty { display: none; }
.field.is-invalid input { border-color: var(--danger); }
/* "Something else" follow-up boxes: always in the HTML (for Netlify Forms), revealed by script */
.reveal-field { display: grid; grid-template-rows: 1fr; align-self: start; }
.reveal-field__inner { display: grid; gap: 8px; min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
.js .reveal-field:not(.is-open) .reveal-field__inner { padding-block: 0; margin-block: 0; }
.js .reveal-field .reveal-field__inner { transition: padding .45s var(--ease-soft), margin .45s var(--ease-soft); }
.reveal-field__inner > label { font-weight: 700; font-size: .98rem; padding-top: 6px; }
.reveal-field__inner.is-invalid input { border-color: var(--danger); }
.js .reveal-field {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: -8px;
  transition: grid-template-rows .45s var(--ease-soft), opacity .3s ease, margin-top .45s var(--ease-soft), visibility 0s linear .45s;
}
.js .reveal-field.is-open {
  grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 0;
  transition: grid-template-rows .45s var(--ease-soft), opacity .35s ease .1s, margin-top .45s var(--ease-soft), visibility 0s;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-weight: 600; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--danger); }
.form-fineprint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--ink-soft); text-align: center; }
.form-fineprint .icon { width: 16px; height: 16px; }
.contact-form .btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.contact-form .btn[aria-busy="true"] .btn__arrow { animation: fly 1s var(--ease-soft) infinite; }
.form-success { display: grid; justify-items: center; text-align: center; padding: clamp(20px, 5vw, 48px) 8px; outline: none; }
.form-success[hidden] { display: none; }
.form-success p { color: var(--ink-soft); max-width: 420px; }
.form-success__art { position: relative; width: 140px; height: 110px; margin-bottom: 12px; }
.form-success__art > svg { width: 140px; fill: var(--accent-2); animation: floaty 4s ease-in-out infinite alternate; }
.form-success__check {
  position: absolute; right: 8px; bottom: 6px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 6px var(--card-bg);
  animation: pop .7s var(--ease) .2s both;
}
.form-success__check .icon { width: 26px; height: 26px; stroke-width: 3; }
.form-success__small { font-size: .95rem; }
.form-success__small a { color: var(--accent-ink); font-weight: 700; }

.contact__side { display: grid; gap: 14px; }
.contact-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; text-decoration: none;
  background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-card[hidden] { display: none; }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--icon-radius); background: var(--icon-tile-bg); color: var(--icon-tile-ink); }
.contact-card__icon .icon { width: 24px; height: 24px; }
.contact-card--fb .contact-card__icon { background: #1877F2; color: #fff; border-radius: 50%; }
.contact-card__text { display: grid; gap: 2px; min-width: 0; }
.contact-card__text strong { font-size: 1.08rem; }
.contact-card__text small { color: var(--ink-soft); font-size: .92rem; overflow-wrap: anywhere; }
.contact-card__arrow { margin-left: auto; transition: transform var(--dur) var(--ease); }
.contact-card:hover .contact-card__arrow { transform: translateX(5px); }
.next { padding: 24px 22px; }
.next:hover { transform: none; }
.next__list { display: grid; gap: 14px; }
.next__list li { display: flex; gap: 14px; align-items: flex-start; }
.next__list span {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--accent-ink); font-weight: 800; font-size: .9rem;
}
:is([data-theme="trades"], [data-theme="industrial"]) .next__list span { border-radius: 0; background: var(--hard-accent, #FFB400); color: var(--hard, #17191C); }
.next__list p { margin: 3px 0 0; color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 32px; } .contact__side { position: sticky; top: calc(var(--header-h) + 24px); } }

/* ---------- 16. FOOTER -------------------------------------------------- */

.site-footer {
  --ink: var(--feature-ink); --ink-soft: var(--feature-ink-soft); --line: var(--feature-line);
  background: var(--feature-bg-image), var(--feature-bg); color: var(--ink);
  padding: clamp(56px, 7vw, 88px) 0 calc(96px + env(safe-area-inset-bottom));
}
.footer__inner { display: grid; gap: 36px; }
.site-footer { --logo-frame: var(--feature-ink); }
.footer__brand p { margin: 16px 0 0; color: var(--ink-soft); max-width: 340px; }
.brand--footer .brand__mark { width: 46px; height: 46px; }
.brand--footer .brand__sky { color: var(--feature-accent); }
.footer__nav { display: grid; gap: 4px; align-content: start; }
.footer__nav a { padding: 6px 0; color: var(--ink-soft); text-decoration: none; font-weight: 600; transition: color .2s; width: fit-content; }
.footer__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__contact { display: grid; gap: 16px; align-content: start; justify-items: start; }
.footer__contact .btn--primary { --primary: var(--hero-btn-bg); --on-primary: var(--hero-btn-ink); --primary-hover: var(--hero-btn-hover); }
[data-theme="classic"] .footer__contact .btn--primary { --primary: #DCC393; --on-primary: #1D1912; --primary-hover: #EAD7AE; }
[data-theme="salon"] .footer__contact .btn--primary { --primary: #F2B8BE; --on-primary: #161113; --primary-hover: #F8D0D3; }
[data-theme="warm"] .footer__contact .btn--primary { --primary: #F0B85A; --on-primary: #3A2A1F; --primary-hover: #F5C877; --btn-shadow: 0 5px 0 #A76F17; --btn-shadow-hover: 0 8px 0 #A76F17; }
:is([data-theme="trades"], [data-theme="industrial"]) .footer__contact .btn--primary { --btn-shadow: 5px 5px 0 #000; --_bd: #000; }
.footer__fb { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.footer__fb:hover { color: var(--ink); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; font-size: .9rem; color: var(--ink-soft); }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.footer__bottom p { margin: 0; }
@media (min-width: 800px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- 17. FLOATING STYLE SWITCHER --------------------------------- */

.style-fab { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.style-fab__btn {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 7px 7px 7px;
  border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-btn); font-weight: 700; font-size: .98rem; letter-spacing: 0; text-transform: none;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: transform .35s var(--ease), box-shadow .35s;
}
:is([data-theme="classic"], [data-theme="noir"], [data-theme="farmhouse"], [data-theme="mono"]) .style-fab__btn { border-radius: 2px; }
:is([data-theme="trades"], [data-theme="industrial"]) .style-fab__btn { border-radius: 2px; border: 2px solid var(--hard, #17191C); box-shadow: 5px 5px 0 var(--hard, #17191C); }
.style-fab__btn:hover { transform: translateY(-3px); }
.style-fab__swatch { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); transition: transform .8s var(--ease); }
.style-fab__btn:hover .style-fab__swatch { transform: rotate(180deg); }
.style-fab__label { padding-right: 12px; }
.style-fab.is-nudging .style-fab__btn { animation: nudge 1.2s var(--ease-soft) 2; }
@media (max-width: 560px) {
  .style-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .style-fab__btn { padding: 6px; }
}
.style-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 32px));
  max-height: calc(100svh - 120px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; border-radius: max(var(--radius-lg), 6px); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  transform-origin: 100% 100%; transform: translateY(10px) scale(.94); opacity: 0;
  transition: transform .35s var(--ease), opacity .25s;
}
:is([data-theme="trades"], [data-theme="industrial"]) .style-panel { border: 2px solid var(--hard, #17191C); box-shadow: 8px 8px 0 var(--hard, #17191C); }
.style-panel.is-open { transform: none; opacity: 1; }
.style-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px 8px; }
.style-panel__title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: calc(var(--display-tracking) * .5); font-size: calc(1.15rem * min(var(--display-scale), 1.2)); }
.style-panel__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.style-panel__list { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.style-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius); cursor: pointer; transition: background-color .2s; }
.style-opt:hover { background: var(--surface-2); }
.style-opt input { position: absolute; opacity: 0; pointer-events: none; }
.style-opt__dot { width: 38px; height: 38px; flex: none; }
.style-opt input:checked ~ .style-opt__dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.style-opt:has(input:checked) { background: var(--surface-2); }
.style-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.style-opt__text { display: grid; line-height: 1.3; }
.style-opt__text strong { font-size: .98rem; }
.style-opt__text small { font-size: .82rem; color: var(--ink-soft); }
.style-panel__surprise {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 10px;
  border: 1.5px dashed var(--input-border); border-radius: var(--radius); background: transparent; color: var(--ink); font-weight: 700;
  transition: background-color .2s, border-color .2s;
}
.style-panel__surprise:hover { background: var(--surface-2); border-color: var(--ink); }

/* ---------- 18. MOTION --------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-scale)) rotate(var(--rv-rot));
  filter: blur(var(--rv-blur));
  transition:
    opacity var(--rv-dur) var(--rv-ease) calc(var(--i, 0) * var(--rv-stagger)),
    transform var(--rv-dur) var(--rv-ease) calc(var(--i, 0) * var(--rv-stagger)),
    filter var(--rv-dur) var(--rv-ease) calc(var(--i, 0) * var(--rv-stagger));
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* hero entrance */
.js .hero__title .w > span { transform: translateY(110%); }
.js .hero__eyebrow, .js .hero__lead, .js .hero__actions, .js .hero__promises, .js .hero__visual { opacity: 0; transform: translateY(18px); }
.hero.is-loaded .hero__title .w > span { transform: none; transition: transform 1.1s var(--rv-ease) calc(var(--wi) * 70ms); }
.hero.is-loaded .hero__eyebrow, .hero.is-loaded .hero__lead, .hero.is-loaded .hero__actions, .hero.is-loaded .hero__promises, .hero.is-loaded .hero__visual {
  opacity: 1; transform: none; transition: opacity 1s var(--rv-ease), transform 1s var(--rv-ease);
}
.hero.is-loaded .hero__lead { transition-delay: .3s; }
.hero.is-loaded .hero__actions { transition-delay: .42s; }
.hero.is-loaded .hero__promises { transition-delay: .54s; }
.hero.is-loaded .hero__visual { transition-delay: .35s; transition-duration: 1.4s; }
.hero__title em { background-position: 0 0; animation: sheen 6s ease-in-out infinite; }

@keyframes drift { from { transform: translateX(-4vw); } to { transform: translateX(6vw); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes floaty { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
@keyframes morph { 0% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; } 50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; } 100% { border-radius: 48% 52% 55% 45% / 40% 55% 45% 60%; } }
@keyframes stripes { to { background-position: 68px 0; } }
@keyframes gridmove { to { background-position: 0 64px; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes marquee-old { from { text-indent: 100%; } to { text-indent: -100%; } }
@keyframes sideways { from { transform: translateX(0); } to { transform: translateX(-110px); } }
@keyframes typing { 0% { width: 0; } 45%, 80% { width: 11.5em; } 100% { width: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 1; } 60% { transform: translate(12px, -12px); opacity: 0; } 61% { transform: translate(-12px, 12px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-3deg); } 40% { transform: translateY(0) rotate(2deg); } 60% { transform: translateY(-3px) rotate(-1deg); } }

/* style switch: smooth color fallback when View Transitions aren't supported */
.theme-fading, .theme-fading *, .theme-fading *::before, .theme-fading *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, stroke .6s ease, box-shadow .6s ease, border-radius .6s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---------- 18b. 20 STYLES: filters, show all, grouped lists ------------ */

.style-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto clamp(22px, 3vw, 32px); max-width: 1040px; }
.style-filter {
  min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--feature-line);
  background: transparent; color: var(--feature-ink); font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background-color .25s, border-color .25s, color .25s;
}
.style-filter:hover { border-color: var(--feature-accent); }
.style-filter[aria-pressed="true"] { background: var(--feature-accent); border-color: var(--feature-accent); color: var(--feature-bg); }
.style-filter:focus-visible { outline: 3px solid var(--feature-accent); outline-offset: 3px; }
.style-card.is-out { display: none; }
.style-card.is-entering { animation: card-in .6s var(--ease) both; }
.style-more { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 32px); }
.style-more[hidden] { display: none; }
.section--feature .style-more__btn { color: var(--feature-ink); border-color: var(--feature-line); }
.section--feature .style-more__btn:hover { border-color: var(--feature-accent); }
.style-more__btn .icon { transform: rotate(90deg); transition: transform .3s var(--ease); }
.style-more__btn[aria-expanded="true"] .icon { transform: rotate(-90deg); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.style-panel__group { margin: 10px 8px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.style-panel__group:first-of-type { margin-top: 0; }

.mini-styles { display: grid; gap: 10px; container-type: inline-size; }
.mini-styles__row { display: grid; gap: 6px; min-width: 0; }
.mini-styles__label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.mini-styles__dots { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-styles .mini-dot { width: 38px; height: 38px; }
@container (min-width: 360px) {
  .mini-styles__row { grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; }
}
@container (min-width: 480px) { .mini-styles__row { grid-template-columns: 12em minmax(0, 1fr); } }
.mini-styles__name { font-weight: 700; color: var(--ink); }
.mini-styles__name::before { content: "Selected: "; font-weight: 400; color: var(--ink-soft); }

/* new hero backdrops */
.deco--leaves span {
  position: absolute; width: clamp(60px, 9vw, 130px); aspect-ratio: 1; border-radius: 0 100% 0 100%;
  background: var(--leaf, rgba(140, 193, 82, .32)); animation: sway 9s ease-in-out infinite alternate; transform-origin: 0 100%;
}
.deco--leaves span:nth-child(1) { left: 4%; top: 18%; rotate: -20deg; }
.deco--leaves span:nth-child(2) { right: 6%; top: 12%; rotate: 35deg; width: clamp(80px, 12vw, 170px); animation-delay: -3s; }
.deco--leaves span:nth-child(3) { right: 28%; bottom: 10%; rotate: 70deg; background: rgba(242, 193, 78, .3); animation-delay: -6s; }
.deco--leaves span:nth-child(4) { left: 36%; top: 6%; rotate: 10deg; width: clamp(40px, 5vw, 70px); animation-delay: -2s; }
.deco--leaves span:nth-child(5) { left: -2%; bottom: 8%; rotate: 120deg; width: clamp(90px, 13vw, 190px); background: rgba(47, 107, 47, .14); animation-delay: -5s; }
.deco--checker span {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: repeating-conic-gradient(#FFFFFF 0 25%, #2B1B1E 0 50%) 0 0 / 36px 36px; opacity: .9;
}
.deco--checker::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 60px, transparent 60px 120px);
}
.deco--plaid {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 40px, transparent 40px 80px),
    repeating-linear-gradient(90deg, rgba(181, 69, 43, .16) 0 40px, transparent 40px 80px);
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, #000 95%);
  mask-image: linear-gradient(115deg, transparent 45%, #000 95%);
}
.deco--pines svg, .deco--hills svg { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(80px, 13vw, 190px); }
.pines__back { fill: #2D4A34; opacity: .55; }
.pines__front { fill: #0F1A13; }
.hills__back { fill: #C9B78A; opacity: .5; }
.hills__front { fill: var(--bg); }
.deco--dots {
  background-image: radial-gradient(var(--dot-color, rgba(14, 124, 123, .16)) 1.6px, transparent 1.8px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 100% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 100% 0%, #000 20%, transparent 75%);
}
.deco--dots::after {
  content: ""; position: absolute; width: min(520px, 80vw); aspect-ratio: 1; right: -12%; top: -18%; border-radius: 50%;
  border: 1px solid rgba(14, 124, 123, .18); box-shadow: 0 0 0 40px rgba(14, 124, 123, .03);
}
.deco--confetti i { position: absolute; width: 14px; height: 14px; border-radius: 50%; animation: floaty 6s ease-in-out infinite alternate; }
.deco--confetti i:nth-child(3n) { border-radius: 3px; rotate: 20deg; }
.deco--confetti i:nth-child(3n + 1) { width: 18px; height: 6px; border-radius: 3px; rotate: -30deg; }
.deco--confetti i:nth-child(1) { left: 6%; top: 18%; background: #FFC93C; }
.deco--confetti i:nth-child(2) { left: 18%; top: 72%; background: #FF4D6D; animation-delay: -1s; }
.deco--confetti i:nth-child(3) { left: 30%; top: 10%; background: #7EC8F5; animation-delay: -2s; }
.deco--confetti i:nth-child(4) { left: 48%; top: 84%; background: #FFC93C; animation-delay: -3s; }
.deco--confetti i:nth-child(5) { left: 58%; top: 16%; background: #FF4D6D; animation-delay: -4s; }
.deco--confetti i:nth-child(6) { left: 70%; top: 60%; background: #FFFFFF; animation-delay: -1.5s; }
.deco--confetti i:nth-child(7) { left: 84%; top: 22%; background: #FFC93C; animation-delay: -2.5s; }
.deco--confetti i:nth-child(8) { left: 92%; top: 78%; background: #7EC8F5; animation-delay: -3.5s; }
.deco--confetti i:nth-child(9) { left: 40%; top: 44%; background: #FFFFFF; opacity: .6; animation-delay: -4.5s; }
.deco--confetti i:nth-child(10) { left: 12%; top: 46%; background: #FF4D6D; animation-delay: -.5s; }
.deco--boards {
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5vw - 1px), rgba(28, 27, 26, .06) calc(12.5vw - 1px) 12.5vw);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
  mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.deco--lines span { position: absolute; background: rgba(10, 10, 10, .1); }
.deco--lines span:nth-child(1) { top: 0; bottom: 0; left: 33.333%; width: 1px; }
.deco--lines span:nth-child(2) { top: 0; bottom: 0; left: 66.666%; width: 1px; }
.deco--lines span:nth-child(3) { left: 0; right: 0; bottom: 18%; height: 1px; }
@media (max-width: 700px) {
  .deco--confetti i:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(9), :nth-child(10)) { display: none; }
  .deco--leaves span:is(:nth-child(3), :nth-child(4)) { display: none; }
}
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }

/* ---------- 19. REDUCED MOTION ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .hero__title .w > span,
  .js .hero__eyebrow, .js .hero__lead, .js .hero__actions, .js .hero__promises, .js .hero__visual { opacity: 1; transform: none; filter: none; }
  .cloud-layer { transform: none !important; }
  .hero__visual .browser { transform: none; }
  .marquee__track { flex-wrap: wrap; width: auto; }
  .marquee__track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .fakesearch__q { width: auto; border-right: 0; }
}

/* ---------- 20. PRINT --------------------------------------------------- */
@media print {
  .site-header, .style-fab, .hero__bg, .scroll-progress, .hero__scroll { display: none !important; }
  .hero { min-height: 0; color: #000; background: none; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Thank-you and 404 pages ------------------------------------ */
.simple-page { min-height: 100svh; padding: 48px 0; }
.simple-page__inner { display: grid; justify-items: start; gap: 8px; max-width: 760px; }
.simple-page .brand { margin-bottom: 40px; color: var(--hero-ink); }
.simple-page .hero__title { font-size: calc(clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem) * var(--display-scale)); }
.simple-page { padding-bottom: 48px; background: radial-gradient(60% 60% at 80% 10%, rgba(255, 214, 160, .18), transparent 70%), linear-gradient(180deg, #040C22 0%, #0A1D4A 45%, #1A4296 100%); }
.simple-page .hero__rays { opacity: .25; }
.simple-page .brand__sky { color: var(--brand-sky-hero, var(--accent)); }

/* ===== GENERATED STYLES: start (edit tools/themes.py, then run it) ===== */
[data-theme="sky"] { --font-preview: "WBSP sky"; }
[data-theme="classic"] { --font-preview: "WBSP classic"; }
[data-theme="salon"] { --font-preview: "WBSP salon"; }
[data-theme="trades"] { --font-preview: "WBSP trades"; }
[data-theme="warm"] { --font-preview: "WBSP warm"; }
[data-theme="bold"] { --font-preview: "WBSP bold"; }
[data-theme="coastal"] { --font-preview: "WBSP coastal"; }
[data-theme="fresh"] { --font-preview: "WBSP fresh"; }
[data-theme="diner"] { --font-preview: "WBSP diner"; }
[data-theme="lodge"] { --font-preview: "WBSP lodge"; }
[data-theme="clinical"] { --font-preview: "WBSP clinical"; }
[data-theme="noir"] { --font-preview: "WBSP noir"; }
[data-theme="pop"] { --font-preview: "WBSP pop"; }
[data-theme="farmhouse"] { --font-preview: "WBSP farmhouse"; }
[data-theme="industrial"] { --font-preview: "WBSP industrial"; }
[data-theme="blush"] { --font-preview: "WBSP blush"; }
[data-theme="neon"] { --font-preview: "WBSP neon"; }
[data-theme="mono"] { --font-preview: "WBSP mono"; }
[data-theme="sunny"] { --font-preview: "WBSP sunny"; }
[data-theme="prairie"] { --font-preview: "WBSP prairie"; }
[data-theme="coastal"] {
  --font-display: "Josefin Sans", "Avenir Next", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-accent: "Josefin Sans", system-ui, sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-leading: 1.04;
  --display-transform: none;
  --display-scale: 1;
  --h3-scale: 1;
  --accent-style: italic;
  --accent-weight: 300;
  --accent-size: 1em;
  --accent-tracking: -0.01em;
  --bg: #F6FAFA;
  --bg-alt: #EAF4F4;
  --surface: #FFFFFF;
  --surface-2: #E3F0F1;
  --ink: #17333B;
  --ink-soft: #46616A;
  --line: rgba(23, 51, 59, .1);
  --primary: #1F6F80;
  --on-primary: #FFFFFF;
  --primary-hover: #185C6B;
  --accent: #7FC3CF;
  --accent-2: #E9DCC3;
  --accent-ink: #1E6B7B;
  --focus: #2A8FA3;
  --danger: #B42318;
  --swatch: linear-gradient(135deg, #1F6F80 0 48%, #E9DCC3 48% 100%);
  --em-bg: linear-gradient(100deg, #1E6B7B, #3B8FA0 50%, #1E6B7B);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(55% 60% at 85% 15%, rgba(233, 220, 195, .75), transparent 70%), linear-gradient(180deg, #DDEFF2 0%, #EEF7F7 60%, #F6FAFA 100%);
  --hero-ink: #17333B;
  --hero-muted: #42606A;
  --hero-em-bg: linear-gradient(100deg, #1E6B7B, #3B8FA0 50%, #1E6B7B);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #1F6F80;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #185C6B;
  --hero-btn-shadow: 0 14px 30px -14px rgba(31, 111, 128, .55);
  --hero-line: rgba(23, 51, 59, .22);
  --glow: radial-gradient(closest-side, rgba(233, 220, 195, .8), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: .75;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 1;
  --feature-bg: #123A43;
  --feature-bg-image: radial-gradient(55% 60% at 10% 0%, rgba(127, 195, 207, .28), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(233, 220, 195, .16), transparent 70%);
  --feature-ink: #F2FAFA;
  --feature-ink-soft: #C0D8DC;
  --feature-line: rgba(255, 255, 255, .14);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #9ED6E0;
  --feature-em-bg: linear-gradient(100deg, #9ED6E0, #F2FAFA 50%, #9ED6E0);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --radius-input: 14px;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-transform: none;
  --btn-tracking: .02em;
  --btn-size: 1rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 10px 24px -12px rgba(31, 111, 128, .5);
  --btn-shadow-hover: 0 18px 34px -14px rgba(31, 111, 128, .55);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(31, 111, 128, .1);
  --card-shadow: 0 18px 40px -30px rgba(23, 51, 59, .35);
  --card-shadow-hover: 0 30px 60px -30px rgba(23, 51, 59, .4);
  --card-hover-move: translateY(-5px);
  --spot: rgba(127, 195, 207, .18);
  --icon-tile-bg: linear-gradient(135deg, #E3F2F4, #D2EAEE);
  --icon-tile-ink: #1E6B7B;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(23, 51, 59, .22);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .78rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .24em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #1E6B7B;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;
  --header-bg: rgba(246, 250, 250, .86);
  --space-scale: 1.1;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.25, .8, .25, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .6s;
  --rv-dur: 1.3s;
  --rv-ease: cubic-bezier(.22, .61, .36, 1);
  --rv-x: 0px;
  --rv-y: 20px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 4px;
  --rv-stagger: 120ms;
  --orb-1: rgba(127, 195, 207, .35);
  --orb-2: rgba(233, 220, 195, .7);
  --orb-3: rgba(180, 222, 214, .45);
}
[data-theme="fresh"] {
  --font-display: "Young Serif", Georgia, serif;
  --font-body: Figtree, system-ui, sans-serif;
  --font-accent: "Young Serif", Georgia, serif;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-leading: 1.06;
  --display-transform: none;
  --display-scale: 1;
  --h3-scale: 1;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: -0.015em;
  --bg: #FBFAF3;
  --bg-alt: #F1F3E4;
  --surface: #FFFFFF;
  --surface-2: #EAF0DA;
  --ink: #1E2F1E;
  --ink-soft: #4A5C46;
  --line: rgba(30, 47, 30, .12);
  --primary: #2F6B2F;
  --on-primary: #FFFFFF;
  --primary-hover: #265826;
  --accent: #8CC152;
  --accent-2: #F2C14E;
  --accent-ink: #2F6B2F;
  --focus: #3F8A2A;
  --danger: #B42318;
  --swatch: linear-gradient(135deg, #2F6B2F 0 40%, #8CC152 40% 70%, #F2C14E 70% 100%);
  --em-bg: linear-gradient(#3A7A2A, #3A7A2A);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(45% 55% at 88% 12%, rgba(242, 193, 78, .35), transparent 70%), radial-gradient(50% 60% at 0% 90%, rgba(140, 193, 82, .25), transparent 70%), linear-gradient(180deg, #F3F6E6 0%, #FBFAF3 100%);
  --hero-ink: #1E2F1E;
  --hero-muted: #495B45;
  --hero-em-bg: linear-gradient(#3A7A2A, #3A7A2A);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #2F6B2F;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #265826;
  --hero-btn-shadow: 0 14px 28px -14px rgba(47, 107, 47, .6);
  --hero-line: rgba(30, 47, 30, .25);
  --glow: radial-gradient(closest-side, rgba(242, 193, 78, .45), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #1F3A1F;
  --feature-bg-image: radial-gradient(50% 55% at 90% 0%, rgba(140, 193, 82, .25), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(242, 193, 78, .14), transparent 70%);
  --feature-ink: #F4F8EA;
  --feature-ink-soft: #C9D6BD;
  --feature-line: rgba(244, 248, 234, .15);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #B5DB7A;
  --feature-em-bg: linear-gradient(#B5DB7A, #B5DB7A);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 34px;
  --radius-input: 16px;
  --btn-radius: 999px;
  --btn-weight: 700;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-size: 1.02rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 12px 26px -14px rgba(47, 107, 47, .6);
  --btn-shadow-hover: 0 18px 34px -14px rgba(47, 107, 47, .6);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(47, 107, 47, .12);
  --card-shadow: 0 16px 36px -28px rgba(30, 47, 30, .4);
  --card-shadow-hover: 0 28px 50px -28px rgba(30, 47, 30, .45);
  --card-hover-move: translateY(-6px) rotate(.4deg);
  --spot: rgba(140, 193, 82, .16);
  --icon-tile-bg: #E4EFCF;
  --icon-tile-ink: #2F6B2F;
  --icon-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  --input-bg: #FFFFFF;
  --input-border: rgba(30, 47, 30, .22);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .8rem;
  --eyebrow-weight: 800;
  --eyebrow-tracking: .1em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #2A5E2A;
  --eyebrow-bg: #E4EFCF;
  --eyebrow-pad: .45em 1em;
  --eyebrow-radius: 999px;
  --eyebrow-dot: 0;
  --header-bg: rgba(251, 250, 243, .9);
  --space-scale: 1;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.34, 1.3, .64, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .5s;
  --rv-dur: .9s;
  --rv-ease: cubic-bezier(.34, 1.3, .64, 1);
  --rv-x: 0px;
  --rv-y: 26px;
  --rv-scale: .96;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 90ms;
  --blob-1: rgba(140, 193, 82, .3);
  --blob-2: rgba(242, 193, 78, .3);
  --blob-3: rgba(47, 107, 47, .14);
}
[data-theme="diner"] {
  --font-display: Lobster, "Brush Script MT", cursive;
  --font-body: Rubik, system-ui, sans-serif;
  --font-accent: Lobster, cursive;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: 0;
  --display-leading: 1.08;
  --display-transform: none;
  --display-scale: 1.02;
  --h3-scale: 1.1;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: 0;
  --bg: #FFF8F0;
  --bg-alt: #E6F6F1;
  --surface: #FFFFFF;
  --surface-2: #DDF3EC;
  --ink: #2B1B1E;
  --ink-soft: #5C484A;
  --line: rgba(43, 27, 30, .14);
  --primary: #C8102E;
  --on-primary: #FFFFFF;
  --primary-hover: #A50D26;
  --accent: #7FD8C3;
  --accent-2: #C7CED6;
  --accent-ink: #B10E29;
  --focus: #C8102E;
  --danger: #A50D26;
  --swatch: linear-gradient(135deg, #C8102E 0 40%, #7FD8C3 40% 70%, #C7CED6 70% 100%);
  --em-bg: linear-gradient(#C8102E, #C8102E);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(60% 60% at 80% 20%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, #C8102E 0%, #B00E28 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: #FFE3E6;
  --hero-em-bg: linear-gradient(#9FF0DD, #9FF0DD);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #FFFFFF;
  --hero-btn-ink: #B10E29;
  --hero-btn-hover: #FFF0F2;
  --hero-btn-shadow: 4px 4px 0 #5E0614;
  --hero-line: rgba(255, 255, 255, .45);
  --glow: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent);
  --stars-opacity: .55;
  --rays-opacity: .35;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #2B1B1E;
  --feature-bg-image: radial-gradient(45% 55% at 90% 0%, rgba(127, 216, 195, .2), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(200, 16, 46, .28), transparent 70%);
  --feature-ink: #FFF8F0;
  --feature-ink-soft: #E6D3D5;
  --feature-line: rgba(255, 248, 240, .16);
  --feature-card: rgba(255, 255, 255, .05);
  --feature-accent: #7FD8C3;
  --feature-em-bg: linear-gradient(#7FD8C3, #7FD8C3);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-input: 12px;
  --btn-radius: 999px;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-tracking: .06em;
  --btn-size: .95rem;
  --btn-border-w: 0px;
  --btn-shadow: 4px 4px 0 #2B1B1E;
  --btn-shadow-hover: 7px 7px 0 #2B1B1E;
  --btn-hover-move: translate(-3px, -3px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 2px solid #2B1B1E;
  --card-shadow: 5px 5px 0 #7FD8C3;
  --card-shadow-hover: 8px 8px 0 #7FD8C3;
  --card-hover-move: translate(-3px, -3px);
  --spot: rgba(200, 16, 46, .08);
  --icon-tile-bg: #FFE0E5;
  --icon-tile-ink: #B10E29;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(43, 27, 30, .3);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .78rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .14em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #FFFFFF;
  --eyebrow-bg: #C8102E;
  --eyebrow-pad: .4em .95em;
  --eyebrow-radius: 999px;
  --eyebrow-dot: 0;
  --header-bg: rgba(255, 248, 240, .93);
  --space-scale: .95;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .35s;
  --rv-dur: .7s;
  --rv-ease: cubic-bezier(.34, 1.56, .64, 1);
  --rv-x: 0px;
  --rv-y: 20px;
  --rv-scale: .86;
  --rv-rot: 3deg;
  --rv-blur: 0px;
  --rv-stagger: 70ms;
  --ray: rgba(255, 255, 255, .08);
}
[data-theme="lodge"] {
  --font-display: "Zilla Slab", Rockwell, Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-accent: "Zilla Slab", Rockwell, serif;
  --font-btn: var(--font-body);
  --display-weight: 700;
  --display-tracking: -0.01em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: 1.04;
  --h3-scale: 1.05;
  --accent-style: italic;
  --accent-weight: 600;
  --accent-size: 1em;
  --accent-tracking: -0.01em;
  --bg: #F6F1E7;
  --bg-alt: #ECE3D2;
  --surface: #FFFCF6;
  --surface-2: #E5DAC4;
  --ink: #1F2A22;
  --ink-soft: #4D584C;
  --line: rgba(31, 42, 34, .15);
  --primary: #2D4A34;
  --on-primary: #FDF8EE;
  --primary-hover: #223A28;
  --accent: #B5452B;
  --accent-2: #C89B5E;
  --accent-ink: #8F3620;
  --focus: #B5452B;
  --danger: #A12622;
  --swatch: linear-gradient(135deg, #2D4A34 0 40%, #B5452B 40% 70%, #C89B5E 70% 100%);
  --em-bg: linear-gradient(#9B3B23, #9B3B23);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(60% 60% at 80% 15%, rgba(227, 167, 111, .2), transparent 70%), linear-gradient(180deg, #16241B 0%, #1E2F23 55%, #25392A 100%);
  --hero-ink: #FDF8EE;
  --hero-muted: #D3DCCB;
  --hero-em-bg: linear-gradient(#E3A76F, #E3A76F);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #B5452B;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #9E3B24;
  --hero-btn-shadow: 0 4px 0 #6E2A18;
  --hero-line: rgba(253, 248, 238, .35);
  --glow: radial-gradient(closest-side, rgba(227, 167, 111, .22), transparent);
  --stars-opacity: .55;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #2A2019;
  --feature-bg-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px), radial-gradient(45% 55% at 100% 0%, rgba(181, 69, 43, .25), transparent 70%);
  --feature-ink: #F6F1E7;
  --feature-ink-soft: #D8C9B2;
  --feature-line: rgba(246, 241, 231, .16);
  --feature-card: rgba(255, 255, 255, .05);
  --feature-accent: #E3A76F;
  --feature-em-bg: linear-gradient(#E3A76F, #E3A76F);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-input: 8px;
  --btn-radius: 6px;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-tracking: .08em;
  --btn-size: .9rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 4px 0 #16241B;
  --btn-shadow-hover: 0 7px 0 #16241B;
  --btn-hover-move: translateY(-3px);
  --btn-shine: 0;
  --card-bg: #FFFCF6;
  --card-border: 1px solid rgba(31, 42, 34, .18);
  --card-shadow: 0 3px 0 rgba(31, 42, 34, .16), 0 18px 30px -24px rgba(31, 42, 34, .4);
  --card-shadow-hover: 0 5px 0 rgba(31, 42, 34, .18), 0 26px 40px -24px rgba(31, 42, 34, .45);
  --card-hover-move: translateY(-4px);
  --spot: rgba(181, 69, 43, .08);
  --icon-tile-bg: #2D4A34;
  --icon-tile-ink: #F6F1E7;
  --icon-radius: 8px;
  --input-bg: #FFFCF6;
  --input-border: rgba(31, 42, 34, .25);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .82rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .18em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #8F3620;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;
  --header-bg: rgba(246, 241, 231, .92);
  --space-scale: 1;
  --body-size: 1.08rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .35s;
  --rv-dur: .75s;
  --rv-ease: cubic-bezier(.2, .8, .2, 1);
  --rv-x: 0px;
  --rv-y: 24px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 80ms;
  --star: #F6F1E7;
}
[data-theme="clinical"] {
  --font-display: Lexend, system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-accent: Lexend, system-ui, sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 600;
  --display-tracking: -0.025em;
  --display-leading: 1.08;
  --display-transform: none;
  --display-scale: .95;
  --h3-scale: .95;
  --accent-style: normal;
  --accent-weight: 600;
  --accent-size: 1em;
  --accent-tracking: -0.025em;
  --bg: #FFFFFF;
  --bg-alt: #F2F8F8;
  --surface: #FFFFFF;
  --surface-2: #EAF4F4;
  --ink: #10262B;
  --ink-soft: #45595E;
  --line: rgba(16, 38, 43, .1);
  --primary: #0E7C7B;
  --on-primary: #FFFFFF;
  --primary-hover: #0B6564;
  --accent: #3BB3AE;
  --accent-2: #CFEDEA;
  --accent-ink: #0B6B6A;
  --focus: #0E7C7B;
  --danger: #B42318;
  --swatch: linear-gradient(135deg, #FFFFFF 0 45%, #0E7C7B 45% 100%);
  --em-bg: linear-gradient(#0B6B6A, #0B6B6A);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: linear-gradient(180deg, #EFF8F8 0%, #FFFFFF 100%);
  --hero-ink: #10262B;
  --hero-muted: #45595E;
  --hero-em-bg: linear-gradient(#0B6B6A, #0B6B6A);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #0E7C7B;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #0B6564;
  --hero-btn-shadow: 0 10px 22px -12px rgba(14, 124, 123, .55);
  --hero-line: rgba(16, 38, 43, .22);
  --glow: radial-gradient(closest-side, rgba(59, 179, 174, .16), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #0B3B40;
  --feature-bg-image: radial-gradient(50% 60% at 100% 0%, rgba(127, 218, 213, .18), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #BFDCDD;
  --feature-line: rgba(255, 255, 255, .14);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #7FDAD5;
  --feature-em-bg: linear-gradient(#7FDAD5, #7FDAD5);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-input: 10px;
  --btn-radius: 10px;
  --btn-weight: 700;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-size: 1.02rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 8px 18px -10px rgba(14, 124, 123, .5);
  --btn-shadow-hover: 0 14px 26px -12px rgba(14, 124, 123, .55);
  --btn-hover-move: translateY(-1px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 1px solid #DCE9EA;
  --card-shadow: 0 1px 2px rgba(16, 38, 43, .05);
  --card-shadow-hover: 0 16px 32px -20px rgba(16, 38, 43, .3);
  --card-hover-move: translateY(-3px);
  --spot: rgba(59, 179, 174, .08);
  --icon-tile-bg: #E3F4F3;
  --icon-tile-ink: #0B6B6A;
  --icon-radius: 12px;
  --input-bg: #FFFFFF;
  --input-border: rgba(16, 38, 43, .25);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .82rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .14em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #0B6B6A;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;
  --header-bg: rgba(255, 255, 255, .92);
  --space-scale: .95;
  --body-size: 1.1rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: .3s;
  --rv-dur: .6s;
  --rv-ease: cubic-bezier(.4, 0, .2, 1);
  --rv-x: 0px;
  --rv-y: 12px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 60ms;
  --dot-color: rgba(14, 124, 123, .16);
}
[data-theme="noir"] {
  --font-display: Italiana, Didot, "Bodoni 72", Georgia, serif;
  --font-body: Raleway, system-ui, sans-serif;
  --font-accent: Italiana, Didot, serif;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: .01em;
  --display-leading: 1.06;
  --display-transform: none;
  --display-scale: 1.06;
  --h3-scale: 1.12;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: .01em;
  --bg: #0B0A09;
  --bg-alt: #12110F;
  --surface: #171513;
  --surface-2: #221F1B;
  --ink: #F3EDE2;
  --ink-soft: #B9AF9F;
  --line: rgba(214, 190, 140, .18);
  --primary: #D6BE8C;
  --on-primary: #0B0A09;
  --primary-hover: #E6D2A8;
  --accent: #D6BE8C;
  --accent-2: #8E7A52;
  --accent-ink: #D6BE8C;
  --focus: #E6D2A8;
  --danger: #FF8A7A;
  --swatch: linear-gradient(135deg, #0B0A09 0 55%, #D6BE8C 55% 100%);
  --em-bg: linear-gradient(100deg, #B89A5E, #F0DFB8 45%, #D6BE8C 60%, #B89A5E);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(60% 70% at 75% 30%, #241F18 0%, #0B0A09 70%);
  --hero-ink: #F3EDE2;
  --hero-muted: #B9AF9F;
  --hero-em-bg: linear-gradient(100deg, #B89A5E, #F0DFB8 45%, #D6BE8C 60%, #B89A5E);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #D6BE8C;
  --hero-btn-ink: #0B0A09;
  --hero-btn-hover: #E6D2A8;
  --hero-btn-shadow: 0 0 0 1px rgba(214, 190, 140, .4), 0 16px 40px -18px rgba(214, 190, 140, .55);
  --hero-line: rgba(214, 190, 140, .4);
  --glow: radial-gradient(closest-side, rgba(214, 190, 140, .16), transparent);
  --stars-opacity: .5;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #141210;
  --feature-bg-image: radial-gradient(50% 60% at 50% 0%, rgba(214, 190, 140, .12), transparent 70%);
  --feature-ink: #F3EDE2;
  --feature-ink-soft: #B9AF9F;
  --feature-line: rgba(214, 190, 140, .22);
  --feature-card: rgba(214, 190, 140, .04);
  --feature-accent: #D6BE8C;
  --feature-em-bg: linear-gradient(100deg, #B89A5E, #F0DFB8 45%, #D6BE8C 60%, #B89A5E);
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-input: 0px;
  --btn-radius: 0px;
  --btn-weight: 500;
  --btn-transform: uppercase;
  --btn-tracking: .28em;
  --btn-size: .74rem;
  --btn-border-w: 1px;
  --btn-shadow: none;
  --btn-shadow-hover: 0 14px 30px -18px rgba(214, 190, 140, .6);
  --btn-hover-move: translateY(-1px);
  --btn-shine: 1;
  --card-bg: #141210;
  --card-border: 1px solid rgba(214, 190, 140, .22);
  --card-shadow: none;
  --card-shadow-hover: 0 0 0 1px rgba(214, 190, 140, .55), 0 30px 60px -40px #000;
  --card-hover-move: translateY(-3px);
  --spot: rgba(214, 190, 140, .07);
  --icon-tile-bg: transparent;
  --icon-tile-ink: #D6BE8C;
  --icon-radius: 50%;
  --input-bg: #12110F;
  --input-border: rgba(214, 190, 140, .3);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .72rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: .4em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #D6BE8C;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;
  --header-bg: rgba(11, 10, 9, .85);
  --space-scale: 1.15;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .8s;
  --rv-dur: 1.6s;
  --rv-ease: cubic-bezier(.19, 1, .22, 1);
  --rv-x: 0px;
  --rv-y: 10px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 8px;
  --rv-stagger: 150ms;
  --fine-line: rgba(214, 190, 140, .45);
  --fine-wash: rgba(214, 190, 140, .04);
  --star: #E6D2A8;
  --star-glow: rgba(214, 190, 140, .6);
}
[data-theme="pop"] {
  --font-display: Fredoka, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: Fredoka, system-ui, sans-serif;
  --font-accent: Fredoka, system-ui, sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: 1.04;
  --h3-scale: 1.05;
  --accent-style: normal;
  --accent-weight: 700;
  --accent-size: 1em;
  --accent-tracking: -0.01em;
  --bg: #FFFDF5;
  --bg-alt: #EEF4FF;
  --surface: #FFFFFF;
  --surface-2: #FFF1C7;
  --ink: #1D1B3A;
  --ink-soft: #4B4870;
  --line: rgba(29, 27, 58, .12);
  --primary: #2F5BEA;
  --on-primary: #FFFFFF;
  --primary-hover: #2449C7;
  --accent: #FF4D6D;
  --accent-2: #FFC93C;
  --accent-ink: #C21F42;
  --focus: #2F5BEA;
  --danger: #C21F42;
  --swatch: conic-gradient(#2F5BEA 0 33%, #FF4D6D 0 66%, #FFC93C 0);
  --em-bg: linear-gradient(#D6264A, #D6264A);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(50% 60% at 85% 15%, rgba(255, 201, 60, .35), transparent 70%), linear-gradient(180deg, #2F5BEA 0%, #2A50D6 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: #E6ECFF;
  --hero-em-bg: linear-gradient(#FFC93C, #FFC93C);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #FFC93C;
  --hero-btn-ink: #1D1B3A;
  --hero-btn-hover: #FFD666;
  --hero-btn-shadow: 0 6px 0 #C79400;
  --hero-line: rgba(255, 255, 255, .45);
  --glow: radial-gradient(closest-side, rgba(255, 201, 60, .35), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: .35;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #1D1B3A;
  --feature-bg-image: radial-gradient(40% 50% at 0% 0%, rgba(255, 77, 109, .3), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(47, 91, 234, .45), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #D2D0EC;
  --feature-line: rgba(255, 255, 255, .16);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #FFC93C;
  --feature-em-bg: linear-gradient(#FFC93C, #FFC93C);
  --radius-sm: 16px;
  --radius: 26px;
  --radius-lg: 36px;
  --radius-input: 18px;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-size: 1.1rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 6px 0 #1B3AA8;
  --btn-shadow-hover: 0 9px 0 #1B3AA8;
  --btn-hover-move: translateY(-3px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 3px solid #1D1B3A;
  --card-shadow: 0 7px 0 #1D1B3A;
  --card-shadow-hover: 0 11px 0 #1D1B3A;
  --card-hover-move: translateY(-4px) rotate(-.5deg);
  --spot: rgba(255, 201, 60, .2);
  --icon-tile-bg: #FFC93C;
  --icon-tile-ink: #1D1B3A;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(29, 27, 58, .3);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .85rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .08em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #A8173A;
  --eyebrow-bg: #FFE1E7;
  --eyebrow-pad: .45em 1.05em;
  --eyebrow-radius: 999px;
  --eyebrow-dot: 0;
  --header-bg: rgba(255, 253, 245, .92);
  --space-scale: 1;
  --body-size: 1.1rem;
  --ease: cubic-bezier(.34, 1.8, .64, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .45s;
  --rv-dur: .8s;
  --rv-ease: cubic-bezier(.34, 1.8, .64, 1);
  --rv-x: 0px;
  --rv-y: 40px;
  --rv-scale: .8;
  --rv-rot: -4deg;
  --rv-blur: 0px;
  --rv-stagger: 80ms;
  --blob-1: rgba(255, 201, 60, .5);
  --blob-2: rgba(255, 77, 109, .45);
  --blob-3: rgba(126, 200, 245, .55);
}
[data-theme="farmhouse"] {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: Karla, system-ui, sans-serif;
  --font-accent: "DM Serif Display", Georgia, serif;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: -0.01em;
  --display-leading: 1.04;
  --display-transform: none;
  --display-scale: 1.04;
  --h3-scale: 1.06;
  --accent-style: italic;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: -0.01em;
  --bg: #FAF8F4;
  --bg-alt: #F1EDE6;
  --surface: #FFFFFF;
  --surface-2: #ECE6DC;
  --ink: #1C1B1A;
  --ink-soft: #54504A;
  --line: rgba(28, 27, 26, .16);
  --primary: #1C1B1A;
  --on-primary: #FFFFFF;
  --primary-hover: #8E2A22;
  --accent: #8E2A22;
  --accent-2: #D9CFC0;
  --accent-ink: #8E2A22;
  --focus: #8E2A22;
  --danger: #8E2A22;
  --swatch: linear-gradient(135deg, #FFFFFF 0 33%, #1C1B1A 33% 66%, #8E2A22 66% 100%);
  --em-bg: linear-gradient(#8E2A22, #8E2A22);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: linear-gradient(180deg, #F4F1EB 0%, #FAF8F4 100%);
  --hero-ink: #1C1B1A;
  --hero-muted: #54504A;
  --hero-em-bg: linear-gradient(#8E2A22, #8E2A22);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #8E2A22;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #74211B;
  --hero-btn-shadow: none;
  --hero-line: rgba(28, 27, 26, .3);
  --glow: radial-gradient(closest-side, rgba(217, 207, 192, .5), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #1C1B1A;
  --feature-bg-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px);
  --feature-ink: #FAF8F4;
  --feature-ink-soft: #CFC8BC;
  --feature-line: rgba(250, 248, 244, .18);
  --feature-card: rgba(255, 255, 255, .04);
  --feature-accent: #E8A79F;
  --feature-em-bg: linear-gradient(#E8A79F, #E8A79F);
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-input: 2px;
  --btn-radius: 2px;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-tracking: .14em;
  --btn-size: .82rem;
  --btn-border-w: 2px;
  --btn-shadow: none;
  --btn-shadow-hover: 0 12px 24px -16px rgba(28, 27, 26, .6);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 2px solid #1C1B1A;
  --card-shadow: none;
  --card-shadow-hover: 0 18px 30px -22px rgba(28, 27, 26, .55);
  --card-hover-move: translateY(-3px);
  --spot: rgba(142, 42, 34, .06);
  --icon-tile-bg: transparent;
  --icon-tile-ink: #8E2A22;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(28, 27, 26, .35);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .78rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .3em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #8E2A22;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;
  --header-bg: rgba(250, 248, 244, .93);
  --space-scale: 1.05;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --dur: .45s;
  --rv-dur: 1s;
  --rv-ease: cubic-bezier(.25, .1, .25, 1);
  --rv-x: 0px;
  --rv-y: 16px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 110ms;
  --fine-line: rgba(28, 27, 26, .55);
  --fine-wash: rgba(28, 27, 26, .03);
}
[data-theme="industrial"] {
  --font-display: Oswald, Impact, "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-accent: Oswald, Impact, sans-serif;
  --font-btn: Oswald, Impact, sans-serif;
  --display-weight: 600;
  --display-tracking: .005em;
  --display-leading: .98;
  --display-transform: uppercase;
  --display-scale: 1.08;
  --h3-scale: 1.12;
  --accent-style: normal;
  --accent-weight: 600;
  --accent-size: 1em;
  --accent-tracking: .005em;
  --bg: #E9EBEE;
  --bg-alt: #DDE1E6;
  --surface: #F7F8FA;
  --surface-2: #D4D9DF;
  --ink: #1B1F24;
  --ink-soft: #434A53;
  --line: rgba(27, 31, 36, .2);
  --primary: #FF6A13;
  --on-primary: #1B1F24;
  --primary-hover: #FF8540;
  --accent: #FF6A13;
  --accent-2: #8A96A3;
  --accent-ink: #A83E00;
  --focus: #FF6A13;
  --danger: #B3261E;
  --swatch: linear-gradient(135deg, #1B1F24 0 40%, #8A96A3 40% 70%, #FF6A13 70% 100%);
  --em-bg: linear-gradient(180deg, transparent 58%, #FF6A13 58%, #FF6A13 90%, transparent 90%);
  --em-clip: border-box;
  --em-color: #1B1F24;
  --hero-bg: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 10px), linear-gradient(180deg, #1B1F24 0%, #242A31 100%);
  --hero-ink: #FFFFFF;
  --hero-muted: #C4CAD1;
  --hero-em-bg: none;
  --hero-em-clip: border-box;
  --hero-em-color: #FF6A13;
  --hero-btn-bg: #FF6A13;
  --hero-btn-ink: #1B1F24;
  --hero-btn-hover: #FF8540;
  --hero-btn-shadow: 5px 5px 0 #000000;
  --hero-line: rgba(255, 255, 255, .3);
  --glow: radial-gradient(closest-side, rgba(255, 106, 19, .14), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #1B1F24;
  --feature-bg-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px);
  --feature-ink: #F2F4F6;
  --feature-ink-soft: #C4CAD1;
  --feature-line: rgba(255, 255, 255, .22);
  --feature-card: #242A31;
  --feature-accent: #FFA066;
  --feature-em-bg: none;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 2px;
  --radius-input: 0px;
  --btn-radius: 0px;
  --btn-weight: 600;
  --btn-transform: uppercase;
  --btn-tracking: .08em;
  --btn-size: 1.02rem;
  --btn-border-w: 2px;
  --btn-shadow: 4px 4px 0 #1B1F24;
  --btn-shadow-hover: 7px 7px 0 #1B1F24;
  --btn-hover-move: translate(-3px, -3px);
  --btn-shine: 0;
  --card-bg: #F7F8FA;
  --card-border: 2px solid #1B1F24;
  --card-shadow: 6px 6px 0 #1B1F24;
  --card-shadow-hover: 10px 10px 0 #FF6A13;
  --card-hover-move: translate(-4px, -4px);
  --spot: rgba(255, 106, 19, .1);
  --icon-tile-bg: #FF6A13;
  --icon-tile-ink: #1B1F24;
  --icon-radius: 0px;
  --input-bg: #FFFFFF;
  --input-border: #1B1F24;
  --eyebrow-font: "IBM Plex Sans", system-ui, sans-serif;
  --eyebrow-size: .82rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .12em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #1B1F24;
  --eyebrow-bg: #FF6A13;
  --eyebrow-pad: .25em .7em;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;
  --header-bg: rgba(233, 235, 238, .95);
  --space-scale: .88;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.2, .9, .1, 1);
  --ease-soft: cubic-bezier(.2, .9, .1, 1);
  --dur: .16s;
  --rv-dur: .4s;
  --rv-ease: cubic-bezier(.2, .9, .1, 1);
  --rv-x: -30px;
  --rv-y: 0px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 45ms;
  --hard: #1B1F24;
  --hard-accent: #FF6A13;
  --grid-line: rgba(255, 255, 255, .06);
  --sig-scale: 1.1;
}
[data-theme="blush"] {
  --font-display: "Gilda Display", Didot, Georgia, serif;
  --font-body: Mulish, system-ui, sans-serif;
  --font-accent: Parisienne, "Snell Roundhand", cursive;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: 0;
  --display-leading: 1.1;
  --display-transform: none;
  --display-scale: 1;
  --h3-scale: 1.05;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1.22em;
  --accent-tracking: 0;
  --bg: #FDF9F6;
  --bg-alt: #F7ECEA;
  --surface: #FFFFFF;
  --surface-2: #F4E4E2;
  --ink: #3D2A2E;
  --ink-soft: #6D585C;
  --line: rgba(61, 42, 46, .12);
  --primary: #9C5663;
  --on-primary: #FFFFFF;
  --primary-hover: #87485A;
  --accent: #D8A7AF;
  --accent-2: #EFD9D6;
  --accent-ink: #8E4A57;
  --focus: #9C5663;
  --danger: #A12622;
  --swatch: linear-gradient(135deg, #FDF9F6 0 40%, #D8A7AF 40% 100%);
  --em-bg: linear-gradient(100deg, #8E4A57, #B06A78 50%, #8E4A57);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(45% 55% at 15% 25%, #F6DADB 0%, rgba(246, 218, 219, 0) 70%), radial-gradient(40% 50% at 90% 15%, #F7E8DC 0%, rgba(247, 232, 220, 0) 70%), linear-gradient(180deg, #FDF7F4 0%, #F8EAE8 100%);
  --hero-ink: #3D2A2E;
  --hero-muted: #6D585C;
  --hero-em-bg: linear-gradient(100deg, #8E4A57, #B06A78 50%, #8E4A57);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #9C5663;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #87485A;
  --hero-btn-shadow: 0 14px 30px -14px rgba(156, 86, 99, .55);
  --hero-line: rgba(61, 42, 46, .22);
  --glow: radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent);
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: .45;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 1;
  --feature-bg: #4A3236;
  --feature-bg-image: radial-gradient(45% 55% at 10% 10%, rgba(240, 195, 202, .22), transparent 70%), radial-gradient(40% 50% at 95% 90%, rgba(247, 232, 220, .14), transparent 70%);
  --feature-ink: #FDF4F2;
  --feature-ink-soft: #E2CDD0;
  --feature-line: rgba(253, 244, 242, .18);
  --feature-card: rgba(255, 255, 255, .05);
  --feature-accent: #F0C3CA;
  --feature-em-bg: linear-gradient(100deg, #F0C3CA, #FFE9EC 50%, #F0C3CA);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 38px;
  --radius-input: 16px;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-transform: uppercase;
  --btn-tracking: .22em;
  --btn-size: .76rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 14px 30px -16px rgba(156, 86, 99, .5);
  --btn-shadow-hover: 0 20px 40px -16px rgba(156, 86, 99, .55);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;
  --card-bg: #FFFFFF;
  --card-border: 1px solid rgba(216, 167, 175, .35);
  --card-shadow: 0 20px 50px -36px rgba(156, 86, 99, .45);
  --card-shadow-hover: 0 30px 70px -34px rgba(156, 86, 99, .5);
  --card-hover-move: translateY(-5px);
  --spot: rgba(239, 217, 214, .5);
  --icon-tile-bg: linear-gradient(135deg, #FBEDEF, #F4D8DC);
  --icon-tile-ink: #8E4A57;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(61, 42, 46, .2);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .72rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .34em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #8E4A57;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;
  --header-bg: rgba(253, 249, 246, .88);
  --space-scale: 1.08;
  --body-size: 1.02rem;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .7s;
  --rv-dur: 1.3s;
  --rv-ease: cubic-bezier(.33, 1, .68, 1);
  --rv-x: 0px;
  --rv-y: 12px;
  --rv-scale: .97;
  --rv-rot: 0deg;
  --rv-blur: 8px;
  --rv-stagger: 130ms;
  --orb-1: rgba(216, 167, 175, .45);
  --orb-2: rgba(247, 232, 220, .8);
  --orb-3: rgba(232, 200, 214, .45);
  --sig-scale: 1.3;
}
[data-theme="neon"] {
  --font-display: Audiowide, "Arial Black", system-ui, sans-serif;
  --font-body: "Chakra Petch", system-ui, sans-serif;
  --font-accent: Audiowide, system-ui, sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: 0;
  --display-leading: 1.1;
  --display-transform: none;
  --display-scale: .86;
  --h3-scale: .92;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: 0;
  --bg: #07081A;
  --bg-alt: #0B0D24;
  --surface: #10132E;
  --surface-2: #171B3D;
  --ink: #EEF1FF;
  --ink-soft: #A8AEDA;
  --line: rgba(120, 140, 255, .18);
  --primary: #3D8BFF;
  --on-primary: #07081A;
  --primary-hover: #66A3FF;
  --accent: #B04DFF;
  --accent-2: #3DE0FF;
  --accent-ink: #7FB2FF;
  --focus: #3DE0FF;
  --danger: #FF7A9A;
  --swatch: linear-gradient(135deg, #07081A 0 40%, #3D8BFF 40% 70%, #B04DFF 70% 100%);
  --em-bg: linear-gradient(90deg, #3DE0FF, #6E8BFF 50%, #C06BFF);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(50% 60% at 85% 20%, rgba(176, 77, 255, .38), transparent 70%), radial-gradient(40% 50% at 5% 75%, rgba(61, 139, 255, .32), transparent 70%), #07081A;
  --hero-ink: #FFFFFF;
  --hero-muted: #B8BEEA;
  --hero-em-bg: linear-gradient(90deg, #3DE0FF, #6E8BFF 50%, #C06BFF);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #3D8BFF;
  --hero-btn-ink: #07081A;
  --hero-btn-hover: #66A3FF;
  --hero-btn-shadow: 0 0 0 1px rgba(61, 139, 255, .6), 0 0 34px rgba(61, 139, 255, .55);
  --hero-line: rgba(120, 160, 255, .35);
  --glow: radial-gradient(closest-side, rgba(176, 77, 255, .3), transparent);
  --stars-opacity: .7;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #0B0D24;
  --feature-bg-image: radial-gradient(40% 60% at 0% 0%, rgba(61, 139, 255, .25), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(176, 77, 255, .3), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #B8BEEA;
  --feature-line: rgba(120, 140, 255, .2);
  --feature-card: rgba(255, 255, 255, .03);
  --feature-accent: #3DE0FF;
  --feature-em-bg: linear-gradient(90deg, #3DE0FF, #6E8BFF 50%, #C06BFF);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-input: 8px;
  --btn-radius: 6px;
  --btn-weight: 600;
  --btn-transform: uppercase;
  --btn-tracking: .12em;
  --btn-size: .9rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 0 0 1px rgba(61, 139, 255, .5), 0 0 26px -4px rgba(61, 139, 255, .6);
  --btn-shadow-hover: 0 0 0 1px rgba(61, 224, 255, .8), 0 0 40px -2px rgba(61, 224, 255, .7);
  --btn-hover-move: translateY(-2px);
  --btn-shine: 1;
  --card-bg: #10132E;
  --card-border: 1px solid rgba(120, 140, 255, .2);
  --card-shadow: 0 0 0 1px rgba(61, 139, 255, .06);
  --card-shadow-hover: 0 0 0 1px rgba(61, 224, 255, .55), 0 0 44px -8px rgba(176, 77, 255, .6);
  --card-hover-move: translateY(-4px);
  --spot: rgba(61, 224, 255, .12);
  --icon-tile-bg: linear-gradient(135deg, rgba(61, 139, 255, .22), rgba(176, 77, 255, .28));
  --icon-tile-ink: #3DE0FF;
  --icon-radius: 10px;
  --input-bg: #0B0D24;
  --input-border: rgba(120, 140, 255, .32);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .82rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .24em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #3DE0FF;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;
  --header-bg: rgba(7, 8, 26, .8);
  --space-scale: 1;
  --body-size: 1.08rem;
  --ease: cubic-bezier(.68, -0.4, .27, 1.45);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .3s;
  --rv-dur: .6s;
  --rv-ease: cubic-bezier(.19, 1, .22, 1);
  --rv-x: 0px;
  --rv-y: 30px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 6px;
  --rv-stagger: 60ms;
  --grid-a: rgba(61, 224, 255, .38);
  --grid-b: rgba(176, 77, 255, .45);
  --orb-1: rgba(176, 77, 255, .45);
  --orb-2: rgba(61, 139, 255, .4);
  --star: #BFD4FF;
  --star-glow: rgba(61, 224, 255, .7);
}
[data-theme="mono"] {
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Inter Tight", "Helvetica Neue", sans-serif;
  --font-btn: var(--font-body);
  --display-weight: 800;
  --display-tracking: -0.055em;
  --display-leading: .92;
  --display-transform: none;
  --display-scale: 1.28;
  --h3-scale: 1.08;
  --accent-style: italic;
  --accent-weight: 300;
  --accent-size: 1em;
  --accent-tracking: -0.05em;
  --bg: #FFFFFF;
  --bg-alt: #F4F4F4;
  --surface: #FFFFFF;
  --surface-2: #EFEFEF;
  --ink: #0A0A0A;
  --ink-soft: #555555;
  --line: rgba(0, 0, 0, .12);
  --primary: #0A0A0A;
  --on-primary: #FFFFFF;
  --primary-hover: #333333;
  --accent: #0A0A0A;
  --accent-2: #D9D9D9;
  --accent-ink: #0A0A0A;
  --focus: #0A0A0A;
  --danger: #B42318;
  --swatch: linear-gradient(90deg, #0A0A0A 0 50%, #FFFFFF 50% 100%);
  --em-bg: linear-gradient(#0A0A0A, #0A0A0A);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: #FFFFFF;
  --hero-ink: #0A0A0A;
  --hero-muted: #555555;
  --hero-em-bg: linear-gradient(#0A0A0A, #0A0A0A);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #0A0A0A;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #333333;
  --hero-btn-shadow: none;
  --hero-line: rgba(0, 0, 0, .3);
  --glow: none;
  --stars-opacity: 0;
  --rays-opacity: 0;
  --clouds-opacity: 0;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 0;
  --feature-bg: #0A0A0A;
  --feature-bg-image: none;
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #BDBDBD;
  --feature-line: rgba(255, 255, 255, .2);
  --feature-card: transparent;
  --feature-accent: #FFFFFF;
  --feature-em-bg: linear-gradient(#FFFFFF, #FFFFFF);
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-input: 0px;
  --btn-radius: 0px;
  --btn-weight: 600;
  --btn-transform: none;
  --btn-tracking: -0.01em;
  --btn-size: 1rem;
  --btn-border-w: 1px;
  --btn-shadow: none;
  --btn-shadow-hover: 6px 6px 0 #D9D9D9;
  --btn-hover-move: translate(-2px, -2px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 1px solid #0A0A0A;
  --card-shadow: none;
  --card-shadow-hover: 8px 8px 0 #0A0A0A;
  --card-hover-move: translate(-4px, -4px);
  --spot: rgba(0, 0, 0, .04);
  --icon-tile-bg: transparent;
  --icon-tile-ink: #0A0A0A;
  --icon-radius: 0px;
  --input-bg: #FFFFFF;
  --input-border: #0A0A0A;
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .76rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .3em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #0A0A0A;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 0;
  --header-bg: rgba(255, 255, 255, .94);
  --space-scale: 1.3;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.65, 0, .35, 1);
  --dur: .5s;
  --rv-dur: 1.1s;
  --rv-ease: cubic-bezier(.65, 0, .35, 1);
  --rv-x: 0px;
  --rv-y: 40px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 100ms;
  --fine-line: rgba(10, 10, 10, .6);
  --fine-wash: transparent;
}
[data-theme="sunny"] {
  --font-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: Lato, system-ui, sans-serif;
  --font-accent: "Baloo 2", system-ui, sans-serif;
  --font-btn: "Baloo 2", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --display-leading: 1.02;
  --display-transform: none;
  --display-scale: 1.06;
  --h3-scale: 1.08;
  --accent-style: normal;
  --accent-weight: 800;
  --accent-size: 1em;
  --accent-tracking: -0.01em;
  --bg: #FFFCF0;
  --bg-alt: #EAF6FF;
  --surface: #FFFFFF;
  --surface-2: #FFF1C2;
  --ink: #1E2B45;
  --ink-soft: #4A5773;
  --line: rgba(30, 43, 69, .12);
  --primary: #1B6FC2;
  --on-primary: #FFFFFF;
  --primary-hover: #155BA0;
  --accent: #FFC629;
  --accent-2: #7EC8F5;
  --accent-ink: #1B62AD;
  --focus: #1B6FC2;
  --danger: #B42318;
  --swatch: linear-gradient(135deg, #FFC629 0 50%, #7EC8F5 50% 100%);
  --em-bg: linear-gradient(180deg, transparent 56%, #FFD95A 56%, #FFD95A 92%, transparent 92%);
  --em-clip: border-box;
  --em-color: #1E2B45;
  --hero-bg: linear-gradient(180deg, #BFE4FF 0%, #E3F3FF 55%, #FFFCF0 100%);
  --hero-ink: #1E2B45;
  --hero-muted: #3C4A66;
  --hero-em-bg: linear-gradient(180deg, transparent 56%, #FFD95A 56%, #FFD95A 92%, transparent 92%);
  --hero-em-clip: border-box;
  --hero-em-color: #1E2B45;
  --hero-btn-bg: #1B6FC2;
  --hero-btn-ink: #FFFFFF;
  --hero-btn-hover: #155BA0;
  --hero-btn-shadow: 0 6px 0 #0F4C8A;
  --hero-line: rgba(30, 43, 69, .28);
  --glow: radial-gradient(closest-side, rgba(255, 214, 90, .85), rgba(255, 214, 90, .2) 60%, transparent);
  --stars-opacity: 0;
  --rays-opacity: .9;
  --clouds-opacity: .9;
  --cloud-fill: #FFFFFF;
  --cloudbank-opacity: 1;
  --feature-bg: #1E2B45;
  --feature-bg-image: radial-gradient(45% 55% at 90% 0%, rgba(255, 198, 41, .22), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(126, 200, 245, .22), transparent 70%);
  --feature-ink: #FFFFFF;
  --feature-ink-soft: #C9D3E6;
  --feature-line: rgba(255, 255, 255, .16);
  --feature-card: rgba(255, 255, 255, .06);
  --feature-accent: #FFD95A;
  --feature-em-bg: linear-gradient(#FFD95A, #FFD95A);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-input: 14px;
  --btn-radius: 999px;
  --btn-weight: 700;
  --btn-transform: none;
  --btn-tracking: 0;
  --btn-size: 1.08rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 5px 0 #0F4C8A;
  --btn-shadow-hover: 0 8px 0 #0F4C8A;
  --btn-hover-move: translateY(-3px);
  --btn-shine: 0;
  --card-bg: #FFFFFF;
  --card-border: 2px solid rgba(30, 43, 69, .08);
  --card-shadow: 0 12px 30px -20px rgba(30, 43, 69, .35);
  --card-shadow-hover: 0 24px 44px -22px rgba(30, 43, 69, .4);
  --card-hover-move: translateY(-6px);
  --spot: rgba(255, 198, 41, .16);
  --icon-tile-bg: #FFF1C2;
  --icon-tile-ink: #1B62AD;
  --icon-radius: 50%;
  --input-bg: #FFFFFF;
  --input-border: rgba(30, 43, 69, .25);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .82rem;
  --eyebrow-weight: 700;
  --eyebrow-tracking: .1em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #4F3A00;
  --eyebrow-bg: #FFE58A;
  --eyebrow-pad: .45em 1em;
  --eyebrow-radius: 999px;
  --eyebrow-dot: 0;
  --header-bg: rgba(255, 252, 240, .9);
  --space-scale: 1;
  --body-size: 1.08rem;
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .5s;
  --rv-dur: .8s;
  --rv-ease: cubic-bezier(.34, 1.56, .64, 1);
  --rv-x: 0px;
  --rv-y: 30px;
  --rv-scale: .94;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 90ms;
  --ray: rgba(255, 214, 90, .28);
}
[data-theme="prairie"] {
  --font-display: Gloock, Georgia, serif;
  --font-body: "Work Sans", system-ui, sans-serif;
  --font-accent: Gloock, Georgia, serif;
  --font-btn: var(--font-body);
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-leading: 1.05;
  --display-transform: none;
  --display-scale: 1.02;
  --h3-scale: 1.05;
  --accent-style: normal;
  --accent-weight: 400;
  --accent-size: 1em;
  --accent-tracking: -0.015em;
  --bg: #F7F1E6;
  --bg-alt: #EFE4D0;
  --surface: #FFFBF3;
  --surface-2: #EADCC2;
  --ink: #2F261F;
  --ink-soft: #5D5044;
  --line: rgba(47, 38, 31, .14);
  --primary: #A14E2E;
  --on-primary: #FFF8EE;
  --primary-hover: #8A4226;
  --accent: #8A9A6E;
  --accent-2: #D9B66F;
  --accent-ink: #8F4427;
  --focus: #A14E2E;
  --danger: #A12622;
  --swatch: linear-gradient(135deg, #A14E2E 0 40%, #8A9A6E 40% 70%, #D9B66F 70% 100%);
  --em-bg: linear-gradient(#8F4427, #8F4427);
  --em-clip: text;
  --em-color: transparent;
  --hero-bg: radial-gradient(40% 50% at 80% 18%, rgba(255, 220, 150, .6), transparent 70%), linear-gradient(180deg, #EDD9B6 0%, #F4E6CC 55%, #F7F1E6 100%);
  --hero-ink: #2F261F;
  --hero-muted: #574A3F;
  --hero-em-bg: linear-gradient(#8F4427, #8F4427);
  --hero-em-clip: text;
  --hero-em-color: transparent;
  --hero-btn-bg: #A14E2E;
  --hero-btn-ink: #FFF8EE;
  --hero-btn-hover: #8A4226;
  --hero-btn-shadow: 0 4px 0 #6E3520;
  --hero-line: rgba(47, 38, 31, .28);
  --glow: radial-gradient(closest-side, rgba(255, 214, 150, .6), transparent);
  --stars-opacity: 0;
  --rays-opacity: .3;
  --clouds-opacity: 0;
  --cloud-fill: #FFFBF3;
  --cloudbank-opacity: 0;
  --feature-bg: #3B4A33;
  --feature-bg-image: radial-gradient(45% 55% at 90% 0%, rgba(217, 182, 111, .2), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(161, 78, 46, .25), transparent 70%);
  --feature-ink: #F7F1E6;
  --feature-ink-soft: #D3D9C4;
  --feature-line: rgba(247, 241, 230, .16);
  --feature-card: rgba(255, 255, 255, .05);
  --feature-accent: #E5C98A;
  --feature-em-bg: linear-gradient(#E5C98A, #E5C98A);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-input: 12px;
  --btn-radius: 12px;
  --btn-weight: 600;
  --btn-transform: none;
  --btn-tracking: .01em;
  --btn-size: 1.02rem;
  --btn-border-w: 0px;
  --btn-shadow: 0 4px 0 #6E3520;
  --btn-shadow-hover: 0 7px 0 #6E3520;
  --btn-hover-move: translateY(-3px);
  --btn-shine: 0;
  --card-bg: #FFFBF3;
  --card-border: 1px solid rgba(47, 38, 31, .12);
  --card-shadow: 0 14px 30px -24px rgba(95, 60, 30, .45);
  --card-shadow-hover: 0 26px 44px -26px rgba(95, 60, 30, .5);
  --card-hover-move: translateY(-5px);
  --spot: rgba(217, 182, 111, .16);
  --icon-tile-bg: #EADCC2;
  --icon-tile-ink: #7A3A20;
  --icon-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
  --input-bg: #FFFDF8;
  --input-border: rgba(47, 38, 31, .22);
  --eyebrow-font: var(--font-body);
  --eyebrow-size: .8rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: .2em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: #7A3A20;
  --eyebrow-bg: transparent;
  --eyebrow-pad: 0;
  --eyebrow-radius: 0;
  --eyebrow-dot: 1;
  --header-bg: rgba(247, 241, 230, .92);
  --space-scale: 1.02;
  --body-size: 1.0625rem;
  --ease: cubic-bezier(.3, .7, .3, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur: .5s;
  --rv-dur: 1s;
  --rv-ease: cubic-bezier(.3, .7, .3, 1);
  --rv-x: 0px;
  --rv-y: 22px;
  --rv-scale: 1;
  --rv-rot: 0deg;
  --rv-blur: 0px;
  --rv-stagger: 100ms;
  --blob-1: rgba(138, 154, 110, .3);
  --blob-2: rgba(217, 182, 111, .35);
  --blob-3: rgba(161, 78, 46, .16);
  --ray: rgba(255, 230, 180, .35);
}
[data-theme="coastal"] { --logo-frame: #17333B; --logo-a: #BFE3EA; --logo-b: #7FC3CF; --logo-cloud: #FFFFFF; --brand-sky: #1E6B7B; --brand-sky-hero: #1E6B7B; }
[data-theme="coastal"] .hero__eyebrow { --hero-eyebrow: #1E6B7B; }
[data-theme="coastal"] .ms__art { background: radial-gradient(circle at 30% 25%, #F6EEDC, #7FC3CF 75%); color: #17333B; }
[data-theme="coastal"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #9ED6E0; --on-primary: #123A43; --primary-hover: #BCE4EB; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="coastal"] .deco--salon { opacity: 1; }
[data-theme="fresh"] { --logo-frame: #1E2F1E; --logo-a: #CDE6A8; --logo-b: #8CC152; --logo-cloud: #FFFFFF; --brand-sky: #2F6B2F; --brand-sky-hero: #2F6B2F; }
[data-theme="fresh"] .hero__eyebrow { --hero-eyebrow: #2A5E2A; }
[data-theme="fresh"] .ms__art { background: radial-gradient(circle at 30% 25%, #F6E7A6, #8CC152 70%, #2F6B2F); color: #FFFFFF; }
[data-theme="fresh"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #B5DB7A; --on-primary: #1F3A1F; --primary-hover: #C7E596; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="fresh"] .deco--warm { opacity: 1; }
[data-theme="fresh"] .deco--leaves { opacity: 1; }
[data-theme="diner"] { --logo-frame: #2B1B1E; --logo-a: #9FF0DD; --logo-b: #7FD8C3; --logo-cloud: #FFFFFF; --brand-sky: #C8102E; --brand-sky-hero: #9FF0DD; }
[data-theme="diner"] .hero__eyebrow { --hero-eyebrow: #FFFFFF; }
[data-theme="diner"] .ms__art { background: radial-gradient(circle at 30% 25%, #C9FFF1, #7FD8C3 60%, #3FBFA1); color: #2B1B1E; }
[data-theme="diner"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #7FD8C3; --on-primary: #2B1B1E; --primary-hover: #9FF0DD; --btn-shadow: 4px 4px 0 #000000; --btn-shadow-hover: 7px 7px 0 #000000; }
[data-theme="diner"] .deco--checker { opacity: 1; }
[data-theme="lodge"] { --logo-frame: #1F2A22; --logo-a: #E3A76F; --logo-b: #2D4A34; --logo-cloud: #FDF8EE; --brand-sky: #8F3620; --brand-sky-hero: #E3A76F; }
[data-theme="lodge"] .hero__eyebrow { --hero-eyebrow: #E3A76F; }
[data-theme="lodge"] .ms__art { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 10px, transparent 10px 30px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 10px, transparent 10px 30px), #B5452B; color: #FDF8EE; }
[data-theme="lodge"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #E3A76F; --on-primary: #2A2019; --primary-hover: #EDBB8B; --btn-shadow: 0 4px 0 #8C5F2E; --btn-shadow-hover: 0 7px 0 #8C5F2E; }
[data-theme="lodge"] .deco--plaid { opacity: 1; }
[data-theme="lodge"] .deco--pines { opacity: 1; }
[data-theme="clinical"] { --logo-frame: #10262B; --logo-a: #CFEDEA; --logo-b: #3BB3AE; --logo-cloud: #FFFFFF; --brand-sky: #0B6B6A; --brand-sky-hero: #0B6B6A; }
[data-theme="clinical"] .hero__eyebrow { --hero-eyebrow: #0B6B6A; }
[data-theme="clinical"] .ms__art { background: radial-gradient(circle at 30% 25%, #E3F6F4, #3BB3AE 75%); color: #FFFFFF; }
[data-theme="clinical"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #7FDAD5; --on-primary: #0B3B40; --primary-hover: #A2E6E2; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="clinical"] .deco--dots { opacity: 1; }
[data-theme="noir"] { --logo-frame: #D6BE8C; --logo-a: #F0E0BC; --logo-b: #D6BE8C; --logo-cloud: #0B0A09; --brand-sky: #D6BE8C; --brand-sky-hero: #D6BE8C; }
[data-theme="noir"] .hero__eyebrow { --hero-eyebrow: #D6BE8C; }
[data-theme="noir"] .ms__art { background: radial-gradient(circle at 30% 25%, #3A3223, #0B0A09 75%); color: #D6BE8C; }
[data-theme="noir"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #D6BE8C; --on-primary: #0B0A09; --primary-hover: #E6D2A8; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="noir"] .deco--classic { opacity: 1; }
[data-theme="pop"] { --logo-frame: #1D1B3A; --logo-a: #FFC93C; --logo-b: #FF4D6D; --logo-cloud: #FFFFFF; --brand-sky: #2F5BEA; --brand-sky-hero: #FFC93C; }
[data-theme="pop"] .hero__eyebrow { --hero-eyebrow: #A8173A; }
[data-theme="pop"] .ms__art { background: radial-gradient(circle at 30% 25%, #FFE58F, #FF4D6D 70%); color: #FFFFFF; }
[data-theme="pop"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #FFC93C; --on-primary: #1D1B3A; --primary-hover: #FFD666; --btn-shadow: 0 6px 0 #C79400; --btn-shadow-hover: 0 9px 0 #C79400; }
[data-theme="pop"] .deco--confetti { opacity: 1; }
[data-theme="farmhouse"] { --logo-frame: #1C1B1A; --logo-a: #E8A79F; --logo-b: #8E2A22; --logo-cloud: #FFFFFF; --brand-sky: #8E2A22; --brand-sky-hero: #8E2A22; }
[data-theme="farmhouse"] .hero__eyebrow { --hero-eyebrow: #8E2A22; }
[data-theme="farmhouse"] .ms__art { background: repeating-linear-gradient(90deg, #8E2A22 0 22px, #74211B 22px 24px); color: #FFFFFF; }
[data-theme="farmhouse"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #FAF8F4; --on-primary: #1C1B1A; --primary-hover: #FFFFFF; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="farmhouse"] .deco--boards { opacity: 1; }
[data-theme="farmhouse"] .deco--classic { opacity: 1; }
[data-theme="industrial"] { --logo-frame: #1B1F24; --logo-a: #FFA66B; --logo-b: #FF6A13; --logo-cloud: #FFFFFF; --brand-sky: #A83E00; --brand-sky-hero: #FF6A13; }
[data-theme="industrial"] .hero__eyebrow { --hero-eyebrow: #1B1F24; }
[data-theme="industrial"] .ms__art { background: repeating-linear-gradient(-45deg, #FF6A13 0 14px, #EB5E0C 14px 28px); color: #1B1F24; }
[data-theme="industrial"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #FF6A13; --on-primary: #1B1F24; --primary-hover: #FF8540; --btn-shadow: 5px 5px 0 #000000; --btn-shadow-hover: 8px 8px 0 #000000; }
[data-theme="industrial"] .deco--trades { opacity: 1; }
[data-theme="blush"] { --logo-frame: #3D2A2E; --logo-a: #F6DADB; --logo-b: #D8A7AF; --logo-cloud: #FFFFFF; --brand-sky: #8E4A57; --brand-sky-hero: #8E4A57; }
[data-theme="blush"] .hero__eyebrow { --hero-eyebrow: #8E4A57; }
[data-theme="blush"] .ms__art { background: radial-gradient(circle at 30% 25%, #FFF3F1, #D8A7AF 80%); color: #3D2A2E; }
[data-theme="blush"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #F0C3CA; --on-primary: #3D2A2E; --primary-hover: #F7D6DB; --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="blush"] .deco--salon { opacity: 1; }
[data-theme="neon"] { --logo-frame: #3D8BFF; --logo-a: #3DE0FF; --logo-b: #B04DFF; --logo-cloud: #FFFFFF; --brand-sky: #3DE0FF; --brand-sky-hero: #3DE0FF; }
[data-theme="neon"] .hero__eyebrow { --hero-eyebrow: #3DE0FF; }
[data-theme="neon"] .ms__art { background: radial-gradient(circle at 30% 25%, #3DE0FF, #3D8BFF 40%, #B04DFF 70%, #07081A); color: #FFFFFF; }
[data-theme="neon"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #3D8BFF; --on-primary: #07081A; --primary-hover: #66A3FF; --btn-shadow: 0 0 0 1px rgba(61, 139, 255, .6), 0 0 30px rgba(61, 139, 255, .55); --btn-shadow-hover: 0 0 0 1px rgba(61, 224, 255, .8), 0 0 44px rgba(61, 224, 255, .6); }
[data-theme="neon"] .deco--bold { opacity: 1; }
[data-theme="mono"] { --logo-frame: #0A0A0A; --logo-a: #5A5A5A; --logo-b: #0A0A0A; --logo-cloud: #FFFFFF; --brand-sky: #0A0A0A; --brand-sky-hero: #0A0A0A; }
[data-theme="mono"] .hero__eyebrow { --hero-eyebrow: #0A0A0A; }
[data-theme="mono"] .ms__art { background: #0A0A0A; color: #FFFFFF; }
[data-theme="mono"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #FFFFFF; --on-primary: #0A0A0A; --primary-hover: #E6E6E6; --btn-shadow: none; --btn-shadow-hover: 6px 6px 0 #555555; }
[data-theme="mono"] .deco--lines { opacity: 1; }
[data-theme="sunny"] { --logo-frame: #1E2B45; --logo-a: #FFE58A; --logo-b: #7EC8F5; --logo-cloud: #FFFFFF; --brand-sky: #1B62AD; --brand-sky-hero: #1B62AD; }
[data-theme="sunny"] .hero__eyebrow { --hero-eyebrow: #4F3A00; }
[data-theme="sunny"] .ms__art { background: radial-gradient(circle at 30% 25%, #FFF3B8, #FFC629 70%); color: #1E2B45; }
[data-theme="sunny"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #FFD95A; --on-primary: #1E2B45; --primary-hover: #FFE380; --btn-shadow: 0 5px 0 #B38A00; --btn-shadow-hover: 0 8px 0 #B38A00; }
[data-theme="prairie"] { --logo-frame: #2F261F; --logo-a: #E5C98A; --logo-b: #A14E2E; --logo-cloud: #FFF8EE; --brand-sky: #8F4427; --brand-sky-hero: #8F4427; }
[data-theme="prairie"] .hero__eyebrow { --hero-eyebrow: #7A3A20; }
[data-theme="prairie"] .ms__art { background: radial-gradient(circle at 30% 25%, #F4DDAE, #D9B66F 45%, #A14E2E); color: #FFF8EE; }
[data-theme="prairie"] :is(.section--feature, .bundle, .footer__contact) .btn--primary { --primary: #E5C98A; --on-primary: #2F261F; --primary-hover: #EDD6A4; --btn-shadow: 0 4px 0 #A07A2E; --btn-shadow-hover: 0 7px 0 #A07A2E; }
[data-theme="prairie"] .deco--warm { opacity: 1; }
[data-theme="prairie"] .deco--hills { opacity: 1; }
:is([data-theme="diner"], [data-theme="lodge"], [data-theme="noir"], [data-theme="pop"], [data-theme="industrial"], [data-theme="neon"]) .hero__scroll { color: var(--hero-ink); background: rgba(255, 255, 255, .1); border: 1px solid var(--hero-line); }
:is([data-theme="fresh"], [data-theme="diner"], [data-theme="pop"], [data-theme="sunny"]) .eyebrow::before { display: none; }
:is([data-theme="fresh"], [data-theme="diner"], [data-theme="pop"], [data-theme="sunny"]) .section--feature { --eyebrow-bg: color-mix(in srgb, var(--feature-accent) 16%, transparent); }
:is([data-theme="sunny"]) .h2 em { background-size: 100% 100%; padding-inline: .1em; }
[data-theme="industrial"] .ms__art { border: 3px solid #000; }
[data-theme="mono"] .ms__art, [data-theme="noir"] .ms__art { border-radius: 0; }
[data-theme="noir"] .icon-tile, [data-theme="farmhouse"] .icon-tile { border-width: 1.5px; }
[data-theme="diner"] .h2 { line-height: 1.12; }
[data-theme="diner"] .hero__title { letter-spacing: .005em; }
[data-theme="pop"] .btn--primary:active, [data-theme="sunny"] .btn--primary:active, [data-theme="lodge"] .btn--primary:active, [data-theme="prairie"] .btn--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
[data-theme="neon"] .hero__title em, [data-theme="neon"] .h2 em { filter: drop-shadow(0 0 14px rgba(61, 224, 255, .45)); }
[data-theme="mono"] .section-head { max-width: 900px; }
/* ===== GENERATED STYLES: end ===== */