/* CoolRight base styles. Palette lifted from the approved design mock.
   Kept small on purpose: the full page styles arrive with the home page build,
   and every reference to this file is content-hash stamped, so it can be
   served immutable for a year without stranding a returning visitor. */

*, *::before, *::after { box-sizing: border-box }

:root {
  --bg: #0F172A;
  --bg-2: #0a1120;
  --panel: #151f36;
  --line: rgba(209, 213, 219, .14);
  --text: #E7ECF5;
  --muted: #9FB0C9;
  --accent: #38BDF8;
  --accent-ink: #062033;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--accent) }

.container {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 17, 32, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}

.wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
}

.r { color: var(--accent) }

.tagline {
  font-size: 12px;
  color: var(--muted);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Without this the button is the first thing to be pushed off the right
     edge on a narrow window, which is the one control the header exists for. */
  flex: none;
}

.call-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

/* The email address is long. On a small screen the button matters more, so the
   address drops out of the header and stays in the footer. */
@media (max-width: 720px) {
  .call-link { display: none }
  .tagline { display: none }
}

.btn {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--text);
}

.btn--lg {
  padding: 14px 24px;
  font-size: 17px;
}

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero {
  padding: 64px 0 64px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Copy left, quote form right. The form is the point of the page, so it sits
   in the first screen rather than below it. Below 960px there is no second
   column worth having, so it stacks and the copy comes first. */
.hero-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}

.hero-copy { min-width: 0 }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px }
  .hero { padding: 40px 0 48px }
}

h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 14px 0 18px;
}

.hl { color: var(--accent) }

.lede {
  color: var(--muted);
  font-size: 19px;
  max-width: 62ch;
}

.speed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  background: var(--panel);
  max-width: 62ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.panel {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.panel h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin: 0 0 12px;
}

.footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}