/* TimeGain AI — design tokens & base */

:root {
  --bg: #0A0E1A;
  --bg-elev: #0F1422;
  --bg-panel: #141A2C;
  --bg-line: rgba(255,255,255,0.08);
  --ink: #F5F3EE;
  --ink-dim: #A8ADC0;
  --ink-faint: #565C72;
  --accent: oklch(0.82 0.17 190);     /* electric teal */
  --accent-2: oklch(0.72 0.16 290);   /* soft violet */
  --warn: oklch(0.80 0.15 60);        /* amber */
  --success: oklch(0.78 0.17 155);
  --warm: #F5F3EE;
  --warm-dim: #E8E4DA;
  --radius: 14px;
  --radius-sm: 8px;
  --font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #06131A; }

/* Mono labels */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Section — fluid across phone → ultrawide */
.section {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) clamp(18px, 4vw, 48px);
  position: relative;
}
/* Ultrawide (21:9 and wider): widen the content frame so it doesn't
   feel like a narrow column floating in space. */
@media (min-width: 1800px) {
  .section { max-width: 1600px; padding-left: 72px; padding-right: 72px; }
}
@media (min-width: 2400px) {
  .section { max-width: 1800px; }
}
/* Tablet */
@media (max-width: 960px) {
  .section { padding: 64px 24px; }
}
/* Phone */
@media (max-width: 640px) {
  .section { padding: 48px 18px; }
}

/* Responsive utilities used across the site */
@media (max-width: 960px) {
  /* Generic two-col grids collapse to one on narrow screens */
  .r-stack-960 { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 640px) {
  .r-hide-mobile { display: none !important; }
  .r-stack-mobile { grid-template-columns: 1fr !important; }
  /* Services bento: 3-col → 1-col, hub no longer center-anchored */
  .bento-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .bento-hub { grid-column: auto !important; grid-row: auto !important; min-height: 420px; }
}
@media (max-width: 860px) and (min-width: 641px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto !important; }
  .bento-hub  { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 420px; }
}

/* Hero pipeline + Nav phone adjustments */
@media (max-width: 640px) {
  .hero-pipeline { grid-template-columns: repeat(2, 1fr) !important; }
  .nav-links { display: none !important; }
  .nav-cta-ghost { display: none !important; }
  .nav-cta-demo { display: none !important; }
}

/* Catch-all: any multi-column grid that hasn't opted in to a custom
   responsive rule collapses on phones. We target only grids with 3+
   columns via [style*='repeat(3'] and [style*='repeat(4'] so 2-col
   stays two-wide where that still reads. */
@media (max-width: 640px) {
  [style*="gridTemplateColumns: 'repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="gridTemplateColumns: 'repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 960px) and (min-width: 641px) {
  [style*="gridTemplateColumns: 'repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

  /* Footer mobile fixes */
@media (max-width: 640px) {
  footer { padding: 40px 18px 32px !important; }
  .footer-bottom { margin-top: 32px !important; }
}

/* Stats row: its 4-col is inline — force 2x2 on phone */
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Footer: stack the logo+CTA block full-width, then put the three
   text columns in a 2-col grid below it on phone. Avoids 4 separate
   tiny mono lists running down a single column. */
@media (max-width: 640px) {
  footer .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  footer .footer-grid > :first-child { grid-column: 1 / -1 !important; }
}

/* Subtle grid background */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px -8px var(--accent);
}
.btn-ghost {
  border-color: var(--bg-line);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--ink-dim);
  background: rgba(255,255,255,0.04);
}

/* Card */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--bg-line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(255,255,255,0.2);
}

/* hairline */
.hr-line {
  height: 1px;
  background: var(--bg-line);
  width: 100%;
}

/* dot divider */
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); display: inline-block; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Marquee scroll */
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Seamless marquee — assumes the inner track holds 3 copies of
   the content (plus the flex gap), and loops back every 1/3. */
@keyframes marquee-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% / 3), 0, 0); }
}

/* Shimmer for placeholders */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 8px,
      rgba(255,255,255,0.02) 8px,
      rgba(255,255,255,0.02) 16px
    );
  border: 1px dashed var(--bg-line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 20px var(--accent);
}

