/* ==========================================================================
   Innoveta Theme Engine — tokens.css
   One token contract, five distinct theme families.
   All sections/nav/footer style PURELY from these custom properties, so the
   same section library renders five genuinely different looks.
   --------------------------------------------------------------------------
   Token contract (set per [data-theme]):
     --c-bg, --c-surface, --c-text, --c-muted,
     --c-primary, --c-primary-contrast, --c-accent,
     --c-border, --radius, --shadow,
     --font-head, --font-body, --section-pad
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,500&display=swap');
/* --- additional families for the 10 modern theme add-ons ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Archivo:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Jost:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* --- additional families for the 5 dashboard/kit theme add-ons ----------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700;8..144,800&family=Open+Sans:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Defaults (also the professional-premium fallback)
   -------------------------------------------------------------------------- */
:root {
  --c-bg: #ffffff;
  --c-surface: #f6f8fb;
  --c-text: #0f1b2d;
  --c-muted: #5a6b80;
  --c-primary: #14385f;
  --c-primary-contrast: #ffffff;
  --c-accent: #2f7df0;
  --c-border: #e4e9f0;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow: 0 18px 48px -24px rgba(15, 27, 45, 0.28);
  --shadow-sm: 0 6px 18px -10px rgba(15, 27, 45, 0.22);
  --font-head: 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 104px;
  --head-weight: 700;
  --head-spacing: -0.01em;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== professional-premium :: navy / white / soft grey ================== */
[data-theme="professional-premium"] {
  --c-bg: #ffffff;
  --c-surface: #f4f7fb;
  --c-text: #0f1b2d;
  --c-muted: #5a6b80;
  --c-primary: #11365c;
  --c-primary-contrast: #ffffff;
  --c-accent: #2f7df0;
  --c-border: #e3e9f1;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow: 0 22px 54px -28px rgba(15, 40, 75, 0.32);
  --shadow-sm: 0 8px 22px -12px rgba(15, 40, 75, 0.24);
  --font-head: 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 108px;
  --head-weight: 700;
  --head-spacing: -0.015em;
}

/* ===== calm-clinic :: soft teal/mint + warm cream + white =============== */
[data-theme="calm-clinic"] {
  --c-bg: #fbf8f3;
  --c-surface: #ffffff;
  --c-text: #1d2a2b;
  --c-muted: #5f7173;
  --c-primary: #137a72;
  --c-primary-contrast: #ffffff;
  --c-accent: #4cc4b0;
  --c-border: #e7ded2;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow: 0 26px 60px -30px rgba(19, 122, 114, 0.28);
  --shadow-sm: 0 10px 28px -16px rgba(19, 122, 114, 0.22);
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --section-pad: 100px;
  --head-weight: 700;
  --head-spacing: -0.01em;
}

/* ===== modern-saas :: deep indigo/violet on near-black, cyan accent ===== */
[data-theme="modern-saas"] {
  --c-bg: #0b0b18;
  --c-surface: #14142a;
  --c-text: #eef0fb;
  --c-muted: #9aa0c4;
  --c-primary: #6c5ce7;
  --c-primary-contrast: #ffffff;
  --c-accent: #22d3ee;
  --c-border: #25264a;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow: 0 30px 70px -30px rgba(108, 92, 231, 0.45);
  --shadow-sm: 0 14px 34px -18px rgba(34, 211, 238, 0.28);
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 112px;
  --head-weight: 600;
  --head-spacing: -0.02em;
}

/* ===== local-service-pro :: charcoal + strong amber/orange ============== */
[data-theme="local-service-pro"] {
  --c-bg: #ffffff;
  --c-surface: #f5f5f4;
  --c-text: #1c1917;
  --c-muted: #57534e;
  --c-primary: #1c1917;
  --c-primary-contrast: #ffffff;
  --c-accent: #f97316;
  --c-border: #e7e5e4;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 20px 48px -26px rgba(28, 25, 23, 0.4);
  --shadow-sm: 0 8px 20px -12px rgba(28, 25, 23, 0.3);
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --section-pad: 96px;
  --head-weight: 800;
  --head-spacing: -0.02em;
}

/* ===== creative-studio :: near-black + ivory + one vivid accent ========= */
[data-theme="creative-studio"] {
  --c-bg: #faf7f2;
  --c-surface: #ffffff;
  --c-text: #14110f;
  --c-muted: #6b6259;
  --c-primary: #14110f;
  --c-primary-contrast: #faf7f2;
  --c-accent: #ff4d2e;
  --c-border: #e6ded2;
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 8px;
  --shadow: 0 30px 70px -34px rgba(20, 17, 15, 0.4);
  --shadow-sm: 0 10px 28px -16px rgba(20, 17, 15, 0.28);
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --section-pad: 116px;
  --head-weight: 700;
  --head-spacing: -0.01em;
}

/* ==========================================================================
   MODERN THEME ADD-ONS (10) — tokens + font stacks only.
   Each reuses the same section/nav/footer library; only the token contract
   changes. 'Clash Display' is a Fontshare face (not on Google Fonts) so it is
   declared first with an imported Google fallback right behind it.
   ========================================================================== */

/* ===== aurora-saas :: near-black + electric indigo/cyan, glass, product UI = DARK */
[data-theme="aurora-saas"] {
  --c-bg: #07070f;
  --c-surface: #11132b;
  --c-text: #eef1ff;
  --c-muted: #9aa3cf;
  --c-primary: #6366f1;
  --c-primary-contrast: #ffffff;
  --c-accent: #22d3ee;
  --c-border: #232653;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow: 0 34px 80px -32px rgba(99, 102, 241, 0.55);
  --shadow-sm: 0 16px 38px -20px rgba(34, 211, 238, 0.4);
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 116px;
  --head-weight: 600;
  --head-spacing: -0.022em;
}

/* ===== editorial-agency :: cream + ink + one vivid accent, broken grid === LIGHT */
[data-theme="editorial-agency"] {
  --c-bg: #f4efe6;
  --c-surface: #fffdf8;
  --c-text: #14110d;
  --c-muted: #6b6258;
  --c-primary: #14110d;
  --c-primary-contrast: #f4efe6;
  --c-accent: #3b27ff;
  --c-border: #e2d9c9;
  --radius: 3px;
  --radius-sm: 2px;
  --radius-lg: 6px;
  --shadow: 0 34px 76px -36px rgba(20, 17, 13, 0.4);
  --shadow-sm: 0 12px 30px -18px rgba(20, 17, 13, 0.3);
  --font-head: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 124px;
  --head-weight: 800;
  --head-spacing: -0.03em;
}

/* ===== mono-studio :: monochrome greyscale, huge grotesque, single accent = LIGHT */
[data-theme="mono-studio"] {
  --c-bg: #f4f4f4;
  --c-surface: #ffffff;
  --c-text: #111111;
  --c-muted: #6e6e6e;
  --c-primary: #111111;
  --c-primary-contrast: #ffffff;
  --c-accent: #2962ff;
  --c-border: #e2e2e2;
  --radius: 2px;
  --radius-sm: 0px;
  --radius-lg: 4px;
  --shadow: 0 30px 70px -38px rgba(0, 0, 0, 0.34);
  --shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.24);
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 120px;
  --head-weight: 800;
  --head-spacing: -0.035em;
}

