.elementor-kit-1671{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-1671 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
   MyBoost — Combined Global CSS
   Auto-generated: all six global files merged into one.
   Paste this into Elementor → Site Settings → Custom CSS.
   
   Source files (in order):
     1. 01-tokens.css
     2. 02-reset.css
     3. 03-base.css
     4. 04-typography.css
     5. 05-utilities.css
     6. 06-components.css
   
   Regenerate with: cat 01-tokens.css 02-reset.css 03-base.css \
                         04-typography.css 05-utilities.css 06-components.css \
                         > _all-global.css
   ============================================================================ */

/* ============================================================================
   MyBoost — Design Tokens
   Single source of truth for all design values.
   Never hardcode values elsewhere. Always reference these tokens.
   ============================================================================ */

:root {
  /* ==========================================================================
     1. COLORS
     Base palette kept minimal; text opacity variants and semantic colors
     are derived from the core set.
     ========================================================================== */

  /* 1.1 Brand / Base */
  --mb-color-white: #FFFFFF;
  --mb-color-dark: #070708;

  /* 1.2 Accent (gradient stops, exposed separately for edge cases) */
  --mb-color-accent-start: #8104CB;
  --mb-color-accent-end:   #FF00BB;

  /* 1.3 Text — derived from white with opacity layers
     Figma shows text on dark in pure white plus one muted variant at .72.
     Tertiary + disabled added for completeness (form hints, inactive states). */
  --mb-color-text-primary:   var(--mb-color-white);
  --mb-color-text-secondary: rgba(255, 255, 255, 0.72);
  --mb-color-text-tertiary:  rgba(255, 255, 255, 0.48);
  --mb-color-text-disabled:  rgba(255, 255, 255, 0.32);

  /* 1.4 Backgrounds */
  --mb-color-bg:         var(--mb-color-dark);
  --mb-color-bg-elevated: #101014;  /* subtle lift for cards/modals */

  /* 1.5 Borders */
  --mb-color-border-light:  var(--mb-color-white);
  --mb-color-border-dark:   var(--mb-color-dark);
  --mb-color-border-subtle: rgba(255, 255, 255, 0.16);

  /* 1.6 Overlays (used by buttons / hover states / scrim) */
  --mb-color-overlay-white-06: rgba(255, 255, 255, 0.06);
  --mb-color-overlay-white-32: rgba(255, 255, 255, 0.32);
  --mb-color-overlay-white-60: rgba(255, 255, 255, 0.60);
  --mb-color-overlay-gray-20:  rgba(65, 65, 65, 0.20);
  --mb-color-overlay-dark-60:  rgba(7, 7, 8, 0.60);

  /* 1.7 Semantic — chosen to harmonize with the neon-magenta accent system.
     Luminous hues readable on the dark background, contrast-checked ≥ 4.5:1. */
  --mb-color-success: #1FD655;
  --mb-color-error:   #FF3B5C;
  --mb-color-warning: #FFB800;
  --mb-color-info:    #4D9FFF;

  /* 1.8 Focus ring — high-visibility, brand-aligned */
  --mb-color-focus: #FF00BB;


  /* ==========================================================================
     2. GRADIENTS
     Authored once; re-used across buttons, dividers, decorative surfaces.
     ========================================================================== */

  /* 2.1 Primary accent gradient (-173deg per Figma) */
  --mb-gradient-accent:
    linear-gradient(-173deg, var(--mb-color-accent-start) 0%, var(--mb-color-accent-end) 100%);

  /* 2.2 Button — default/hover (white overlay 32% on accent @ 60deg) */
  --mb-gradient-button-primary:
    linear-gradient(0deg, var(--mb-color-overlay-white-32) 0%, var(--mb-color-overlay-white-32) 100%),
    linear-gradient(60deg, var(--mb-color-accent-start) 0.02%, var(--mb-color-accent-end) 99.99%);

  /* 2.3 Button — active/pressed (dark overlay 20% on accent) */
  --mb-gradient-button-primary-pressed:
    linear-gradient(0deg, var(--mb-color-overlay-gray-20) 0%, var(--mb-color-overlay-gray-20) 100%),
    linear-gradient(60deg, var(--mb-color-accent-start) 0.02%, var(--mb-color-accent-end) 99.99%);

  /* 2.4 Light button — horizontal white sheen (transparent → 60% → transparent) */
  --mb-gradient-button-light:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      var(--mb-color-overlay-white-60) 50%,
      rgba(255, 255, 255, 0) 100%);


  /* ==========================================================================
     3. TYPOGRAPHY
     Font families, sizes (rem), line heights (rem), weights.
     All sizes expressed in rem assuming browser default 16px.
     ========================================================================== */

  /* 3.1 Families */
  --mb-font-title: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --mb-font-body:  'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

  /* 3.2 Weights */
  --mb-fw-regular:  400;
  --mb-fw-medium:   500;
  --mb-fw-semibold: 600;

  /* 3.3 Title sizes (Anton) */
  --mb-fs-title-1: 8.75rem;  /* 140px */
  --mb-lh-title-1: 9rem;     /* 144px */

  --mb-fs-title-2: 4.5rem;   /*  72px */
  --mb-lh-title-2: 5.25rem;  /*  84px */

  --mb-fs-title-3: 3.75rem;  /*  60px */
  --mb-lh-title-3: 4rem;     /*  64px */

  --mb-fs-title-4: 2.25rem;  /*  36px */
  --mb-lh-title-4: 2.75rem;  /*  44px */

  --mb-fs-title-5: 1.25rem;  /*  20px */
  --mb-lh-title-5: 1.5rem;   /*  24px */

  /* 3.4 Body sizes (Noto Sans) */
  --mb-fs-body-1: 1rem;      /*  16px */
  --mb-lh-body-1: 1.5rem;    /*  24px */
  --mb-fw-body-1: var(--mb-fw-semibold);

  --mb-fs-body-2: 0.875rem;  /*  14px */
  --mb-lh-body-2: 1.25rem;   /*  20px */
  --mb-fw-body-2: var(--mb-fw-semibold);

  --mb-fs-body-3: 0.875rem;  /*  14px */
  --mb-lh-body-3: 1.5rem;    /*  24px */
  --mb-fw-body-3: var(--mb-fw-medium);

  --mb-fs-body-4: 0.875rem;  /*  14px */
  --mb-lh-body-4: 1.25rem;   /*  20px */
  --mb-fw-body-4: var(--mb-fw-regular);

  --mb-fs-body-5: 0.75rem;   /*  12px */
  --mb-lh-body-5: 1rem;      /*  16px */
  --mb-fw-body-5: var(--mb-fw-regular);

  /* 3.5 Title strokes (-webkit-text-stroke widths per title level) */
  --mb-stroke-title-1: 20px;
  --mb-stroke-title-2: 16px;
  --mb-stroke-title-4: 12px;
  --mb-stroke-title-5: 6px;
  --mb-stroke-color:   var(--mb-color-dark);

  /* 3.6 Letter spacing (tight Anton headlines often benefit) */
  --mb-ls-tight:  -0.01em;
  --mb-ls-normal:  0;
  --mb-ls-wide:   0.02em;


  /* ==========================================================================
     4. SPACING
     4px base scale, anchored on designer-provided values (16 / 24 / 32).
     Use for padding, margin, gap.
     ========================================================================== */

  --mb-space-0:   0;
  --mb-space-1:   0.25rem;   /*   4px */
  --mb-space-2:   0.5rem;    /*   8px */
  --mb-space-3:   0.75rem;   /*  12px */
  --mb-space-4:   1rem;      /*  16px  — designer anchor */
  --mb-space-5:   1.5rem;    /*  24px  — designer anchor */
  --mb-space-6:   2rem;      /*  32px  — designer anchor */
  --mb-space-7:   3rem;      /*  48px */
  --mb-space-8:   4rem;      /*  64px */
  --mb-space-9:   6rem;      /*  96px */
  --mb-space-10:  8rem;      /* 128px */
  --mb-space-11: 10rem;      /* 160px */


  /* ==========================================================================
     5. BORDER RADIUS
     Designer uses 40 / 80 / 100 extensively. Smaller radii added for inputs,
     cards, small controls.
     ========================================================================== */

  --mb-radius-0:    0;
  --mb-radius-sm:   0.5rem;   /*  8px — inputs, small controls */
  --mb-radius-md:   1rem;     /* 16px — cards */
  --mb-radius-40:   2.5rem;   /* 40px — designer anchor */
  --mb-radius-80:   5rem;     /* 80px — designer anchor */
  --mb-radius-100:  6.25rem;  /* 100px — designer anchor (buttons) */
  --mb-radius-pill: 9999px;


  /* ==========================================================================
     6. SHADOWS
     ========================================================================== */

  --mb-shadow-accent: 0 0 24px 0 rgba(219, 61, 255, 0.30);
  --mb-shadow-focus:  0 0 0 3px rgba(255, 0, 187, 0.60);
  --mb-shadow-sm:     0 2px  8px  rgba(0, 0, 0, 0.32);
  --mb-shadow-md:     0 8px 24px  rgba(0, 0, 0, 0.40);
  --mb-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.48);


  /* ==========================================================================
     7. BORDERS
     ========================================================================== */

  --mb-border-width-thin:  1px;
  --mb-border-width-base:  2px;
  --mb-border-width-thick: 4px;


  /* ==========================================================================
     8. TRANSITIONS & MOTION
     ========================================================================== */

  --mb-transition-fast:  150ms ease;
  --mb-transition-base:  250ms ease;
  --mb-transition-slow:  400ms ease;
  --mb-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);


  /* ==========================================================================
     9. Z-INDEX SCALE
     Use these instead of magic numbers.
     ========================================================================== */

  --mb-z-base:     1;
  --mb-z-dropdown: 100;
  --mb-z-sticky:   200;
  --mb-z-header:   300;
  --mb-z-overlay:  400;
  --mb-z-modal:    500;
  --mb-z-toast:    600;
  --mb-z-tooltip:  700;


  /* ==========================================================================
     10. BREAKPOINTS (informational — CSS media queries can't use vars natively)
     Mirrored here so JS and documentation can read them.
     ========================================================================== */

  --mb-bp-mobile:  375px;
  --mb-bp-tablet:  768px;
  --mb-bp-desktop: 1440px;


  /* ==========================================================================
     11. LAYOUT / CONTAINERS
     ========================================================================== */

  --mb-container-max:             1440px;
  --mb-container-content-max:     1280px; /* inner content without edge padding */
  --mb-container-padding-mobile:  var(--mb-space-4);  /* 16px */
  --mb-container-padding-tablet:  var(--mb-space-6);  /* 32px */
  --mb-container-padding-desktop: var(--mb-space-8);  /* 64px */
}


