/* ============================================
   styles.mobile.css
   Mobile-only overrides (<= 768px)
   ============================================ */

/* Base layout & typography */
html,
body {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

body {
  background-color: #020617;
  color: #e5e7eb;
}

/* Generic container: full-width with safe padding */
.container {
  max-width: 100%;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

/* Main card wrapper (dashboard / forms etc.) */
main {
  width: 100%;
  margin: 1.25rem 0;
  padding: 1.5rem 1.25rem;
  border-radius: 0;
  box-shadow: none;
}

/* Section titles a bit smaller on mobile */
.section-title {
  font-size: 1.55rem;
  line-height: 1.3;
  margin-bottom: 0.85rem;
}

/* --------------------------------------------
   NAVBAR – stacked layout, supports "More" button
   -------------------------------------------- */

.navbar,
.navbar.container {
  background: #020617bc;
  padding: 0.75rem 1rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

/* Logo centered */
.navbar .logo {
  margin: 0;
  display: flex;
  justify-content: center;
}

.navbar .logo a {
  font-size: 1.4rem;
}

.navbar .navbar-logo {
  height: 42px;
  margin-left: 6px;
}

/* Primary/main links + legacy nav-links */
.main-links,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.main-links li a,
.nav-links li a {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 23, 42, 0.9);
}

/* Right-side user links: compact grid */
.user-links-grid {
  margin-top: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  justify-items: center;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .user-links-grid {
    grid-template-columns: 1fr;
  }
}

/* Smaller logout button on mobile */
.logout-btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

/* "More" (three-line) dropdown fits mobile stack */
.nav-more-wrapper {
  align-self: center;
}

.nav-more-toggle {
  width: 36px;
  height: 36px;
}

/* Center dropdown under button on mobile */
.nav-more-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 240px;
}

/* --------------------------------------------
   HERO – keep drama, tighten spacing
   -------------------------------------------- */

.hero {
  padding: 4.25rem 1.25rem 3rem;
  text-align: center;
}

.hero-text {
  max-width: 100%;
}

#hero-title {
  font-size: 1.45rem;
  line-height: 1.35;
}

.hero-text p {
  max-width: 100%;
  margin: 0.65rem auto 0;
}

.hero-lead {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: #e5e7eb;
    max-width: 720px;
    margin: 0.75rem auto 0;
  }

  @media (min-width: 769px) {
    .hero-lead {
      color: #e5e7eb;
    }
  }




/* CTA buttons: wide and touch-friendly */
.cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 46%;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  margin: 0.35rem 0.25rem;
}

@media (max-width: 480px) {
  .cta-button {
    width: 100%;
  }
}

/* Tone down drips slightly on mobile */
.color-drip-bg .drop {
  opacity: 0.75;
}

/* --------------------------------------------
   FEATURES & CARDS
   -------------------------------------------- */

.features {
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 2rem 0 1.5rem;
}

.feature {
  padding: 0.9rem 0.95rem;
  text-align: left;
}

/* Dataset cards stack vertically */
.dataset-list {
  flex-direction: column;
  gap: 1rem;
}

.dataset-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Metrics strip: 2 columns, then 1 */
section.container div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 520px) {
  section.container div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------
   BENTO "HOW WE DELIVER" GRID
   -------------------------------------------- */

.bento-grid {
  grid-template-columns: 1fr;
}

.bento-span-3,
.bento-span-4,
.bento-span-6 {
  grid-column: auto !important;
}

.bento-card {
  padding: 1rem;
}

.eyebrow {
  font-size: 0.78rem;
}

/* --------------------------------------------
   TIMELINE (SVG SECTION)
   -------------------------------------------- */

#delivery-timeline .tlg-wrap {
  padding: 0.75rem;
}

#delivery-timeline svg text.tl-title {
  font-size: 12px;
}

#delivery-timeline svg text.tl-meta {
  font-size: 11px;
}

#delivery-timeline .btn {
  width: 100%;
  max-width: 360px;
}

/* --------------------------------------------
   TABLES / COMPARISON
   -------------------------------------------- */

section.container table {
  font-size: 0.9rem;
}

section.container table th,
section.container table td {
  padding: 0.45rem 0.35rem !important;
}