/* ===== vivid-pop :: bright violet/pink/lime, playful, energetic ========== LIGHT */
[data-theme="vivid-pop"] {
  --c-bg: #faf2ff;
  --c-surface: #ffffff;
  --c-text: #1a0b2e;
  --c-muted: #6b5b86;
  --c-primary: #7c3aed;
  --c-primary-contrast: #ffffff;
  --c-accent: #ec4899;
  --c-border: #ecdcfb;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow: 0 30px 70px -28px rgba(124, 58, 237, 0.5);
  --shadow-sm: 0 14px 34px -16px rgba(236, 72, 153, 0.4);
  --font-head: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --section-pad: 108px;
  --head-weight: 700;
  --head-spacing: -0.02em;
}

/* ===== luxe-catalog :: ivory + charcoal + soft gold, refined serif ======= LIGHT */
[data-theme="luxe-catalog"] {
  --c-bg: #f7f3ec;
  --c-surface: #ffffff;
  --c-text: #2b2722;
  --c-muted: #8a8174;
  --c-primary: #2b2722;
  --c-primary-contrast: #f7f3ec;
  --c-accent: #b08d4f;
  --c-border: #e8e0d3;
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 8px;
  --shadow: 0 36px 80px -40px rgba(43, 39, 34, 0.34);
  --shadow-sm: 0 12px 30px -18px rgba(43, 39, 34, 0.24);
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --section-pad: 140px;
  --head-weight: 600;
  --head-spacing: -0.01em;
}

