/* ---------------------------------------------------------------------------
   aiapply.club marketing revamp — additive polish layer on top of the
   marketing.css bundle. Edit values here to retune the visual brand without
   touching extracted page chunks. Loaded after marketing.css so wins on
   specificity ties via order-of-source.
   --------------------------------------------------------------------------- */

:root {
  --aiac-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aiac-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -8px rgba(15, 23, 42, 0.10);
  --aiac-shadow-hover: 0 4px 6px rgba(15, 23, 42, 0.05), 0 20px 40px -12px rgba(15, 23, 42, 0.18);
  --aiac-radius-card: 1.5rem;
}

/* ===========================================================================
   1.  HERO TYPOGRAPHY — bigger, tighter, more confident
   =========================================================================== */
.aiapplyclub-page h1#lp-header-h1,
.aiapplyclub-page h1.font-title {
  font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.aiapplyclub-page h1#lp-header-h1 .font-normal {
  font-weight: 300;
  color: rgba(15, 23, 42, 0.85);
}
.aiapplyclub-page h1#lp-header-h1 .bg-clip-text {
  /* Force the yellow→rose→red gradient to render strong (Tailwind's via-* sometimes washes out at narrow widths). */
  background-image: linear-gradient(
    100deg,
    var(--aiac-yellow, #ffce00),
    var(--aiac-rose, #fb7185) 45%,
    var(--aiac-red, #dd0000) 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.aiapplyclub-page p#lp-header-p {
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.375rem);
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.72);
  max-width: 38rem;
  margin-inline: auto;
}

/* Section H2 — bolder rhythm */
.aiapplyclub-page h2.font-title,
.aiapplyclub-page h2.text-3xl,
.aiapplyclub-page h2.text-4xl {
  font-size: clamp(1.875rem, 2vw + 1rem, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ===========================================================================
   2.  PRIMARY CTA — gradient fill, drop shadow, micro-lift
   =========================================================================== */
.aiapplyclub-page .btn.btn-primary {
  background-image: linear-gradient(
    135deg,
    var(--aiac-yellow, #ffce00) 0%,
    var(--aiac-rose, #fb7185) 55%,
    var(--aiac-red, #dd0000) 100%
  );
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: #1f1108;
  border: 0;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 8px 24px -8px rgba(221, 0, 0, 0.45);
  transition: transform 280ms var(--aiac-easing-out),
    box-shadow 280ms var(--aiac-easing-out),
    background-position 600ms var(--aiac-easing-out);
}
.aiapplyclub-page .btn.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 14px 36px -10px rgba(221, 0, 0, 0.55);
}
.aiapplyclub-page .btn.btn-primary:active {
  transform: translateY(0);
}
.aiapplyclub-page .btn.btn-primary.btn-lg {
  font-size: 1.05rem;
  padding-inline: 2rem;
  height: auto;
  min-height: 3.25rem;
  padding-block: 1rem;
  border-radius: 9999px;
}

/* Secondary ghost buttons — subtle */
.aiapplyclub-page .btn.btn-ghost {
  transition: background-color 200ms var(--aiac-easing-out);
}

/* ===========================================================================
   3.  CARDS — softer corners, lift on hover
   =========================================================================== */
.aiapplyclub-page .rounded-\[2rem\],
.aiapplyclub-page .rounded-3xl,
.aiapplyclub-page .rounded-2xl {
  border-radius: var(--aiac-radius-card);
  box-shadow: var(--aiac-shadow-soft);
  transition: transform 320ms var(--aiac-easing-out),
    box-shadow 320ms var(--aiac-easing-out);
  border-color: rgba(15, 23, 42, 0.06);
}
.aiapplyclub-page .rounded-\[2rem\]:hover,
.aiapplyclub-page .rounded-3xl:hover,
.aiapplyclub-page .rounded-2xl:hover {
  transform: translateY(-3px);
  box-shadow: var(--aiac-shadow-hover);
}

/* The hero "feature cards" (Optimized Cover Letter / Resume / Auto-Apply) */
.aiapplyclub-page .grid .bg-base-100.relative.flex.flex-col {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}

/* ===========================================================================
   4.  GRADIENT STRIP — slightly more saturated + glow at the edge
   =========================================================================== */
.aiapplyclub-page .absolute.from-yellow-400\/20,
.aiapplyclub-page .absolute.bg-gradient-to-r.from-yellow-400\/20 {
  filter: saturate(1.15) brightness(1.02);
}

/* ===========================================================================
   5.  SECTION RHYTHM — more generous vertical spacing on marketing pages
   =========================================================================== */
.aiapplyclub-page section,
.aiapplyclub-page .max-w-7xl {
  scroll-margin-top: 5rem;
}

/* ===========================================================================
   6.  NAVBAR — subtle floating effect when content scrolls under it
   =========================================================================== */
.aiapplyclub-page nav.navbar {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ===========================================================================
   7.  LOGO WALL — tighten + darker on hover
   =========================================================================== */
.aiapplyclub-page img.brightness-50 {
  transition: filter 240ms var(--aiac-easing-out),
    opacity 240ms var(--aiac-easing-out),
    transform 240ms var(--aiac-easing-out);
}
.aiapplyclub-page img.brightness-50:hover {
  filter: brightness(0.85) saturate(1.15);
  opacity: 1;
  transform: scale(1.04);
}

/* ===========================================================================
   8.  FAQ — tighter dividers, better expanded state
   =========================================================================== */
.aiapplyclub-page details summary {
  cursor: pointer;
  transition: color 180ms var(--aiac-easing-out);
}
.aiapplyclub-page details[open] summary {
  color: var(--aiac-red, #dd0000);
}

/* ===========================================================================
   9.  FOOTER — subtle border, slightly larger column titles
   =========================================================================== */
.aiapplyclub-page footer.footer h3.footer-title {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.85);
  margin-bottom: 0.5rem;
}

/* ===========================================================================
   10.  REDUCED-MOTION FALLBACK
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .aiapplyclub-page *,
  .aiapplyclub-page *::before,
  .aiapplyclub-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}