/* QuoteSlayer marketing pages — shared styles.
   Layout lives in inline style attributes on each element so the markup is
   self-contained; this file holds resets, hover states and responsive rules. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0A0E13;
  color: #E9EEF3;
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #5FB0E3; text-decoration: none; }
a:hover { color: #8ECBF0; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
header nav a, header nav a:hover { white-space: nowrap; }

/* hover states lifted out of the markup */
.hv0:hover { background: #FFC53D !important; }
.hv1:hover { background: #111A25 !important; }
.hv2:hover { border-color: #456382 !important; }

/* responsive: inline grid definitions need !important to be overridden */
@media (max-width: 1000px) {
  .rg4 { grid-template-columns: repeat(2, 1fr) !important; }
  .rg3 { grid-template-columns: 1fr !important; }
  .rg2 { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 860px) {
  header > div { height: auto !important; padding: 14px 20px !important; flex-wrap: wrap !important; gap: 16px !important; }
  header nav { gap: 18px !important; row-gap: 12px !important; flex-wrap: wrap !important; margin-left: 0 !important; }
  section > div { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 620px) {
  .rg4 { grid-template-columns: 1fr !important; }
}