@media (min-width: 768px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 90% !important;
}
.hero-headline, .hero-subhead {
  max-width: 90% !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 90% !important;
}
}
@media (min-width: 1100px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 1080px !important;
}
.hero-headline, .hero-subhead {
  max-width: 1080px !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 1080px !important;
}
}
@media (max-width: 767px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 100% !important;
}
.hero-headline, .hero-subhead {
  max-width: 100% !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 100% !important;
}
}
.section-divider--flipped svg {
    transform: scaleX(-1) !important;
}
@media (max-width: 767px) {
    /* MUST EXCLUDE THE HERO: a confirmed real-world failure — this rule
       forced section:first-of-type to padding-top:50px !important on
       mobile, which silently overrode the hero's own nav-clearance
       padding-top (114px when a nav is present, per HERO PADDING AND
       DIVIDERS in hero.md) since the hero is always the page's first
       <section>. 50px is far less than the 64px mobile nav height alone,
       let alone the 50px clearance gap on top of it — so hero content
       rendered hidden behind/under the fixed nav bar. The hero's own
       pre-computed padding-top value must always win; this generic
       first-of-type rule is for the page's other potential first-section
       cases, never the hero. */
    section:first-of-type:not(.hero):not([class*="hero"]) {
        padding-top: 50px !important;
    }
}
@media (max-width: 767px) {
    /* :first-of-type, not :first-child — see the explanation at the
       body section > div:first-of-type rule further down this file. A
       decorative non-div first child (canvas, svg) breaks :first-child
       matching for the actual content wrapper div. */
    section:first-of-type > div:first-of-type {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
@media (max-width: 767px) {
    section > div:first-of-type {
        padding-left: min(10px, 5vw);
        padding-right: min(10px, 5vw);
    }
}
[class*="stat"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-fade-in { opacity: 0; transition: opacity 0.7s ease; }
.animate-fade-in.is-visible { opacity: 1; }
.animate-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-slide-left.is-visible { opacity: 1; transform: translateX(0); }
.animate-slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-slide-right.is-visible { opacity: 1; transform: translateX(0); }
.animate-scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-scale-in.is-visible { opacity: 1; transform: scale(1); }

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

section:not(.section-divider):not(.hero):not([class*="hero"]):not(footer):not([class*="footer"]):not([class*="stats"]):not([class*="metric"]):not(:first-of-type) {
  padding-top: 100px;
  padding-bottom: 100px;
  border: none;
  outline: none;
  position: relative;
}
main > section:not(:first-of-type):not([class*="stats"]):not([class*="metric"]) {
  padding-top: 100px;
  padding-bottom: 100px;
  border: none;
  outline: none;
  position: relative;
}
@media (max-width: 767px) {
  section:not(.section-divider):not(.hero):not([class*="hero"]):not(footer):not([class*="footer"]):not([class*="stats"]):not([class*="metric"]):not(:first-of-type) {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  main > section:not(:first-of-type):not([class*="stats"]):not([class*="metric"]) {
    padding-top: 75px;
    padding-bottom: 75px;
  }
}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  width: 100%;
}
.btn--primary {
  padding: 1rem 2.45rem;
}
.btn--sm {
  padding: 0.7rem 1.3rem;
}
.final-cta-btn {
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}
.card {
  padding: 24px;
}
.pricing-card ul {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.pricing-card ul li {
  text-align: left;
}
.icon-wrap {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-md);
}
.icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.icon-row .icon-wrap {
  margin-bottom: 0;
}
.hero__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}
@media (max-width: 1024px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
.eyebrow {
  display: inline-block;
  width: auto;
  max-width: max-content;
  padding: 0.55rem 1.05rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.eyebrow-wrap {
  width: 100%;
  margin-bottom: 25px;
}
#registration {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) var(--space-md);
  overflow: hidden;
}
.reg-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.reg-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  position: relative;
}
.field {
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.field-inner {
  position: relative;
  width: 100%;
  display: block;
}
#register-form {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
#register-form input {
  width: 100%;
  text-align: center;
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}
.field-inner > i.fa, .field-inner > i.fas, .field-inner > i[class*="fa-"] {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}
[data-toggle-password] {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 3;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
@media (max-width: 767px) {
  #registration {
    padding: clamp(2rem, 8vw, 4rem) var(--space-mobile-edge);
  }
  .reg-card {
    padding: 1.5rem 1rem;
  }
  #register-form input {
    font-size: 16px;
  }
}
.proof-bar {
  padding: var(--space-md) 0;
  overflow: hidden;
}
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.75rem var(--space-md);
  transform: translateY(100%);
}
p { line-height: 1.5; }
.btn, button.btn { 
  display:inline-flex;
  align-items:center;
  justify-content:center; 
 min-width: 180px;
min-height: 50px;
padding-left: 24px;
padding-right: 24px;
gap: 0.5rem; 
border: none;
cursor: pointer;
}
.form-group {
  width: 100%;
  max-width: 600px;
  margin-bottom: 1rem;
}
.form-group--icon { position: relative; }
.input-icon-wrap { position: relative; width: 100%; display: block; }
.form-group--icon input, .form-group--icon textarea {
  width: 100%; box-sizing: border-box; font-size: 16px; line-height: normal;
  padding-left: 12px; padding-right: 44px;
}
.form-card {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-box, .pricing-card {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.faq-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.form-group--icon input { height: 48px ; }
.form-group--icon textarea { height: auto; padding-top: 12px; padding-bottom: 12px; }
.form-icon {
  position: absolute; right: 0.65rem ; top: 50% ;
  transform: translateY(-50%) ; width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem ; line-height: 1; pointer-events: none;
  opacity: 0.6; color: var(--color-accent);
}
.input-icon-wrap:has(textarea) .form-icon { top: 1rem ; transform: none ; }

/* === NAV-INNER BASELINE LAYOUT (platform-owned) ===
   navigation.md instructs the model to wrap nav content in <nav class="nav-inner">,
   but no rule anywhere — prompt or static CSS — actually defines this element's layout.
   Without this, the model must reinvent flex/spacing for logo + links + CTA + hamburger
   from scratch on every generation, and when it's omitted the four children default-flow
   as stacked block elements with no enforced row structure, which is what was causing the
   hamburger to render in the wrong place / not visibly function on mobile. This is a
   baseline default the model's own CSS can still override per-page if it writes more
   specific rules — it is not !important. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
}
@media (max-width: 767px) {
  .nav-inner {
    flex-wrap: nowrap;
  }
  /* On mobile, only the logo and the hamburger occupy the visible row — nav-links is
     hidden by the drawer rule and nav-cta is hidden per navigation.md, but if either
     somehow remains in flow it must not push the hamburger out of the row. */
  .nav-inner > .nav-links,
  .nav-inner > .nav-cta,
  .nav-inner > .btn--primary {
    order: 2;
  }
  .nav-inner > .nav-toggle {
    order: 3;
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  section, header, footer, nav, .section, .hero, .site-nav, .site-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  body .container, body .section__inner, body .hero__inner, body .cta__inner, body .features__inner,
  body .testimonials__inner, body .pricing__inner, body .faq__inner, body .footer__inner,
  /* CLASS-NAME MATCHING, NOT POSITION-BASED (:first-child/:first-of-type) —
     a confirmed real-world failure: position-based selectors broke when
     the hero's decorative element (a <canvas> for particle effects, an
     <svg>) was ITSELF wrapped in its own div (e.g. a ".hero-particles-wrap"
     div containing the canvas) — that wrapper div became the literal first
     div child, so :first-of-type matched IT instead of the real content
     wrapper, leaving the actual content div uncaught regardless. Matching
     by class-name suffix/substring instead works regardless of how many
     decorative wrapper divs precede the content div, and regardless of
     nesting depth, since it's not a direct-child/sibling-position check at
     all — it simply finds every element on the page whose class ends in
     "-inner" or contains "container"/"content", wherever it lives in the
     DOM. */
  body [class*="container"], body [class$="-inner"], body [class*="-content"] {
    padding-left: var(--space-mobile-edge) !important; padding-right: var(--space-mobile-edge) !important;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  .features-grid,
  .benefits-grid,
  .testimonials-grid,
  .pricing-grid,
  [class*="grid"] {
      display: flex !important;
      flex-direction: column !important;
      gap: 1rem !important;
  }
  [class*="card"], [class*="box"], .faq-item, .proof-bar, .sticky-cta-bar,
  .reg-card, .reg-inner,
  #capture-form, .form-card, .capture-form-wrap, form[name="capture-form"],
  [class*="form-wrap"], [class*="form-container"], [class*="capture-form"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
.urgency-box {
  max-width: fit-content !important;
}
  .card, .feature-row, .pricing-card, [class*="card"], [class*="col-"] {
    width: 100% ; max-width: 100% ; flex-basis: 100% ;
  }
  /* PRESERVE THE ICON+HEADING 2-COLUMN GRID ON MOBILE — DO NOT LET IT
     COLLAPSE TO 1 COLUMN: model-generated pages frequently include their
     own blanket mobile reset like `* { grid-template-columns: 1fr !important; }`
     intended to stack multi-card GRIDS (modules-grid, bonuses-grid, etc.)
     to a single column. That same universal selector also catches the
     icon+heading 2-column grid INSIDE individual cards (.problem-card,
     .module-card-header, and similar — anything matching [class*="card"]),
     which per the under-40px case of ICON OR BADGE BESIDE A CARD'S HEADING
     in non_negotiable_rules.md must keep its `auto 1fr` columns at EVERY
     breakpoint, never just collapse to 1fr like an outer multi-card grid.
     Once collapsed, the heading's own `grid-column:2` placement (written
     by the model) has no real second track left, so the browser invents
     an undersized implicit column and the heading text wraps down to one
     or two characters per line. A `[class*="card"]` attribute selector has
     higher specificity than a bare `*` selector, so this wins regardless
     of source order even when both are !important — restoring the real
     two-column track without needing to touch any child placement rule. */
  [class*="card"] {
    grid-template-columns: auto 1fr !important;
  }
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap ; flex-direction: column ;
  }
  h1, .hero h1, .hero__headline { font-size: clamp(1.75rem, 7vw, 2.1875rem) ; line-height: 1.15 ; }
  h2, .section-headline { font-size: clamp(1.5625rem, 5.5vw, 1.875rem) ; line-height: 1.2 ; }
  h3 { font-size: clamp(1.25rem, 4vw, 1.475rem) ; }
  .btn--primary, a.btn--primary, button.btn--primary {
    width: auto ; max-width: 100% ; padding: 0.875rem 1.5rem ;
    font-size: clamp(16px, 4vw, 18px) ; white-space: normal ;
  }
}
.faq-answer { max-height: none; overflow: hidden; display: block; }
.faq-item.faq-open .faq-answer {
  padding-top: 24px !important;
}
.avatar, [class*="avatar"], [class*="testimonial-photo"], [class*="author-photo"] {
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1/1;
  overflow: hidden;
  object-fit: cover;
}
@media (min-width: 768px) {
  [class*="col-"] h1, [class*="col-"] h2, [class*="col-"] h3, [class*="col-"] h4,
  [class*="columns"] h1, [class*="columns"] h2, [class*="columns"] h3, [class*="columns"] h4,
  [class*="grid"] h1, [class*="grid"] h2, [class*="grid"] h3, [class*="grid"] h4 {
    font-size: min(2.5rem, 100%);
  }
}
@media (max-width: 767px) {
  [class*="col-"] h1, [class*="col-"] h2, [class*="col-"] h3, [class*="col-"] h4,
  [class*="columns"] h1, [class*="columns"] h2, [class*="columns"] h3, [class*="columns"] h4,
  [class*="grid"] h1, [class*="grid"] h2, [class*="grid"] h3, [class*="grid"] h4 {
    font-size: min(1.875rem, 100%);
  }
}
@media (max-width: 900px) {
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767px) {
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  grid-template-columns: repeat(1, 1fr) !important;
}
}
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  gap: min(25px, 100%);
}

section > *:not(.card):not([class*="card"]):not([class*="pricing"]):not([class*="testimonial"]):not([class*="bonus"]):not([class*="callout"]):not([class*="highlight"]):not(.section-divider) {
  background: transparent;
}
* {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
[class*="pill"]:not([class*="-wrap"]):not([class*="-wrapper"]),
[class*="badge"]:not([class*="-wrap"]):not([class*="-wrapper"]):not([class*="badges"]),
[class*="tag"]:not([class*="-wrap"]):not([class*="-wrapper"]):not([class*="section-tag"]):not([class*="tagline"]),
[class*="eyebrow"]:not([class*="-wrap"]):not([class*="-wrapper"]),
[class*="kicker"]:not([class*="-wrap"]):not([class*="-wrapper"]) {
  display: inline-block;
  width: auto;
  max-width: max-content;
}
@media (min-width: 768px) {
  [class*="stats"], [class*="stat-row"], [class*="metrics"] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  /* MUST WRAP ON MOBILE — a confirmed real-world failure: the desktop rule
     above forces flex-wrap:nowrap to keep stats in a single row, but with
     no mobile override, that nowrap value cascaded unchanged down to
     mobile too. Squeezing 3-5 stat items into a ~375px-wide screen with
     no wrap allowed forces each item's flex-basis so narrow that the
     browser starts breaking the stat NUMBER ITSELF character-by-character
     ("$30K+" rendering as "$", "3", "0", "K", "+" each on their own line)
     rather than wrapping at a word boundary, since there's no room for
     even one full character on some lines. Allowing wrap lets items drop
     to a new row (typically 2 per row) at a readable width instead.
     WIDENED TO `[class*="stats"]` (not just "stats-row"/"stats-bar"): a
     confirmed real-world failure — a real page used the class `hero__stats`
     (BEM double-underscore style, no hyphen, no "-row"/"-bar"/"metrics"
     substring at all), which matched none of the original four wildcards,
     so this fix never fired and the exact same character-by-character
     wrapping bug reproduced untouched. `[class*="stats"]` alone already
     covers `hero__stats`, `stats-row`, and `stats-bar` in one pattern,
     since all three contain the plain substring "stats" — kept the
     narrower originals alongside it only for the singular "stat-row"
     variant and "metrics", which `[class*="stats"]` (plural) wouldn't
     catch on its own. */
  [class*="stats"], [class*="stat-row"], [class*="metrics"] {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 1rem;
  }
  [class*="stats"] > *:not([class*="divider"]), [class*="stat-row"] > *:not([class*="divider"]), [class*="metrics"] > *:not([class*="divider"]) {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
  }
  /* Vertical divider/separator elements between stats only make visual
     sense in a single unbroken horizontal row — once items wrap to
     multiple rows on mobile, a thin vertical line sitting between two
     now-stacked items looks like a stray rendering artifact rather than
     an intentional separator. Hide them entirely at this breakpoint. */
  [class*="stats"] > [class*="divider"], [class*="stat-row"] > [class*="divider"], [class*="metrics"] > [class*="divider"] {
    display: none;
  }
}
.pricing__disclaimer,
.pricing-disclaimer,
.hero-note,
.form-note,
.cta-note {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-wrap: balance !important;
}
/* GUARANTEE THE GAP BETWEEN A BUTTON AND ITS NOTE/DISCLAIMER TEXT:
   margin alone isn't enough — if the model wraps the button + note in a
   flex/grid container with its own `gap` value, that gap stacks on top
   of the button's own margin-bottom regardless of what margin/padding
   is set on the note itself. Forcing gap:0 on any such parent removes
   that unpredictable second spacing source, leaving the button's
   platform-owned margin-bottom (set on .btn, button below) as the
   only thing creating the visible gap, every time, regardless of what
   the model names the parent or what gap value it would have chosen. */
*:has(> .pricing__disclaimer),
*:has(> .pricing-disclaimer),
*:has(> .hero-note),
*:has(> .form-note),
*:has(> .cta-note),
.pricing-cta-wrap {
  gap: 0 !important;
}
/* GUARANTEE THE HERO'S NAV-CLEARANCE PADDING-TOP AT BOTH BREAKPOINTS:
   A confirmed, twice-repeated real-world failure — the model wrote only
   the desktop value (padding-top:130px on #hero) with no separate mobile
   override, so that value cascaded unchanged into mobile width too,
   producing a 16px excess gap versus the 114px mobile nav actually needs.
   :has(.site-nav) detects whether a nav is present at all; when it is,
   force both pre-computed totals directly regardless of what the model
   wrote, removing the dependency on the model remembering to write a
   distinct mobile override. When no nav is present, this rule simply
   never matches, leaving the model's own no-nav fallback value untouched. */
body:has(.site-nav) #hero,
body:has(.site-nav) section.hero,
body:has(.site-nav) section[class*="hero"] {
  padding-top: 130px !important;
}
@media (max-width: 767px) {
  body:has(.site-nav) #hero,
  body:has(.site-nav) section.hero,
  body:has(.site-nav) section[class*="hero"] {
    padding-top: 114px !important;
  }
}
li {
  line-height: 1.5 !important;
  padding-top: 1px;
  padding-bottom: 1px;
}
ul {
  margin-left: auto !important;
  margin-right: auto !important;
}
.btn, button.btn {
margin-bottom: 10px !important;
}


/* === PAGE-SPECIFIC CSS === */
:root {
  --color-primary: #d4af37;
  --color-primary-dark: #b8960c;
  --color-primary-light: #f5e6a3;
  --color-accent: #d4af37;
  --color-accent-dark: #b8960c;
  --color-dark: #0a0a0a;
  --color-dark-2: #111111;
  --color-mid: #2a2a2a;
  --color-light: #f8f8fc;
  --color-white: #ffffff;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-trust: #3b82f6;
  --gold-gradient: linear-gradient(135deg, #f5e6a3 0%, #d4af37 30%, #b8960c 60%, #f5e6a3 80%, #d4af37 100%);
  --gold-shimmer: linear-gradient(90deg, #8B6914 0%, #d4af37 20%, #f5e6a3 40%, #d4af37 60%, #f5e6a3 80%, #8B6914 100%);
  --line-height-body: 1.5;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);
  --text-section: clamp(1.75rem, 4vw, 3rem);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-section: 100px;
  --space-mobile-edge: 10px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.18);
  --shadow-glow: 0 0 40px rgba(212,175,55,0.35);
  --shadow-glow-accent: 0 0 40px rgba(212,175,55,0.4);
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --container-max: 1200px;
  --container-narrow: 1080px;
  --container-wide: 1440px;
}


html { overflow-x: hidden; width: 100%; min-width: 0; }

body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; min-width: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-family: var(--font-body); background: var(--color-dark); color: var(--color-white); }

*, *::before, *::after { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: break-word; }


p { line-height: 1.5; }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; }

