:root {
  --bg: #14110f; --panel: #1c1714; --ink: #f3ebe3;
  --mute: rgba(243,235,227,0.65); --ember: #e07a45; --ember-soft: #f0a57a;
  --line: rgba(224,122,69,0.28);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Sora, system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: var(--ember-soft); text-decoration: none; }
h1, h2 { font-family: Syne, system-ui, sans-serif; font-weight: 800; line-height: 1.1; }

.hero { position: relative; min-height: 88vh; display: grid; place-items: center; overflow: hidden; text-align: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) contrast(1.05); }
.veil { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20,17,15,0.3), rgba(20,17,15,0.85)); }
.hero-box { position: relative; z-index: 2; padding: clamp(2rem,5vw,3.5rem) 1.25rem; max-width: 700px; display: flex; flex-direction: column; align-items: center; }
.tag { margin-bottom: 0.9rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.hero h1 { font-size: clamp(2.15rem,5.5vw,3.5rem); margin-bottom: 1.1rem; }
.hero ul { list-style: none; display: grid; gap: 0.35rem; margin-bottom: 1.5rem; text-align: left; width: max-content; max-width: 100%; }
.hero li { font-weight: 600; font-size: 1.08rem; }
.phone-btn { display: inline-flex; flex-direction: column; gap: 0.1rem; background: var(--ember); color: #1c1410 !important; padding: 0.9rem 1.25rem; border-radius: 4px; }
.phone-btn span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.phone-btn strong { font-size: 1.12rem; font-weight: 800; }

.loanbox { padding: 2.6rem clamp(1.2rem,4vw,3rem); background: #1a1512; border-top: 1px solid var(--line); }
.loanbox h2 { font-size: clamp(1.75rem,3.2vw,2.4rem); margin-bottom: 0.4rem; }
.loanbox-lead { color: var(--mute); margin-bottom: 1.2rem; }
.loanbox-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1rem; }
.loanbox-form { display: grid; gap: 0.9rem; background: var(--panel); padding: 1.2rem; border: 1px solid var(--line); }
.loanbox-form label, .loanbox-form fieldset { display: grid; gap: 0.4rem; border: 0; }
.loanbox-form span, .loanbox-form legend { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember-soft); font-weight: 700; }
.loanbox-form input[type="number"] { width: 100%; background: #120f0d; color: var(--ink); border: 1px solid var(--line); padding: 0.85rem 0.9rem; font: inherit; font-weight: 700; }
.rate-chips, .term-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rate-chips button, .term-chips button { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0.55rem 0.75rem; font: inherit; font-weight: 700; cursor: pointer; }
.rate-chips button.on, .term-chips button.on { background: var(--ember); color: #1c1410; border-color: var(--ember); }
.loanbox-out { display: grid; gap: 0.55rem; align-content: start; }
.loanbox-out .tile { background: #120f0d; border-left: 3px solid var(--ember); padding: 0.95rem 1rem; }
.loanbox-out .tile span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); margin-bottom: 0.2rem; }
.loanbox-out .tile strong { font-family: Syne, sans-serif; font-size: 1.3rem; color: var(--ember-soft); }
.loanbox-fine { color: var(--mute); font-size: 0.85rem; }

.mid-cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.8rem clamp(1.2rem,4vw,3rem); background: var(--panel); border-block: 1px solid var(--line);
}
.mid-cta h2 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.mid-cta p { color: var(--mute); font-size: 0.95rem; margin-bottom: 0.2rem; }

.path { padding: 2.8rem clamp(1.2rem,4vw,3rem); }
.path h2 { font-size: clamp(1.75rem,3.2vw,2.4rem); margin-bottom: 1rem; }
.rings { list-style: none; display: grid; gap: 0.55rem; max-width: 720px; }
.rings li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: center; background: var(--panel); padding: 1rem 1.05rem; border: 1px solid transparent; transition: 0.35s; }
.rings li.on { border-color: var(--ember); transform: translateX(6px); }
.rings i { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ember); color: var(--ember); font-style: normal; font-weight: 800; font-family: Syne, sans-serif; }
.rings h3 { font-size: 1.02rem; margin-bottom: 0.15rem; }
.rings p { color: var(--mute); font-size: 0.92rem; }

.spotlight { position: relative; min-height: 70vh; display: grid; align-items: end; }
.spotlight > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.spotlight-card {
  position: relative; z-index: 2; margin: clamp(1.2rem,4vw,3rem);
  max-width: 480px; background: rgba(20,17,15,0.92); padding: 1.6rem 1.4rem; border-left: 3px solid var(--ember);
}
.spotlight-card h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: 0.6rem; }
.spotlight-card p { color: var(--mute); margin-bottom: 0.9rem; }
.spotlight-card ul { list-style: none; display: grid; gap: 0.35rem; }
.spotlight-card li { font-weight: 600; padding-left: 0.9rem; position: relative; }
.spotlight-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; background: var(--ember); }

.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem; background: #0e0c0a; }
.duo-photos figure { position: relative; overflow: hidden; min-height: 36vh; }
.duo-photos img { width: 100%; height: 100%; min-height: 36vh; object-fit: cover; }
.duo-photos figcaption { position: absolute; left: 0.85rem; bottom: 0.85rem; background: rgba(20,17,15,0.88); color: var(--ember-soft); padding: 0.4rem 0.7rem; font-weight: 700; }

.end { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.5rem; align-items: center; padding: 2.8rem clamp(1.2rem,4vw,3rem); background: #0e0c0a; border-top: 1px solid var(--line); }
.end-copy p { margin-bottom: 0.45rem; color: var(--mute); }
.legal { color: var(--ink) !important; font-weight: 600; }
.end-cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.end-cta img { width: min(260px,100%); }

.reveal { opacity: 0; transform: translateY(14px); transition: 0.45s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .loanbox-grid, .duo-photos, .end { grid-template-columns: 1fr; }
  .duo-photos figure, .duo-photos img { min-height: 28vh; }
  .spotlight { min-height: 56vh; }
}