/* ─── RoofBot Site — Shared Styles ─────────────────────────────────────── */
:root {
  --bg:#090a0e; --s1:#0f1117; --s2:#161820; --s3:#1d1f2a;
  --b1:#242636; --b2:#2e3045; --b3:#3a3c52;
  --t1:#eeeef2; --t2:#8e909e; --t3:#4e505f;
  --acc:#E05C20; --acc-l:#f5784a; --acc-d:#b84a18;
  --g:#34c77b; --gbg:#071a0f;
  --a:#f0a030; --abg:#1a1200;
  --r:#e04545;
  --bl:#4a8fff; --blbg:#071428;
  --nav-h:62px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 14px }
body {
  background: var(--bg); color: var(--t1);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--acc); color: white }
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px }
a { color: var(--acc); text-decoration: none }
a:hover { color: var(--acc-l) }
img { max-width: 100% }

/* ── Typography ── */
h1,h2,h3,h4 { letter-spacing: -.04em; line-height: 1.1 }
.mono { font-family: 'JetBrains Mono', monospace }
.eyebrow {
  display: inline-block;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--acc); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 14px;
}
.section-title { font-size: clamp(26px,4vw,42px); font-weight: 800; margin-bottom: 16px }
.section-sub { font-size: 15px; color: var(--t2); line-height: 1.7; max-width: 520px }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  background: rgba(9,10,14,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--b1);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start }
.nav-logo-text { font-size: 17px; font-weight: 700; letter-spacing: -.5px; color: var(--t1) }
.nav-logo-text em { color: var(--acc); font-style: normal }
.nav-links { display: flex; align-items: center; gap: 32px; justify-self: center }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--t2); text-decoration: none; transition: color .12s }
.nav-links a:hover, .nav-links a.active { color: var(--t1) }
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end }
.btn-nav-ghost {
  font-size: 13px; font-weight: 500; color: var(--t2);
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--b2);
  background: transparent; text-decoration: none; transition: all .12s;
  font-family: 'Outfit', sans-serif; cursor: pointer;
}
.btn-nav-ghost:hover { color: var(--t1); border-color: var(--b3) }
.btn-nav-cta {
  font-size: 13px; font-weight: 600; color: white;
  padding: 8px 18px; border-radius: 8px;
  background: var(--acc); text-decoration: none; transition: background .12s;
  font-family: 'Outfit', sans-serif;
}
.btn-nav-cta:hover { background: var(--acc-l); color: white }
.nav-hamburger {
  display: none; background: none; border: none;
  color: var(--t2); cursor: pointer; padding: 6px; border-radius: 7px;
}
.nav-hamburger:hover { background: var(--s2) }
.nav-mobile {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--s1); border-bottom: 1px solid var(--b1);
  padding: 16px 24px; z-index: 199; flex-direction: column; gap: 4px;
}
.nav-mobile.open { display: flex }
.nav-mobile a {
  padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--t2); text-decoration: none; transition: all .12s;
}
.nav-mobile a:hover { background: var(--s2); color: var(--t1) }
.nav-mobile .btn-nav-cta { text-align: center; margin-top: 8px; padding: 12px }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--b1);
  padding: 48px 32px 32px;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand p { font-size: 13px; color: var(--t3); line-height: 1.7; margin-top: 10px; max-width: 240px }
.footer-col-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px }
.footer-col a { display: block; font-size: 13px; color: var(--t2); text-decoration: none; margin-bottom: 8px; transition: color .12s }
.footer-col a:hover { color: var(--t1) }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--b1) }
.footer-copy { font-size: 12px; color: var(--t3); font-family: 'JetBrains Mono', monospace }
.footer-legal { display: flex; gap: 20px }
.footer-legal a { font-size: 12px; color: var(--t3); text-decoration: none; font-family: 'JetBrains Mono', monospace }
.footer-legal a:hover { color: var(--t2) }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Outfit', sans-serif; font-weight: 600; border-radius: 9px; border: none; cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap }
.btn-lg { font-size: 15px; padding: 14px 28px }
.btn-md { font-size: 13px; padding: 10px 20px }
.btn-sm { font-size: 12px; padding: 7px 14px; border-radius: 7px }
.btn-primary { background: var(--acc); color: white }
.btn-primary:hover { background: var(--acc-l); color: white; transform: translateY(-1px) }
.btn-ghost { background: var(--s1); color: var(--t1); border: 1px solid var(--b2) }
.btn-ghost:hover { background: var(--s2); border-color: var(--b3); color: var(--t1) }
.btn-outline { background: transparent; color: var(--t1); border: 1px solid var(--b2) }
.btn-outline:hover { background: var(--s1); color: var(--t1) }

