/* 
 * landing-base.css
 * Offloaded static CSS rules from the AI prompt.
 * The application loads this file automatically on all generated landing pages.
 */

/* ── SCROLL ANIMATIONS ── */
.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; }

/* ── BUTTONS & MICRO-INTERACTIONS ── */
p { line-height: 1.5rem; }
.btn {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn, tempbutton { display:inline-flex; align-items:center; justify-content:center; }
.btn--primary, tempbutton.btn--primary { 
  background: var(--color-accent); 
  color: var(--color-white); 
  font-size: 25px; 
  font-weight: 700; 
  width: auto; 
  max-width: 100%; 
  padding: 1rem 2.5rem; 
  white-space: nowrap; 
}
.btn--primary:hover, tempbutton.btn--primary:hover { 
  background: var(--color-accent-dark); 
  box-shadow: var(--shadow-glow-accent); 
}

.card { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
a { transition: color var(--transition-fast); }
.icon-wrap { transition: transform var(--transition-base); }
.card:hover .icon-wrap { transform: scale(1.15) rotate(-5deg); }

input, textarea { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
input:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); outline: none; }

img { transition: transform var(--transition-slow); }
.card:hover img, .feature-row:hover img { transform: scale(1.03); }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.5); }
  50% { box-shadow: 0 0 0 16px rgba(255,107,53,0); }
}
.btn--pulse { animation: pulse-glow 2.5s infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-image { animation: float 4s ease-in-out infinite; }

/* ── TYPOGRAPHY ALIGNMENT ── */
/* Center ALL text in single-column section contexts */
section h1, section h2, section h3, section h4,
section [class*="headline"], section [class*="heading"], section [class*="title"],
section [class*="subheading"], section [class*="subtitle"], section [class*="sub-head"],
section [class*="eyebrow"], section [class*="kicker"], section [class*="overline"],
section [class*="label"], section [class*="badge"], section [class*="tag"],
section [class*="intro"], section [class*="lead"], section [class*="section-text"],
section h1 + p, section h2 + p, section h3 + p, section h4 + p,
section > p, section > .container > p, section > [class*="inner"] > p,
section > [class*="content"] > p, section > [class*="wrapper"] > p {
  text-align: center ;
  text-wrap: balance ;
  margin-left: auto ;
  margin-right: auto ;
}
/* Carve-out: left-align text inside multi-column grids (but NOT cards with centered text) */
section [class*="grid"] > p, section [class*="columns"] > p, section [class*="col-"] > p,
section [class*="feature-row"] > p, section [class*="bonus"] > p,
section [class*="grid"] > h1, section [class*="grid"] > h2, section [class*="grid"] > h3,
section [class*="grid"] > h4, section [class*="columns"] > h1, section [class*="columns"] > h2,
section [class*="columns"] > h3, section [class*="columns"] > h4,
section [class*="col-"] > h1, section [class*="col-"] > h2,
section [class*="col-"] > h3, section [class*="col-"] > h4 {
  text-align: left ;
  text-wrap: initial ;
  margin-left: 0 ;
  margin-right: 0 ;
}

h1, h2, h3, h4, h5, h6,
[class*="headline"], [class*="heading"], [class*="title"] {
  font-weight: 700 ;
}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
[class*="headline"] *, [class*="heading"] *, [class*="title"] * {
  font-weight: inherit ;
}

/* ── FORM ICON ALIGNMENT ── */
.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-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 ; }

/* ── MOBILE COLLAPSE (767px) ── */
@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) ;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  .container, .section__inner, .hero__inner, .cta__inner, .features__inner,
  .testimonials__inner, .pricing__inner, .faq__inner, .footer__inner {
    padding-left: 0 ; padding-right: 0 ;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  * { grid-template-columns: 1fr ; }
  .grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
  [class*="grid"], [class*="columns"], [class*="row"] {
    display: flex ; flex-direction: column ; gap: 1rem ;
  }
  .card, .feature-row, .pricing-card, [class*="card"], [class*="col-"] {
    width: 100% ; max-width: 100% ; flex-basis: 100% ;
  }
  [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.4rem, 5.5vw, 1.875rem) ; line-height: 1.2 ; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) ; }
  .btn--primary, a.btn--primary, tempbutton.btn--primary {
    width: auto ; max-width: 100% ; padding: 0.875rem 1.5rem ;
    font-size: clamp(16px, 4vw, 18px) ; white-space: normal ;
  }
}

/* ── FAQ GRAPESJS COMPATIBILITY ── */
.faq-answer { max-height: none; overflow: hidden; display: block; }

/* ── AVATAR SIZING ── */
.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;
}

/* ── VIDEO ASPECT RATIO ── */
.video-container, [data-video-container] { max-width: 100% !important; width: 100% !important; }
.video-container iframe, [data-video-container] iframe { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

/* ── COLUMN CAPS ── */
@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%);
  }
}
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  gap: min(25px, 100%);
}

/* ── SCROLLER FULL WIDTH ── */
[class*="scroller"], [class*="marquee"], [class*="ticker"],
[class*="logo-bar"], [class*="logo-strip"], [class*="logo-row"],
[class*="logo-scroll"], [class*="logo-track"], [class*="scroll-track"],
[class*="brand-bar"], [class*="partner-bar"], [class*="trust-bar"] {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ── SECTION DIVIDER GEOMETRY ── */
.section-divider {
  display: block;
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 2;
  border: none;
}
.section-divider svg {
  display: block;
  width: calc(100% + 6px);
  max-width: none;
  margin-left: -3px;
  height: 60px;
}

/* ── INNER CONTAINER BACKGROUNDS ── */
/* Non-card wrappers inside sections must be transparent */
.section > *:not(.card):not([class*="card"]):not([class*="pricing"]):not([class*="testimonial"]):not([class*="bonus"]):not([class*="callout"]):not([class*="highlight"]):not(.section-divider),
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;
}

/* ── TEXT-WRAP BALANCE FOR CENTERED TEXT ── */
[style*="text-align:center"],
[style*="text-align: center"],
.text-center,
[class*="text-center"] {
  text-wrap: balance !important;
}
[style*="text-align:left"],
[style*="text-align: left"],
.text-left,
[class*="text-left"] {
  text-wrap: unset !important;
}

/* ── VERTICAL TEXT PREVENTION ── */
* {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* ── PILL / BADGE SHRINK-WRAP ── */
[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;
}

/* ── FOOTER PADDING-BOTTOM ── */
footer, .site-footer, #footer {
  padding-bottom: 10px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* ── STATS ROW DESKTOP ── */
@media (min-width: 768px) {
  [class*="stats-row"], [class*="stat-row"], [class*="stats-bar"], [class*="metrics"] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}