/* ==========================================================================
   TruckBooks — Home Page (additive on top of styles.css)
   Sections specific to the product home page: stats strip, why-grid,
   features grid, product tour, pricing, trust grid.
   ========================================================================== */

/* ---------- Hero additions ---------- */
.hero__tagline {
  margin: 4px 0 24px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 18px;
}
@media (max-width: 480px) {
  .hero__cta .btn { width: 100%; }
}

/* ---------- 2. Stats strip ---------- */
.stats-strip {
  position: relative;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(13,19,31,.55), rgba(5,7,13,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
  text-align: center;
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
}
.stats__num {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stats__lbl {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ---------- 3. Why TruckBooks ---------- */
.section--why { padding-top: 96px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  position: relative;
  padding: 28px 26px 30px;
  background: rgba(13,19,31,.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, border-color .25s, background .25s;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,158,11,.35);
  background: rgba(20,27,43,.7);
}
.why-card__icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--orange-dim);
  border: 1px solid rgba(245,158,11,.3);
  color: var(--orange);
  margin-bottom: 4px;
}
.why-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.why-card__body {
  margin: 0;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.55;
}
.why-card__body strong { color: var(--text); }
.why-card__points {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.why-card__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.why-card__points li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px rgba(245,158,11,.5);
  flex-shrink: 0;
}
.why-card--accent {
  border-color: rgba(245,158,11,.4);
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,.10), transparent 55%),
    rgba(13,19,31,.7);
  box-shadow: 0 30px 60px -30px var(--orange-glow);
}
.why-card__chip {
  position: absolute;
  top: -10px;
  right: 18px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px var(--orange-glow);
}

/* ---------- 4. How it works (uses .flow from styles.css) ---------- */
.section--how { padding-top: 64px; padding-bottom: 64px; }
.section--how .flow { margin-bottom: 0; }

/* ---------- 5. Everything you get — full features grid ---------- */
.section--features { padding-top: 80px; padding-bottom: 80px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.features-grid li {
  padding: 22px 20px 18px;
  background: rgba(13,19,31,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .25s, border-color .25s, background .25s;
}
.features-grid li:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.35);
  background: rgba(20,27,43,.7);
}
.features-grid__icon {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--orange-dim);
  border: 1px solid rgba(245,158,11,.25);
  font-size: 19px;
  margin-bottom: 12px;
}
.features-grid strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.features-grid p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .features-grid { grid-template-columns: 1fr; } }

/* ---------- 6. Product tour ---------- */
.section--tour { padding-top: 64px; padding-bottom: 80px; }
.tour {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
  justify-items: center;
}
.tour__shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 240px;
}
.tour__shot .device { width: 200px; }
.tour__shot .device img { border-radius: 26px; }
.tour__shot figcaption {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}
@media (max-width: 1000px) { .tour { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .tour { grid-template-columns: 1fr; } }

/* ---------- 7. Pricing ---------- */
.section--pricing { padding-top: 80px; padding-bottom: 80px; }
.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) { .pricing { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  padding: 32px 28px 28px;
  background: rgba(13,19,31,.65);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .3s ease, border-color .25s;
}
.price-card:hover { transform: translateY(-3px); }

.price-card__name {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-card__num {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
.price-card__per {
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
}
.price-card__sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}
.price-card__feats {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
}
.price-card__feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-dim);
}
.price-card__feats li::before {
  content: "✓";
  color: var(--orange);
  font-weight: 800;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.price-card__feats strong { color: var(--text); font-weight: 700; }
.price-card__note {
  margin: 6px 0 0;
  font-size: 12.5px;
  text-align: center;
}

.price-card--featured {
  border-color: rgba(245,158,11,.4);
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,.12), transparent 55%),
    rgba(13,19,31,.78);
  box-shadow: 0 36px 70px -30px var(--orange-glow);
}
.price-card--featured .price-card__name { color: var(--orange); }
.price-card__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px var(--orange-glow);
}

/* ---------- 8. Trust grid ---------- */
.section--trust { padding-top: 64px; padding-bottom: 56px; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.trust-grid li {
  padding: 22px 20px;
  background: rgba(13,19,31,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .25s, border-color .25s;
}
.trust-grid li:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.3);
}
.trust-grid__icon {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--orange-dim);
  border: 1px solid rgba(245,158,11,.25);
  color: var(--orange);
  margin-bottom: 12px;
}
.trust-grid strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.trust-grid p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------- 9. Final CTA additions ---------- */
.cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 12px;
  flex-wrap: wrap;
}