/* ============================================================================
   REDUCED MOTION
   Globally soften transitions when user prefers reduced motion.
   Individual components should also respect this.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mb-transition-fast: 0ms;
    --mb-transition-base: 0ms;
    --mb-transition-slow: 0ms;
  }
}
/* ============================================================================
   MyBoost — CSS Reset
   Minimal, modern reset. Keeps useful defaults, removes quirks.
   Inspired by Josh Comeau's & Andy Bell's modern resets.
   ============================================================================ */

/* 1. Box-sizing: border-box on everything */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Reset default margins */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

/* 3. Remove default list styles on elements with a class (lets us keep <ul>/<ol> semantic
      inside prose content untouched) */
ul[class],
ol[class] {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 4. HTML root defaults */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

/* 5. Body defaults */
body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 6. Media sensible defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 8. Textarea resize handle — only vertical by default */
textarea {
  resize: vertical;
}

/* 9. Buttons — remove UA styling, keep semantics */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 10. Links — tokenized color, remove underline by default; underline on prose/body */
a {
  color: inherit;
  text-decoration: none;
}

/* 11. Avoid text overflow on long words */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 12. Root stacking context for modals/tooltips */
#root,
#__next {
  isolation: isolate;
}

/* 13. Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================================
   MyBoost — Base Styles
   Element-level defaults that apply site-wide.
   Component-specific styles live in their own files.
   ============================================================================ */

