/* ============================================================
   HOMEBOT — "Open Mic" dark treatment (The Marchand Team)
   deep navy field · brand orange · Anton + Caveat over the
   shared site chrome (styles.css). Load this AFTER styles.css.

   Note: this stylesheet deliberately does NOT redefine the global
   brand tokens (--navy, --orange, --paper, --line, --ink, …) so the
   shared white nav and navy footer keep rendering correctly. All
   Homebot-only colors live under the --hb-* namespace.
   ============================================================ */
:root {
  --hb-bg:      #0f1a31;
  --hb-bg-2:    #0b1426;
  --hb-panel:   #16233f;
  --hb-panel-2: #1c2c4c;
  --hb-orange:  #e87b1f;   /* matches site --orange */
  --hb-orange-d:#c9661a;   /* matches site --orange-dim */
  --hb-ink:     #eef2fa;
  --hb-ink-2:   #aab6cb;
  --hb-ink-3:   #6f7e98;
  --hb-line:    rgba(255,255,255,.10);
  --hb-line-2:  rgba(255,255,255,.06);

  /* Harmonized with the site's loaded fonts */
  --hb-display: 'Anton', 'Plus Jakarta Sans', sans-serif;
  --hb-script:  'Caveat', cursive;
  --hb-sans:    'Plus Jakarta Sans', system-ui, sans-serif;
}

/* The dark field lives on a page wrapper so it never bleeds onto the
   shared white nav or the navy footer. */
.hb-page {
  position: relative;
  background:
    radial-gradient(120% 80% at 72% -6%, #1b2c4e 0%, var(--hb-bg) 46%, var(--hb-bg-2) 100%);
  color: var(--hb-ink-2);
  overflow: hidden;
}
.hb-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 11px);
}
.hb-page > * { position: relative; z-index: 1; }
.hb-page ::selection { background: var(--hb-orange); color: #fff; }

.m-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .m-wrap { padding: 0 22px; } }

/* second header line — the three Homebot paths */
.hb-subnav { border-bottom: 1px solid var(--hb-line-2); padding: 12px 0; background: var(--hb-bg-2); }
.hb-subnav-in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hb-subnav-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-ink-3); font-weight: 700; white-space: nowrap; }
.hb-subnav nav { display: flex; gap: 8px; }
.hb-subnav a { font-size: 13px; font-weight: 700; color: var(--hb-ink-2); text-decoration: none; padding: 7px 15px; border-radius: 999px; transition: .15s; }
.hb-subnav a:hover { color: #fff; }
.hb-subnav a.on { background: rgba(232,123,31,.16); color: var(--hb-orange); }

/* ---------- shared bits ---------- */
.hb-page .ey { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hb-sans);
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-orange); }
.hb-page .ey::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hb-orange); box-shadow: 0 0 10px rgba(232,123,31,.8); }