h1 { font-weight: 900; }


.animate-on-scroll { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; }

.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.animate-fade-in { opacity: 0; transition: opacity 0.6s ease; }

.animate-fade-in.is-visible { opacity: 1; }

.animate-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }

.animate-slide-left.is-visible { opacity: 1; transform: translateX(0); }

.animate-slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; }

.animate-slide-right.is-visible { opacity: 1; transform: translateX(0); }

.animate-scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.5s ease, transform 0.5s ease; }

.animate-scale-in.is-visible { opacity: 1; transform: scale(1); }

[data-delay="1"] { transition-delay: 0.1s; }

[data-delay="2"] { transition-delay: 0.2s; }

[data-delay="3"] { transition-delay: 0.3s; }

[data-delay="4"] { transition-delay: 0.4s; }

[data-delay="5"] { transition-delay: 0.5s; }


.section-divider { display: block; line-height: 0; font-size: 0; margin: 0; padding: 0; background: transparent; overflow: visible; border: none; }

.section-divider svg { display: block; width: calc(100% + 6px); max-width: none; height: 80px; line-height: 0; vertical-align: bottom; margin-left: -3px; margin-bottom: -1.5px; padding: 0; border: none; }


.site-nav {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 900;
  height: 80px; display: flex; align-items: center;
  background: rgba(10,10,10,0.92); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid rgba(212,175,55,0.15);
  will-change: transform;
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--container-wide); margin: 0 auto;
  padding: 0 2rem;
}