/* 1. HTML + Body — set up the dark theme baseline */
html {
  background-color: var(--mb-color-bg);
}

body {
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body-1);
  line-height: var(--mb-lh-body-1);
  font-weight: var(--mb-fw-regular);
  color: var(--mb-color-text-primary);
  background-color: var(--mb-color-bg);
}

/* 2. Headings — font family only. Size/line-height come from .mb-title-* classes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mb-font-title);
  font-weight: var(--mb-fw-regular);
  line-height: 1.1;
  letter-spacing: var(--mb-ls-tight);
}

/* 3. Paragraphs — default body-4 rhythm; overridden by .mb-body-* classes */
p {
  font-family: var(--mb-font-body);
}

/* 4. Links — subtle accent hover, underline on hover for discoverability.
      Components that need different link styling override this locally. */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mb-transition-fast), opacity var(--mb-transition-fast);
}

a:hover,
a:focus-visible {
  opacity: 0.8;
}

/* 5. Strong / em — semantic weight */
strong, b {
  font-weight: var(--mb-fw-semibold);
}

em, i {
  font-style: italic;
}

/* 6. Lists inside prose keep their markers */
ul:not([class]),
ol:not([class]) {
  padding-inline-start: var(--mb-space-5);
}

/* 7. Horizontal rule */
hr {
  border: 0;
  border-top: var(--mb-border-width-thin) solid var(--mb-color-border-subtle);
  margin-block: var(--mb-space-6);
}