.btn-o {
  font-family: var(--hb-sans); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  background: var(--hb-orange); color: #fff; border: 0; cursor: pointer;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  box-shadow: 0 12px 34px -8px rgba(232,123,31,.6);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-o:hover { background: var(--hb-orange-d); transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(232,123,31,.7); }
.btn-xl { font-size: 18px; padding: 18px 36px; }
@media (max-width: 640px) {
  .btn-o { white-space: normal; text-align: center; max-width: 100%; }
  .btn-xl { font-size: 16px; padding: 16px 24px; }
}

.hb-page .kicker { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .04em; color: var(--hb-ink-3); font-size: 26px; line-height: 1; }
.hb-page .display { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase;
  color: var(--hb-ink); letter-spacing: .01em; line-height: .96; }
.hb-page .script { font-family: var(--hb-script); text-transform: none; color: var(--hb-orange); font-weight: 700; }

.sec-head { max-width: 60ch; margin-bottom: 40px; }
.sec-head .display { font-size: 46px; }
.sec-head .display .o { color: var(--hb-orange); }
.sec-head p { font-size: 17px; color: var(--hb-ink-2); margin: 14px 0 0; }

.backlink { display: flex; width: fit-content; align-items: center; gap: 7px; color: var(--hb-ink-3);
  text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.backlink:hover { color: #fff; }

/* ---------- gateway / chooser ---------- */
.gateway { padding: 64px 0 88px; text-align: center; }
.gateway h1 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; color: #fff;
  font-size: 60px; line-height: 1.12; letter-spacing: .01em; margin: 18px 0 0; }
.gateway h1 .script { color: var(--hb-orange); font-size: 1em; }
.gateway .sub { font-size: 19px; color: var(--hb-ink-2); margin: 22px auto 0; max-width: 54ch; }
.gateway .sub-free { font-family: var(--hb-display); font-weight: 400; font-size: 1.9em; color: var(--hb-orange); letter-spacing: .03em; line-height: 1; vertical-align: -0.12em; padding: 0 2px; }
.gateway .sub-brand { margin: 22px auto 0; display: flex; flex-direction: column; align-items: center; }
.gateway .sub-brand img { width: 130px; height: auto; display: block; border-radius: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; text-align: left; }
.choice { display: flex; flex-direction: column; background: rgba(255,255,255,.025);
  border: 1px solid var(--hb-line); border-radius: 20px; padding: 34px 30px; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.choice:hover { transform: translateY(-4px); border-color: var(--hb-orange); background: rgba(232,123,31,.06); }
.choice .cnum { font-family: var(--hb-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-orange); font-weight: 700; }
.choice .cicon { width: 56px; height: 56px; border-radius: 15px; background: rgba(232,123,31,.14); color: var(--hb-orange); display: grid; place-items: center; margin: 20px 0; }
.choice .cicon svg { width: 28px; height: 28px; }
.choice h2 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; color: #fff; font-size: 38px; letter-spacing: .01em; margin: 0 0 10px; line-height: .98; }
.choice p { color: var(--hb-ink-2); font-size: 15px; margin: 0 0 26px; flex: 1; }
.choice .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 15px; }
.choice:hover .go { color: var(--hb-orange); }

/* path switcher (breakout pages) */
.switch { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 30px 0 0; }
.switch a { font-size: 13px; font-weight: 700; color: var(--hb-ink-2); text-decoration: none;
  border: 1px solid var(--hb-line); border-radius: 999px; padding: 8px 16px; transition: .15s; }
.switch a:hover { border-color: var(--hb-orange); color: var(--hb-orange); }
.switch a.on { background: rgba(232,123,31,.14); border-color: transparent; color: var(--hb-orange); }

/* ---------- hero ---------- */
.hb-hero { display: grid; grid-template-columns: 1.04fr .96fr; gap: 58px; align-items: center; padding: 56px 0 78px; }
.hero-kicker { margin-bottom: 8px; }
.hb-hero h1 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; color: var(--hb-ink);
  font-size: 70px; line-height: 1.02; letter-spacing: .005em; margin: 0; padding-bottom: 30px; }
.hb-hero h1 .script { font-size: 76px; display: inline-block; line-height: 1.1; margin-left: 4px; }
.hb-hero .lede { font-size: 18px; color: var(--hb-ink-2); max-width: 48ch; margin: 14px 0 30px; }
.hb-hero .lede b { color: #fff; font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-cta .fine { width: 100%; font-size: 12.5px; color: var(--hb-ink-3); margin: 4px 0 0; }

/* ---------- mock card shell + ribbon ---------- */
.card-d { background: var(--hb-panel); border: 1px solid var(--hb-line); border-radius: 20px;
  overflow: hidden; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.ribbon { position: absolute; top: 0; right: 0; width: 132px; height: 132px; overflow: hidden; z-index: 2; }
.ribbon span { position: absolute; display: block; width: 184px; padding: 7px 0; right: -46px; top: 30px;
  transform: rotate(45deg); background: var(--hb-orange); color: #fff;
  font: 700 11px/1 var(--hb-sans); letter-spacing: .16em; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* digest preview */
.digest-top { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hb-line-2); }
.digest-top .who { font-family: var(--hb-sans); font-weight: 600; color: #fff; font-size: 16px; }
.digest-top .addr { font-size: 12.5px; color: var(--hb-ink-3); margin-top: 2px; }
.digest-top .tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-orange); font-weight: 700; }
.digest-body { padding: 24px; }
.val-row { display: flex; align-items: flex-end; justify-content: space-between; }
.val { font-family: var(--hb-display); font-size: 46px; color: #fff; line-height: 1; letter-spacing: .01em; }
.val small { display: block; font-family: var(--hb-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hb-ink-3); font-weight: 700; margin-bottom: 8px; }
.delta { font-size: 14px; font-weight: 700; color: var(--hb-orange); display: inline-flex; align-items: center; gap: 4px; }
.spark { width: 100%; height: 70px; margin: 18px 0 22px; display: block; }
.equity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eq { background: rgba(255,255,255,.04); border-radius: 12px; padding: 16px 18px; }
.eq .k { font-size: 11px; color: var(--hb-ink-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.eq .v { font-family: var(--hb-display); font-size: 27px; color: #fff; margin-top: 6px; letter-spacing: .01em; }
.eqbar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 12px; }
.eqbar > i { display: block; height: 100%; background: var(--hb-orange); border-radius: 999px; }

/* ---------- deep-dive blocks ---------- */
.block { padding: 70px 0; border-top: 1px solid var(--hb-line-2); }
.block h2 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; color: #fff; font-size: 44px; letter-spacing: .01em; line-height: .98; margin: 10px 0 0; }
.block h2 .script { font-size: 50px; }
.block .lede { font-size: 17px; color: var(--hb-ink-2); max-width: 46ch; margin: 16px 0 0; }
.block .lede b { color: #fff; font-weight: 600; }

.inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.icard { padding: 26px; border: 1px solid var(--hb-line); border-radius: 14px; background: rgba(255,255,255,.025); }
.icard .dot { width: 42px; height: 42px; border-radius: 11px; background: rgba(232,123,31,.14); display: grid; place-items: center; margin-bottom: 16px; color: var(--hb-orange); }
.icard .dot svg { width: 20px; height: 20px; }
.icard h3 { font-family: var(--hb-sans); font-weight: 700; color: #fff; font-size: 18px; margin: 0 0 7px; }
.icard p { color: var(--hb-ink-2); font-size: 14.5px; margin: 0; }

/* search mock */
.search-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hb-line-2); }
.search-head b { font-family: var(--hb-sans); color: #fff; font-size: 15px; }
.budget { font-size: 12px; font-weight: 700; background: rgba(232,123,31,.14); color: var(--hb-orange); padding: 6px 12px; border-radius: 999px; }
.listings { padding: 4px 22px 14px; }
.listing { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hb-line-2); }
.listing:last-child { border-bottom: 0; }
.lthumb { width: 66px; height: 50px; border-radius: 8px; flex: none; border: 1px solid var(--hb-line);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 7px, rgba(255,255,255,.02) 7px 14px); }
.linfo { flex: 1; min-width: 0; }
.linfo b { font-family: var(--hb-sans); color: #fff; font-size: 15px; }
.linfo span { display: block; font-size: 12.5px; color: var(--hb-ink-3); }
.lmo { text-align: right; flex: none; }
.lmo b { color: #fff; font-size: 15px; }
.lmo span { display: block; font-size: 11.5px; color: var(--hb-orange); font-weight: 700; }

/* co-brand mock */
.cobrand-head { padding: 20px 22px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--hb-line-2); }
.av { width: 46px; height: 46px; border-radius: 999px; flex: none; }
.av.agent { border: 1px solid var(--hb-line); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 7.5px; line-height: 1.2; color: var(--hb-ink-3); text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 7px, rgba(255,255,255,.02) 7px 14px); }
.av.brand { background: var(--hb-orange); color: #fff; display: grid; place-items: center; font-family: var(--hb-display); font-size: 22px; }
.cobrand-head .nm b { display: block; font-family: var(--hb-sans); color: #fff; font-size: 14px; line-height: 1.25; }
.cobrand-head .nm span { font-size: 12px; color: var(--hb-ink-3); }
.plus2 { color: var(--hb-ink-3); font-size: 18px; margin: 0 2px; }
.cobrand-body { padding: 22px; }
.cobrand-body .rib { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-orange); font-weight: 700; }
.cobrand-body .cv { font-family: var(--hb-display); font-size: 30px; color: #fff; letter-spacing: .01em; margin: 8px 0 2px; }
.cobrand-body .cl { font-size: 13px; color: var(--hb-ink-3); }
.signal { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 15px; background: rgba(255,255,255,.04); border-radius: 10px; font-size: 13.5px; color: var(--hb-ink-2); }
.signal .pip { width: 9px; height: 9px; border-radius: 999px; background: var(--hb-orange); flex: none; box-shadow: 0 0 8px rgba(232,123,31,.8); }
.signal b { color: #fff; }

/* ---------- how it works ---------- */
.how { padding: 72px 0; background: var(--hb-bg-2); border-top: 1px solid var(--hb-line-2); border-bottom: 1px solid var(--hb-line-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.step { position: relative; padding-top: 30px; }
.step .n { font-family: var(--hb-display); font-size: 15px; color: var(--hb-orange); width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--hb-orange); display: grid; place-items: center; position: absolute; top: 0; left: 0; }
.step h3 { font-family: var(--hb-sans); font-weight: 700; color: #fff; font-size: 20px; margin: 8px 0 8px; }
.step p { color: var(--hb-ink-2); font-size: 15px; margin: 0; }

/* ---------- closing CTA ---------- */
.cta { background: linear-gradient(150deg, var(--hb-panel-2), var(--hb-panel)); border: 1px solid var(--hb-line); border-radius: 24px; padding: 56px; text-align: center; margin: 78px 0; position: relative; overflow: hidden; }
.cta::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; top: -240px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(232,123,31,.22), transparent 65%); pointer-events: none; }
.cta h2 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; color: #fff; font-size: 48px; letter-spacing: .01em; position: relative; }
.cta > p { color: var(--hb-ink-2); font-size: 18px; max-width: 54ch; margin: 14px auto 26px; position: relative; }
.cta .btn-o { position: relative; }

/* ============================================================
   Official Homebot brand-mark lockups (used across the path)
   ============================================================ */
.hb-subnav .hb-brand { display: inline-flex; align-items: center; transition: opacity .15s ease; }
.hb-subnav .hb-brand img { height: 22px; width: auto; display: block; }
.hb-subnav .hb-brand:hover { opacity: .82; }

.gateway-logo { display: flex; justify-content: center; margin-bottom: 6px; }
.gateway-logo img { height: 54px; width: auto; display: block; }

.poweredby { display: inline-flex; align-items: center; gap: 9px; }
.poweredby small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-ink-3); font-weight: 700; }
.poweredby img { height: 19px; width: auto; display: block; }

.card-pb { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 16px;
  border-top: 1px solid var(--hb-line-2); background: rgba(0,0,0,.2); }
.card-pb small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hb-ink-3); font-weight: 700; }
.card-pb img { height: 15px; width: auto; display: block; }

.cta .poweredby { margin-top: 24px; }

/* ============================================================
   Robot-badge motif — the Homebot mark woven through the path
   ============================================================ */
/* Gateway: glowing robot badge over the wordmark */
.gateway-mark { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 8px; }
.gateway-badge { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.gateway-badge::before { content: ''; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,62,143,.30), rgba(239,62,143,0) 70%); }
.gateway-badge img { position: relative; width: 96px; height: 96px; display: block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
.gateway-word { height: 30px; width: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gateway-badge img { animation: hb-badge-float 5.5s ease-in-out infinite; }
  @keyframes hb-badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}

/* Large faint watermark of the badge, bleeding off a corner */
.hb-watermark { position: absolute; z-index: 0; pointer-events: none; user-select: none; opacity: .055; }
.hb-watermark img { display: block; width: 100%; height: auto; }
.hb-hero { position: relative; }
.hb-hero > div:not(.hb-watermark) { position: relative; z-index: 1; }
.hb-hero .hb-watermark { top: -120px; right: -150px; width: 460px; }

/* CTA: a small badge mark crowning the closing call-to-action */
.cta-badge { position: relative; z-index: 1; width: 62px; height: 62px; margin: 0 auto 20px; }
.cta-badge img { width: 62px; height: 62px; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }

/* Branded mock thumbnails — Homebot-sourced listings carry the mark */
.lthumb { position: relative; }
.lthumb::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px;
  background: url('assets/homebot-badge.png') center / contain no-repeat; opacity: .5; }

@media (max-width: 880px) {
  .hb-hero .hb-watermark { width: 320px; top: -90px; right: -120px; }
}

@media (max-width: 880px) {
  .hb-hero, .inside-grid, .steps, .choice-grid, .equity { grid-template-columns: 1fr; }
  .hb-hero { gap: 36px; }
  .hb-hero h1 { font-size: 56px; }
  .hb-hero h1 .script { font-size: 62px; }
  .gateway h1 { font-size: 48px; }
  .sec-head .display, .block h2, .cta h2 { font-size: 38px; }
  .gateway-logo img { height: 44px; }
}