.nav-logo img { max-width: 180px; height: auto; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }

.nav-links li a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; transition: color var(--transition-fast); }

.nav-links li a:hover { color: var(--color-primary); }

.nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--color-white); font-size: 1.5rem; }

.nav-open .nav-links { display: flex; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: rgba(10,10,10,0.98); padding: 1.5rem; gap: 1.5rem; z-index: 899; border-bottom: 1px solid rgba(212,175,55,0.2); }


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; text-decoration: none;
  border-radius: var(--radius-md); cursor: pointer; border: none;
  letter-spacing: 0.03em; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.3s ease;
  position: relative; overflow: hidden;
}

.btn--primary {
  background: linear-gradient(90deg, #8B6914 0%, #9c7a18 8%, #b8960c 16%, #c9a32a 24%, #d4af37 32%, #e3c668 40%, #f5e6a3 50%, #e3c668 60%, #d4af37 68%, #c9a32a 76%, #b8960c 84%, #9c7a18 92%, #8B6914 100%);
  background-size: 250% 100%;
  color: #1a0e00;
  animation: gold-shimmer 6s linear infinite;
  box-shadow: 0 4px 20px rgba(212,175,55,0.45), 0 2px 6px rgba(0,0,0,0.4);
  font-size: var(--text-lg);
}

.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(212,175,55,0.65), 0 4px 12px rgba(0,0,0,0.4);
  filter: brightness(1.1);
}