/* 8. Selection */
::selection {
  background-color: var(--mb-color-accent-end);
  color: var(--mb-color-white);
}

/* 9. Focus-visible — unified focus ring for keyboard users */
:focus-visible {
  outline: var(--mb-border-width-base) solid var(--mb-color-focus);
  outline-offset: 2px;
  border-radius: var(--mb-radius-sm);
}

button:focus-visible,
a:focus-visible {
  box-shadow: var(--mb-shadow-focus);
  outline: none;
}

/* 10. Images — smooth downscaling */
img {
  image-rendering: auto;
}

/* 11. Scrollbars — dark-themed (optional polish, Webkit + Firefox) */
* {
  scrollbar-color: var(--mb-color-border-subtle) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--mb-color-border-subtle);
  border-radius: var(--mb-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--mb-color-text-tertiary);
}
/* ============================================================================
   MyBoost — Typography Classes
   Use these on any element. Do not redeclare font-size/line-height inline.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TITLES (Anton)
   .mb-title-N          → solid white title
   .mb-title-N--stroke  → white fill + dark stroke (per Figma)
   .mb-title-N--outline → transparent fill + dark stroke only (decorative)
   ---------------------------------------------------------------------------- */

.mb-title-1,
.mb-title-2,
.mb-title-3,
.mb-title-4,
.mb-title-5 {
  font-family: var(--mb-font-title);
  font-weight: var(--mb-fw-regular);
  letter-spacing: var(--mb-ls-tight);
  color: var(--mb-color-text-primary);
  margin: 0;
}

.mb-title-1 {
  font-size: var(--mb-fs-title-1);
  line-height: var(--mb-lh-title-1);
}
.mb-title-2 {
  font-size: var(--mb-fs-title-2);
  line-height: var(--mb-lh-title-2);
}
.mb-title-3 {
  font-size: var(--mb-fs-title-3);
  line-height: var(--mb-lh-title-3);
}
.mb-title-4 {
  font-size: var(--mb-fs-title-4);
  line-height: var(--mb-lh-title-4);
}
.mb-title-5 {
  font-size: var(--mb-fs-title-5);
  line-height: var(--mb-lh-title-5);
}

/* Stroke modifiers — white fill with dark outline stroke */
.mb-title-1--stroke {
  -webkit-text-stroke: var(--mb-stroke-title-1) var(--mb-stroke-color);
  paint-order: stroke fill;
}
.mb-title-2--stroke {
  -webkit-text-stroke: var(--mb-stroke-title-2) var(--mb-stroke-color);
  paint-order: stroke fill;
}
.mb-title-4--stroke {
  -webkit-text-stroke: var(--mb-stroke-title-4) var(--mb-stroke-color);
  paint-order: stroke fill;
}
.mb-title-5--stroke {
  -webkit-text-stroke: var(--mb-stroke-title-5) var(--mb-stroke-color);
  paint-order: stroke fill;
}

/* Outline-only modifier (transparent fill, useful for layered/decorative headings) */
.mb-title-1--outline {
  color: transparent;
  -webkit-text-stroke: var(--mb-stroke-title-1) var(--mb-color-white);
}
.mb-title-2--outline {
  color: transparent;
  -webkit-text-stroke: var(--mb-stroke-title-2) var(--mb-color-white);
}
.mb-title-4--outline {
  color: transparent;
  -webkit-text-stroke: var(--mb-stroke-title-4) var(--mb-color-white);
}
.mb-title-5--outline {
  color: transparent;
  -webkit-text-stroke: var(--mb-stroke-title-5) var(--mb-color-white);
}

