Video — Landing Realestate

:root {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --amber: #ffb020;
  --amber-d: #e6971a;
  --red: #ff4d4d;
  --ink: #f4f4f6;
  --muted: #8a8a92;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --white: #fff;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.amber { color: var(--amber); }

a { color: inherit; text-decoration: none; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--amber);
  color: #000;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  z-index: 200;
  font-weight: 700;
}
.skip:focus { left: 12px; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--amber);
  color: #0a0a0b;
  box-shadow: 0 6px 22px rgba(255, 176, 32, 0.22);
}
.btn-primary:hover { background: var(--amber-d); box-shadow: 0 8px 30px rgba(255, 176, 32, 0.32); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-block { width: 100%; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255, 77, 77, .6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
.brand-accent { color: var(--amber); }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--ink); }
.nav-cta { padding: 9px 16px; }

/* ---------- Hero / letterbox ---------- */
.hero { background: #000; padding: 0 clamp(16px, 4vw, 48px); }
.bar { height: 42px; background: #000; }
.hero-stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 176, 32, .16), transparent 55%),
    linear-gradient(160deg, #1a1c22 0%, #0d0e12 55%, #070708 100%);
  border: 1px solid var(--line);
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
  pointer-events: none;
}
.hero-hud {
  position: absolute; top: 18px; left: 20px; right: 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.hud-tag { color: var(--red); font-weight: 700; }
.hud-tag.right { margin-left: auto; color: var(--muted); }
.hud-tc { color: var(--amber); font-weight: 500; }

.play-lockup {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(20, 20, 22, .55);
  backdrop-filter: blur(4px);
  color: var(--amber);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.play-lockup svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.play-lockup:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 176, 32, .16); box-shadow: 0 0 40px rgba(255, 176, 32, .3); }

.hero-copy {
  position: relative;
  padding: clamp(24px, 4vw, 46px);
  max-width: 640px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}
.hero-copy h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  font-weight: 800;
}
.lede { color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); margin: 0 0 26px; max-width: 52ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-stats { list-style: none; display: flex; gap: 34px; padding: 0; margin: 0; flex-wrap: wrap; }
.hero-stats strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.hero-stats span { color: var(--muted); font-size: 13px; }

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px); max-width: 1180px; margin: 0 auto; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.band > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section-head { max-width: 620px; margin-bottom: 38px; }
.section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: -.025em; margin: 0 0 10px; font-weight: 800; }
.section-sub { color: var(--muted); margin: 0; }

/* ---------- Packages ---------- */
.pkg-rail {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.pkg-tab {
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pkg-tab:hover { color: var(--ink); }
.pkg-tab.is-active { background: var(--amber); color: #0a0a0b; }

.pkg-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.pkg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pkg-thumb {
  position: relative;
  min-height: 100%;
  background: linear-gradient(150deg, #23262e, #0e0f13);
  transition: background .4s ease;
}
.pkg-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 30% 20%, rgba(255, 176, 32, .22), transparent 60%);
}
.pkg-badge {
  position: absolute; top: 14px; left: 14px;
  z-index: 1;
  background: var(--amber);
  color: #000;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 999px;
}
.pkg-tc {
  position: absolute; bottom: 14px; left: 14px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  background: rgba(0, 0, 0, .5);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  letter-spacing: .05em;
}
.pkg-body { padding: 26px; }
.pkg-body h3 { margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -.02em; }
.pkg-desc { color: var(--muted); margin: 0 0 18px; }
.pkg-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.price-amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.price-unit { color: var(--muted); font-size: 13px; }
.pkg-feats { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
.pkg-feats li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: #d7d7dd;
}
.pkg-feats li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: rgba(255, 176, 32, .15);
  border: 1px solid var(--amber);
}
.pkg-feats li::after {
  content: "";
  position: absolute; left: 4px; top: 8px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg);
}
.pkg-meta { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.chip-amber { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .4); color: var(--amber); }