.btn--sm { font-size: var(--text-sm); }

.btn--ghost {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn--ghost:hover { background: rgba(212,175,55,0.1); transform: translateY(-2px); }


@keyframes gold-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(212,175,55,0.45); }
  50% { box-shadow: 0 8px 48px rgba(212,175,55,0.8), 0 0 80px rgba(212,175,55,0.3); }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes hero-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}


.hero-section {
  position: relative; overflow: hidden;
  background: #0a0a0a;
  padding-top: 130px; padding-bottom: 0;
  min-height: 100vh;
}

.hero-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

.hero-glow-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  animation: hero-pulse 4s ease-in-out infinite;
}

.hero-glow-orb--1 {
  width: 600px; height: 600px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, transparent 70%);
}

.hero-glow-orb--2 {
  width: 500px; height: 500px;
  top: 100px; right: -100px;
  background: radial-gradient(circle, rgba(184,150,12,0.1) 0%, transparent 70%);
  animation-delay: 2s;
}

.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

.hero-eyebrow-wrap { text-align: center; width: 100%; margin-bottom: 1.5rem; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}

.hero-headline {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 900; line-height: 1.1;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  max-width: 1080px;
  letter-spacing: -0.02em;
}

.hero-headline .gold-text {
  background: linear-gradient(90deg, #8B6914 0%, #d4af37 25%, #f5e6a3 50%, #d4af37 75%, #8B6914 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4af37;
  font-weight: 900;
  animation: gold-shimmer 8s linear infinite;
  display: inline;
}

.hero-subhead {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: rgba(255,255,255,0.75);
  max-width: 760px; margin: 0 auto 2rem;
  line-height: 1.6;
}

.hero-cta-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-bottom: 2.5rem;
}

