/* ==================================================================
   custom.css — completes the section classes used in index.html
   (corp-section, icon-tile, badge-soon, btn-corp-*, etc.) that had
   no matching rules in main.css. Colors reuse the theme's existing
   palette (#5F6FFF blue, #FB7370 coral, #EFB544 gold, #4D4796 navy —
   all already used in main-btn / feature-icon / footer-bg) so these
   sections match the rest of the site instead of introducing a new
   design.
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --blue-primary: #5F6FFF;
  --coral-primary: #FB7370;
  --gold-accent: #EFB544;
  --navy-accent: #4D4796;
}

/* ---- section container/spacing (this was the missing "container" rule) ---- */
.corp-section {
  padding: 100px 0;
}
@media (max-width: 767px) {
  .corp-section { padding: 60px 0; }
}

.section-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  line-height: 1.3;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .section-heading { font-size: 28px; }
}
.section-heading.text-white { color: #fff; }

.section-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.7);
}
.section-body.text-white,
.text-white-60 {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- "The Problem" icon tiles ---- */
.icon-tile {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 30px 22px;
  height: 100%;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.03);
}
.icon-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.08);
  border-color: rgba(95, 111, 255, 0.35);
}
.icon-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: var(--blue-primary);
  margin-bottom: 18px;
}
.icon-tile-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
}

/* explicit color variants — same pattern as .feature-icon.color-1/2/3 in main.css */
.icon-tile-blue  .icon-tile-icon { background: var(--blue-primary); }
.icon-tile-coral .icon-tile-icon { background: var(--coral-primary); }
.icon-tile-gold  .icon-tile-icon { background: var(--gold-accent); }

.icon-tile-dark {
  background: var(--navy-accent);
  border-color: var(--navy-accent);
}
.icon-tile-dark .icon-tile-icon { background: rgba(255, 255, 255, 0.16); }
.icon-tile-dark .icon-tile-label { color: #fff; }

/* ---- "Launching Soon" dark band ---- */
.bg-corp-navy {
  background: var(--navy-accent);
}
.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  border-radius: 50px;
}

/* ---- CTA band (light) ---- */
.bg-light-corp {
  background: #F7F7FC;
}

/* ---- corp buttons — same geometry as .main-btn in main.css, new colors ---- */
.btn-corp-primary,
.btn-corp-white {
  display: inline-block;
  font-family: "Sen", sans-serif;
  font-weight: 700;
  padding: 16px 34px;
  border-radius: 50px;
  border: 2px solid transparent;
  transition: all 0.3s ease-out 0s;
}
.btn-corp-primary {
  background: var(--coral-primary);
  color: #fff;
}
.btn-corp-primary:hover {
  background: #ef5b58;
  color: #fff;
}
.btn-corp-white {
  background: #fff;
  color: var(--navy-accent);
}
.btn-corp-white:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy-accent);
}

/* ---- pulse cta (was referenced, never animated) ---- */
@keyframes corpPulseCoral {
  0%   { box-shadow: 0 0 0 0 rgba(251, 115, 112, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(251, 115, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 115, 112, 0); }
}
@keyframes corpPulseWhite {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.btn-corp-primary.pulse-cta { animation: corpPulseCoral 2.2s infinite; }
.btn-corp-white.pulse-cta   { animation: corpPulseWhite 2.2s infinite; }

/* ==================================================================
   #whyget layout fix — main.css sets a fixed height:700px on
   .feature-section-2 with the image absolutely positioned, which
   was designed for exactly 3 short feature rows. This page has 4,
   and two of them shared the same "feature-3" stagger class, so
   content overflowed the fixed box both above and below it (the
   cut-off floating fragment). Switching to auto height + static
   flow fixes it regardless of how much text/how many rows are here.
   ================================================================== */
#whyget.feature-section-2 {
  height: auto;
  padding: 100px 0;
  display: block;
}
@media (max-width: 767px) {
  #whyget.feature-section-2 { padding: 60px 0; }
}
#whyget .feature-content-wrapper .single-feature {
  max-width: 100%;
}
#whyget .single-feature.feature-2,
#whyget .single-feature.feature-3 {
  margin-left: 0;
}
#whyget .feature-image {
  position: static;
  transform: none;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 992px) {
  #whyget .feature-image { margin-top: 0; }
}