/* Gradient text modifier — fills the title with the accent gradient */
.mb-title--gradient {
  background: var(--mb-gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ----------------------------------------------------------------------------
   BODY (Noto Sans)
   Weights follow Figma spec:
     body-1: 16/24  semibold
     body-2: 14/20  semibold
     body-3: 14/24  medium
     body-4: 14/20  regular
     body-5: 12/16  regular
   ---------------------------------------------------------------------------- */

.mb-body-1,
.mb-body-2,
.mb-body-3,
.mb-body-4,
.mb-body-5 {
  font-family: var(--mb-font-body);
  color: var(--mb-color-text-primary);
  margin: 0;
}

.mb-body-1 {
  font-size: var(--mb-fs-body-1);
  line-height: var(--mb-lh-body-1);
  font-weight: var(--mb-fw-body-1);
}
.mb-body-2 {
  font-size: var(--mb-fs-body-2);
  line-height: var(--mb-lh-body-2);
  font-weight: var(--mb-fw-body-2);
}
.mb-body-3 {
  font-size: var(--mb-fs-body-3);
  line-height: var(--mb-lh-body-3);
  font-weight: var(--mb-fw-body-3);
}
.mb-body-4 {
  font-size: var(--mb-fs-body-4);
  line-height: var(--mb-lh-body-4);
  font-weight: var(--mb-fw-body-4);
}
.mb-body-5 {
  font-size: var(--mb-fs-body-5);
  line-height: var(--mb-lh-body-5);
  font-weight: var(--mb-fw-body-5);
}


/* ----------------------------------------------------------------------------
   TEXT COLOR MODIFIERS
   Combine with any typography class: class="mb-body-3 mb-text-secondary"
   ---------------------------------------------------------------------------- */

.mb-text-primary   { color: var(--mb-color-text-primary); }
.mb-text-secondary { color: var(--mb-color-text-secondary); }
.mb-text-tertiary  { color: var(--mb-color-text-tertiary); }
.mb-text-disabled  { color: var(--mb-color-text-disabled); }
.mb-text-dark      { color: var(--mb-color-dark); }

/* Alignment */
.mb-text-left   { text-align: left; }
.mb-text-center { text-align: center; }
.mb-text-right  { text-align: right; }

/* Transform */
.mb-text-upper { text-transform: uppercase; }
.mb-text-lower { text-transform: lowercase; }


/* ----------------------------------------------------------------------------
   RESPONSIVE TITLE SCALING
   On mobile, the large display sizes (title-1, title-2) are reduced so they
   fit a 375px viewport without horizontal scroll. Titles 3–5 keep their sizes.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mb-title-1 {
    font-size: 4rem;        /* 64px */
    line-height: 4.25rem;   /* 68px */
  }
  .mb-title-1--stroke,
  .mb-title-1--outline {
    -webkit-text-stroke-width: 5px;
  }

  .mb-title-2 {
    font-size: 2.75rem;     /* 44px */
    line-height: 3rem;      /* 48px */
  }
  .mb-title-2--stroke,
  .mb-title-2--outline {
    -webkit-text-stroke-width: 4px;
  }

  .mb-title-3 {
    font-size: 2.5rem;      /* 40px */
    line-height: 2.75rem;   /* 44px */
  }

  .mb-title-4--stroke,
  .mb-title-4--outline {
    -webkit-text-stroke-width: 3px;
  }
}
/* ============================================================================
   MyBoost — Utilities
   A small, intentional set of helpers. Not a utility framework.
   Everything here uses tokens.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CONTAINER
   Use .mb-container as the horizontal constraint wrapper for every section.
   ---------------------------------------------------------------------------- */

.mb-container {
  width: 100%;
  max-width: var(--mb-container-max);
  margin-inline: auto;
  padding-inline: var(--mb-container-padding-mobile);
}

@media (min-width: 768px) {
  .mb-container {
    padding-inline: var(--mb-container-padding-tablet);
  }
}

@media (min-width: 1440px) {
  .mb-container {
    padding-inline: var(--mb-container-padding-desktop);
  }
}

/* Narrower variant for text-heavy content (FAQs, legal, blog) */
.mb-container--narrow {
  max-width: 48rem; /* 768px */
}


