/* Fieldshot marketing site — design tokens & global styles */

:root {
  /* Ink / text */
  --ink: #14181F;
  --ink-body: #3B424E;
  --ink-muted: #6E7683;
  --ink-warm: #8A8578;

  /* Brand blue */
  --blue: #2B54C8;
  --blue-hover: #234AB5;
  --blue-bright: #5B8CFF;
  --blue-bright-2: #5A87F7;
  --blue-on-dark: #7FA0FF;
  --blue-grad-start: #2743B4;
  --blue-grad-end: #1B2E7A;

  /* Amber */
  --amber: #F5A524;
  --amber-hover: #e59a1c;

  /* Greens */
  --green: #2E9E5B;
  --green-dark: #1C6B3F;
  --green-light: #6FD79B;
  --success-bg: #EAF7EF;
  --success-border: #B9E4CB;

  /* Backgrounds */
  --bg-page: #FBFAF7;
  --bg-warm: #F2EEE6;
  --bg-hero-wash: #EEF2FF;
  --bg-icon: #EAEFFF;
  --bg-white: #FFFFFF;

  /* Dark bands */
  --dark-band: #0E1422;
  --dark-footer: #0A0E18;
  --dark-card: #131C2E;
  --dark-card-2: #141C2C;
  --dark-pro: #182642;
  --dark-bezel: #0B0F17;
  --dark-bezel-2: #05070C;

  /* Borders */
  --line-warm: #EAE6DD;
  --line-warm-2: #DED9CF;

  /* In-mockup palette */
  --mock-ink: #EDF1F8;
  --mock-muted: #93A0B8;
  --mock-muted-2: #7C889E;
  --mock-muted-3: #6B7690;
  --mock-muted-4: #5D6880;
  --mock-chip: #1C2740;
  --mock-card: #162033;
  --mock-nav: #131C2E;

  /* Radii */
  --r-btn: 12px;
  --r-btn-lg: 13px;
  --r-card: 18px;
  --r-card-lg: 20px;
  --r-input: 12px;
  --r-input-lg: 13px;

  /* Shadows */
  --shadow-cta: 0 10px 22px rgba(43,84,200,.3);
  --shadow-cta-sm: 0 8px 18px rgba(43,84,200,.28);
  --shadow-amber: 0 12px 28px rgba(245,165,36,.4);
  --shadow-card: 0 30px 60px -30px rgba(20,24,31,.25);
  --shadow-nav: 0 6px 24px rgba(20,24,31,.08);

  /* Type stacks */
  --font-body: 'Public Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Archivo', 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-page);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
::selection { background: var(--amber); color: var(--ink); }

/* Floating phone animation — apply to a WRAPPER around the scaled/rotated phone
   so translateY composes cleanly instead of overriding the base transform. */
@keyframes fsfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.fsfloat        { animation: fsfloat 7s ease-in-out infinite; will-change: transform; }
.fsfloat--fast  { animation: fsfloat 6s ease-in-out infinite; will-change: transform; }

/* Nav scroll shadow — toggled via JS by adding .is-scrolled */
.site-nav { transition: box-shadow 180ms ease; }
.site-nav.is-scrolled { box-shadow: var(--shadow-nav); }

/* Trade card hover */
.trade-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.trade-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-bright);
  box-shadow: 0 20px 40px -24px rgba(43,84,200,.35);
}

/* Button hovers */
.btn-primary { transition: background-color 150ms ease, box-shadow 150ms ease; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }
.btn-amber { transition: background-color 150ms ease, box-shadow 150ms ease; }
.btn-amber:hover { background: var(--amber-hover); }

/* Inline error text under forms */
.form-error {
  margin: 12px 2px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #B12E2E;
}
.form-error.cta-error { color: #FFD9D9; }

/* Submitting state */
button[disabled] { opacity: .7; cursor: progress; }

/* Honeypot */
.botcheck { display: none !important; }

/* Mobile hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--line-warm-2);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
}
.nav-toggle span::before { content: ""; position: absolute; top: -6px; }
.nav-toggle span::after  { content: ""; position: absolute; top:  6px; }

/* Responsive */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links, .nav-actions { display: none !important; }
  .site-nav.is-open .nav-links,
  .site-nav.is-open .nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 12px 24px 20px;
    background: rgba(251,250,247,.98);
    border-top: 1px solid var(--line-warm);
  }
  .site-nav.is-open .nav-actions a { width: 100%; text-align: center; }
  .site-nav.is-open .nav-inner { flex-wrap: wrap; height: auto; padding-bottom: 8px; }

  /* Hero heading + phones scale down */
  .hero-heading { font-size: 44px !important; }
  .hero-visual { height: auto !important; min-height: 520px; }

  /* Feature heading */
  .feature-heading { font-size: 34px !important; }
}

@media (max-width: 720px) {
  /* README: collapse card grids to 1 column on mobile */
  .grid-3, .grid-4, .stats-grid, .plans-grid, .trades-grid, .quotes-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-cell { border-left: none !important; padding-top: 22px; padding-bottom: 22px; }
  .stats-cell + .stats-cell { border-top: 1px solid rgba(255,255,255,.08); }

  .hero-heading { font-size: 38px !important; line-height: 1.06 !important; }
  .feature-heading { font-size: 30px !important; }
  .cta-heading { font-size: 34px !important; }

  section { padding-left: 4vw !important; padding-right: 4vw !important; }
  .hero-visual { min-height: 460px; }

  .announce-text { font-size: 12.5px !important; }
}