/* AINNA homepage Phase 1 — clarity, density and fixed-layer safety */

/* Navigation */
.ainna-homepage .desktop-nav {
  height: var(--ainna-nav-height, 64px);
}
.ainna-homepage .desktop-nav .nav-links > .nav-link:last-of-type {
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff !important;
}
.ainna-homepage .ainna-mobile-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #0f172a;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .12em;
  text-decoration: none;
}
[data-theme="dark"] .ainna-homepage .ainna-mobile-brand { color: #f8fafc; }

/* Content-fit hero (heroes1 pattern): start right after fixed nav, no forced 100dvh center.
   Dense hero (proof strip + command card + CTAs) must fit content height. */
.ainna-homepage .hero {
  min-height: auto !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: calc(var(--ainna-nav-height) + 12px) 24px 32px !important;
  overflow-x: clip;
  overflow-y: visible;
}
.ainna-homepage .hero-retail-neuralops {
  align-items: start;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(28px, 5vw, 68px);
}
.ainna-homepage .hero-copy { align-self: start; }
.ainna-homepage .hero-revamp-grid { width: 100%; margin: auto; }
.ainna-homepage .hero-copy h1 { max-width: 760px; }
.ainna-homepage .hero-retail-desc { max-width: 680px; margin-bottom: 18px; }
.ainna-homepage .hero-retail-desc .hero-desc { line-height: 1.62; }
.ainna-homepage .hero-actions-row { margin-top: 4px; }
.ainna-homepage .hero-actions-row .btn { min-height: 48px; }

/* Tighten vertical whitespace between desktop sections */
.ainna-homepage #what-ainna-does { padding: 72px 24px 76px !important; }
.ainna-homepage #not-every-task-needs-ai { padding: 52px 0 !important; }
.ainna-homepage #stats,
.ainna-homepage .stats-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.ainna-homepage #team,
.ainna-homepage .team-section { padding-top: 60px !important; padding-bottom: 60px !important; }
.ainna-homepage #contact,
.ainna-homepage .contact-section { padding-top: 60px !important; padding-bottom: 60px !important; }
.ainna-homepage #not-every-task-needs-ai .ainna-section-header,
.ainna-homepage #what-ainna-does .ainna-section-header { margin-bottom: 28px !important; }

/* Four static service cards — no marquee or clipping */
.ainna-homepage .services-section--static { padding: 56px 0 !important; }
.ainna-homepage .services-static-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}
.ainna-homepage .services-static-grid .service-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 250px;
  margin: 0 !important;
  padding: 26px !important;
  display: flex !important;
  flex-direction: column;
}
.ainna-homepage .services-static-grid .service-card p { flex: 1; }
.ainna-homepage .services-next-step {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  margin: 24px auto 0;
  padding: 16px 20px;
  max-width: 760px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
}
.ainna-homepage .services-next-step span { color: #64748b; }
.ainna-homepage .services-next-step a { color: inherit; font-weight: 750; text-decoration: none; }

/* Concise About section */
.ainna-homepage .about-section--concise { padding: 56px 0 !important; }
.ainna-homepage .about-concise-head { max-width: 820px; margin: 0 auto 28px !important; text-align: center; }
.ainna-homepage .about-concise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ainna-homepage .about-concise-grid .feature-card { min-height: 220px; padding: 24px !important; }
.ainna-homepage .about-concise-no {
  display: inline-flex;
  margin-bottom: 22px;
  color: #7c3aed;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
}
.ainna-homepage .about-concise-grid h3 { margin-bottom: 10px; }
.ainna-homepage .about-concise-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ainna-homepage .about-concise-proof span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.ainna-homepage .about-concise-proof strong { font-size: 21px; }
.ainna-homepage .about-concise-proof small { color: #64748b; line-height: 1.35; }

/* The shared globe is reparented to html; scope through html class. */
html.ainna-homepage #cyber-network-container,
html.ainna-homepage body #cyber-network-container {
  left: 50% !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  transition: opacity .2s ease !important;
}
/* Keep the shared AINNA Cyberpunk Globe appearance intact:
   native rotating CLICK ME ring, native globe sizing, and centred panel. */
html.ainna-homepage:has(#mobile-panel.active) #cyber-network-container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.ainna-homepage body #ainna-cookie-banner .ainna-cookie-btn { min-height: 44px !important; width: 100%; }

/* Desktop first-view fit: keep the hero and its four promo cards visible together. */
@media (min-width: 901px) {
  .ainna-homepage .hero {
    padding: calc(var(--ainna-nav-height) + 8px) 24px 16px !important;
  }

  .ainna-homepage .hero-content { padding: 12px 0 !important; }
  .ainna-homepage .hero-kicker { margin-bottom: 10px !important; }
  .ainna-homepage .hero-copy h1 { margin-bottom: 8px !important; }
  .ainna-homepage .hero-origin-line { margin-bottom: 8px !important; }
  .ainna-homepage .hero-retail-desc { margin-bottom: 10px !important; }
  .ainna-homepage .hero-retail-desc .hero-desc { line-height: 1.4; }
  .ainna-homepage .hero-retail-proof { margin-bottom: 10px; }
  .ainna-homepage .hero-retail-proof span { min-height: 58px; padding: 8px; }
  .ainna-homepage .hero-actions-row .btn { min-height: 40px; }

  .ainna-homepage .ainna-trl9-hero .ainna-trl9-hero-level,
  .ainna-homepage .ainna-trl9-hero .ainna-trl9-hero-body {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ainna-homepage #home .hero-command-card { padding: 14px; }
  .ainna-homepage #home .hero-card-top { padding-bottom: 8px; margin-bottom: 8px; }
  .ainna-homepage #home .hero-cockpit { min-height: 170px; margin: 8px 0; }
  .ainna-homepage #home .hero-flow-link { min-height: 82px; padding: 8px; }

  .ainna-homepage .ainna-promo-cards { margin-top: 14px; margin-bottom: 16px; }
  .ainna-homepage .ainna-split-card { min-height: 140px; }
  .ainna-homepage .ainna-split-content { padding: 12px; gap: 4px; }
  .ainna-homepage .ainna-split-title { font-size: 13px; }
  .ainna-homepage .ainna-split-motto { font-size: 10px; }
  .ainna-homepage .ainna-split-cta { padding: 5px 10px; font-size: 11px; }
}

@media (max-width: 768px) {
  .ainna-homepage .ainna-mobile-topbar {
    z-index: 19000;
    min-height: var(--ainna-mobile-nav-height, 56px);
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(148,163,184,.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  [data-theme="dark"] .ainna-homepage .ainna-mobile-topbar { background: rgba(7,12,22,.86); }
  .ainna-homepage .ainna-mobile-topbar #mobile-burger,
  .ainna-homepage .menu-header button { min-width: 44px; min-height: 44px; }
  .ainna-homepage #mobile-panel { z-index: 20000; }
  .ainna-homepage:has(#mobile-panel.active) .ainna-mobile-topbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .ainna-homepage .mobile-menu { width: min(330px, 88vw); padding: 20px; }
  .ainna-homepage .mobile-menu nav { gap: 6px; }
  .ainna-homepage .mobile-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 10px; }

  .ainna-homepage .hero { padding: calc(var(--ainna-mobile-nav-height) + 10px) 14px 32px !important; }
  .ainna-homepage .hero-retail-neuralops { grid-template-columns: 1fr !important; gap: 0 !important; }
  .ainna-homepage .hero-copy { text-align: center; }
  .ainna-homepage .hero-copy h1 { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.05 !important; }
  .ainna-homepage .hero-retail-desc { margin: 0 auto 16px; }
  .ainna-homepage .hero-retail-desc .hero-desc { font-size: 15px !important; }
  .ainna-homepage .hero-retail-proof { margin-bottom: 16px; }
  .ainna-homepage .hero-actions-row { display: grid !important; grid-template-columns: 1fr; width: 100%; }
  .ainna-homepage .hero-actions-row .btn { width: 100%; min-height: 48px; }
  .ainna-homepage .hero-visuals { display: none !important; }

  .ainna-homepage .services-section--static,
  .ainna-homepage .about-section--concise { padding: 48px 0 !important; }
  .ainna-homepage .services-static-grid,
  .ainna-homepage .about-concise-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 14px; }
  .ainna-homepage .services-static-grid .service-card { min-height: 0; padding: 20px !important; }
  .ainna-homepage .services-next-step { margin: 18px 14px 0; align-items: stretch; flex-direction: column; text-align: center; }
  .ainna-homepage .services-next-step a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .ainna-homepage .about-concise-head { padding: 0 14px; }
  .ainna-homepage .about-concise-grid .feature-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 24px !important;
  }
  .ainna-homepage .about-concise-proof { grid-template-columns: 1fr; margin: 12px 14px 0; }

  /* Team becomes an intentional one-card-per-swipe list, not a clipped marquee. */
  .ainna-homepage #team { padding-top: 52px !important; padding-bottom: 52px !important; }
  .ainna-homepage #team > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .ainna-homepage #team #team-header { padding-left: 24px !important; padding-right: 24px !important; }
  .ainna-homepage #team .team-scroll {
    width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .ainna-homepage #team .team-track {
    width: max-content !important;
    transform: none !important;
    animation: none !important;
  }
  .ainna-homepage #team .scroll-content {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 56px);
    gap: 24px !important;
    width: max-content !important;
    padding: 0 28px 14px !important;
    transform: none !important;
    animation: none !important;
  }
  .ainna-homepage #team .team-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: center;
  }
  /* Marquee clones exist only for the seamless desktop loop. On the mobile
     one-card-per-swipe list they would show every member twice. */
  .ainna-homepage #team .scroll-content > .team-card[aria-hidden="true"] {
    display: none !important;
  }
  .ainna-homepage #team .team-chart-grid { display: none !important; }

  html.ainna-homepage #cyber-network-container,
  html.ainna-homepage body #cyber-network-container {
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
  html.ainna-homepage body #ainna-cookie-banner { bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; width: calc(100vw - 20px) !important; }
}

@media (max-width: 390px) {
  .ainna-homepage .ainna-mobile-brand { font-size: 14px; }
  .ainna-homepage .ainna-mobile-topbar .ainna-theme-switch-label { display: none !important; }
  .ainna-homepage .hero-retail-proof { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}