/* landing.css — Strongstead marketing landing.
   Ported from the Claude Design handoff (Strongstead Landing.html).
   Component styles are inline in the generated HTML (scripts/build-landing.mjs);
   this file carries the base styles, keyframes, states and responsive overrides. */

html, body { margin: 0; padding: 0; background: #f0eee9; height: auto; min-height: 100vh; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: #1a1410;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f0eee9; }
::-webkit-scrollbar-thumb { background: rgba(26,20,16,0.18); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26,20,16,0.32); }
::selection { background: #c8432c; color: #fff; }

a { color: inherit; }
button { font: inherit; }

.sh-btn { transition: transform 0.15s, background 0.15s; }
.sh-btn:hover { transform: translateY(-1px); }
.sh-btn:active { transform: translateY(0); }

.sh-navlink { position: relative; }
.sh-navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: #c8432c; transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.sh-navlink:hover::after { transform: scaleX(1); }
.sh-navlink:hover { color: #1a1410 !important; }

@keyframes sh-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes sh-float {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(0, -10px) rotate(-3deg); }
}
@keyframes sh-float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -8px); }
}
@keyframes sh-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes sh-cardin {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sh-blink {
  0%, 60% { opacity: 1; }
  80%, 100% { opacity: 0.3; }
}

/* smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* ── sticky nav ── */
.sh-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border 0.3s;
}
.sh-header.scrolled {
  background: rgba(240,238,233,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,20,16,0.08);
}

/* ── reveal on scroll ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
}
.rv.on { opacity: 1; transform: translateY(0); }

/* ── three.js terrain container ── */
.three-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.three-fade {
  mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
}

/* ── module cards ── */
.module-card {
  box-shadow: 0 1px 2px rgba(26,20,16,0.04);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
}
.module-card:hover {
  box-shadow: 0 24px 48px rgba(26,20,16,0.10), 0 4px 12px rgba(26,20,16,0.06);
  transform: translateY(-4px);
}
.module-card .card-arrow {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.module-card:hover .card-arrow { opacity: 1; transform: translateX(0); }

/* ── FAQ accordion ── */
.faq-row { cursor: pointer; }
.faq-a {
  overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s;
}
.faq-row.open .faq-a { max-height: 240px; opacity: 1; margin-top: 10px; }
.faq-plus { transition: transform 0.3s; }
.faq-row.open .faq-plus { transform: rotate(45deg); }

/* ── pricing cycle toggle ── */
.cycle-btn {
  padding: 8px 18px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; color: rgba(26,20,16,0.72);
  font-weight: 600; font-size: 13px; letter-spacing: 0.1px;
  transition: background 0.2s, color 0.2s;
}
.cycle-btn.active { background: #1a1410; color: #fff; }

/* ── responsive ── */
@media (max-width: 1024px) {
  .sh-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sh-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .sh-grid-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 20px !important; }
  .sh-cell { border-left: none !important; padding: 0 !important; }
  .sh-feature { grid-template-columns: 1fr !important; gap: 48px !important; direction: ltr !important; }
  .sh-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 24px !important; }
  .sh-navlinks { display: none !important; }
}
@media (max-width: 640px) {
  .sh-section { padding-left: 20px !important; padding-right: 20px !important; }
  .sh-nav { padding: 14px 20px !important; }
  .sh-clock { display: none !important; }
  /* Nav CTA runs off-screen at phone widths (101px past the viewport at
     375px). The hero repeats the same mailto a few lines down, so drop it
     from the bar rather than shrink it into illegibility. */
  .sh-nav .sh-btn { display: none !important; }
  /* Header is sticky but stays in flow, so the hero's 64px top padding
     read as a dead gap under the bar on phones. */
  .sh-hero { padding-top: 24px !important; }
  .sh-grid-2, .sh-grid-3, .sh-grid-5, .sh-stats-grid { grid-template-columns: 1fr !important; }
  .sh-h1 { font-size: 46px !important; letter-spacing: -1.2px !important; }
  .sh-h2 { font-size: 34px !important; letter-spacing: -0.8px !important; }
  .sh-h3 { font-size: 28px !important; letter-spacing: -0.6px !important; }
  .sh-stat-num { font-size: 48px !important; }
  .sh-hero-mark, .sh-hero-readout, .sh-ribbon { display: none !important; }
  .sh-hero-visual { height: auto !important; padding: 16px 0 8px; }
  .sh-hero-phone { position: static !important; transform: none !important; animation: sh-float-slow 7s ease-in-out infinite !important; }
  .sh-foot-cols { gap: 32px !important; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
  .rv { transition: none; }
  .sh-hero-phone, .sh-hero-mark, .sh-hero-readout { transition: none !important; }
  .hero-mark-svg [data-draw],
  .hero-mark-svg [data-cross],
  .hero-mark-svg [data-sh] { transition: none !important; }
}