/* ── CARDS ── */
.card { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px }
.card:hover { border-color: var(--b2) }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; font-family: 'JetBrains Mono', monospace }
.badge-green { background: var(--gbg); color: var(--g); border: 1px solid rgba(52,199,123,.2) }
.badge-orange { background: #1a0e06; color: var(--acc); border: 1px solid rgba(224,92,32,.25) }
.badge-blue { background: var(--blbg); color: var(--bl); border: 1px solid rgba(74,143,255,.2) }
.badge-amber { background: var(--abg); color: var(--a); border: 1px solid rgba(240,160,48,.2) }

/* ── CHECK/CROSS ── */
.check { color: var(--g); font-weight: 700 }
.cross { color: var(--t3) }

/* ── LAYOUT UTILS ── */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px }
.container-wide { max-width: 1120px; margin: 0 auto; padding: 0 24px }
.container-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px }
.page-top { padding-top: calc(var(--nav-h) + 72px) }
.section { padding: 80px 0 }
.section-sm { padding: 48px 0 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px }

/* ── HERO COMMON ── */
.page-hero { padding: calc(var(--nav-h) + 72px) 0 72px; text-align: center }
.page-hero h1 { font-size: clamp(32px,5vw,58px); font-weight: 900; margin-bottom: 18px }
.page-hero p { font-size: 16px; color: var(--t2); max-width: 500px; margin: 0 auto; line-height: 1.7 }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--b1); margin: 0 }

/* ── FADE IN ── */
.fade { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease }
.fade.in { opacity: 1; transform: translateY(0) }

/* ── PROSE (legal pages) ── */
.prose h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; letter-spacing: -.4px }
.prose h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; color: var(--t2) }
.prose p { font-size: 14px; color: var(--t2); line-height: 1.8; margin-bottom: 14px }
.prose ul { padding-left: 20px; margin-bottom: 14px }
.prose li { font-size: 14px; color: var(--t2); line-height: 1.8; margin-bottom: 6px }
.prose a { color: var(--bl) }
.prose strong { color: var(--t1); font-weight: 600 }
.prose .last-updated { font-size: 12px; color: var(--t3); font-family: 'JetBrains Mono', monospace; margin-bottom: 32px }

/* ── FAQ ── */
.faq-list { border: 1px solid var(--b1); border-radius: 12px; overflow: hidden; background: var(--s1) }
.faq-item { border-bottom: 1px solid var(--b1) }
.faq-item:last-child { border-bottom: none }
.faq-q { padding: 18px 20px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; transition: background .1s }
.faq-q:hover { background: var(--s2) }
.faq-chevron { flex-shrink: 0; stroke: var(--t3); transition: transform .15s; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round }
.faq-q.open .faq-chevron { transform: rotate(90deg) }
.faq-a { display: none; padding: 0 20px 18px; font-size: 13px; color: var(--t2); line-height: 1.75 }
.faq-q.open + .faq-a { display: block }

/* ── FORM ── */
.form-field { margin-bottom: 16px }
.form-field label { display: block; font-size: 11px; color: var(--t2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; font-family: 'JetBrains Mono', monospace }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: var(--s2); border: 1px solid var(--b2); border-radius: 8px; padding: 10px 13px; color: var(--t1); font-family: 'Outfit', sans-serif; font-size: 13.5px; transition: border-color .12s }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--acc) }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--t3) }
.form-field textarea { min-height: 100px; resize: vertical; line-height: 1.6 }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .site-nav { padding: 0 16px }
  .nav-links { display: none }
  .nav-hamburger { display: flex }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr }
  .footer-brand { grid-column: 1 / -1 }

  /* Grids */
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr }

  /* Container padding */
  .container, .container-wide, .container-narrow { padding: 0 16px }
  .section { padding: 48px 0 }
  .section-sm { padding: 32px 0 }

  /* Hero */
  .page-hero { padding: calc(var(--nav-h) + 48px) 0 48px }
  .page-hero h1 { font-size: clamp(28px, 7vw, 42px); letter-spacing: -.04em }

  /* Buttons */
  .hero-actions, .hero-btns { flex-direction: column; align-items: stretch }
  .btn-lg { font-size: 14px; padding: 13px 22px; justify-content: center }

  /* CTA band */
  .cta-band { padding: 40px 20px }
  .cta-band h2 { font-size: clamp(22px, 5vw, 32px) }
}

@media (max-width: 480px) {
  .page-hero h1 { font-size: 26px; letter-spacing: -.03em }
  .section-title { font-size: 22px; letter-spacing: -.03em }
  .footer-top { grid-template-columns: 1fr }
  .btn-lg { font-size: 13px; padding: 12px 18px }

  /* Nav mobile menu links bigger touch targets */
  .nav-mobile a { padding: 12px 14px; font-size: 15px }

  /* Proof bar vertical on tiny screens */
  .proof-bar { flex-direction: column; align-items: center; gap: 6px }
  .proof-sep { display: none }
}