.hero-cta-btn {
  padding: 1.1rem 2.5rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  border-radius: var(--radius-lg);
  animation: gold-shimmer 6s linear infinite, pulse-glow 5s ease-in-out infinite;
  background-size: 250% 100%;
}

.hero-note { font-size: var(--text-sm); color: rgba(255,255,255,0.5); text-align: center; text-wrap: balance; margin-top: 0; }

.hero-trust-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 3rem;
}

.hero-trust-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  font-size: var(--text-sm); color: rgba(255,255,255,0.8); font-weight: 500;
}

.hero-trust-pill i { color: var(--color-primary); }

.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  width: 100%; max-width: 900px; margin-bottom: 2rem;
}

.hero-feature-box {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
}

.hero-feature-box__icon { grid-column: 1; grid-row: 1; align-self: start; margin: 0; font-size: 1.6rem; color: var(--color-primary); }

.hero-feature-box__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-white); text-align: left; }

.hero-feature-box__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--text-xs); color: rgba(255,255,255,0.6); text-align: left; }

.hero-ai-logos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.25rem;
  margin-bottom: 2rem;
}

.hero-ai-logo {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--radius-md); padding: 0.4rem 0.85rem;
}


.ticker-outer {
  width: 102vw; min-width: 102vw; max-width: none;
  position: relative; left: 50%; right: 50%;
  margin-left: -51vw; margin-right: -51vw;
  display: block; flex: 0 0 auto; align-self: stretch;
  background: linear-gradient(90deg, #1a1000 0%, #2a1e00 50%, #1a1000 100%);
  border-top: 1px solid rgba(212,175,55,0.3);
  border-bottom: 1px solid rgba(212,175,55,0.3);
  overflow: hidden;
  padding: 0; margin-top: 2.5rem;
}

.ticker-track {
  display: inline-flex; white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  max-width: none; flex-shrink: 0;
}

.ticker-track:hover { animation-play-state: paused; }

.ticker-item {
  display: inline-flex; align-items: center; gap: 0.5em;
  white-space: nowrap; padding: 0.85rem 2rem;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}

.ticker-item i { font-size: 0.85rem; color: var(--color-primary); }

.ticker-sep {
  display: inline-flex; align-items: center;
  padding: 0 0.5rem; color: rgba(212,175,55,0.35);
  font-size: 1.2rem; flex-shrink: 0;
  white-space: nowrap;
}


.problem-section { background: #0a0a0a; }

.problem-inner { max-width: var(--container-narrow); margin: 0 auto; padding: 0 2rem; }

.section-eyebrow-wrap { text-align: center; width: 100%; margin-bottom: 1.5rem; }

.section-eyebrow {
  display: inline-block; width: auto; max-width: max-content;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35);
  border-radius: var(--radius-full); padding: 0.4rem 1.1rem;
  font-size: var(--text-xs); font-weight: 700; color: var(--color-primary);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.section-headline {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800; color: var(--color-white); text-align: center;
  max-width: 1080px; margin: 0 auto 1rem;
}

.section-headline .gold-text {
  background: linear-gradient(90deg, #8B6914 0%, #d4af37 25%, #f5e6a3 50%, #d4af37 75%, #8B6914 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4af37;
  font-weight: 800;
  animation: gold-shimmer 8s linear infinite;
}

.section-subhead { font-size: var(--text-lg); color: rgba(255,255,255,0.7); text-align: center; max-width: 1080px; margin: 0 auto 3rem; }

.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.problem-card {
  background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-md); padding: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem; row-gap: 0.4rem;
}

.problem-card__icon { grid-column: 1; grid-row: 1; align-self: start; margin: 0; font-size: 1.1rem; color: var(--color-danger); }

.problem-card__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--color-white); text-align: left; }

.problem-card__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,0.6); text-align: left; }

.problem-callout {
  background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius-lg); padding: 2rem;
  width: fit-content; max-width: 100%; margin: 0 auto;
  text-align: left;
}

.problem-callout__title { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; }

.problem-callout p { color: rgba(255,255,255,0.75); font-size: var(--text-lg); margin: 0; }


.features-section { background: #111111; }

.features-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.feature-card {
  background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.18);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column; gap: 1rem;
}

.feature-card:hover {
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 8px 40px rgba(212,175,55,0.12);
}

.feature-card__num {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--color-primary); letter-spacing: 0.1em;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-sm); padding: 0.25rem 0.6rem;
  display: inline-block; width: auto; max-width: max-content;
}

.feature-card__header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem; row-gap: 0.3rem;
}

.feature-card__icon-wrap {
  grid-column: 1; grid-row: 1; align-self: start; margin: 0;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(212,175,55,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--color-primary); flex-shrink: 0;
}