/* ===== corporate-trust :: clean navy/white, structured cards, trustworthy = LIGHT */
[data-theme="corporate-trust"] {
  --c-bg: #ffffff;
  --c-surface: #f3f6fb;
  --c-text: #0e1b33;
  --c-muted: #54627a;
  --c-primary: #1b3a6b;
  --c-primary-contrast: #ffffff;
  --c-accent: #2f6fed;
  --c-border: #dde5f0;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 24px 56px -30px rgba(14, 27, 51, 0.3);
  --shadow-sm: 0 9px 24px -14px rgba(14, 27, 51, 0.22);
  --font-head: 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 104px;
  --head-weight: 700;
  --head-spacing: -0.012em;
}

/* ===== startup-gradient :: friendly blue-violet gradients, rounded, soft = LIGHT */
[data-theme="startup-gradient"] {
  --c-bg: #fbfaff;
  --c-surface: #f4f1ff;
  --c-text: #1e1b3a;
  --c-muted: #6b6890;
  --c-primary: #6d5efc;
  --c-primary-contrast: #ffffff;
  --c-accent: #38bdf8;
  --c-border: #e9e5fb;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 30px;
  --shadow: 0 30px 70px -30px rgba(109, 94, 252, 0.45);
  --shadow-sm: 0 14px 34px -18px rgba(56, 189, 248, 0.34);
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --section-pad: 110px;
  --head-weight: 700;
  --head-spacing: -0.02em;
}

/* ===== split-brand :: high-contrast black/white + bold accent, big type == LIGHT */
[data-theme="split-brand"] {
  --c-bg: #ffffff;
  --c-surface: #f2f2f2;
  --c-text: #0a0a0a;
  --c-muted: #5c5c5c;
  --c-primary: #0a0a0a;
  --c-primary-contrast: #ffffff;
  --c-accent: #ff3b1f;
  --c-border: #e3e3e3;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 2px;
  --shadow: 0 32px 70px -36px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 12px 30px -18px rgba(0, 0, 0, 0.3);
  --font-head: 'Clash Display', 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 118px;
  --head-weight: 800;
  --head-spacing: -0.035em;
}

/* ===== immersive-parallax :: cinematic dark, large imagery, layered depth = DARK */
[data-theme="immersive-parallax"] {
  --c-bg: #0a0c10;
  --c-surface: #14181f;
  --c-text: #eef2f7;
  --c-muted: #97a2b4;
  --c-primary: #c8a96a;
  --c-primary-contrast: #14110a;
  --c-accent: #6ea8fe;
  --c-border: #232833;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 18px 44px -22px rgba(0, 0, 0, 0.55);
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 128px;
  --head-weight: 600;
  --head-spacing: -0.022em;
}

/* ===== neo-brutalist :: off-white + ink + loud primary, heavy borders ==== LIGHT */
[data-theme="neo-brutalist"] {
  --c-bg: #f5f1e8;
  --c-surface: #ffffff;
  --c-text: #0d0d0d;
  --c-muted: #4a4a4a;
  --c-primary: #4d3dff;
  --c-primary-contrast: #ffffff;
  --c-accent: #ff5c00;
  --c-border: #0d0d0d;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --shadow: 6px 6px 0 #0d0d0d;
  --shadow-sm: 4px 4px 0 #0d0d0d;
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'JetBrains Mono', 'Inter', monospace;
  --section-pad: 96px;
  --head-weight: 700;
  --head-spacing: -0.02em;
}

/* ==========================================================================
   DASHBOARD / KIT THEME ADD-ONS (5) — tokens + font stacks only.
   Same section/nav/footer library; only the token contract changes.
   ========================================================================== */

