:root {
  --bg: #111111;
  --red: #c8202c;
  --red-dark: #a01a24;
  --red-text: #f25560; /* lighter red for text on dark backgrounds (5.3:1+); --red stays for buttons and borders */
  --text: #e9e9e9;
  --muted: #a9a9a9;
  --line: #2c2c2c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ---------- Top bar ---------- */
.call-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #000;
  border-bottom: 1px solid var(--line);
}
.call-bar .brand-mini {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.04em;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.call-bar .btn-call {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 3px;
  padding: 0.4rem 0.95rem;
  white-space: nowrap;
  text-decoration: none;
}
.call-bar .btn-call:hover { background: var(--red-dark); }

/* ---------- Hero ---------- */
.hero { padding: 3rem 0; border-bottom: 3px solid var(--red); }
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.hero .kicker { color: var(--red-text); font-weight: 700; margin: 0 0 0.5rem; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

.hero .review-line { margin: 1.1rem 0 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.review-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.review-line .stars { color: #f4b942; letter-spacing: 0.08em; }

.nav-links a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; margin-right: 1.25rem; }
.nav-links a:hover { color: #fff; }

.cta-band { background: var(--red); padding: 2.25rem 0; }
.cta-band h2 { font-size: 1.5rem; font-weight: 800; margin: 0; color: #fff; }
.cta-band .btn-light-call {
  display: inline-block; background: #fff; color: #111; font-weight: 800; font-size: 1.35rem;
  padding: 0.55rem 1.4rem; border-radius: 4px; text-decoration: none; font-variant-numeric: tabular-nums;
}
.cta-band .btn-light-call:hover { background: #eee; color: #111; }
.hero p { color: var(--muted); max-width: 54ch; margin: 0 0 1.5rem; font-size: 1.05rem; }

.btn-main {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  padding: 0.65rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
}
.btn-main:hover { background: var(--red-dark); color: #fff; }
.after-btn { display: inline-block; margin-left: 1rem; font-size: 0.95rem; color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.section h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 1.5rem; }
.section .lede { color: var(--muted); max-width: 60ch; margin: -0.75rem 0 1.5rem; }

.why h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.35rem; }
.why p { color: var(--muted); margin: 0; }

.steps { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.steps li { display: flex; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps .n { font-weight: 800; color: var(--red-text); font-size: 1.25rem; min-width: 1.5rem; }
.steps h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.2rem; }
.steps p { color: var(--muted); margin: 0; }

.areas { columns: 2; column-gap: 2rem; list-style: none; margin: 0; padding: 0; max-width: 28rem; }
.areas li { padding: 0.25rem 0; }
@media (min-width: 768px) { .areas { columns: 3; max-width: 40rem; } }
.area-note { color: var(--muted); margin-top: 1.25rem; }

/* ---------- Contact / footer ---------- */
.site-footer { background: #000; border-top: 3px solid var(--red); padding: 3.5rem 0 2rem; }
.site-footer h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 0.5rem; }
.site-footer p { color: var(--muted); }
.footer-meta { margin: 0; }
.footer-meta dt { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1rem; }
.footer-meta dt:first-child { margin-top: 0; }
.footer-meta dd { margin: 0.15rem 0 0; }
.footer-meta a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Secondary nav (phones) ---------- */
.mobile-nav { background: #0a0a0a; border-bottom: 1px solid var(--line); }
.mobile-nav .container { display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.mobile-nav a { color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 0.15rem 0; }
.mobile-nav a:hover, .nav-links a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"], .mobile-nav a[aria-current="page"] { border-bottom: 2px solid var(--red); }

/* ---------- Inner page header ---------- */
.page-head { padding: 2.5rem 0 2rem; border-bottom: 3px solid var(--red); }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; margin: 0 0 0.75rem; }
.page-head p { color: var(--muted); max-width: 60ch; margin: 0; font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn-red, .btn-ghost { display: inline-block; font-weight: 700; padding: 0.55rem 1.2rem; border-radius: 4px; text-decoration: none; border: 2px solid var(--red); line-height: 1.3; cursor: pointer; font-family: inherit; font-size: 1rem; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: #555; }
.btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- Cards (documents + payments) ---------- */
.card-dark { background: #181818; border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
.card-dark h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.35rem; }
.card-dark p { color: var(--muted); margin: 0 0 1rem; }
.card-dark .card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.card-dark .meta { font-size: 0.85rem; color: var(--muted); }
.card-dark.soon { border-style: dashed; }
.badge-soon { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111; background: #e9c46a; padding: 0.1rem 0.5rem; border-radius: 3px; margin-bottom: 0.6rem; align-self: flex-start; }

.pay-card .handle { font-weight: 700; font-size: 1.05rem; color: #fff; word-break: break-all; }
.qr-box { background: #fff; border-radius: 6px; padding: 0.5rem; width: 168px; height: 168px; margin: 0 0 1rem; }
.qr-box img { display: block; width: 100%; height: 100%; object-fit: contain; }

.note-box { border: 1px solid var(--line); border-left: 4px solid var(--red); background: #181818; padding: 1rem 1.25rem; border-radius: 4px; color: var(--muted); max-width: 60rem; }
.note-box strong { color: #fff; }
.note-box p { margin: 0 0 0.5rem; color: var(--muted); }
.note-box p:last-child { margin-bottom: 0; }

/* ---------- Memes ---------- */
.meme-grid { columns: 1; column-gap: 1.25rem; }
@media (min-width: 576px) { .meme-grid { columns: 2; } }
@media (min-width: 992px) { .meme-grid { columns: 3; } }
.meme { break-inside: avoid; margin: 0 0 1.25rem; background: #181818; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.meme button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.meme img { display: block; width: 100%; height: auto; }
.meme figcaption { padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--muted); }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0,0,0,0.88); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto; border-radius: 6px; margin: 0 auto; }
dialog.lightbox .lb-close { display: block; margin: 0 auto 0.6rem; background: var(--red); color: #fff; border: 0; font-weight: 700; padding: 0.4rem 1.1rem; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 1rem; }

/* ---------- Hero picture rotator ---------- */
.carousel-hero .slides { position: relative; aspect-ratio: 1100 / 637; background: #000; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.carousel-hero .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0.7s; display: flex; align-items: center; justify-content: center; }
.carousel-hero .slide.is-active { opacity: 1; visibility: visible; }
.carousel-hero .slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.75rem; }
.cc-btn { background: transparent; color: #fff; border: 1px solid #555; border-radius: 4px; min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; }
.cc-btn:hover { border-color: #fff; }
.cc-dots { display: flex; gap: 0.5rem; align-items: center; }
.cc-dot { width: 0.8rem; height: 0.8rem; padding: 0; border-radius: 50%; border: 2px solid #777; background: transparent; cursor: pointer; }
.cc-dot.is-active { background: var(--red); border-color: var(--red); }
@media (prefers-reduced-motion: reduce) { .carousel-hero .slide { transition: none; } }

/* ---------- Agents (home) ---------- */
.agent { height: 100%; display: flex; flex-direction: column; background: #181818; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.agent-body { padding: 1.35rem 1.5rem 1.5rem; }
.agent-role { color: var(--red-text); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.2rem; }
.agent h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.75rem; }
.btn-agent { display: inline-block; border: 2px solid #555; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0.4rem 0.95rem; border-radius: 4px; text-decoration: none; }
.btn-agent:hover { border-color: #fff; color: #fff; }
.agent-featured { border-color: var(--red); border-width: 2px; }
.agent-featured h3 { font-size: 1.8rem; }

/* ---------- Experience callout (home) ---------- */
.experience { margin: 0 0 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 4px; background: #181818; }
.experience h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.4rem; }
.experience p { margin: 0; color: var(--muted); max-width: 70ch; }

/* Secure upload form (documents.html) */
.upload-lead { color: var(--muted); max-width: 60rem; margin: 0 0 1.25rem; }
.upload-form { background: #181818; border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem; max-width: 36rem; }
.upload-form .field { margin-bottom: 1rem; }
.upload-form label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.upload-form input[type="text"], .upload-form input[type="tel"], .upload-form input[type="file"] { width: 100%; background: #111; color: var(--text); border: 1px solid #555; border-radius: 4px; padding: 0.6rem 0.75rem; font: inherit; }
.upload-form input:focus-visible { outline: 3px solid var(--red-text); outline-offset: 2px; }
.upload-form .hint { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0; }
.upload-form .cf-turnstile { margin: 1rem 0; }
.upload-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.up-status { margin: 1rem 0 0; min-height: 1.5rem; color: var(--muted); }
.up-status.ok { color: #7fd48a; }
.up-status.error { color: var(--red-text); font-weight: 600; }