.feature-card__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--color-white); text-align: left; }

.feature-card__body { font-size: var(--text-base); color: rgba(255,255,255,0.65); text-align: left; margin: 0; }

.feature-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.feature-card__list li { font-size: var(--text-sm); color: rgba(255,255,255,0.7); text-align: left; display: flex; align-items: flex-start; gap: 0.5rem; }

.feature-card__list li i { color: var(--color-success); flex-shrink: 0; margin-top: 3px; }

.feature-card__img { width: 100%; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 16/9; border: 1px solid rgba(212,175,55,0.15); }


.how-section { background: #0a0a0a; }

.how-inner { max-width: 900px; margin: 0 auto; padding: 0 2rem; }

.how-steps { display: flex; flex-direction: column; gap: 2rem; }

.how-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.5rem; row-gap: 0.4rem;
  background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius-lg); padding: 2rem;
}

.how-step__num {
  grid-column: 1; grid-row: 1; align-self: start;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #b8960c 0%, #d4af37 50%, #f5e6a3 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 900; color: #1a0e00;
  flex-shrink: 0;
}

.how-step__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--text-2xl); font-weight: 700; color: var(--color-white); text-align: left; }

.how-step__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--text-base); color: rgba(255,255,255,0.65); text-align: left; }


.testimonials-section { background: #111111; }

.testimonials-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2rem; }

.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.testimonial-card {
  background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.18);
  border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: box-shadow 0.3s ease;
}

.testimonial-card:hover { box-shadow: 0 8px 32px rgba(212,175,55,0.1); }

.testimonial-stars { display: flex; gap: 0.25rem; }

.testimonial-stars i { color: var(--color-warning); font-size: 1rem; }

.testimonial-result {
  display: inline-block; width: auto; max-width: max-content;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm); padding: 0.25rem 0.6rem;
  font-size: var(--text-xs); font-weight: 700; color: var(--color-success);
}

.testimonial-quote { font-size: var(--text-base); color: rgba(255,255,255,0.75); margin: 0; font-style: italic; }

.testimonial-author { display: flex; align-items: center; gap: 0.875rem; }

.testimonial-avatar {
  width: 56px; height: 56px; min-width: 56px; max-width: 56px;
  min-height: 56px; max-height: 56px;
  border-radius: 50%; flex-shrink: 0; flex-grow: 0;
  aspect-ratio: 1/1; overflow: hidden; object-fit: cover;
  border: 2px solid rgba(212,175,55,0.35);
}

.testimonial-author-info { display: flex; flex-direction: column; gap: 0.15rem; }

.testimonial-name { font-size: var(--text-base); font-weight: 700; color: var(--color-white); }

.testimonial-title { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }


.pricing-section { background: #0a0a0a; }

.pricing-inner { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

.pricing-box {
  background: rgba(212,175,55,0.05); border: 2px solid rgba(212,175,55,0.4);
  border-radius: var(--radius-xl); padding: 3rem;
  box-shadow: 0 0 60px rgba(212,175,55,0.1);
  width: fit-content; max-width: 100%; margin: 0 auto;
}

.pricing-header { text-align: center; margin-bottom: 2rem; }

.pricing-badge {
  display: inline-block; width: auto; max-width: max-content;
  background: linear-gradient(135deg, #b8960c, #d4af37, #f5e6a3);
  border-radius: var(--radius-full);
  padding: 0.4rem 1.25rem;
  font-size: var(--text-sm); font-weight: 700; color: #1a0e00;
  margin-bottom: 1rem;
}

.pricing-plan-name { font-size: var(--text-2xl); font-weight: 800; color: var(--color-white); margin-bottom: 0.5rem; }

.pricing-price-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }

.pricing-old-price { font-size: var(--text-3xl); font-weight: 700; color: rgba(255,255,255,0.35); text-decoration: line-through; }

.pricing-price {
  font-size: clamp(3rem, 8vw, 5rem); font-weight: 900;
  background: linear-gradient(90deg, #8B6914 0%, #d4af37 25%, #f5e6a3 50%, #d4af37 75%, #8B6914 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; color: #d4af37;
  animation: gold-shimmer 8s linear infinite;
  line-height: 1;
}

.pricing-period { font-size: var(--text-lg); color: rgba(255,255,255,0.5); }

.pricing-tagline { font-size: var(--text-base); color: rgba(255,255,255,0.55); }

.pricing-divider { border: none; border-top: 1px solid rgba(212,175,55,0.2); margin: 2rem 0; }

.pricing-features-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }

.pricing-features-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-lg); color: rgba(255,255,255,0.85); text-align: left; }

.pricing-features-list li i { color: var(--color-success); flex-shrink: 0; margin-top: 3px; font-size: 1rem; }

.pricing-features-list .feature-value { color: var(--color-primary); font-weight: 700; font-size: clamp(1rem, 2vw, 1.2rem); }

.pricing-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }

.pricing-btn {
  padding: 1.2rem 3rem; font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 800; border-radius: var(--radius-lg);
  animation: gold-shimmer 6s linear infinite, pulse-glow 5s ease-in-out infinite;
  background-size: 250% 100%; width: 100%; max-width: 480px;
}

.pricing__disclaimer { font-size: var(--text-sm); color: rgba(255,255,255,0.45); text-align: center; text-wrap: balance; margin-top: 0; }

.payment-steps { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem; }

.payment-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem; row-gap: 0.3rem;
  background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius-md); padding: 1.5rem;
}

.payment-step__num {
  grid-column: 1; grid-row: 1; align-self: start;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #b8960c, #d4af37);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 900; color: #1a0e00; flex-shrink: 0;
}