/* ===== material-kit :: Google Material — indigo fill + teal, deep elevation = LIGHT */
[data-theme="material-kit"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-text: #1a1f36;
  --c-muted: #5b647d;
  --c-primary: #3f51b5;           /* Material indigo 500 */
  --c-primary-contrast: #ffffff;
  --c-accent: #009688;            /* Material teal 500 */
  --c-border: #e6e8f0;
  --radius: 12px;                 /* rounded-lg */
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 16px 38px -12px rgba(63, 81, 181, 0.42), 0 6px 14px -8px rgba(26, 31, 54, 0.28);
  --shadow-sm: 0 8px 18px -8px rgba(26, 31, 54, 0.28), 0 2px 6px -3px rgba(26, 31, 54, 0.22);
  --font-head: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 104px;
  --head-weight: 700;
  --head-spacing: -0.01em;
}

/* ===== soft-ui :: airy pastel indigo/pink, big radius, soft layered shadow = LIGHT */
[data-theme="soft-ui"] {
  --c-bg: #f8f9fe;
  --c-surface: #ffffff;
  --c-text: #2d3142;
  --c-muted: #8a90a6;
  --c-primary: #5e72e4;           /* Soft UI indigo */
  --c-primary-contrast: #ffffff;
  --c-accent: #f3578f;            /* soft pink */
  --c-border: #eceef6;
  --radius: 24px;                 /* rounded-2xl */
  --radius-sm: 14px;
  --radius-lg: 34px;
  --shadow: 0 20px 50px -16px rgba(94, 114, 228, 0.32), 0 10px 24px -12px rgba(45, 49, 66, 0.16);
  --shadow-sm: 0 10px 26px -12px rgba(94, 114, 228, 0.26), 0 4px 12px -6px rgba(45, 49, 66, 0.12);
  --font-head: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 112px;
  --head-weight: 700;
  --head-spacing: -0.015em;
}

/* ===== tabler-product :: crisp neutral data-product, Tabler blue, thin rules = LIGHT */
[data-theme="tabler-product"] {
  --c-bg: #ffffff;
  --c-surface: #f8fafc;
  --c-text: #1a2234;
  --c-muted: #667085;
  --c-primary: #066fd1;           /* Tabler blue */
  --c-primary-contrast: #ffffff;
  --c-accent: #0ca678;            /* Tabler teal-green */
  --c-border: #e6eaf0;
  --radius: 6px;                  /* crisp small radius */
  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow: 0 12px 30px -18px rgba(15, 30, 55, 0.22);
  --shadow-sm: 0 4px 12px -8px rgba(15, 30, 55, 0.18);
  --font-head: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --section-pad: 88px;            /* dense */
  --head-weight: 700;
  --head-spacing: -0.02em;
}

/* ===== newage-app :: vibrant purple->pink gradient masthead, light body == LIGHT */
[data-theme="newage-app"] {
  --c-bg: #ffffff;
  --c-surface: #f7f3ff;
  --c-text: #1f1340;
  --c-muted: #6f6391;
  --c-primary: #7c3aed;           /* vivid purple */
  --c-primary-contrast: #ffffff;
  --c-accent: #ec4899;            /* pink */
  --c-border: #ece2fb;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow: 0 30px 70px -28px rgba(124, 58, 237, 0.5), 0 12px 30px -16px rgba(236, 72, 153, 0.32);
  --shadow-sm: 0 14px 32px -16px rgba(124, 58, 237, 0.4);
  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --section-pad: 110px;
  --head-weight: 700;
  --head-spacing: -0.022em;
}

/* ===== console-devtool :: near-black console, neon green/cyan, mono accents = DARK */
[data-theme="console-devtool"] {
  --c-bg: #0a0e14;
  --c-surface: #11161f;
  --c-text: #e6edf3;
  --c-muted: #8b97a7;
  --c-primary: #2bd576;           /* neon green */
  --c-primary-contrast: #06140c;
  --c-accent: #2dd4ee;            /* neon cyan */
  --c-border: #1d2430;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(43, 213, 118, 0.12);
  --shadow-sm: 0 14px 34px -18px rgba(0, 0, 0, 0.66);
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --section-pad: 100px;
  --head-weight: 600;
  --head-spacing: -0.02em;
}

/* ==========================================================================
   Base element styling — consumes tokens only
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-spacing);
  color: var(--c-text);
  line-height: 1.12;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }

p { margin: 0 0 1rem; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--c-muted); line-height: 1.6; }
.text-muted-token { color: var(--c-muted) !important; }
.bg-surface-token { background: var(--c-surface); }
.bg-primary-token { background: var(--c-primary); color: var(--c-primary-contrast); }

/* Section rhythm ---------------------------------------------------------- */
.section-pad {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
}
@media (max-width: 767.98px) {
  .section-pad { padding-top: 64px; padding-bottom: 64px; }
}