/* ----------------------------------------------------------------------------
   SECTION WRAPPER
   Vertical rhythm between page sections. Use on the outer <section>.
   ---------------------------------------------------------------------------- */

.mb-section {
  padding-block: var(--mb-space-8);     /* 64px mobile */
}

@media (min-width: 1440px) {
  .mb-section {
    padding-block: var(--mb-space-10);  /* 128px desktop */
  }
}

.mb-section--tight { padding-block: var(--mb-space-6); }
.mb-section--loose { padding-block: var(--mb-space-11); }


/* ----------------------------------------------------------------------------
   FLEX & GRID HELPERS
   Thin, on-demand. Use real CSS when layout gets complex.
   ---------------------------------------------------------------------------- */

.mb-flex         { display: flex; }
.mb-flex-col     { display: flex; flex-direction: column; }
.mb-flex-center  { display: flex; align-items: center; justify-content: center; }
.mb-flex-between { display: flex; align-items: center; justify-content: space-between; }
.mb-flex-wrap    { flex-wrap: wrap; }

.mb-items-start    { align-items: flex-start; }
.mb-items-center   { align-items: center; }
.mb-items-end      { align-items: flex-end; }
.mb-justify-start  { justify-content: flex-start; }
.mb-justify-center { justify-content: center; }
.mb-justify-end    { justify-content: flex-end; }
.mb-justify-between{ justify-content: space-between; }


/* ----------------------------------------------------------------------------
   GAP UTILITIES (for flex & grid)
   ---------------------------------------------------------------------------- */

.mb-gap-1 { gap: var(--mb-space-1); }
.mb-gap-2 { gap: var(--mb-space-2); }
.mb-gap-3 { gap: var(--mb-space-3); }
.mb-gap-4 { gap: var(--mb-space-4); }
.mb-gap-5 { gap: var(--mb-space-5); }
.mb-gap-6 { gap: var(--mb-space-6); }
.mb-gap-7 { gap: var(--mb-space-7); }
.mb-gap-8 { gap: var(--mb-space-8); }


/* ----------------------------------------------------------------------------
   DISPLAY / VISIBILITY
   ---------------------------------------------------------------------------- */

.mb-hidden       { display: none !important; }
.mb-block        { display: block; }
.mb-inline       { display: inline; }
.mb-inline-block { display: inline-block; }

/* Responsive show/hide */
.mb-hidden-mobile  { display: initial; }
.mb-hidden-desktop { display: initial; }

@media (max-width: 1439px) {
  .mb-hidden-mobile { display: none !important; }
}
@media (min-width: 1440px) {
  .mb-hidden-desktop { display: none !important; }
}


/* ----------------------------------------------------------------------------
   ACCESSIBILITY HELPERS
   ---------------------------------------------------------------------------- */

/* Visually hide but keep available to screen readers (for skip-links, labels) */
.mb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — becomes visible when focused */
.mb-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--mb-space-3) var(--mb-space-4);
  background: var(--mb-color-white);
  color: var(--mb-color-dark);
  z-index: var(--mb-z-tooltip);
  transform: translateY(-100%);
  transition: transform var(--mb-transition-fast);
}
.mb-skip-link:focus-visible {
  transform: translateY(0);
}


/* ----------------------------------------------------------------------------
   DECORATIVE
   ---------------------------------------------------------------------------- */

/* Accent gradient divider (1px line) */
.mb-divider-accent {
  height: 1px;
  width: 100%;
  background: var(--mb-gradient-accent);
  border: 0;
}
/* ============================================================================
   MyBoost — Shared Components
   Global components used across multiple pages/sections.
   Section-specific components live in their own section folder.
   ============================================================================ */

/* ============================================================================
   BUTTON — shared base
   Two variants: primary (gradient fill), light (ghost with sheen).
   Sizes: default, small.
   All variants are accessible: keyboard-focusable, respect reduced motion.
   ============================================================================ */

.mb-btn {
  /* Base reset + shared layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);

  /* Typography — body-1 semibold reads strongest on CTAs */
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body-1);
  line-height: var(--mb-lh-body-1);
  font-weight: var(--mb-fw-semibold);
  text-decoration: none;
  white-space: nowrap;

  /* Sizing */
  padding: var(--mb-space-3) var(--mb-space-6);  /* 12px 32px */
  min-height: 3rem;                               /* 48px — AA target size */

  /* Shape */
  border: 0;
  border-radius: var(--mb-radius-100);

  /* Color — default to light text; variants can override */
  color: var(--mb-color-white);

  /* Interaction */
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--mb-transition-fast),
    box-shadow var(--mb-transition-base),
    opacity    var(--mb-transition-base),
    background var(--mb-transition-base);
}