.payment-step__title { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); text-align: left; }

.payment-step__desc { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--text-base); color: rgba(255,255,255,0.65); text-align: left; }


.guarantee-section { background: #111111; }

.guarantee-inner { max-width: 800px; margin: 0 auto; padding: 0 2rem; text-align: center; }

.guarantee-box {
  background: rgba(212,175,55,0.06); border: 2px solid rgba(212,175,55,0.35);
  border-radius: var(--radius-xl); padding: 3rem;
  width: fit-content; max-width: 100%; margin: 0 auto;
}

.guarantee-seal { font-size: 5rem; color: var(--color-primary); margin-bottom: 1rem; animation: float 3s ease-in-out infinite; }

.guarantee-title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; color: var(--color-white); margin-bottom: 1rem; }

.guarantee-body { font-size: var(--text-lg); color: rgba(255,255,255,0.7); margin: 0; }


.faq-section { background: #0a0a0a; }

.faq-inner { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
  background: rgba(212,175,55,0.04); border: 1px solid rgba(212,175,55,0.18);
  border-radius: var(--radius-md);
}

.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; gap: 1rem;
  text-align: left; color: var(--color-white);
  font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700;
  transition: color var(--transition-fast);
}

.faq-question:hover { color: var(--color-primary); }

.faq-question i { color: var(--color-primary); transition: transform var(--transition-base); flex-shrink: 0; }

.faq-open .faq-question i { transform: rotate(180deg); }

.faq-answer {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  padding: 0 1.5rem;
  color: rgba(255,255,255,0.7);
  font-size: var(--text-base);
}

.faq-open .faq-answer { padding-bottom: 1.25rem; }


.optin-section { background: #0a0a0a; }

.optin-inner { max-width: var(--container-narrow); margin: 0 auto; padding: 0 2rem; text-align: center; }

.form-card {
  background: rgba(212,175,55,0.05); border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-xl); padding: 2.5rem;
}

.form-group { width: 100%; margin-bottom: 1.25rem; }

.form-group label { display: block; font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 0.35rem; text-align: left; }

.form-group--icon { position: relative; }

.input-icon-wrap { position: relative; width: 100%; display: block; }

.form-group--icon input, .form-group--icon textarea { width: 100%; box-sizing: border-box; font-size: 16px; line-height: normal; padding-left: 12px; padding-right: 44px; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.25); border-radius: var(--radius-md); color: var(--color-white); font-family: var(--font-body); }

.form-group--icon input { height: 48px; }

.form-group--icon textarea { height: auto; padding-top: 12px; padding-bottom: 12px; }

.form-group--icon input:focus, .form-group--icon textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(212,175,55,0.2); }

input, textarea { line-height: normal; }

.form-icon { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; pointer-events: none; opacity: 0.6; color: var(--color-accent); }

.input-icon-wrap:has(textarea) .form-icon { top: 1rem; transform: none; }

.form-submit-btn { width: 100%; padding: 1rem 2rem; font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 800; border-radius: var(--radius-md); background: linear-gradient(90deg, #8B6914 0%, #9c7a18 8%, #b8960c 16%, #c9a32a 24%, #d4af37 32%, #e3c668 40%, #f5e6a3 50%, #e3c668 60%, #d4af37 68%, #c9a32a 76%, #b8960c 84%, #9c7a18 92%, #8B6914 100%); background-size: 250% 100%; color: #1a0e00; animation: gold-shimmer 6s linear infinite; border: none; cursor: pointer; font-family: var(--font-body); }

.form-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,175,55,0.5); }

.field-error { border: 2px solid red; }

.form-note { font-size: var(--text-xs); color: rgba(255,255,255,0.4); text-align: center; text-wrap: balance; margin-top: 0; }

.required-star { color: var(--color-danger); margin-left: 2px; }

.honeypot-field { opacity: 0; position: absolute; left: -9999px; height: 0; width: 0; }


.site-footer { background: #0a0a0a; width: 100%; min-width: 100%; max-width: 100%; border-top: 1px solid rgba(212,175,55,0.15); }

.footer-inner { max-width: var(--container-max); margin: 0 auto; padding: 3rem 2rem 2rem; }

.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }

.footer-brand { display: flex; flex-direction: column; gap: 0.75rem; max-width: 300px; }

.footer-brand img { max-width: 160px; height: auto; width: auto; }

.footer-tagline { font-size: var(--text-sm); color: rgba(255,255,255,0.45); }

.footer-links { display: flex; gap: 3rem; flex-wrap: wrap; }

.footer-link-group { display: flex; flex-direction: column; gap: 0.5rem; }

.footer-link-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; }

.footer-link-group a { font-size: var(--text-sm); color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--transition-fast); }

.footer-link-group a:hover { color: var(--color-primary); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(212,175,55,0.1); }

.footer-copy { font-size: var(--text-xs); color: rgba(255,255,255,0.35); }

.footer-trust-icons { display: flex; gap: 1rem; align-items: center; }

.footer-trust-icons i { color: rgba(212,175,55,0.4); font-size: 1.1rem; }


.sticky-cta-bar {
  background: linear-gradient(90deg, #1a1000 0%, #2a1e00 50%, #1a1000 100%);
  border-top: 2px solid rgba(212,175,55,0.5);
  box-shadow: 0 -4px 20px rgba(212,175,55,0.2);
  transform: translateY(100%); transition: transform 0.4s ease;
}

.sticky-cta-bar.is-visible { transform: translateY(0); }

.sticky-cta-bar__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }

.sticky-cta-bar__text { color: var(--color-white); margin: 0; font-size: var(--text-sm); }