/* Eyebrow label ----------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
[data-theme="creative-studio"] .eyebrow { letter-spacing: .26em; }

/* Buttons ----------------------------------------------------------------- */
.btn-innoveta {
  --_bg: var(--c-primary);
  --_fg: var(--c-primary-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: .92rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  text-decoration: none;
}
.btn-innoveta:hover {
  text-decoration: none;
  color: var(--_fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-innoveta--primary { background: var(--c-primary); color: var(--c-primary-contrast); }
.btn-innoveta--accent  { background: var(--c-accent); color: #ffffff; }
.btn-innoveta--secondary {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-innoveta--secondary:hover { color: var(--c-text); border-color: var(--c-primary); }
.btn-innoveta--ghost {
  background: transparent;
  color: var(--c-primary-contrast);
  border-color: rgba(255,255,255,.4);
}
.btn-innoveta--ghost:hover { color: var(--c-primary-contrast); background: rgba(255,255,255,.12); }
.btn-innoveta--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

[data-theme="creative-studio"] .btn-innoveta { text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
[data-theme="local-service-pro"] .btn-innoveta--primary { background: var(--c-accent); color: #fff; }

/* Cards / surfaces -------------------------------------------------------- */
.card-token {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card-token--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
}
.surface-contrast {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* Icon chip --------------------------------------------------------------- */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  color: var(--c-accent);
}
.icon-chip--solid { background: var(--c-primary); color: var(--c-primary-contrast); }

/* Pill / badge ------------------------------------------------------------ */
.pill-token {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  color: var(--c-accent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
}

/* Divider / soft gradient surfaces --------------------------------------- */
.gradient-mesh {
  background:
    radial-gradient(60% 80% at 20% 10%, color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 60%),
    radial-gradient(50% 70% at 90% 30%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 55%);
}

/* Navbar (token-driven) --------------------------------------------------- */
.innoveta-nav {
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.innoveta-nav .navbar-brand { font-family: var(--font-head); font-weight: 800; color: var(--c-text); letter-spacing: var(--head-spacing); }
.innoveta-nav .nav-link { color: var(--c-text); font-weight: 500; font-size: .96rem; opacity: .82; }
.innoveta-nav .nav-link:hover, .innoveta-nav .nav-link:focus { color: var(--c-accent); opacity: 1; }
.innoveta-nav .navbar-toggler { border-color: var(--c-border); color: var(--c-text); }
.innoveta-nav .navbar-toggler:focus { box-shadow: none; }
.brand-dot { color: var(--c-accent); }

/* Footer (token-driven) --------------------------------------------------- */
.innoveta-footer {
  background: var(--c-primary);
  color: var(--c-primary-contrast);
}
.innoveta-footer a { color: color-mix(in srgb, var(--c-primary-contrast) 78%, transparent); }
.innoveta-footer a:hover { color: var(--c-primary-contrast); }
.innoveta-footer .footer-title { color: var(--c-primary-contrast); font-family: var(--font-head); }
.innoveta-footer .footer-blurb { color: color-mix(in srgb, var(--c-primary-contrast) 80%, transparent); }
.innoveta-footer hr { border-color: color-mix(in srgb, var(--c-primary-contrast) 22%, transparent); opacity: 1; }
[data-theme="modern-saas"] .innoveta-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); }

/* Hero helpers ------------------------------------------------------------ */
.hero-media {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-fill { aspect-ratio: 4 / 3.2; width: 100%; }

/* Accordion (FAQ) token styling ------------------------------------------ */
.innoveta-accordion .accordion-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius) !important;
  margin-bottom: .9rem;
  overflow: hidden;
}
.innoveta-accordion .accordion-button {
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
}
.innoveta-accordion .accordion-button:not(.collapsed) { color: var(--c-accent); box-shadow: none; }
.innoveta-accordion .accordion-button:focus { box-shadow: none; border-color: var(--c-border); }
.innoveta-accordion .accordion-button::after {
  filter: grayscale(1);
}
.innoveta-accordion .accordion-body { color: var(--c-muted); }

/* Stats band -------------------------------------------------------------- */
.stat-value { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2rem, 4vw, 3rem); color: var(--c-primary-contrast); line-height: 1; }
.stat-label { color: color-mix(in srgb, var(--c-primary-contrast) 80%, transparent); font-size: .95rem; }

/* Marquee (creative hero) ------------------------------------------------- */
.innoveta-marquee { overflow: hidden; white-space: nowrap; }
.innoveta-marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  will-change: transform;
  animation: innoveta-marquee 26s linear infinite;
}
.innoveta-marquee__track span {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--c-text);
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}
.innoveta-marquee__track span::after { content: "✦"; color: var(--c-accent); }
@keyframes innoveta-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Logo cloud -------------------------------------------------------------- */
.logo-item {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-muted);
  opacity: .7;
  letter-spacing: -.01em;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.logo-item:hover { opacity: 1; color: var(--c-text); }

/* Pricing ----------------------------------------------------------------- */
.price-amount { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2.2rem, 4vw, 2.9rem); color: var(--c-text); line-height: 1; }
.plan-featured {
  border-color: var(--c-accent);
  box-shadow: var(--shadow);
  position: relative;
}
.plan-featured::before {
  content: "Most popular";
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
}

/* Portfolio --------------------------------------------------------------- */
.portfolio-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-border);
}
.portfolio-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.portfolio-tile:hover img { transform: scale(1.06); }
.portfolio-tile__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color: #fff;
}
.portfolio-tile__meta .cat { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* List checks ------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--c-text); }
.check-list li i { color: var(--c-accent); margin-top: .2rem; flex: none; }

