/* Homepage-specific styles */

/* Make homepage-about-video wider by decreasing height */
#homepage-about-video {
  aspect-ratio: 16/9 !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

#story video#homepage-about-video {
  aspect-ratio: 16/9 !important;
  min-height: auto !important;
  height: auto !important;
}

/* Add spacing between homepage sections - 40px gap */
/* Target all sections after hero */
section.hero + section,
section.hero ~ section {
  margin-top: 40px !important;
}

.logos-section {
  margin-top: 40px !important;
  padding: 60px 0 0 0;
}

#services.section,
section#services,
section#services.section.services {
  margin-top: 40px !important;
  padding-top: 60px;
  padding-bottom: 0 !important;
}

#projects.section,
section#projects {
  margin-top: 40px !important;
  padding-top: 60px;
  padding-bottom: 0 !important;
}

#story.section,
section#story {
  margin-top: 40px !important;
  padding-top: 60px;
  padding-bottom: 0 !important;
}

#faq.section,
section#faq {
  margin-top: 40px !important;
  margin-bottom: 80px !important;
  padding-top: 60px;
  padding-bottom: 0 !important;
}

/* Ensure spacing between consecutive sections - override any padding-bottom */
section.section + section.section,
section.reveal + section.reveal,
section.section + section.reveal,
section.reveal + section.section {
  margin-top: 40px !important;
}

/* Remove any padding-bottom that might be adding extra space */
section.section,
section.reveal {
  padding-bottom: 0 !important;
}

/* Services Section */
.services{padding-top:24px}
.services-title{margin:0 0 24px;font-size:14px;color:#9fb0c3;letter-spacing:.18em;text-transform:uppercase}
.services .accordion{margin-top:8px}

/* Services: transparent containers and controls (no inner fill) */
.services .acc-item{background:transparent}
.services .acc-item.open{background:transparent}
.services .acc-head em.chev{background:transparent}
.services .acc-head:hover{background:transparent}
.services .acc-head em.chev{margin-left:auto}

/* Show accordion titles on homepage - override app.css display:none */
#services .accordion .acc-head .head-left,
#faq .accordion .acc-head .head-left {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override app.css .acc-head .title{display:none} - Services Section */
#services .accordion .acc-head .head-left .title,
#services .accordion .acc-head .head-left span.title,
#services .accordion .acc-head .title,
#services .accordion .acc-item .acc-head .head-left .title,
#services .accordion .acc-item .acc-head .title,
#services .accordion .acc-item:not(.open) .acc-head .head-left .title,
#services .accordion .acc-item:not(.open) .acc-head .head-left span.title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Override app.css .acc-head .title{display:none} - FAQ Section */
#faq .accordion .acc-head .head-left .title,
#faq .accordion .acc-head .head-left span.title,
#faq .accordion .acc-head .title,
#faq .accordion .acc-item .acc-head .head-left .title,
#faq .accordion .acc-item .acc-head .title,
#faq .accordion .acc-item .acc-head .head-left span.title,
#faq .accordion .acc-item:not(.open) .acc-head .head-left .title,
#faq .accordion .acc-item:not(.open) .acc-head .head-left span.title,
#faq .accordion .acc-item.open .acc-head .head-left .title,
#faq .accordion .acc-item.open .acc-head .head-left span.title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Ensure titles are visible even when head-left is flex */
#services .accordion .acc-head .head-left span.title,
#faq .accordion .acc-head .head-left span.title {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
}

/* Hide accordion labels when open on homepage services section */
/* Only target #services section to avoid affecting other sections */
#services .accordion .acc-item.open .acc-head .head-left {
  display: none !important;
}

#services .accordion .acc-item.open .acc-head .head-left .title,
#services .accordion .acc-item.open .acc-head .title {
  display: none !important;
}
#services .accordion .acc-item.open .acc-head {
  justify-content: flex-end !important;
}

/* Service chips to match 32px Figma tags */
.service-chip{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:20px;border:1px solid rgba(255,255,255,1);opacity:.5;color:#fff;font-size:14px;font-weight:510}

/* Large service title on left column */
.service-title-big{font-weight:700;color:#fff;font-size:clamp(40px,5vw,60px);line-height:1.15;letter-spacing:-.01em}
.service-title-big p{margin:0}

/* Logo Marquee */
/* Logo carousel styles moved to app.css - removed to avoid conflicts */

/* Homepage Hero Animations */
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
.hero .badge{animation:heroFadeUp .8s ease-out forwards;animation-delay:.1s}
.hero-title{animation:heroFadeUp .9s ease-out forwards;animation-delay:.2s}
.hero-title.contact-hero-title{animation:none !important;opacity:1 !important;visibility:visible !important}
.hero .lead{animation:heroFadeUp .9s ease-out forwards;animation-delay:.4s}
.hero .cta{animation:heroFadeUp .9s ease-out forwards;animation-delay:.6s}

/* Hero behind-pass glow on first load */
@keyframes heroPassBehind{0%{opacity:0;transform:translate(-50%,40px)}30%{opacity:.5}100%{opacity:0;transform:translate(-50%,-80px)}}
.hero-inner::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:60%;border-radius:40px;background:radial-gradient(60% 60% at 50% 50%, rgba(0,207,209,.32), rgba(138,138,255,.24) 40%, rgba(0,0,0,0) 70%);filter:blur(44px);transform:translate(-50%,40px);opacity:0;z-index:1;pointer-events:none;animation:heroPassBehind 1.6s ease-out .15s both}

/* Responsive Styles for Homepage */
@media (max-width: 768px) {
  /* Reduce spacing on mobile */
  .logos-section {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 40px !important;
    padding: 40px 0 !important;
  }
  
  #services.section,
  section#services,
  section#services.section.services {
    margin-top: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
  
  #projects.section,
  section#projects {
    margin-top: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
  
  #story.section,
  section#story {
    margin-top: 40px !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
  
  #faq.section,
  section#faq {
    margin-top: 40px !important;
    margin-bottom: 60px !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
  
  .logo-marquee .logo-card {
    flex: 0 0 120px;
    height: 60px;
  }
  
  .logo-marquee .logo-track {
    gap: 12px;
    animation-duration: 50s !important;
  }
  
  .logo-marquee .logo-card img {
    max-width: 70%;
    max-height: 60%;
  }
  
  .logos-section h2 {
    font-size: 32px;
  }
  
  .logos-section p {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .services-title {
    font-size: 12px;
  }
  
  .acc-head {
    padding: 16px;
  }
  
  .acc-head .title {
    font-size: 14px;
  }
  
  .acc-head em.chev {
    width: 24px;
    height: 24px;
  }
  
  .acc-item.open .acc-body {
    padding: 0 !important;
  }
  
  .acc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 12px 16px 20px !important;
  }
  
  .acc-grid .desc {
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  
  .service-title-big {
    display: none;
  }
  
  .service-chip {
    font-size: 11px;
    padding: 0 10px;
    height: 24px;
    border-width: 1px;
    opacity: 0.6;
  }
  
  .acc-grid > div > div[style*="height"] {
    display: none;
  }
  
  .acc-grid > div > div[style*="display:flex"] {
    justify-content: center;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .logo-marquee .logo-card {
    flex: 0 0 100px !important;
    height: 50px !important;
  }
  
  .logo-marquee .logo-track {
    gap: 10px !important;
    animation-duration: 30s !important;
  }
  
  .logo-marquee .logo-card img {
    max-width: 65% !important;
    max-height: 55% !important;
  }
}