/* Magnetic hover helper */
.magnetic { transition: transform 0.25s cubic-bezier(.2,.8,.2,1); }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--bg-line);
  color: var(--ink-dim);
  background: rgba(255,255,255,0.02);
}

/* page fade */
.page-fade {
  animation: pageFade 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-panel); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-line); }


/* Hamburger nav button — phone only */
.nav-hamburger { display: none !important; }
@media (max-width: 640px) {
  .nav-hamburger { display: inline-flex !important; }
}

/* Tap targets on phone */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
}

/* Mobile pass v2 — page-level fixes */
@media (max-width: 640px) {
  /* Stacked 2-col grids: reduce 80px gap that stays huge in 1-col */
  .r-stack-mobile { gap: 24px !important; grid-template-columns: 1fr !important; }

  /* Services page: 2-col card grid -> 1-col on phone */
  .r-services-grid { grid-template-columns: 1fr !important; }

  /* WorkflowPane: stack clock above step list, smaller padding */
  .workflow-pane {
    grid-template-columns: 1fr !important;
    padding: 56px 18px 24px !important;
    gap: 16px !important;
  }
  .workflow-pane > div:first-child { padding-left: 0 !important; }
  .workflow-pane > div:last-child { padding-right: 0 !important; }
  /* Big "116m" / "48s" cycle-time number — shrink for narrow column */
  .workflow-pane > div:first-child > div:nth-child(2) {
    font-size: 64px !important;
  }

  /* Hero h1: keep tighter at narrow widths */
  section h1 { hyphens: auto; word-break: break-word; }

  /* Page hero h1 (services/about/process/contact) clamp floors */
  .page-fade h1 { font-size: clamp(32px, 8.5vw, 76px) !important; }

  /* About page: force all multi-col grids to 1-col */
  .about-grid-main { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-grid-how  { grid-template-columns: 1fr !important; gap: 16px !important; }
  .about-grid-bg   { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about-bullets   { grid-template-columns: 1fr !important; }

  /* Contact page: stack left/right panels */
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Process page: shrink left step-number gutter */
  .process-step { grid-template-columns: 56px 1fr !important; gap: 14px !important; }
  .process-step-num { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .process-vertical-line { left: 17px !important; }
  .process-how-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* CTABand: reduce generous padding on mobile */
  .cta-band-inner { padding: 32px 24px !important; }

  /* Footer: stack columns */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Services prior work: 3-col → 1-col */
  .prior-work-grid { grid-template-columns: 1fr !important; }

  /* Services header pair */
  .services-header-pair { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Phone: keep mobile menu dropdown above particles */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
}

/* Mobile pass v2.1 — actual fixes from verifier */
@media (max-width: 640px) {
  /* Bento children carry explicit grid-column / grid-row from inline styles
     for the desktop layout; on phone we need to clear those so the
     1-col grid-template-columns rule actually takes effect. */
  .bento-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }

  /* Stats: stack to 1-col on phone — 3-col was crushing the
     subtitle into 3-4 lines and making each cell a different
     height. Single column gives the numbers room to breathe. */
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid > div > div { padding: 20px 18px !important; }

  /* Hero: reduce top gap on phones so headline is closer to nav */
  section.hero-section { padding-top: 80px !important; min-height: auto !important; }

  /* Before/after header pair */
  .before-after-header { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* WhoWeHelp: 3-col → 1-col */
  .who-we-help-grid { grid-template-columns: 1fr !important; }

  /* ServicesBento header pair already handled by r-stack-mobile */

  /* Process: tighten section top padding on mobile */
  .process-top { padding-top: 100px !important; }

  /* Contact: don't force 100vh on mobile — just let content size it */
  .contact-top { padding-top: 100px !important; min-height: 0 !important; }

  /* About top padding */
  .about-top { padding-top: 100px !important; }

  /* Services top padding */
  .services-top { padding-top: 100px !important; }

  /* Reduce bento grid row heights on mobile (already 1-col) */
  .bento-grid {
    grid-auto-rows: auto !important;
    grid-template-rows: auto !important;
  }
  /* Bento cards: remove fixed heights, let content determine height */
  .bento-grid > * { min-height: 0 !important; height: auto !important; }

  /* Founder card: constrain photo height on mobile */
  .founder-photo { max-height: 280px !important; }
}