/* =============================================================================
   Nex BuildO — Custom styles layered on top of Tailwind CDN.
   Keep this lean: Tailwind utilities handle the bulk; this file holds tokens,
   keyframes, and a few effects Tailwind utilities can't express cleanly.
   ========================================================================== */

:root {
  /* Brand tokens — mirrored from nex-construction-docs/brand/logos/README.md */
  --paper:       #faf8f3;
  --ink:         #1a1815;
  --ink-soft:    #57534e;
  --accent:      #c2410c; /* burnt orange */
  --accent-700:  #9a3412;
  --amber:       #f59e0b;
  --accent-soft: #fef0e6;
  --page-dark:   #0e0d0b;
  --surface-dark:#15140f;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Geist', 'Helvetica Neue', Arial, sans-serif; }

/* Display font for headlines */
.font-display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ---- Sticky header elevation ---- */
#site-header {
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#site-header.is-scrolled {
  background-color: rgba(250, 248, 243, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 0 rgba(26, 24, 21, .06), 0 8px 24px -16px rgba(26, 24, 21, .25);
  border-color: rgba(26, 24, 21, .08);
}

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Decorative blueprint grid ---- */
.bg-blueprint {
  background-image:
    linear-gradient(rgba(194,65,12,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,65,12,.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bg-blueprint-dark {
  background-image:
    linear-gradient(rgba(245,158,11,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---- Gradient text accent ---- */
.text-gradient {
  background: linear-gradient(90deg, var(--accent) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Phone mockup frame ---- */
.phone-frame {
  border-radius: 2.4rem;
  box-shadow: 0 40px 80px -30px rgba(26,24,21,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ---- Subtle live "sync" pulse dot ---- */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: .35; }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

/* ---- Animated progress bar fill ---- */
@keyframes grow-bar {
  from { width: 0; }
}
.is-visible .anim-bar { animation: grow-bar 1.1s cubic-bezier(.16,1,.3,1) both; }

/* ---- Card hover lift ---- */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); }

/* Hide scrollbars on horizontal logo strip */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Legal / content pages typography ---- */
.legal { color: #57534e; line-height: 1.7; }
.legal h2 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  color: #1a1815; font-weight: 700;
  font-size: 1.4rem; margin: 2.4rem 0 .75rem;
  scroll-margin-top: 6rem;
}
.legal h3 {
  color: #1a1815; font-weight: 600;
  font-size: 1.05rem; margin: 1.6rem 0 .5rem;
}
.legal p { margin: .75rem 0; }
.legal ul { margin: .75rem 0 .75rem 1.1rem; list-style: disc; }
.legal li { margin: .35rem 0; }
.legal a { color: #c2410c; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: #1a1815; font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.legal th, .legal td { border: 1px solid rgba(26,24,21,.12); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.legal th { background: #faf8f3; font-weight: 600; color: #1a1815; }