/* replacement listing-preview card (swapped in for the template's
   unrelated stock "social dashboard" graphic) */
.listing-preview-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 30px 32px;
  text-align: left;
  max-width: 380px;
  margin-left: auto;
  box-shadow: 0px 20px 50px 0px rgba(18, 21, 61, 0.08);
}
.listing-preview-card .lp-top { margin-bottom: 16px; }
.listing-preview-card .lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #1C8C6B;
  background: rgba(28, 140, 107, 0.1);
  border-radius: 20px;
  padding: 5px 12px;
}
.listing-preview-card h4 {
  font-size: 19px;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.9);
}
.listing-preview-card .lp-sub {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 22px;
}
.listing-preview-card .lp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13.5px;
}
.listing-preview-card .lp-row span {
  color: rgba(0, 0, 0, 0.45);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.listing-preview-card .lp-row b {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  text-align: right;
}

/* ---- anchor scroll offset so the sticky/fixed header never covers
   the section heading when jumping from a nav link ---- */
#home, #credibility, #whyget, #how {
  scroll-margin-top: 110px;
}

/* ==================================================================
   Idle floating motion for hero + feature illustrations. This is a
   continuous CSS animation applied to the <img> itself, separate
   from the one-time WOW.js entrance animation on its parent wrapper
   — the two don't fight over the same animation-name property.
   Keeps the hero and side illustrations gently alive instead of
   static once they've faded in.
   ================================================================== */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.hero-image img {
  animation: floatY 4.5s ease-in-out infinite;
}
#credibility .feature-image img {
  animation: floatY 5s ease-in-out infinite;
  animation-delay: 0.4s;
}
#whyget .feature-image img {
  animation: floatY 5s ease-in-out infinite;
  animation-delay: 0.8s;
}
@media (max-width: 767px) {
  .hero-image img,
  #credibility .feature-image img,
  #whyget .feature-image img {
    animation: none;
  }
}

/* ==================================================================
   Footer spacing fix — main.css sets .footer { margin-top: 100px;
   padding-top: 80px }, which was designed to follow a tight section.
   Stacked after .corp-section's own 100px bottom padding (the CTA
   band directly above it), that added up to a ~280px dead-white gap
   between the CTA button and the footer content, which is the empty
   space visible when scrolling to the bottom. Removing the footer's
   own margin and trimming the CTA band's bottom padding brings that
   down to a normal section gap without touching either section's
   content or design.
   ================================================================== */
.footer {
  margin-top: 0;
}
.corp-section.bg-light-corp {
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .corp-section.bg-light-corp { padding-bottom: 40px; }
}

/* ==================================================================
   #credibility alignment fix — same root cause as the #whyget fix
   above. main.css gives .feature-section-1 a fixed height:700px and
   absolutely positions .feature-image at top:50% / translateY(-50%),
   a layout built for a specific short paragraph. This section's
   longer copy pushed .feature-content-wrapper past 700px, which
   forced the section to clip/overflow and let the absolutely
   positioned image drift out of vertical alignment with its text
   column instead of sitting centered beside it. Switching to auto
   height + static image flow (desktop and mobile) fixes the
   misalignment regardless of copy length, without touching the
   visual design.
   ================================================================== */
#credibility.feature-section-1 {
  height: auto;
  min-height: 0;
  padding: 100px 0;
  display: block;
}
@media (max-width: 767px) {
  #credibility.feature-section-1 { padding: 60px 0; }
}
#credibility.feature-section-1 .feature-image {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  width: 100%;
}
#credibility.feature-section-1 .feature-content-wrapper {
  max-width: 100%;
}
.copyright-text{
  color:white;
  font-size:14px;
  margin-bottom:10px;
}