.fade { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pkg-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}
.pkg-side h3 { margin: 0 0 16px; font-size: 1.05rem; }
.incl { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.incl li { position: relative; padding-left: 24px; font-size: 14px; color: #d7d7dd; }
.incl li::before { content: "▹"; position: absolute; left: 0; color: var(--amber); }
.promise {
  border-top: 1px dashed var(--line-2);
  padding-top: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.promise-tc {
  font-family: var(--mono);
  font-size: 11px;
  color: #000;
  background: var(--amber);
  padding: 4px 7px;
  border-radius: var(--r-sm);
  font-weight: 700;
}
.promise p { margin: 0; font-size: 13px; color: var(--muted); }
.promise strong { color: var(--ink); }

/* ---------- Estimator ---------- */
.est-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; }
.est-form { display: grid; gap: 26px; }
.field label, .field-label { display: block; font-weight: 600; margin-bottom: 12px; font-size: 14px; }
.field label span.mono { color: var(--amber); font-weight: 500; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid #0a0a0b;
  box-shadow: 0 0 0 1px var(--amber), 0 4px 12px rgba(255, 176, 32, .4);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid #0a0a0b;
}

.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span {
  display: block;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.seg-opt input:checked + span { background: var(--amber); color: #0a0a0b; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.addons { display: grid; gap: 10px; }
.addon {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 14px;
  transition: border-color .2s;
}
.addon:hover { border-color: var(--line-2); }
.addon input { width: 18px; height: 18px; accent-color: var(--amber); }
.addon em { color: var(--amber); font-style: normal; font-weight: 600; margin-left: auto; }
.addon span { display: flex; width: 100%; gap: 8px; }

.est-out {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 26px;
  align-self: start;
}
.est-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.est-row span { color: var(--muted); font-size: 14px; }
.est-row strong { font-size: 15px; }
.est-row.big { border-bottom: none; padding-top: 16px; }
.est-row.big span { color: var(--ink); font-weight: 600; }
.est-row.big strong { font-size: 1.7rem; color: var(--amber); }
.est-note { color: var(--muted); font-size: 13px; margin: 4px 0 18px; }

/* ---------- Compare slider ---------- */
.compare {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 420px;
  border: 1px solid var(--line);
  user-select: none;
}
.cmp-img { position: absolute; inset: 0; }
.cmp-after { background: linear-gradient(150deg, #2a1c0a 0%, #3a2a12 40%, #0c0a06 100%); }
.cmp-after::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 70% 30%, rgba(255, 176, 32, .3), transparent 60%);
}
.cmp-before { background: linear-gradient(150deg, #23262b 0%, #34373d 45%, #17181c 100%); clip-path: inset(0 50% 0 0); }
.cmp-before::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(120, 130, 150, .12);
}
.cmp-label {
  position: absolute; bottom: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink);
  background: rgba(0, 0, 0, .55);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  z-index: 3;
}
.cmp-after .cmp-label { right: 16px; color: var(--amber); }
.cmp-before .cmp-label { left: 16px; }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--amber);
  transform: translateX(-50%);
  z-index: 4;
}
.cmp-grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid #0a0a0b;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.cmp-grip::before, .cmp-grip::after {
  content: "";
  position: absolute; top: 50%;
  width: 0; height: 0;
  border: 6px solid transparent;
}
.cmp-grip::before { left: 8px; border-right-color: #0a0a0b; transform: translateY(-50%); }
.cmp-grip::after { right: 8px; border-left-color: #0a0a0b; transform: translateY(-50%); }
.cmp-handle input[type="range"] {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1100px;
  height: 100%;
  margin: 0;
  background: transparent;
  border: none;
  opacity: 0;
  cursor: ew-resize;
}

/* ---------- Reviews ---------- */
.quote-stage { max-width: 760px; }
.quote { margin: 0; }
.quote p {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  font-weight: 500;
}
.quote p::before { content: "“"; color: var(--amber); font-size: 1.4em; margin-right: 4px; }
.quote footer strong { display: block; font-size: 15px; }
.quote footer span { color: var(--muted); font-size: 13px; }
.quote-dots { display: flex; gap: 8px; margin-top: 24px; }
.quote-dots button {
  width: 30px; height: 4px;
  border-radius: 999px;
  border: none;
  background: var(--line-2);
  cursor: pointer;
  transition: background .2s;
}
.quote-dots button.is-active { background: var(--amber); }

/* ---------- Order bar ---------- */
.orderbar {
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(20, 20, 22, .9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
}
.orderbar-info { display: flex; flex-direction: column; }
.ob-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.orderbar-info strong { font-size: 15px; }
.orderbar .btn { margin-left: auto; }

/* ---------- Sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.sheet-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.sheet {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 30px;
  animation: sheetIn .3s ease;
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sheet h2 { margin: 0 0 20px; font-size: 1.5rem; letter-spacing: -.02em; }
.sheet-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.sheet-close:hover { border-color: var(--amber); color: var(--amber); }
.summary { margin: 0 0 22px; display: grid; gap: 0; }
.summary > div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--muted); font-size: 14px; margin: 0; }
.summary dd { margin: 0; font-weight: 600; }
.summary-total { border-bottom: none !important; padding-top: 16px !important; }
.summary-total dt { color: var(--ink); font-weight: 600; }
.summary-total dd { font-size: 1.5rem; color: var(--amber); }
.sheet-fine { color: var(--muted); font-size: 12px; margin: 16px 0 0; text-align: center; }

/* ---------- Footer ---------- */
.foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 26px clamp(16px, 4vw, 48px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
}
.foot .mono { font-size: 12px; letter-spacing: .05em; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--amber);
  color: #0a0a0b;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 400;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .pkg-grid, .est-grid { grid-template-columns: 1fr; }
  .pkg-card { grid-template-columns: 1fr; }
  .pkg-thumb { min-height: 180px; }
}

@media (max-width: 520px) {
  .nav { display: none; }
  .nav-cta { display: none; }
  .bar { height: 24px; }
  .hero-stage { min-height: 460px; }
  .hero-stats { gap: 22px; }
  .hero-stats strong { font-size: 1.3rem; }
  .section { padding: 44px 16px; }
  .compare { height: 300px; }
  .orderbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .orderbar .btn { margin-left: 0; }
  .foot { flex-direction: column; }
  .quote p { font-size: 1.15rem; }
}

(function () {
  "use strict";

  /* ---------- Toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 2600);
  }

  /* ---------- Hero timecode ---------- */
  var heroTc = document.getElementById("heroTc");
  var frame = 0;
  function pad(n) { return String(n).padStart(2, "0"); }
  setInterval(function () {
    frame = (frame + 1) % (24 * 60 * 60 * 24);
    var f = frame % 24;
    var totalSec = Math.floor(frame / 24);
    var s = totalSec % 60;
    var m = Math.floor(totalSec / 60) % 60;
    var h = Math.floor(totalSec / 3600) % 24;
    heroTc.textContent = pad(h) + ":" + pad(m) + ":" + pad(s) + ":" + pad(f);
  }, 42);

  document.getElementById("playLockup").addEventListener("click", function () {
    toast("▶ Showreel preview — 90 seconds of pure listing gold");
  });

  /* ---------- Package data ---------- */
  var PACKAGES = {
    tour: {
      name: "Signature Tour",
      desc: "A polished 2-minute walkthrough that stages every room like a film set.",
      price: 690,
      runtime: "RUNTIME 02:00",
      badge: "Most booked",
      turn: "48h turnaround",
      deliver: "6 deliverables",
      thumb: "linear-gradient(150deg, #23262e, #0e0f13)",
      feats: [
        "Gimbal-stabilized room-to-room flow",
        "Agent voiceover or on-camera intro",
        "Licensed cinematic soundtrack",
        "16:9 master + MLS compression"
      ]
    },
    drone: {
      name: "Drone Aerials",
      desc: "FAA-licensed aerial reveals showing lot lines, roofline, and the neighborhood story.",
      price: 940,
      runtime: "RUNTIME 01:30",
      badge: "Premium",
      turn: "72h turnaround",
      deliver: "8 deliverables",
      thumb: "linear-gradient(150deg, #1b2733, #0a0f14)",
      feats: [
        "4K aerial orbit + rising reveal shots",
        "Property boundary & acreage graphics",
        "Combined ground + air edit",
        "Twilight aerial option available"
      ]
    },
    social: {
      name: "Social Cutdowns",
      desc: "Fast, punchy vertical edits engineered for Reels, TikTok, and paid listing ads.",
      price: 380,
      runtime: "RUNTIME 00:30",
      badge: "Best value",
      turn: "24h turnaround",
      deliver: "5 deliverables",
      thumb: "linear-gradient(150deg, #2b2038, #100b16)",
      feats: [
        "Three 9:16 vertical cuts",
        "Captioned hooks & price reveal",
        "Trending-audio ready exports",
        "Story + feed aspect variants"
      ]
    }
  };

  var current = "tour";

  var el = {
    thumb: document.getElementById("pkgThumb"),
    badge: document.getElementById("pkgBadge"),
    runtime: document.getElementById("pkgRuntime"),
    name: document.getElementById("pkgName"),
    desc: document.getElementById("pkgDesc"),
    price: document.getElementById("pkgPrice"),
    feats: document.getElementById("pkgFeats"),
    turn: document.getElementById("pkgTurn"),
    deliver: document.getElementById("pkgDeliver"),
    panel: document.getElementById("pkgPanel"),
    obPkg: document.getElementById("obPkg")
  };

  function money(n) { return "$" + n.toLocaleString("en-US"); }

  function renderPackage(key) {
    var p = PACKAGES[key];
    current = key;
    el.thumb.style.background = p.thumb;
    el.badge.textContent = p.badge;
    el.runtime.textContent = p.runtime;
    el.name.textContent = p.name;
    el.desc.textContent = p.desc;
    el.price.textContent = money(p.price);
    el.turn.textContent = p.turn;
    el.deliver.textContent = p.deliver;
    el.feats.innerHTML = "";
    p.feats.forEach(function (f) {
      var li = document.createElement("li");
      li.textContent = f;
      el.feats.appendChild(li);
    });
    el.panel.setAttribute("aria-labelledby", "tab-" + key);
    el.panel.classList.remove("fade");
    void el.panel.offsetWidth;
    el.panel.classList.add("fade");
    el.obPkg.textContent = p.name + " · " + money(p.price);
    computeEstimate();
  }

  var tabs = document.querySelectorAll(".pkg-tab");
  tabs.forEach(function (tab) {
    tab.addEventListener("click", function () {
      tabs.forEach(function (t) {
        t.classList.remove("is-active");
        t.setAttribute("aria-selected", "false");
      });
      tab.classList.add("is-active");
      tab.setAttribute("aria-selected", "true");
      renderPackage(tab.dataset.pkg);
    });
  });

  document.getElementById("selectPkg").addEventListener("click", function () {
    toast(PACKAGES[current].name + " selected — scroll down to order");
    document.getElementById("order").scrollIntoView({ behavior: "smooth" });
  });

  /* ---------- Estimator ---------- */
  var sqft = document.getElementById("sqft");
  var sqftOut = document.getElementById("sqftOut");
  var estDate = document.getElementById("estDate");
  var estShoot = document.getElementById("estShoot");
  var estTotal = document.getElementById("estTotal");
  var estNote = document.getElementById("estNote");
  var addDrone = document.getElementById("addDrone");
  var addTwilight = document.getElementById("addTwilight");
  var addFloor = document.getElementById("addFloor");

  var RUSH = {
    standard: { days: 2, mult: 1, label: "Standard grade, delivered in 48 hours." },
    priority: { days: 1, mult: 1.25, label: "Priority edit — bumped to the front of the queue." },
    overnight: { days: 0, mult: 1.6, label: "Overnight rush — delivered by 9am next business day." }
  };

  function getRush() {
    var checked = document.querySelector('input[name="rush"]:checked');
    return checked ? checked.value : "standard";
  }

  var DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  var MON = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  function addBusinessDays(start, days) {
    var d = new Date(start);
    var added = 0;
    if (days === 0) { // overnight = next calendar day
      d.setDate(d.getDate() + 1);
      return d;
    }
    while (added < days) {
      d.setDate(d.getDate() + 1);
      if (d.getDay() !== 0 && d.getDay() !== 6) added++;
    }
    return d;
  }

  function fmtDate(d) {
    return DAY_NAMES[d.getDay()] + " " + MON[d.getMonth()] + " " + d.getDate();
  }

  var lastEstimate = { total: 690, turn: "48h", date: "—" };

  function computeEstimate() {
    var size = parseInt(sqft.value, 10);
    sqftOut.textContent = size.toLocaleString("en-US") + " sq ft";

    var base = PACKAGES[current].price;
    var sizeUp = size > 4000 ? Math.round((size - 4000) / 1000) * 90 : 0;
    var addons = 0;
    if (addDrone.checked) addons += 240;
    if (addTwilight.checked) addons += 180;
    if (addFloor.checked) addons += 120;

    var rush = RUSH[getRush()];
    var subtotal = base + sizeUp + addons;
    var total = Math.round(subtotal * rush.mult);

    // shoot date: 2 business days out; delivery: shoot + rush days
    var shootDay = addBusinessDays(new Date(), 2);
    var extraForSize = size > 5000 ? 1 : 0;
    var deliveryDay = addBusinessDays(shootDay, rush.days + extraForSize);

    var turnLabel = rush.days === 0 ? "24h" : (rush.days + extraForSize) * 24 + "h";

    estTotal.textContent = money(total);
    estShoot.textContent = fmtDate(shootDay);
    estDate.textContent = fmtDate(deliveryDay);
    estNote.textContent = rush.label + (sizeUp ? " Large property surcharge applied." : "");

    lastEstimate = { total: money(total), turn: turnLabel, date: fmtDate(deliveryDay) };
  }

  sqft.addEventListener("input", computeEstimate);
  [addDrone, addTwilight, addFloor].forEach(function (c) {
    c.addEventListener("change", computeEstimate);
  });
  document.querySelectorAll('input[name="rush"]').forEach(function (r) {
    r.addEventListener("change", computeEstimate);
  });

  /* ---------- Compare slider ---------- */
  var cmpRange = document.getElementById("cmpRange");
  var cmpBefore = document.getElementById("cmpBefore");
  var cmpHandle = document.getElementById("cmpHandle");
  function updateCompare() {
    var v = cmpRange.value;
    cmpBefore.style.clipPath = "inset(0 " + (100 - v) + "% 0 0)";
    cmpHandle.style.left = v + "%";
  }
  cmpRange.addEventListener("input", updateCompare);
  updateCompare();

  /* ---------- Testimonials ---------- */
  var QUOTES = [
    {
      text: "The twilight tour had three showings booked before it even hit the MLS. Fastest offer I've written this year.",
      name: "Marisol Vega",
      role: "Broker · Vega & Co. Realty"
    },
    {
      text: "Aperture turned my $1.2M listing into a scroll-stopping reel. Full-price offer in nine days flat.",
      name: "Devon Okafor",
      role: "Luxury Specialist · Harbor Line"
    },
    {
      text: "The drone reveal sold the lot as much as the house. Buyers finally understood the acreage.",
      name: "Priya Raman",
      role: "Land & Estates · Cedar Grove"
    }
  ];
  var qText = document.getElementById("quoteText");
  var qName = document.getElementById("quoteName");
  var qRole = document.getElementById("quoteRole");
  var dotsWrap = document.getElementById("quoteDots");
  var qi = 0;
  var qTimer;

  QUOTES.forEach(function (_, i) {
    var b = document.createElement("button");
    b.setAttribute("role", "tab");
    b.setAttribute("aria-label", "Testimonial " + (i + 1));
    b.addEventListener("click", function () { showQuote(i, true); });
    dotsWrap.appendChild(b);
  });
  var dots = dotsWrap.querySelectorAll("button");

  function showQuote(i, manual) {
    qi = i;
    var q = QUOTES[i];
    qText.textContent = q.text;
    qName.textContent = q.name;
    qRole.textContent = q.role;
    dots.forEach(function (d, di) { d.classList.toggle("is-active", di === i); });
    var stage = qText.closest(".quote");
    stage.classList.remove("fade");
    void stage.offsetWidth;
    stage.classList.add("fade");
    if (manual) restartQuoteTimer();
  }
  function nextQuote() { showQuote((qi + 1) % QUOTES.length, false); }
  function restartQuoteTimer() {
    clearInterval(qTimer);
    qTimer = setInterval(nextQuote, 5500);
  }
  showQuote(0, false);
  restartQuoteTimer();

  /* ---------- Order sheet ---------- */
  var sheetWrap = document.getElementById("sheetWrap");
  var lastFocus = null;

  function openSheet() {
    document.getElementById("sumPkg").textContent = PACKAGES[current].name;
    document.getElementById("sumTurn").textContent = lastEstimate.turn;
    document.getElementById("sumDate").textContent = lastEstimate.date;
    document.getElementById("sumTotal").textContent = lastEstimate.total;
    lastFocus = document.activeElement;
    sheetWrap.hidden = false;
    document.getElementById("sheetClose").focus();
    document.body.style.overflow = "hidden";
  }
  function closeSheet() {
    sheetWrap.hidden = true;
    document.body.style.overflow = "";
    if (lastFocus) lastFocus.focus();
  }

  document.getElementById("orderBtn").addEventListener("click", openSheet);
  document.getElementById("sheetClose").addEventListener("click", closeSheet);
  document.getElementById("sheetOverlay").addEventListener("click", closeSheet);
  document.getElementById("confirmBtn").addEventListener("click", function () {
    closeSheet();
    toast("Slot held ✓ We'll email your shoot confirmation shortly");
  });
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !sheetWrap.hidden) closeSheet();
  });

  /* ---------- Init ---------- */
  renderPackage("tour");
  computeEstimate();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aperture Reels — Real-Estate Video Tours</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#packages">Skip to packages</a>

  <header class="topbar">
    <a class="brand" href="#top" aria-label="Aperture Reels home">
      <span class="brand-mark" aria-hidden="true">
        <span class="rec-dot"></span>
      </span>
      <span class="brand-name">Aperture<span class="brand-accent">Reels</span></span>
    </a>
    <nav class="nav" aria-label="Primary">
      <a href="#packages">Packages</a>
      <a href="#estimate">Turnaround</a>
      <a href="#grade">The Look</a>
      <a href="#reviews">Agents</a>
    </nav>
    <a class="btn btn-ghost nav-cta" href="#order">Book a shoot</a>
  </header>

  <main id="top">
    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="bar bar-top" aria-hidden="true"></div>
      <div class="hero-stage" role="img" aria-label="Cinematic aerial still of a modern listing at dusk">
        <div class="hero-grain" aria-hidden="true"></div>
        <div class="hero-hud">
          <span class="hud-tag">● REC</span>
          <span class="hud-tc" id="heroTc">00:00:00:00</span>
          <span class="hud-tag right">4K · 24FPS</span>
        </div>
        <button class="play-lockup" id="playLockup" aria-label="Preview showreel">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <div class="hero-copy">
          <p class="eyebrow">Real-estate video · Property tours</p>
          <h1 id="hero-title">Listings that move at <span class="amber">24 frames</span> a second.</h1>
          <p class="lede">Cinematic walkthroughs, drone aerials, and scroll-stopping social cuts for agents who want the offer before the open house.</p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#packages">See packages</a>
            <a class="btn btn-ghost" href="#estimate">Estimate turnaround</a>
          </div>
          <ul class="hero-stats">
            <li><strong>420+</strong><span>listings filmed</span></li>
            <li><strong>48h</strong><span>standard delivery</span></li>
            <li><strong>31%</strong><span>faster to offer</span></li>
          </ul>
        </div>
      </div>
      <div class="bar bar-bottom" aria-hidden="true"></div>
    </section>

    <!-- PACKAGES -->
    <section class="section" id="packages" aria-labelledby="pk-title">
      <div class="section-head">
        <p class="eyebrow">Production packages</p>
        <h2 id="pk-title">Pick the cut your listing needs</h2>
        <p class="section-sub">Every package is graded, licensed music included, and delivered in horizontal + vertical.</p>
      </div>

      <div class="pkg-rail" role="tablist" aria-label="Video packages">
        <button class="pkg-tab is-active" role="tab" aria-selected="true" data-pkg="tour" id="tab-tour">Signature Tour</button>
        <button class="pkg-tab" role="tab" aria-selected="false" data-pkg="drone" id="tab-drone">Drone Aerials</button>
        <button class="pkg-tab" role="tab" aria-selected="false" data-pkg="social" id="tab-social">Social Cutdowns</button>
      </div>

      <div class="pkg-grid">
        <article class="pkg-card" id="pkgPanel" role="tabpanel" aria-labelledby="tab-tour">
          <div class="pkg-thumb" id="pkgThumb" aria-hidden="true">
            <span class="pkg-badge" id="pkgBadge">Most booked</span>
            <span class="pkg-tc" id="pkgRuntime">RUNTIME 02:00</span>
          </div>
          <div class="pkg-body">
            <h3 id="pkgName">Signature Tour</h3>
            <p class="pkg-desc" id="pkgDesc">A polished 2-minute walkthrough that stages every room like a film set.</p>
            <div class="pkg-price">
              <span class="price-amt" id="pkgPrice">$690</span>
              <span class="price-unit">per listing</span>
            </div>
            <ul class="pkg-feats" id="pkgFeats"></ul>
            <div class="pkg-meta">
              <span class="chip chip-amber" id="pkgTurn">48h turnaround</span>
              <span class="chip" id="pkgDeliver">6 deliverables</span>
            </div>
            <button class="btn btn-primary btn-block" id="selectPkg">Select this package</button>
          </div>
        </article>

        <aside class="pkg-side" aria-label="What is included">
          <h3>Every booking includes</h3>
          <ul class="incl">
            <li>Licensed cinematic soundtrack</li>
            <li>Pro color grade &amp; stabilization</li>
            <li>Horizontal 16:9 + vertical 9:16 masters</li>
            <li>MLS-ready compression</li>
            <li>One free revision round</li>
          </ul>
          <div class="promise">
            <span class="promise-tc">SLA</span>
            <p><strong>48-hour standard turnaround.</strong> Need it tomorrow? Toggle rush in the estimator.</p>
          </div>
        </aside>
      </div>
    </section>

    <!-- ESTIMATOR -->
    <section class="section band" id="estimate" aria-labelledby="est-title">
      <div class="section-head">
        <p class="eyebrow">Turnaround estimator</p>
        <h2 id="est-title">Know your delivery date before you book</h2>
      </div>
      <div class="est-grid">
        <form class="est-form" id="estForm">
          <div class="field">
            <label for="sqft">Property size — <span id="sqftOut" class="mono">2,400 sq ft</span></label>
            <input type="range" id="sqft" min="800" max="8000" step="100" value="2400" />
          </div>
          <div class="field">
            <span class="field-label">Rush level</span>
            <div class="seg" role="radiogroup" aria-label="Rush level">
              <label class="seg-opt"><input type="radio" name="rush" value="standard" checked /><span>Standard</span></label>
              <label class="seg-opt"><input type="radio" name="rush" value="priority" /><span>Priority</span></label>
              <label class="seg-opt"><input type="radio" name="rush" value="overnight" /><span>Overnight</span></label>
            </div>
          </div>
          <div class="field">
            <span class="field-label">Add-ons</span>
            <div class="addons">
              <label class="addon"><input type="checkbox" id="addDrone" /><span>Drone aerials <em>+$240</em></span></label>
              <label class="addon"><input type="checkbox" id="addTwilight" /><span>Twilight shots <em>+$180</em></span></label>
              <label class="addon"><input type="checkbox" id="addFloor" /><span>Floor-plan overlay <em>+$120</em></span></label>
            </div>
          </div>
        </form>
        <div class="est-out" aria-live="polite">
          <div class="est-row">
            <span>Estimated delivery</span>
            <strong class="mono" id="estDate">—</strong>
          </div>
          <div class="est-row">
            <span>Shoot window</span>
            <strong class="mono" id="estShoot">—</strong>
          </div>
          <div class="est-row big">
            <span>Estimated total</span>
            <strong class="mono" id="estTotal">$690</strong>
          </div>
          <p class="est-note" id="estNote">Standard grade, delivered in 48 hours.</p>
          <a class="btn btn-primary btn-block" href="#order">Lock this in</a>
        </div>
      </div>
    </section>

    <!-- GRADE SLIDER -->
    <section class="section" id="grade" aria-labelledby="grade-title">
      <div class="section-head">
        <p class="eyebrow">The look</p>
        <h2 id="grade-title">Ungraded footage never sold a home</h2>
        <p class="section-sub">Drag to compare a flat camera file with our cinematic grade.</p>
      </div>
      <div class="compare" id="compare">
        <div class="cmp-img cmp-after" aria-hidden="true"><span class="cmp-label">GRADED</span></div>
        <div class="cmp-img cmp-before" id="cmpBefore" aria-hidden="true"><span class="cmp-label">RAW</span></div>
        <div class="cmp-handle" id="cmpHandle">
          <input type="range" id="cmpRange" min="0" max="100" value="50" aria-label="Compare graded and raw footage" />
          <span class="cmp-grip" aria-hidden="true"></span>
        </div>
      </div>
    </section>

    <!-- REVIEWS -->
    <section class="section band" id="reviews" aria-labelledby="rev-title">
      <div class="section-head">
        <p class="eyebrow">From the agents</p>
        <h2 id="rev-title">They book the reel, then book the sale</h2>
      </div>
      <div class="quote-stage">
        <blockquote class="quote" id="quote">
          <p id="quoteText">The twilight tour had three showings booked before it even hit the MLS. Fastest offer I've written this year.</p>
          <footer><strong id="quoteName">Marisol Vega</strong><span id="quoteRole">Broker · Vega &amp; Co. Realty</span></footer>
        </blockquote>
        <div class="quote-dots" id="quoteDots" role="tablist" aria-label="Testimonials"></div>
      </div>
    </section>
  </main>

  <!-- STICKY ORDER BAR -->
  <div class="orderbar" id="order">
    <div class="orderbar-info">
      <span class="ob-label">Selected</span>
      <strong id="obPkg">Signature Tour · $690</strong>
    </div>
    <button class="btn btn-primary" id="orderBtn">Order this shoot</button>
  </div>

  <!-- BOOKING SHEET -->
  <div class="sheet-wrap" id="sheetWrap" hidden>
    <div class="sheet-overlay" id="sheetOverlay"></div>
    <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="sheet-title">
      <button class="sheet-close" id="sheetClose" aria-label="Close">&times;</button>
      <p class="eyebrow">Booking summary</p>
      <h2 id="sheet-title">Confirm your shoot</h2>
      <dl class="summary">
        <div><dt>Package</dt><dd id="sumPkg">Signature Tour</dd></div>
        <div><dt>Turnaround</dt><dd id="sumTurn" class="mono">48h</dd></div>
        <div><dt>Estimated delivery</dt><dd id="sumDate" class="mono">—</dd></div>
        <div class="summary-total"><dt>Total</dt><dd id="sumTotal" class="mono">$690</dd></div>
      </dl>
      <button class="btn btn-primary btn-block" id="confirmBtn">Confirm &amp; pay deposit</button>
      <p class="sheet-fine">No charge today. We hold your slot and invoice the 20% deposit after scheduling.</p>
    </div>
  </div>

  <footer class="foot">
    <span>© 2026 Aperture Reels — fictional studio</span>
    <span class="mono">CAM_A · REEL 07 · 24FPS</span>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>