/* Section title block ----------------------------------------------------- */
.section-head { max-width: 720px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   Motion — reveal primitives (driven by motion.js adding .is-visible)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* motion intensity tuning */
body[data-motion="clean"] [data-reveal] { transition-duration: .5s; transform: translateY(10px); }
body[data-motion="premium"] [data-reveal] { transition-duration: .8s; }
body[data-motion="product"] [data-reveal] { transform: translateY(22px); transition-duration: .8s; }
body[data-motion="creative"] [data-reveal] { transform: translateY(28px); transition-duration: .9s; }

/* stagger for premium/creative via inline --reveal-delay */
[data-reveal] { transition-delay: var(--reveal-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .innoveta-marquee__track { animation: none !important; }
  .btn-innoveta, .card-token, .portfolio-tile img { transition: none !important; }
  /* Always show the poster/gradient fallback, never a blank canvas. */
  .anim-fallback { opacity: 1 !important; }
  .gsap-word { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Motion stack mount points — Rive canvas / lottie accents / word-split
   Every mount renders a gradient/poster fallback so a blocked CDN or a
   disabled motion library never breaks the layout.
   ========================================================================== */

/* Rive interactive stage: canvas on top, poster fallback behind. ---------- */
.hero-media { position: relative; }
.anim-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.anim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.anim-stage .anim-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: opacity .5s var(--ease);
}
/* When Rive has drawn its first frame, fade the poster out behind it. */
.anim-stage.rive-ready .anim-fallback { opacity: 0; pointer-events: none; }

/* lottie-web accents: container with a gradient fallback child. ----------- */
.anim-lottie {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  vertical-align: middle;
}
.anim-lottie .anim-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  opacity: .9;
  transition: opacity .5s var(--ease);
}
.anim-lottie svg,
.anim-lottie canvas { position: relative; z-index: 1; }
/* Once the lottie has rendered, drop the placeholder gradient. */
.anim-lottie.lottie-ready .anim-fallback { opacity: 0; }

.anim-lottie--accent   { width: 96px;  height: 96px;  margin: 0 auto; }
.anim-lottie--editorial{ width: 140px; height: 140px; }
.anim-lottie--hero {
  position: absolute;
  top: -22px;
  right: -10px;
  width: 116px;
  height: 116px;
  z-index: 3;
}
.anim-lottie--corner {
  position: absolute;
  bottom: -22px;
  right: -16px;
  width: 116px;
  height: 116px;
  z-index: 3;
}
@media (max-width: 575.98px) {
  .anim-lottie--hero, .anim-lottie--corner { display: none; }
}

/* GSAP word-stagger headline: each word animates in. --------------------- */
.gsap-word {
  display: inline-block;
  will-change: transform, opacity;
}