/* Size modifier — small */
.mb-btn--sm {
  font-size: var(--mb-fs-body-2);
  line-height: var(--mb-lh-body-2);
  padding: var(--mb-space-2) var(--mb-space-5);
  min-height: 2.25rem; /* 36px */
}

/* Focus state — shared across all variants */
.mb-btn:focus-visible {
  outline: none;
  box-shadow: var(--mb-shadow-focus);
}

/* Disabled */
.mb-btn:disabled,
.mb-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Full-width modifier for mobile stacks */
.mb-btn--block {
  display: flex;
  width: 100%;
}


/* ----------------------------------------------------------------------------
   BUTTON — Primary (gradient fill)
   Default = hover per Figma, but hover adds a subtle lift + stronger glow
   for better UX affordance.
   ---------------------------------------------------------------------------- */

.mb-btn--primary {
  background: var(--mb-gradient-button-primary);
  box-shadow: var(--mb-shadow-accent);
  color: var(--mb-color-white);
}

.mb-btn--primary:hover {
  box-shadow: 0 0 32px 0 rgba(219, 61, 255, 0.48);
  transform: translateY(-1px);
}

.mb-btn--primary:active {
  background: var(--mb-gradient-button-primary-pressed);
  box-shadow: 0 0 12px 0 rgba(219, 61, 255, 0.20);
  transform: translateY(0);
}


/* ----------------------------------------------------------------------------
   BUTTON — Light (ghost with horizontal sheen)
   Transparent base; content shines through a soft white sheen.
   Per Figma the sheen is 0 → 60% → 0 at 50% stop, with opacity 0.5.
   ---------------------------------------------------------------------------- */

.mb-btn--light {
  position: relative;
  background: transparent;
  color: var(--mb-color-white);
  isolation: isolate; /* keep the ::before sheen contained */
}

.mb-btn--light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mb-gradient-button-light);
  opacity: 0.5;
  transition: opacity var(--mb-transition-base);
  z-index: -1;
}

.mb-btn--light:hover::before {
  opacity: 1;
}

.mb-btn--light:active::before {
  opacity: 0.7;
}


/* ============================================================================
   FORM CONTROLS — baseline styles for inputs, textareas, selects
   WooCommerce will inherit these on checkout / contact forms.
   ============================================================================ */

.mb-input,
.mb-textarea,
.mb-select {
  width: 100%;
  padding: var(--mb-space-3) var(--mb-space-4);
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body-1);
  line-height: var(--mb-lh-body-1);
  color: var(--mb-color-text-primary);
  background-color: transparent;
  border: var(--mb-border-width-thin) solid var(--mb-color-border-subtle);
  border-radius: var(--mb-radius-sm);
  transition: border-color var(--mb-transition-fast), box-shadow var(--mb-transition-fast);
}

.mb-input::placeholder,
.mb-textarea::placeholder {
  color: var(--mb-color-text-tertiary);
}

.mb-input:hover,
.mb-textarea:hover,
.mb-select:hover {
  border-color: var(--mb-color-text-tertiary);
}

.mb-input:focus-visible,
.mb-textarea:focus-visible,
.mb-select:focus-visible {
  outline: none;
  border-color: var(--mb-color-focus);
  box-shadow: var(--mb-shadow-focus);
}

.mb-input[aria-invalid="true"],
.mb-textarea[aria-invalid="true"] {
  border-color: var(--mb-color-error);
}

/* Label + helper text */
.mb-label {
  display: block;
  margin-bottom: var(--mb-space-2);
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-body-2);
  line-height: var(--mb-lh-body-2);
  font-weight: var(--mb-fw-semibold);
  color: var(--mb-color-text-primary);
}

.mb-helper-text {
  margin-top: var(--mb-space-2);
  font-size: var(--mb-fs-body-5);
  line-height: var(--mb-lh-body-5);
  color: var(--mb-color-text-secondary);
}

.mb-helper-text--error {
  color: var(--mb-color-error);
}/* End custom CSS */