/* ==========================================================================
   Jaleo Group — home.css
   Homepage section styles: Hero, Products, Work With Us, Vision/About,
   About Jaleo/Josh, Footer.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  background: var(--header-bg); /* pure black, matches the header */
}

.hero-inner {
  padding: 120px 0 90px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  max-width: 780px;
  font-weight: 500;
}

.hero .subline {
  margin-top: 24px;
  max-width: 600px;
  font-size: 17px;
  color: var(--ink-muted);
}

/* Stat bar: centered, vertical dividers between each stat (spacers, not full-width rules) */
.stat-bar {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

.stat-bar .stat {
  padding: 0 48px;
  text-align: center;
}

.stat-bar .stat + .stat {
  border-left: 1px solid var(--grid);
}

.stat-bar .stat .number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
}

.stat-bar .stat .label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-muted);
}

.hero-cta {
  margin-top: 48px;
}

@media (max-width: 768px) {
  .grid-outer { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }

  .product-card {
    min-height: auto;
  }

  .hero-inner { padding: 90px var(--gutter-mobile) 60px; }

  .hero h1 {
    font-size: clamp(26px, 7.5vw, 34px);
  }

  /* Kill the desktop divider rule explicitly by matching its exact selector,
     rather than relying on cascade order against the reset below */
  .stat-bar .stat + .stat { border-left: none; }

  /* 2x2 equal grid, dividers form a plus sign: right border on col 1, bottom border on row 1 */
  .stat-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 100%;
  }

  .stat-bar .stat {
    padding: 24px 12px;
    border: none;
  }

  .stat-bar .stat:nth-child(1) { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
  .stat-bar .stat:nth-child(2) { border-bottom: 1px solid var(--grid); }
  .stat-bar .stat:nth-child(3) { border-right: 1px solid var(--grid); }
  .stat-bar .stat:nth-child(4) { border: none; }
}

/* Empty spacer row used where a section follows directly after a dark band —
   gives a clean grid-line break with breathing room, while the vertical
   hairlines continue through it since it's still inside the grid-frame. */
.section-top-divider {
  padding-top: 60px;
}

/* Same spacer, used at the end of a dark section so it doesn't end flush
   against its own bottom border (mirrors section-top-divider). */
.section-bottom-divider {
  padding-top: 60px;
}

@media (max-width: 768px) {
  .section-top-divider,
  .section-bottom-divider {
    padding-top: 42px;
  }

  .product-card {
    height: 400px;
  }
}

/* ---- Products: 2x2 pastel card grid ---- */
.products-inner {
  padding: 100px var(--gutter-desktop);
}

.products-inner h2 {
  text-align: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 48px auto 0;
  max-width: 1200px;
}

.growing-text {
  margin-top: 64px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 29, 31, 0.45);
}

.product-card {
  border-radius: 28px;
  padding: 32px 32px 0;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clips the media block to the card's rounded corners — safe now that the widget is baked into the photo instead of floating separately */
  color: var(--bg); /* dark text on pastel card */
}