section.container > div[style*="overflow:auto"] {
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------
   FAQ <details> tweaks
   -------------------------------------------- */

details {
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

details + details {
  margin-top: 0.35rem;
}

details summary {
  font-size: 0.96rem;
}

/* --------------------------------------------
   FOOTER
   -------------------------------------------- */

.site-footer {
  padding: 2.25rem 0 1.25rem;
  background: #090f24;
}

.site-footer .container {
  padding: 0 1.5rem;
}

.footer-top {
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.footer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-newsletter-row {
  flex-direction: column;
}

.footer-newsletter-row button {
  width: 100%;
}

.footer-bottom-inner {
  padding: 0 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.footer-bottom-secondary {
  text-align: left;
}

/* --------------------------------------------
   MISC BUTTONS
   -------------------------------------------- */

.btn,
.buy-btn,
.btn-danger {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  text-align: center;
}

/* --------------------------------------------
   GPU-status bar
   -------------------------------------------- */

.gpu-status-bar {
  padding: 0 0.75rem;
  font-size: 0.8rem;
}

/* =========================================
   MAIN CONTENT TYPOGRAPHY (SAFE SCOPE)
   Only inside <main class="container">
========================================= */

main.container {
  color: #111827;
}

main.container .section-title {
  color: #0b1120;
  font-weight: 700;
}

main.container p,
main.container li,
main.container summary {
  color: #111827;
  line-height: 1.7;
  font-size: 0.97rem;
}

/* ========== Section-specific color fixes ========== */

/* WHAT WE DO */
#what-we-do .section-title,
.features .section-title,
.legal-expertise h2,
.how-it-works .section-title,
#delivery-timeline .section-title,
.testimonials .section-title,
#pricing .section-title,
section.container.animate__fadeInUp .section-title,
section.container.animate__zoomIn .section-title,
section.container.animate__fadeInUp:last-of-type .section-title,
section.container.animate__animated.animate__fadeIn > h2.section-title,
section.container.animate__fadeIn .section-title {
  color: #0b1120;
}

#what-we-do p,
#what-we-do li,
.features .feature p,
.legal-expertise p,
.legal-expertise li,
.bento-card p,
.bento-card li,
#delivery-timeline > p,
.testimonials blockquote,
section.container.animate__fadeInUp p,
section.container.animate__fadeInUp .feature p,
section.container.animate__fadeIn p,
#pricing p,
section.container.animate__fadeIn ol,
section.container.animate__fadeIn > p,
section.container.animate__zoomIn table,
section.container:nth-of-type(n) p,
section.container.animate__fadeInUp:last-of-type p {
  color: #111827 !important;
}

/* Features headings */
.features .feature h3,
.bento-card h3,
section.container.animate__fadeInUp .feature h3,
section.container.animate__fadeInUp .section-title,
section.container.animate__fadeInUp .section-title {
  color: #0b1120;
}

/* Testimonials details */
.testimonials blockquote {
  background: #f9fafb;
  border-left: 4px solid #1D2951;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.testimonials blockquote footer {
  margin-top: 0.5rem;
  color: #4b5563;
  font-size: 0.9rem;
}

/* Metrics strip */
section.container.animate__fadeInUp h3 {
  color: #1D2951;
}

/* Sample JSONL row */
section.container.animate__fadeInUp pre {
  background: #0f172a;
  color: #f9fafb;
}

/* FAQ details refined */
section.container.animate__fadeInUp details {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: #111827;
}

section.container.animate__fadeInUp details + details {
  margin-top: 0.5rem;
}

section.container.animate__fadeInUp summary {
  cursor: pointer;
  color: #0b1120;
}

/* CASE STUDIES special handling */
section.container.animate__animated.animate__fadeIn .dataset-card {
  color: #f9fafb;
  border: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem;
}

section.container.animate__animated.animate__fadeIn .dataset-card h3,
section.container.animate__animated.animate__fadeIn .dataset-card p {
  color: #f9fafb !important;
}

section.container.animate__animated.animate__fadeIn .dataset-card .btn {
  background: #f9fafb !important;
  color: #1D2951 !important;
  border: none;
  font-weight: 600;
  align-self: flex-start;
  margin-top: 0.5rem;
}

section.container.animate__animated.animate__fadeIn .dataset-card .btn:hover {
  background: transparent !important;
  color: #f9fafb !important;
  border: 1px solid #f9fafb !important;
}

/* WHY CHOOSE US table */
section.container.animate__zoomIn .section-title {
  color: #0b1120;
}

/* FOOTER safety – keep light text on dark */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer .footer-note,
.site-footer .footer-logo,
.site-footer h4 {
  color: #e5e7eb !important;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* --------------------------------------------
   Mobile override for drip animation speed/height
   -------------------------------------------- */

@keyframes dripFall {
  0%   { transform: translateY(-60px) scale(0.8); opacity: 1; }
  50%  { transform: translateY(960px) scale(1.1); opacity: 1; }
  100% { transform: translateY(1900px) scale(0.9); opacity: 0; }
}

.color-drip-bg .drop {
  position: absolute;
  top: -40px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(135deg, #e879f9, #60a5fa, #5eead4);
  animation: dripFall 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* Make the parent navbar row-based */
.navbar,
.navbar.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Keep primary nav horizontal */
.primary-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    list-style: none;
    padding: 0;
    font-size: 0.7rem;
    margin-left: -0.2rem;
}



/* Mobile-only dynamic sizing for primary nav */
@media (max-width: 768px) {
    .primary-nav {
      /* shrink spacing as screen gets smaller */
      gap: clamp(0.3rem, 2.5vw, 0.8rem);
    }

    .primary-nav a {
      /* min 0.78rem, preferred scale with viewport, max 0.95rem */
      font-size: clamp(0.45rem, 2.6vw, 0.9rem);
      padding: 0.3rem clamp(0.5rem, 2.5vw, 0.9rem);
    }
  }

/* Ensure "More" button sits to the right of primary nav */
.nav-more-wrapper {
    display: flex;
    align-items: center;
}

/* Make sure navbar elements don't stack on mobile (override mobile collapse) */
@media (max-width: 768px) {
    .navbar,
    .navbar.container {
        flex-direction: row !important;   /* force side-by-side */
    }

    .primary-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .nav-more-wrapper {
        margin-left: auto;                /* push to far right */
    }
}
/* Force hero title to be white */
/* #hero-title,
#hero-title span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;  } */

/* Hero lead paragraph directly under the title */
.hero-lead,
.hero-text p {
    color: #ffffff !important;
}