/* ============================================================
   Hatch homepage — dark skin (index.html only).
   Loads after tokens.css + styles.css and overrides them for
   this page. Other pages keep the light system untouched.
   ============================================================ */

body.home-dark {
  --void: #08070D;
  --panel: #110E1A;
  --panel-2: #16121F;
  --ice: #F2F3F8;
  --dust: #A09DAF;
  --dline: rgba(245, 245, 247, 0.09);
  --dline-strong: rgba(245, 245, 247, 0.16);
  --glow-blue: rgba(91, 157, 243, 0.5);
  --glow-violet: rgba(98, 0, 245, 0.55);
  background:
    radial-gradient(60% 42% at 50% -6%, rgba(98, 0, 245, 0.22), transparent 70%),
    radial-gradient(38% 30% at 88% 12%, rgba(91, 157, 243, 0.12), transparent 70%),
    var(--void);
  color: var(--ice);
}
body.home-dark .muted { color: var(--dust); }
body.home-dark .eyebrow { color: var(--blue-light); }
body.home-dark a:focus-visible,
body.home-dark .btn:focus-visible,
body.home-dark summary:focus-visible,
body.home-dark button:focus-visible { outline-color: var(--blue-light); }
body.home-dark .mark {
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  background-clip: text;
}
body.home-dark ::selection { background: rgba(98, 0, 245, 0.5); color: #fff; }

/* Starfield — hero + final panel only */
.stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(1px 1px at 32% 64%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 12%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 63% 48%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(2px 2px at 78% 18%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 82%, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1px 1px at 5% 52%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1px 1px at 95% 38%, rgba(255,255,255,0.35), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

/* Floating gradient orbs — the ambient 3D feel */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(42px); opacity: 0.5;
  animation: orb-drift 14s ease-in-out infinite alternate;
}
.orb--a { width: 340px; height: 340px; top: -80px; left: -120px;
  background: radial-gradient(circle at 35% 35%, rgba(98,0,245,0.55), rgba(98,0,245,0) 70%); }
.orb--b { width: 260px; height: 260px; top: 30%; right: -90px;
  background: radial-gradient(circle at 60% 40%, rgba(91,157,243,0.5), rgba(91,157,243,0) 70%);
  animation-delay: -6s; }
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(30px, 42px, 0) scale(1.12); }
}

/* Nav — dark glass */
body.home-dark .nav { background: rgba(8, 7, 13, 0.55); border-bottom-color: transparent; }
body.home-dark .nav.is-scrolled { background: rgba(8, 7, 13, 0.85); border-bottom-color: var(--dline); }
body.home-dark .nav__links a { color: var(--dust); }
body.home-dark .nav__links a:hover { color: var(--ice); }

/* Ghost buttons on dark */
body.home-dark .btn-ghost { color: var(--ice); border-color: var(--dline-strong); }
body.home-dark .btn-ghost:hover { border-color: var(--blue-light); color: #fff; }

/* ============ Hero ============ */
.stage { position: relative; overflow: hidden; padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.stage__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stage__title { font-size: clamp(2.9rem, 7.5vw, 5.75rem); letter-spacing: -0.04em; margin-block: 1.1rem .9rem; max-width: 15ch; }
.stage__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--dust); max-width: 620px; margin-bottom: 2rem; }
.stage__cta { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.stage__cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.cta-note { font-size: var(--fs-small); color: var(--dust); }
.cta-note b { color: var(--blue-light); font-weight: 600; }
.stage__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 1.5rem; list-style: none; }
.stage__trust li { position: relative; padding-left: 1.4rem; font-size: var(--fs-small); color: var(--dust); }
.stage__trust li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-light); font-weight: 700; }

/* The film — gradient-ringed video frame */
.stage__film { position: relative; z-index: 1; width: 100%; max-width: 940px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.stage__frame { position: relative; border-radius: 22px; padding: 1.5px; background: linear-gradient(135deg, rgba(91,157,243,0.65), rgba(98,0,245,0.65) 55%, rgba(245,0,233,0.35)); box-shadow: 0 40px 120px -40px var(--glow-violet), 0 10px 60px -20px rgba(91,157,243,0.25); }
.stage__frame::before {
  content: ""; position: absolute; inset: -26px; z-index: -1; border-radius: 40px;
  background: radial-gradient(55% 65% at 50% 100%, rgba(98,0,245,0.28), transparent 70%);
  filter: blur(12px);
}
.stage__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 21px; background: var(--panel); }
.stage__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; list-style: none; margin-top: 1.1rem; }
.stage__phases li {
  position: relative; text-align: center; font-family: var(--font-display); font-size: var(--fs-small);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dust);
  padding-top: .85rem; transition: color .4s var(--ease);
}
.stage__phases li::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; border-radius: 3px; background: var(--dline-strong);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.stage__phases li.is-on { color: var(--ice); }
.stage__phases li.is-on::before { background: var(--grad); box-shadow: 0 0 14px var(--glow-blue); }
@media (max-width: 480px) {
  .stage__phases li { font-size: .66rem; letter-spacing: .05em; }
}