/* Assign each product its own pastel — swap in real brand colors */
.product-card.inevista   { background: #7297C5; color: #FFFFFF; }
.product-card.checkwaldo { background: #A9CEF4; }
.product-card.lolo-evento{ background: #E7DBFF; }
.product-card.petlisto   { background: #EFA06B; }
.product-card.wedlio     { background: #FADCE1; }
.product-card.goodvet    { background: #7B80E8; color: #FFFFFF; }

.product-card.lolo-evento,
.product-card.petlisto,
.product-card.wedlio,
.product-card.goodvet {
  min-height: auto;
  padding-bottom: 32px; /* these don't bleed a photo to the edge like Inevista/CheckWaldo, so restore normal bottom padding */
}

.product-card.goodvet .product-stat {
  color: rgba(255, 255, 255, 0.7);
}

.product-card.inevista .product-stat {
  color: rgba(255, 255, 255, 0.7);
}

.product-wordmark-img {
  height: 20px;
  width: auto;
  display: block;
}

.checkwaldo .product-wordmark-img {
  height: 36px;
}

.checkwaldo .pill-link {
  background: rgba(255, 255, 255, 0.25);
}

.inevista .pill-link {
  background: rgba(255, 255, 255, 0.05);
}

.product-wordmark-script {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 30px;
}

.product-wordmark-icon {
  font-size: 22px;
}

/* ---- CheckWaldo card: AI Overview / schema mockup + interactive chat widget,
   ported from the CheckWaldo site itself, adapted to this card's scale ---- */
.checkwaldo-mockup-area {
  position: relative;
  margin-top: 28px;
  flex: 1;
  min-height: 260px; /* absolute-positioned children don't contribute to height on their own — this floor guarantees the card always grows to fully contain them instead of clipping */
  padding-bottom: 16px;
}

.ahead-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.ahead-stack .ahead-main {
  position: relative;
  z-index: 2;
}

.ahead-stack .code-mockup-peek {
  position: absolute;
  z-index: 1;
  max-width: 140px;
  right: -110px;
  left: auto;
  top: -12px;
  bottom: auto;
  transform: rotate(10deg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.code-mockup {
  background: #1D1D1F;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

.code-mockup .code-body {
  padding: 12px;
  font-size: 9px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

.code-mockup .code-body .k { color: #A9B0FF; }
.code-mockup .code-body .s { color: #F2C879; }
.code-mockup .code-body .p { color: rgba(255, 255, 255, 0.35); }

.search-mockup {
  background: #FFFFFF;
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: 12px;
  padding: 14px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(29, 29, 31, 0.15);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  color: rgba(29, 29, 31, 0.55);
  margin-bottom: 12px;
}

.search-icon {
  display: inline-flex;
  color: rgba(29, 29, 31, 0.4);
  flex-shrink: 0;
}

.search-icon svg {
  width: 13px;
  height: 13px;
}

.ai-overview-box {
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: 10px;
  padding: 12px;
}

.ai-overview-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1D1D1F;
}

.ai-overview-text {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(29, 29, 31, 0.75);
}

.ai-overview-text a {
  color: #0057FF;
}

.ai-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  font-size: 10px;
  color: rgba(29, 29, 31, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(29, 29, 31, 0.05);
  color: rgba(29, 29, 31, 0.65);
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  font-size: 10px;
}

.source-logo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0057FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.source-logo svg {
  width: 8px;
  height: 8px;
}

/* Chat widget — overlaid to the right, on top of the search mockup */
.chat-widget {
  position: absolute;
  right: 0;
  bottom: 32px;
  width: clamp(150px, 55%, 190px);
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.chat-widget-header {
  background: #0057FF;
  color: #FFFFFF;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 500;
}

.chat-widget-body {
  padding: 10px;
}

.chat-dynamic {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 100px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.chat-dynamic::-webkit-scrollbar { width: 3px; }
.chat-dynamic::-webkit-scrollbar-thumb { background: rgba(29, 29, 31, 0.15); border-radius: 3px; }

.chat-bubble,
.chat-bubble-bot-dynamic {
  background: rgba(29, 29, 31, 0.05);
  border-radius: 8px;
  padding: 8px;
  color: #1D1D1F;
  font-size: 10px;
  line-height: 1.45;
  max-width: 90%;
}

.chat-bubble-user {
  align-self: flex-end;
  background: #0057FF;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 8px;
  font-size: 10px;
  line-height: 1.45;
  max-width: 85%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-bubble-bot-dynamic {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-bubble-user.show,
.chat-bubble-bot-dynamic.show,
.chat-typing.show,
.chat-book-btn.show {
  opacity: 1;
  transform: translateY(0);
}

.chat-typing {
  display: inline-flex;
  gap: 3px;
  align-self: flex-start;
  background: rgba(29, 29, 31, 0.05);
  border-radius: 8px;
  padding: 9px 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(29, 29, 31, 0.35);
  animation: chatTypingBounce 1s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat-book-btn {
  align-self: flex-start;
  background: #1D1D1F;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(29, 29, 31, 0.08);
  padding-top: 6px;
  font-size: 9px;
  color: rgba(29, 29, 31, 0.4);
}

.chat-send {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0057FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.product-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.product-card-meta {
  margin-top: 20px;
}

.product-category {
  font-weight: 600;
  font-size: 15px;
}

.product-stat {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(29, 29, 31, 0.55);
}

.product-card-media {
  margin-top: auto; /* pushes the image to the bottom of the card, whatever its natural height ends up being */
  margin-right: -32px; /* cancels the card's right padding so the photo touches the right edge */
  line-height: 0; /* removes the tiny inline-image gap under the img */
}

.media-photo {
  display: block;
  width: 100%;
  height: auto; /* scales by its own aspect ratio — never crops, never distorts */
}

@media (max-width: 768px) {
  .products-inner {
    padding: 60px var(--gutter-mobile);
  }

  .checkwaldo-mockup-area {
    min-height: 240px;
  }

  .ahead-stack {
    max-width: 220px;
  }

  .search-mockup {
    padding: 10px;
  }

  .search-bar {
    font-size: 10px;
    padding: 6px 10px;
    margin-bottom: 8px;
  }

  .ai-overview-box {
    padding: 8px;
  }

  .ai-overview-label {
    font-size: 10px;
  }

  .ai-overview-text {
    font-size: 9px;
    line-height: 1.4;
  }

  .ai-sources {
    font-size: 8px;
    margin-top: 6px;
    padding-top: 6px;
  }

  .source-pill {
    font-size: 8px;
    padding: 1px 6px 1px 3px;
  }
}

/* Grid stays 2-column on true desktop only — stacks to 1 column on tablet
   and below, since the CheckWaldo card's dense mockup content needs more
   room to breathe than a tablet-width column gives it */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Eyebrow label row (used on Work With Us and About) ----
   Bottom border only — a top border here would duplicate the section's
   own boundary line right above it. */
.eyebrow-row {
  padding: 24px 40px;
  border-bottom: 1px solid var(--grid);
}

.light-section .eyebrow-row {
  border-bottom-color: var(--grid-on-light);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.light-section .eyebrow {
  color: rgba(29, 29, 31, 0.55);
}

/* ---- Two-column row with a vertical divider between columns ---- */
.two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Fixed-height variant used for the headline/stats row — min-height so
   longer content can still grow the row instead of overlapping the next one */
.stats-row {
  min-height: 450px;
}

.two-col-row .col {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
}

.two-col-row .col:first-child {
  border-right: 1px solid var(--grid-on-light);
}

.two-col-row h2 {
  max-width: 420px;
}

/* Matches Your Needs / Our Solution to the same size as the main
   two-col-row headline, since h3 would otherwise default much smaller */
.heading-size {
  font-size: clamp(28px, 4vw, 46px);
}

/* Scroll-linked darken: words start low-opacity and darken to full color
   as the heading scrolls up through the viewport */
.reveal-word {
  color: rgba(29, 29, 31, 0.25);
  transition: color 0.3s ease;
}

.reveal-word.revealed {
  color: var(--bg);
}

/* Whole-line reveal for bullet points — the entire line darkens together
   as one unit rather than word-by-word */
.scroll-reveal-line {
  color: rgba(29, 29, 31, 0.25);
  transition: color 0.4s ease;
}

/* Entrance animation for titles: fades and slides up once when scrolled
   into view, then stays revealed permanently (never re-triggers) */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-fade-in.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entrance for product cards — each one animates in slightly
   after the last, same "one by one" cascade as the word-by-word text reveal */
.products-grid .product-card.scroll-fade-in:nth-child(1) { transition-delay: 0s; }
.products-grid .product-card.scroll-fade-in:nth-child(2) { transition-delay: 0.12s; }
.products-grid .product-card.scroll-fade-in:nth-child(3) { transition-delay: 0.24s; }
.products-grid .product-card.scroll-fade-in:nth-child(4) { transition-delay: 0.36s; }
.products-grid .product-card.scroll-fade-in:nth-child(5) { transition-delay: 0.48s; }
.products-grid .product-card.scroll-fade-in:nth-child(6) { transition-delay: 0.6s; }

.scroll-reveal-line.revealed {
  color: var(--bg);
}

/* Dark-section variant: About's words fade in from a dim white instead
   of the light-section's dim black, since the section itself is dark */
.about-jaleo .reveal-word {
  color: rgba(255, 255, 255, 0.3);
}

.about-jaleo .reveal-word.revealed {
  color: var(--ink);
}

/* First sentence of the About lead reveals in yellow instead of white */
.about-jaleo .reveal-accent .reveal-word.revealed {
  color: var(--highlight);
}

.two-col-row .stacked-lines {
  margin-top: 20px;
  color: rgba(29, 29, 31, 0.65);
  line-height: 1.6;
}

.two-col-row .arrow-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 28px;
  display: inline-flex;
}

/* Stats column: two stacked stat blocks, no horizontal padding on the
   column itself so the divider between them runs full width — padding
   instead lives on each stat-block so its content stays centered */
.col-stats {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.stat-block {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-block + .stat-block {
  border-top: 1px solid var(--grid-on-light);
}

.stat-block .stat-num {
  font-family: var(--font-display);
  font-weight: 700; /* bolder */
  font-size: clamp(60px, 7.5vw, 96px); /* bigger */
}

.stat-block .stat-label {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(29, 29, 31, 0.6);
}

/* Radio list (Your Needs) and check list (Our Solution) */
.radio-list,
.check-list {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.radio-list li,
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.radio-list li {
  color: rgba(29, 29, 31, 0.45);
}

.radio-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 31, 0.3);
  flex: none;
}

.check-list .check-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

@media (max-width: 768px) {
  .two-col-row {
    grid-template-columns: 1fr;
  }

  .two-col-row .col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--grid-on-light);
  }

  .eyebrow-row {
    padding: 20px var(--gutter-mobile);
  }

  .two-col-row .col {
    padding: 40px var(--gutter-mobile);
  }

  .two-col-row .arrow-link {
    margin-top: 0;
    padding-top: 42px;
  }

  /* On mobile the fixed 450px height goes away — the row takes up full
     width and however much height its stacked content needs */
  .stats-row {
    height: auto;
  }

  .col-stats {
    padding: 0;
  }

  .stat-block {
    padding: 32px var(--gutter-mobile);
  }
}

/* ---- About Jaleo / Josh — dark section, highlighted lead line ---- */
.about-jaleo {
  background: var(--header-bg); /* pure black */
  color: var(--ink);
}

.about-content {
  padding: 60px 40px 80px;
}

.about-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  max-width: 900px;
}

.about-sub {
  margin-top: 24px;
  color: var(--ink-muted);
  font-size: 16px;
}

.about-jaleo .social-links {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}

.about-jaleo .social-links a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.about-jaleo .social-links svg {
  width: 20px;
  height: 20px;
}

/* ---- Vision ---- */
.vision-content {
  padding: 56px 40px;
}

.vision-text {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 900px;
}

.vision-text + .vision-text {
  margin-top: 24px;
}

/* ---- Join the Team ---- */
.join-content {
  padding: 56px 40px;
}

.join-content h2 {
  max-width: 500px;
}

.join-copy {
  margin-top: 16px;
  max-width: 600px;
  color: rgba(29, 29, 31, 0.65);
}

.join-content .arrow-link {
  margin-top: 24px;
  display: inline-flex;
}

@media (max-width: 768px) {
  .vision-content,
  .join-content {
    padding: 40px var(--gutter-mobile);
  }
}

@media (max-width: 768px) {
  .about-content {
    padding: 40px var(--gutter-mobile) 60px;
  }
}