.nav-cta { padding: 0.65rem 1.5rem; font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-md); white-space: nowrap; }


.text-center { text-align: center; }


.highlight-box {
  background: rgba(212,175,55,0.08); border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.25rem 1.5rem;
  font-size: var(--text-lg); color: rgba(255,255,255,0.85);
  font-style: italic; margin: 2rem 0;
  width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto;
}


.founding-member-section { background: #0a0a0a; }

.founding-inner { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

.founding-box {
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(184,150,12,0.04) 100%);
  border: 2px solid rgba(212,175,55,0.35);
  border-radius: var(--radius-xl); padding: 3rem;
  width: fit-content; max-width: 100%; margin: 0 auto;
}

.founding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }

.founding-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-lg); color: rgba(255,255,255,0.85); text-align: left; }

.founding-list li i { color: var(--color-primary); flex-shrink: 0; margin-top: 3px; }


@media (max-width: 1024px) {
  .nav-inner { padding: 0 1.25rem; }
  .nav-cta { padding: 0.6rem 1.25rem; font-size: var(--text-sm); }
  .hero-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cta-btn { display: flex; justify-content: center; margin: 0 auto; }
  .pricing-btn { display: flex; justify-content: center; margin: 0 auto; }
  .form-submit-btn { display: flex; justify-content: center; margin: 0 auto; }
}


@media (max-width: 767px) {
  section, header, footer, nav, .section, .hero, .site-nav, .site-footer { padding-left: var(--space-mobile-edge); padding-right: var(--space-mobile-edge); margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .container, [class*="container"], .section__inner, .section-inner, .hero__inner, .cta__inner, .features__inner, .testimonials__inner, .pricing__inner, .faq__inner, .footer__inner, .guarantee__inner, .bonuses__inner { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  main, main[style] { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  * { grid-template-columns: 1fr; }
  .countdown-timer { grid-template-columns: unset; display: flex; }
  .sticky-cta-bar__inner { grid-template-columns: unset; }
  h1, .hero h1, .hero__headline { font-size: clamp(1.75rem, 7vw, 2.1875rem); line-height: 1.15; }
  h2, .section-headline { font-size: clamp(1.4rem, 5.5vw, 1.875rem); line-height: 1.2; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
  p, li { font-size: 1rem; line-height: 1.4; }
  input, textarea, select, label { font-size: 16px; }
  .btn--primary, a.btn--primary, button.btn--primary { width: auto; max-width: 100%; padding: 0.875rem 1.5rem; font-size: clamp(16px, 4vw, 18px); white-space: normal; word-break: break-word; text-wrap: balance; }
  * { writing-mode: horizontal-tb; text-orientation: mixed; }
  .site-nav { height: 64px; padding-left: 0; padding-right: 0; }
  .nav-inner { padding: 0 var(--space-mobile-edge); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .hero-section { padding-top: 100px; }
  .hero-inner { padding: 0; }
  .hero-feature-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .hero-trust-row { gap: 0.75rem; }
  .hero-trust-pill { font-size: var(--text-xs); padding: 0.35rem 0.7rem; max-width: 100%; white-space: normal; text-align: center; }
  .hero-eyebrow { max-width: 100%; white-space: normal; text-align: center; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-inner { padding: 0; }
  .features-grid { grid-template-columns: 1fr; }
  .features-inner { padding: 0; }
  .feature-card__header { grid-template-columns: auto 1fr; }
  .how-inner { padding: 0; }
  .how-step { grid-template-columns: 48px 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-inner { padding: 0; }
  .testimonial-author { flex-direction: column; align-items: center; text-align: center; }
  .pricing-inner { padding: 0; }
  .pricing-box { padding: 1.75rem; }
  .pricing-btn { width: 100%; max-width: 100%; display: flex; justify-content: center; margin: 0 auto; }
  .guarantee-inner { padding: 0; }
  .guarantee-box { padding: 2rem; }
  .faq-inner { padding: 0; }
  .optin-inner { padding: 0; }
  .form-card { padding: 1.5rem; }
  #capture-form, form[name="capture-form"], .form-card, .form-wrap, .form-wrapper, .form-container, .capture-form-wrap { max-width: 100%; }
  .footer-inner { padding: 2rem var(--space-mobile-edge) 1.5rem; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { justify-content: center; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .founding-inner { padding: 0; }
  .founding-box { padding: 1.75rem; }
  .hero-cta-btn { display: flex; justify-content: center; margin: 0 auto; }
  .pricing-btn { display: flex; justify-content: center; margin: 0 auto; }
  .hero-ai-logos { gap: 0.75rem; }
  .hero-ai-logo { font-size: var(--text-xs); padding: 0.35rem 0.65rem; max-width: 100%; white-space: normal; }
  .ticker-item { padding: 0.75rem 1.25rem; font-size: var(--text-xs); }
  .problem-callout { padding: 1.25rem; }
  .highlight-box { margin: 1rem 0; }
  .payment-step { grid-template-columns: 40px 1fr; }
  .how-step { grid-template-columns: 48px 1fr; }
  .testimonials-grid > :nth-child(3) { grid-column: 1; }
}


@media (min-width: 768px) and (max-width: 1024px) {
  [class*="two-col"] > *, [class*="split"] > *, [class*="hero__inner"] > * { flex: 1 1 50%; min-width: 50%; max-width: 100%; box-sizing: border-box; }
  .testimonials-grid > :nth-child(3) { grid-column: 1 / -1; margin: 0 auto; max-width: 50%; }
}

/* === SAME-BACKGROUND ADJACENT SECTION PADDING (auto-injected fallback) === */
#faq { padding-bottom: 50px; }

#optin { padding-top: 50px; }