/* ============ Own vs rent band ============ */
.own { position: relative; border-block: 1px solid var(--dline); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.own__lede { max-width: 620px; margin-top: 1rem; }
.own__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; list-style: none; }
.own__points li { border-left: 2px solid transparent; border-image: var(--grad) 1; border-image-width: 0 0 0 2px; padding-left: 1.25rem; }
.own__points b { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: .35rem; }
.own__points span { color: var(--dust); font-size: .98rem; }
@media (max-width: 760px) { .own__points { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ============ How it works ============ */
.steps__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.75rem; }
.step { position: relative; background: rgba(255,255,255,0.03); border: 1px solid var(--dline); border-radius: var(--radius); padding: 1.6rem 1.4rem; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { transform: translateY(-5px); border-color: rgba(139,216,252,0.35); box-shadow: 0 24px 60px -30px var(--glow-violet); }
.iris { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 1.1rem; background: conic-gradient(from 210deg, #5B9DF3, #6200F5, #F500E9, #5B9DF3); box-shadow: 0 0 22px -4px var(--glow-violet); font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.iris::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--panel); }
.iris span { position: relative; z-index: 1; }
.step h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.step p { color: var(--dust); font-size: .95rem; }
.step__tag { display: inline-block; margin-top: .9rem; font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: #fff; background: var(--grad); padding: .28rem .75rem; border-radius: 999px; }
@media (max-width: 980px) { .steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps__grid { grid-template-columns: 1fr; } }

/* Payment rail */
.rail { display: flex; flex-wrap: wrap; align-items: stretch; gap: .9rem; margin-top: 2.25rem; }
.rail__stop { flex: 1 1 200px; background: rgba(255,255,255,0.03); border: 1px solid var(--dline); border-radius: var(--radius); padding: 1.25rem 1.4rem; position: relative; }
.rail__stop b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail__stop span { color: var(--dust); font-size: .92rem; }
.rail__arrow { align-self: center; color: var(--blue-light); font-size: 1.3rem; flex: none; }
.rail__note { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--dust); }
@media (max-width: 700px) { .rail { flex-direction: column; } .rail__arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 1.4rem; } }

/* ============ Comparison ============ */
.vs__lede { max-width: 640px; margin-top: 1rem; }
body.home-dark .compare table { background: rgba(255,255,255,0.02); border-color: var(--dline-strong); box-shadow: none; }
body.home-dark .compare th, body.home-dark .compare td { border-bottom-color: var(--dline); }
body.home-dark .compare thead th { background: rgba(255,255,255,0.04); color: var(--dust); }
body.home-dark .compare tbody th { color: var(--ice); }
body.home-dark .compare td { color: var(--dust); }
body.home-dark .compare td.is-hatch { background: rgba(98,0,245,0.16); color: var(--ice); }

/* ============ Guarantee band ============ */
.vow { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(98,0,245,0.10), rgba(8,7,13,0)); border-block: 1px solid var(--dline); }
.vow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.vow__item { background: rgba(255,255,255,0.03); border: 1px solid var(--dline); border-top: 2px solid transparent; border-image: var(--grad) 1; border-image-width: 2px 0 0 0; border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.vow__item h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.vow__item p { color: var(--dust); font-size: .95rem; }
@media (max-width: 820px) { .vow__grid { grid-template-columns: 1fr; } }

/* ============ FAQ (dark overrides) ============ */
body.home-dark .faq__item { background: rgba(255,255,255,0.03); border-color: var(--dline); box-shadow: none; }
body.home-dark .faq__item summary { color: var(--ice); }
body.home-dark .faq__item summary::after { color: var(--blue-light); }
body.home-dark .faq__item p { color: var(--dust); }

/* ============ Final CTA ============ */
body.home-dark .apply.ink-panel { background: transparent; border-top: 1px solid var(--dline); }
body.home-dark .apply .art {
  background:
    radial-gradient(60% 85% at 50% 118%, rgba(98,0,245,0.5), transparent 72%),
    radial-gradient(45% 60% at 85% -10%, rgba(91,157,243,0.25), transparent 75%);
}

/* ============ Footer ============ */
body.home-dark .footer { background: transparent; border-top-color: var(--dline); }
body.home-dark .footer__links a { color: var(--dust); }
body.home-dark .footer__links a:hover { color: var(--ice); }

/* ============ Apply overlay — dark ============ */
body.home-dark .tf { background: #0B0A12; color: var(--ice); }
body.home-dark .tf__progress { background: rgba(255,255,255,0.08); }
body.home-dark .tf__close { background: var(--panel); color: var(--ice); border-color: var(--dline-strong); }
body.home-dark .tf__close:hover { border-color: var(--blue-light); }
body.home-dark .tf__count, body.home-dark .tf__lede, body.home-dark .tf__sub, body.home-dark .tf__hint, body.home-dark .tf__note { color: var(--dust); }
body.home-dark .tf__hint b { color: var(--ice); }
body.home-dark .tf__q { color: var(--ice); }
body.home-dark .tf__num { color: var(--blue-light); }
body.home-dark .tf__input { color: var(--ice); border-bottom-color: var(--dline-strong); }
body.home-dark .tf__input::placeholder { color: rgba(160,157,175,0.5); }
body.home-dark .tf__input:focus { border-color: var(--blue-light); }
body.home-dark .tf__choice { background: rgba(255,255,255,0.04); border-color: var(--dline); color: var(--ice); box-shadow: none; }
body.home-dark .tf__choice:hover, body.home-dark .tf__choice.is-focus { border-color: var(--blue-light); }
body.home-dark .tf__choice.is-selected { border-color: var(--blue-light); background: rgba(98,0,245,0.2); }
body.home-dark .tf__choice-key { border-color: var(--dline-strong); color: var(--dust); }
body.home-dark .tf__choice:hover .tf__choice-key, body.home-dark .tf__choice.is-focus .tf__choice-key, body.home-dark .tf__choice.is-selected .tf__choice-key { border-color: var(--blue-light); color: var(--blue-light); }
body.home-dark .tf__err { color: #FF8578; }

/* ============ Exit popup — dark ============ */
body.home-dark .exit__scrim { background: rgba(4, 3, 8, 0.6); }
body.home-dark .exit__card { background: var(--panel-2); border-color: var(--dline-strong); color: var(--ice); }
body.home-dark .exit__close { background: var(--panel); color: var(--ice); border-color: var(--dline); }
body.home-dark .exit__close:hover { border-color: var(--blue-light); }
body.home-dark .exit__eyebrow { color: var(--blue-light); }
body.home-dark .exit__body { color: var(--dust); }
body.home-dark .exit__body b { color: var(--ice); }
body.home-dark .exit__dismiss { color: var(--dust); }

/* ============ Instant quote calculator ============ */
.quote { position: relative; border-block: 1px solid var(--dline); background: linear-gradient(180deg, rgba(91,157,243,0.05), transparent); scroll-margin-top: 80px; }
.quote__lede { max-width: 600px; margin-top: 1rem; }
.quote__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
@media (max-width: 860px) { .quote__panel { grid-template-columns: 1fr; } }

.quote__form { background: rgba(255,255,255,0.03); border: 1px solid var(--dline); border-radius: var(--radius); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 1.15rem; }
.qfield { display: flex; flex-direction: column; gap: .45rem; }
.qfield label, .qfeatures legend { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ice); }
.qfield textarea, .qfield input, .qfield select {
  width: 100%; background: rgba(8,7,13,0.6); border: 1px solid var(--dline-strong); border-radius: 10px;
  color: var(--ice); font: inherit; padding: .7rem .85rem; transition: border-color .2s var(--ease);
}
.qfield textarea { resize: vertical; min-height: 76px; }
.qfield textarea:focus, .qfield input:focus, .qfield select:focus { outline: none; border-color: var(--blue-light); }
.qfield textarea::placeholder, .qfield input::placeholder { color: rgba(160,157,175,0.55); }
.qfield--split { flex-direction: row; gap: 1rem; }
.qfield--split > div { flex: 1; display: flex; flex-direction: column; gap: .45rem; }
@media (max-width: 420px) { .qfield--split { flex-direction: column; } }

.qfeatures { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.qchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.qchip { position: relative; }
.qchip input { position: absolute; opacity: 0; pointer-events: none; }
.qchip span {
  display: inline-block; padding: .45rem .8rem; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--dline-strong); color: var(--dust); cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.qchip input:checked + span { border-color: var(--blue-light); background: rgba(98,0,245,0.2); color: var(--ice); }
.qchip input:focus-visible + span { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.qerr { color: #FF8578; font-size: var(--fs-small); min-height: 1em; margin: 0; }

.quote__result { background: rgba(255,255,255,0.03); border: 1px solid var(--dline-strong); border-top: 2px solid transparent; border-image: var(--grad) 1; border-image-width: 2px 0 0 0; border-radius: var(--radius); padding: 1.8rem 1.6rem; }
.qresult__eyebrow { font-family: var(--font-display); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--blue-light); margin: 0; }
.qresult__range { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; margin: .3rem 0 .6rem; background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qresult__why { color: var(--dust); font-size: .98rem; margin-bottom: 1rem; }
.qscope { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.qscope li { position: relative; padding-left: 1.5rem; color: var(--dust); font-size: .92rem; }
.qscope li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-light); font-weight: 700; }
.qroi { background: rgba(98,0,245,0.1); border: 1px solid var(--dline); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.qroi h4 { font-family: var(--font-display); font-size: .95rem; margin: 0 0 .5rem; color: var(--ice); }
.qroi p { color: var(--dust); font-size: .92rem; margin: 0 0 .35rem; }
.qroi p:last-child { margin-bottom: 0; }
.qroi p b { color: var(--ice); }
.qroi__hint { color: var(--dust); font-size: var(--fs-small); }
.qresult__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.qresult__note { color: var(--dust); font-size: var(--fs-small); margin: 0; }
.qresult__disclaimer { color: var(--dust); font-size: var(--fs-small); margin-top: 1rem; font-style: italic; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .stage__phases li, .stage__phases li::before { transition: none; }
}