/* =============================================================
   TowPilot — Uber-style provider homepage
   Emerald brand (#10B981) layered over Uber-like neutrals.
   Grounded in the DRIVE design system tokens, recolored.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=Archivo:wght@600;700;800;900&display=swap');

:root {
  /* ---- BRAND (TowPilot emerald) — variants derived from --accent ---- */
  --accent:       #10B981;
  --accent-600:   color-mix(in srgb, var(--accent) 88%, #000);  /* hover */
  --accent-700:   color-mix(in srgb, var(--accent) 74%, #000);  /* pressed / text on light */
  --accent-800:   color-mix(in srgb, var(--accent) 56%, #000);
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-glow:  color-mix(in srgb, var(--accent) 32%, transparent);

  /* ---- NEUTRALS (Uber-ish) ---- */
  --ink:        #0A0A0B;     /* near-black headings + body */
  --ink-2:      #4B5158;     /* secondary text */
  --ink-3:      #767C84;     /* tertiary / placeholder */
  --border:     #E6E7E9;
  --border-2:   #D4D6D9;
  --surface:    #FFFFFF;
  --surface-2:  #F4F5F6;     /* alt section bg / cards */
  --surface-3:  #ECEEF0;
  --page-bg:    #FFFFFF;
  --footer-bg:  #0A0A0B;
  --footer-fg:  #EDEEEF;
  --footer-mut: #9AA0A6;

  /* ---- TYPE ---- */
  --font-display: 'Barlow', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- SHAPE ---- */
  --radius-card: 16px;
  --radius-btn:  10px;
  --radius-pill: 999px;

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;

  /* ---- SHADOW ---- */
  --shadow-sm: 0 1px 2px rgba(10,12,14,0.06);
  --shadow-md: 0 6px 20px rgba(10,12,14,0.08);
  --shadow-lg: 0 18px 48px rgba(10,12,14,0.12);
  --shadow-accent: 0 12px 28px var(--accent-glow);
}

/* ---- DARK THEME ---- */
html.tp-dark {
  --ink:        #F4F5F6;
  --ink-2:      #B6BBC1;
  --ink-3:      #858B92;
  --border:     #242629;
  --border-2:   #34373B;
  --surface:    #141518;
  --surface-2:  #1A1C20;
  --surface-3:  #212327;
  --page-bg:    #0C0D0F;
  --footer-bg:  #060708;
  --footer-fg:  #EDEEEF;
  --footer-mut: #8B9097;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 800;
}

p { margin: 0; color: var(--ink); text-wrap: pretty; }

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

button { font-family: var(--font-body); cursor: pointer; }

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

/* ---- Layout helpers ---- */
.tp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tp-wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---- Buttons ---- */
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border-radius: var(--radius-btn); border: none; cursor: pointer;
  padding: 14px 22px; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.tp-btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.tp-btn-accent:hover { background: var(--accent-600); transform: translateY(-1px); }
.tp-btn-accent:active { background: var(--accent-700); transform: scale(0.985); }

.tp-btn-dark { background: var(--ink); color: var(--page-bg); }
.tp-btn-dark:hover { transform: translateY(-1px); opacity: 0.9; }

.tp-btn-ghost { background: var(--surface-2); color: var(--ink); }
.tp-btn-ghost:hover { background: var(--surface-3); }

.tp-btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border-2); }
.tp-btn-outline:hover { border-color: var(--ink); }

.tp-link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px; transition: gap var(--dur) var(--ease-out), color var(--dur), border-color var(--dur);
}
.tp-link-arrow:hover { gap: 11px; color: var(--accent-700); border-color: var(--accent-700); }

.tp-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-700);
}
html.tp-dark .tp-eyebrow { color: var(--accent); }

/* ---- Scroll reveal ----
   Pure CSS, scroll-driven where supported. Default state is VISIBLE, so
   content is never trapped behind JS that may not run. */
@keyframes tp-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .reveal {
    animation: tp-reveal linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 24%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---- Section rhythm ---- */
.tp-section { padding: 96px 0; }
@media (max-width: 720px) { .tp-section { padding: 64px 0; } }

/* ---- Keyframes ---- */
@keyframes tp-dash { to { stroke-dashoffset: -44; } }
@keyframes tp-ping {
  0%   { transform: scale(0.5); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---- Homepage hero: navigate-the-route → land as the mark ---- */
@keyframes ha-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ha-fly {
  0%  { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  78% { offset-distance: 100%; opacity: 1; }
  90%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ha-pop { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.ha-route { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ha-draw 2.1s cubic-bezier(.45,0,.35,1) both; }
.ha-plane { offset-path: path('M160 18 L160 74 Q160 84 150 84 L100 84 Q90 84 90 94 L90 114 Q90 124 100 124 L120 124'); offset-rotate: auto; offset-anchor: 50% 50%; animation: ha-fly 2.6s cubic-bezier(.45,0,.35,1) both; }
.ha-logo { animation: ha-pop .6s var(--ease-out) 2.35s both; }
@media (prefers-reduced-motion: reduce) {
  .ha-route, .ha-plane { animation: none !important; }
  .ha-plane { opacity: 0 !important; }
  .ha-logo { animation: none !important; }
}

/* ---- Hero layout variants (set on the grid via data-hero) ---- */
.tp-hero-grid[data-hero="map-left"] { direction: rtl; }
.tp-hero-grid[data-hero="map-left"] > * { direction: ltr; }
.tp-hero-grid[data-hero="centered"] { grid-template-columns: 1fr !important; max-width: 760px; text-align: center; min-height: auto !important; padding-top: 24px; padding-bottom: 48px; }
.tp-hero-grid[data-hero="centered"] .tp-hero-map { display: none; }
.tp-hero-grid[data-hero="centered"] form,
.tp-hero-grid[data-hero="centered"] p { margin-left: auto; margin-right: auto; }
.tp-hero-grid[data-hero="centered"] > div:first-child > div:last-child { justify-content: center; }

/* ---- Responsive ---- */
.tp-nav-mobile { display: none; }
@media (max-width: 940px) {
  .tp-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; min-height: auto !important; }
  .tp-hero-grid[data-hero="map-left"] { direction: ltr; }
  .tp-hero-map { max-width: 460px; }
  .tp-earn-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .tp-suggest-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tp-pillars-grid { grid-template-columns: 1fr !important; }
  .tp-leads-hero { grid-template-columns: 1fr !important; gap: 40px !important; min-height: auto !important; }
  .tp-leads-hero-card { max-width: 460px; }
  .tp-price-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .tp-method-row { flex-direction: column !important; gap: 36px !important; }
  .tp-inflow { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tp-inflow-benefits { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tp-steps-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .tp-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .tp-nav-desktop { display: none !important; }
  .tp-nav-mobile { display: flex !important; }
  .tp-suggest-grid { grid-template-columns: 1fr !important; }
  .tp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 20px !important; }
  .tp-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---- Helpers for the Blade port (were inline styles in the React source) ---- */
.tp-navlink { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); padding: 8px 12px; border-radius: 8px; transition: background var(--dur) var(--ease-out); white-space: nowrap; }
.tp-footer-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); color: var(--footer-fg); }
.tp-footer-link { transition: opacity var(--dur); }
.tp-footer-link:hover { opacity: 1 !important; }
.tp-suggest-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }