/* QtoTakeoff marketing site
   Plain CSS, no build step, no external fonts/frameworks — keeps this
   folder deployable as-is from any static host (or opened directly from
   disk). Palette matches the docs/pitch-deck brand (accent blue #2F6FED,
   navy #14213D) so all three deliverables read as one product. */

:root {
  --navy: #14213D;
  --navy-2: #1B2C52;
  --accent: #2F6FED;
  --accent-light: #8FB3FF;
  --accent-soft: #EAF0FE;
  --paper: #FFFFFF;
  --paper-soft: #F5F7FB;
  --ink: #14213D;
  --ink-soft: #5B6472;
  --ink-soft-dark: #C6D1EA;
  --line: #E4E7EC;
  --good: #16A34A;
  --good-soft: #E8F7EE;
  --bad: #DC2626;
  --bad-soft: #FDEDED;
  --warn-bg: #FFF6E5;
  --warn-border: #F0B93D;
  --warn-text: #7A5300;

  --container: 1160px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-card: 0 8px 24px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 33, 61, 0.22);
  --header-h: 68px;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is the important half of this pair — without it, the
   width/height attributes on the screenshot <img> tags (added for their
   HTML width/height sizing hints, so the browser can reserve correct space
   before the image loads) get honored as literal pixel dimensions instead
   of scaling proportionally, stretching every image that's narrower than
   its native 1600px. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Header / nav ────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 16px rgba(20, 33, 61, 0.06);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 16px; color: var(--ink); }
.brand img { border-radius: 6px; }
.site-header:not(.scrolled) .brand { color: #fff; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: color .2s ease; position: relative; }
.site-header:not(.scrolled) .nav a { color: rgba(255, 255, 255, 0.82); }
.nav a:hover, .nav a.active { color: var(--accent); }
.site-header:not(.scrolled) .nav a:hover, .site-header:not(.scrolled) .nav a.active { color: #fff; }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px; background: var(--accent);
}
.site-header:not(.scrolled) .nav a.active::after { background: #fff; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: transparent; border: none; cursor: pointer; border-radius: 8px;
}
.nav-toggle span { display: block; height: 2px; width: 20px; margin: 0 auto; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.site-header:not(.scrolled) .nav-toggle { color: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 700; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(47, 111, 237, 0.35); }
.btn-primary:hover { background: #2860d6; box-shadow: 0 12px 28px rgba(47, 111, 237, 0.45); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.disabled {
  background: var(--paper-soft); color: var(--ink-soft); border-color: var(--line);
  cursor: default; box-shadow: none; pointer-events: none;
}

/* ── Type helpers ────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.eyebrow-dark { color: var(--accent-light); }
h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; line-height: 1.2; max-width: 780px; margin-bottom: 20px; letter-spacing: -0.01em; }
.on-dark { color: #fff; }
.lead { font-size: 17px; color: var(--ink-soft); max-width: 640px; line-height: 1.6; }
.on-dark-soft { color: var(--ink-soft-dark); }

/* ── Sections ────────────────────────────────────────────────────────── */
/* scroll-margin-top keeps a jumped-to section's heading clear of the fixed
   header (html{scroll-behavior:smooth} handles the actual smooth motion —
   no JS scroll handling needed for this part). */
.section { padding: 96px 0; scroll-margin-top: var(--header-h); }
.section-dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 65%, #22345E 100%); color: #fff; }
.section-soft { background: var(--paper-soft); }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.grid { display: grid; gap: 20px; margin-top: 36px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 88px) 0 96px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #22345E 100%);
  color: #fff;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 58px); font-weight: 800; line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.015em; }
.hero .lead { color: var(--ink-soft-dark); font-size: 18px; max-width: 520px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; z-index: 1;
  animation: float 12s ease-in-out infinite;
}
.hero-blob-a { width: 480px; height: 480px; background: var(--accent); top: -160px; right: -120px; }
.hero-blob-b { width: 360px; height: 360px; background: #4f7fe8; bottom: -140px; left: 8%; animation-delay: -6s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.06); }
}

.shot-frame {
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg); background: #fff;
}
.hero-visual .shot-frame { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }

/* ── Problem mini-cards ──────────────────────────────────────────────── */
.mini-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 20px; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
.mini-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 33, 61, 0.12); }
.mini-card p { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }
.problem-grid { grid-template-columns: repeat(5, 1fr); }

.mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800;
}
.mark-bad { background: var(--bad-soft); color: var(--bad); }
.mark-good { background: var(--good-soft); color: var(--good); margin-right: 10px; }
.mark-good-dark { background: rgba(255, 255, 255, 0.14); color: #6FE0A8; margin-right: 10px; }

/* ── Feature / stat cards ────────────────────────────────────────────── */
.feature-card {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm);
  padding: 26px 22px; transition: transform .2s ease, background-color .2s ease;
}
.feature-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }
.feature-card h3 { font-size: 16px; color: #fff; margin: 16px 0 8px; }
.feature-card p { font-size: 13.5px; color: var(--ink-soft-dark); line-height: 1.5; }
.icon-badge {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(143, 179, 255, 0.2); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}

/* ── Example / numbered cards ────────────────────────────────────────── */
.num-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 26px 22px; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
.num-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 33, 61, 0.1); }
.num-badge {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 14px;
}
.num-card h3 { font-size: 16.5px; margin-bottom: 10px; }
.num-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ── Check lists ─────────────────────────────────────────────────────── */
.check-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.check-list li { display: flex; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.check-list-dark li { color: #fff; }
.check-list-wide { max-width: 720px; }

/* ── Tables (comparison / time) ──────────────────────────────────────── */
.table-wrap { margin-top: 36px; overflow-x: auto; }
.cmp-table, .time-table {
  width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-card); min-width: 640px;
}
.cmp-table th, .time-table th {
  text-align: left; padding: 14px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); border-bottom: 2px solid var(--ink); background: var(--paper-soft);
}
.cmp-table td, .time-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.cmp-table tr:last-child td, .time-table tr:last-child td { border-bottom: none; }
.cmp-table td.qto-col { background: var(--accent-soft); font-weight: 500; }
.cmp-table th.qto-col { color: var(--accent); }
.time-table td:not(:first-child), .time-table th:not(:first-child) { text-align: right; }

.tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); border-radius: 999px;
  padding: 6px 16px; margin: 6px 0 0;
}

/* ── Documentation chips ─────────────────────────────────────────────── */
.doc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.doc-chip {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
}

.time-callout {
  margin-top: 28px; background: var(--navy); border-radius: var(--radius); padding: 32px;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; text-align: center;
}
.time-stat { color: #fff; }
.time-stat .count-up { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.time-stat .unit { font-size: 18px; font-weight: 700; margin-left: 4px; color: var(--ink-soft-dark); }
.time-stat p { font-size: 13px; color: var(--ink-soft-dark); margin-top: 2px; }
.time-stat-accent .count-up { color: var(--accent-light); }
.time-arrow { font-size: 28px; color: var(--accent-light); }
.time-callout-note { flex-basis: 100%; color: var(--ink-soft-dark); font-size: 14px; margin-top: 6px; }

.disclaimer { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

/* ── BOQ table ───────────────────────────────────────────────────────── */
.boq-wrap { margin-top: 24px; }
.boq-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); min-width: 480px; }
.boq-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.boq-table th:not(:first-child) { text-align: right; }
.boq-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.boq-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.boq-table tr.grand td { font-weight: 800; background: var(--accent-soft); border-top: 2px solid var(--navy); border-bottom: none; }
.boq-cap { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 10px; }

/* ── Contract cards ──────────────────────────────────────────────────── */
.contract-grid { grid-template-columns: 1fr 1fr; }
.contract-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card); }
.contract-card h3 { font-size: 20px; margin-bottom: 8px; }
.contract-lede { color: var(--accent); font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }

/* ── Shot frame captions ─────────────────────────────────────────────── */
.shot-cap { font-size: 13px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.shot-cap-dark { color: var(--ink-soft-dark); }

.closing-line { margin: 40px auto 0; text-align: center; max-width: 620px; }
#why .stat-grid { margin-top: 36px; }

/* ── Screenshot gallery (reserved placeholders) ─────────────────────── */
.shot-gallery { grid-template-columns: repeat(3, 1fr); }
.shot-slot {
  aspect-ratio: 16 / 10; border: 2px dashed #C7CEDA; border-radius: var(--radius-sm); background: #EEF1F6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; transition: border-color .2s ease, background-color .2s ease;
}
.shot-slot:hover { border-color: var(--accent); background: var(--accent-soft); }
.shot-slot-icon { font-size: 26px; opacity: 0.55; }

/* ── Export-sample file cards (reserved placeholders) ───────────────── */
.file-gallery { grid-template-columns: repeat(3, 1fr); }
.file-slot {
  border: 2px dashed #C7CEDA; border-radius: var(--radius-sm); background: #EEF1F6;
  padding: 26px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  transition: border-color .2s ease, background-color .2s ease;
}
.file-slot:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-slot-icon { font-size: 24px; margin-bottom: 6px; }
.file-slot h3 { font-size: 15.5px; }
.file-slot p { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }

/* ── Get Started / reserved placeholder ─────────────────────────────── */
.get-started { background: var(--paper-soft); text-align: center; }
.get-started .eyebrow, .get-started h2, .get-started .lead { margin-left: auto; margin-right: auto; }
.get-started .lead { text-align: center; }
.form-placeholder { margin: 40px auto 0; max-width: 560px; }
.form-placeholder.is-placeholder {
  border: 2px dashed #C7CEDA; border-radius: var(--radius); background: #EEF1F6;
  padding: 40px 28px;
}
.placeholder-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; letter-spacing: 0.02em; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: var(--ink-soft-dark); padding: 44px 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.footer-inner .brand { color: #fff; }
.footer-inner p { font-size: 13.5px; max-width: 460px; }
.footer-inner .copyright { font-size: 12px; opacity: 0.7; margin-top: 6px; }

/* ── Scroll-reveal ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .hero-blob { animation: none; }
  .btn, .mini-card, .feature-card, .num-card { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual .shot-frame { transform: none; }
  .split-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Only sections whose second column is a screenshot (correctness/proof/
     exports) benefit from showing that visual first on mobile. #boq's split
     is table+bullets (no image) and must keep its natural order — reordering
     it here would float the bullets above the section's own heading. */
  .split-grid-media > div:nth-child(2) { order: -1; }
}

@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; max-height: 0; overflow: hidden; box-shadow: 0 12px 24px rgba(20,33,61,0.1);
    transition: max-height .3s ease; }
  .nav.open { max-height: 420px; }
  .nav a { padding: 16px 24px; border-bottom: 1px solid var(--line); color: var(--ink); }
  /* The mobile dropdown is always an opaque white panel (never transparent
     over the hero), so its links must stay dark-on-white even while
     .site-header is in its "over the hero" (:not(.scrolled)) state — that
     selector is otherwise MORE specific than the plain ".nav a" rule above
     and would win, making these links white-on-white and invisible. Same
     selector, redeclared here, is the simplest way to out-rank it. */
  .site-header:not(.scrolled) .nav a { color: var(--ink); }
  .site-header:not(.scrolled) .nav a:hover, .site-header:not(.scrolled) .nav a.active { color: var(--accent); }
  .nav a.active::after { display: none; }
  .header-actions .btn-sm { display: none; }
  .nav-toggle { display: flex; }
  .site-header:not(.scrolled) .nav-toggle { color: #fff; }
  .nav.open ~ .header-actions .nav-toggle,
  .site-header.scrolled .nav-toggle { color: var(--ink); }

  .grid-5, .grid-4, .grid-3, .grid-2, .contract-grid { grid-template-columns: 1fr; }

  .cmp-table thead, .time-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td,
  .time-table, .time-table tbody, .time-table tr, .time-table td { display: block; width: 100%; min-width: 0; }
  .cmp-table tr, .time-table tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .cmp-table td, .time-table td { padding: 6px 0; border-bottom: none; }
  .cmp-table td.qto-col { padding: 10px 12px; border-radius: 8px; margin-top: 6px; }
  .cmp-table td::before, .time-table td::before {
    content: attr(data-label); display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 3px;
  }

  .boq-table thead { display: none; }
  .boq-table, .boq-table tbody, .boq-table tr, .boq-table td { display: block; width: 100%; min-width: 0; }
  .boq-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .boq-table td { padding: 4px 0; border-bottom: none; text-align: left !important; }
  .boq-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink-soft); }
  .boq-table tr.grand { background: var(--accent-soft); }

  .time-callout { padding: 26px 20px; gap: 18px; }
  .time-stat .count-up { font-size: 34px; }
}