/* Monochrome lending theme with a restrained cobalt and lavender accent. */
:root {
  --ink: #111113;
  --paper: #ffffff;
  --lime: #3157f5;
  --muted: #626674;
  --blue: #3157f5;
  --blue-dark: #1737bd;
  --lavender: #e9eaff;
  --line: #e7e8ee;
}

body { background: #fff; }
a:focus-visible { outline-color: var(--blue); }
.page-progress { background: var(--blue); }

/* The bright opening gives the typography room to carry the page. */
.site-header { color: var(--ink); }
.brand { letter-spacing: .035em; font-size: 14px; }
.brand-mark { background: var(--ink); color: #fff; }
.brand-mark span { color: #9cafff; }
.site-header nav { gap: 38px; }
.site-header nav a { color: #34353b; }
.header-cta { background: var(--ink); color: #fff; border-color: var(--ink); padding-inline: 19px; }
.header-cta:hover { background: var(--blue); border-color: var(--blue); opacity: 1; }

.hero { background: #fff; color: var(--ink); }
.hero-backdrop {
  background:
    radial-gradient(circle at 90% 50%, rgba(95, 117, 250, .16), transparent 27%),
    radial-gradient(circle at 63% 97%, rgba(222, 224, 255, .35), transparent 34%),
    #fff;
}
.halo-one {
  border-color: rgba(48, 79, 225, .13);
  box-shadow: inset 0 0 100px rgba(98, 121, 241, .08), 0 0 160px rgba(99, 121, 239, .05);
}
.halo-two {
  border-color: rgba(54, 81, 236, .10);
  background: radial-gradient(circle at 40% 40%, rgba(98, 121, 241, .10), transparent 60%);
}
.orbit { border-color: rgba(16, 18, 29, .055); }
.eyebrow { color: #666b77; }
.eyebrow-line { background: #b8bcc5; }
.accent { color: var(--blue); }
.period { color: var(--ink); }
.hero-bottom p { color: #545966; }
.round-link { border-color: #202127; color: #202127; }
.round-link:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.hero-corner { color: #9396a1; }
.hero-visual {
  position: absolute;
  width: min(48vw, 690px);
  height: min(48vw, 690px);
  right: -5vw;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 27%, #ebeeff 0, #aebcff 25%, #3452cf 49%, #101b68 72%, #050d31 100%);
  box-shadow: inset -45px -55px 95px rgba(0, 0, 35, .45), 0 45px 90px rgba(39, 67, 175, .18);
  opacity: .9;
  transform: translate3d(0, 0, 0);
  animation: float 10s ease-in-out infinite;
}
.visual-ring { position: absolute; inset: -7%; border: 1px solid rgba(68, 96, 216, .25); border-radius: 50%; transform: rotate(-25deg) scaleY(.62); }
.visual-core { position: absolute; inset: 24%; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; box-shadow: 0 0 65px rgba(255, 255, 255, .13), inset 0 0 55px rgba(255, 255, 255, .10); }
.visual-glint { position: absolute; width: 25%; height: 25%; left: 19%; top: 12%; border-radius: 50%; background: #fff; filter: blur(55px); opacity: .45; }
.hero-content { isolation: isolate; }

/* Light editorial spacing before the product moment. */
.intro { background: #fff; }
.section-kicker { color: #626674; }
.kicker-dot { background: var(--blue); }
.display em { color: var(--blue); }
.text-link { border-color: #20232b; }
.text-link:hover { color: var(--blue); border-color: var(--blue); }

/* A single dark section adds contrast without making the site feel heavy. */
.showcase { background: #111217; }
.section-kicker.light { color: #aeb4c5; }
.showcase .display em, .contact .display em { color: #a5b7ff; }
.showcase-copy > p { color: #bfc4d1; }
.pill-link { background: #fff; color: #111217; }
.pill-link:hover, .contact-button:hover { box-shadow: 0 14px 35px rgba(72, 99, 255, .24); }
.showcase-stage {
  background: radial-gradient(circle at 53% 52%, #414fa0 0, #252d68 33%, #171c42 64%, #101228 100%);
}
.stage-glow { background: #7e92ff; opacity: .24; }
.device { background: linear-gradient(135deg, #a3a7b6, #090b13 35%, #e0e2ef 72%, #080a14); box-shadow: 24px 35px 85px #03051baa, inset 0 0 0 2px #a6a9b9; }
.device-screen { background: linear-gradient(160deg, #f9faff, #e2e7ff 66%, #d5dcff); color: #121938; }
.device-small { color: #425de0; }
.device-message span { color: #4966e5; }
.device-disc { background: radial-gradient(circle at 28% 20%, #f5f7ff 0, #c6d0ff 19%, #667ee8 45%, #182669 73%, #7c91ed 100%); box-shadow: inset -14px -22px 42px #14225d77, 18px 20px 30px #273c9e40; }
.disc-inner { border-color: #e4eaff99; box-shadow: 0 0 20px #d7e2ffaa, inset 0 0 25px #e0e7ff88; }
.device-action { border-color: #4b5b9b66; }
.floating-note { background: #fff; color: #181b27; box-shadow: 0 19px 50px #060a2d66; }
.note-icon, .note-number { color: var(--blue); }

/* Category tiles read like premium product choices. */
.benefits { background: #fff; }
.benefit { background: #f6f7fa; border: 1px solid #edeef2; }
.benefit:hover { background: #f0f2ff; border-color: #dce2ff; box-shadow: 0 20px 40px rgba(24, 36, 94, .06); }
.benefit-num { color: #767c89; }
.loan-card { color: var(--ink); }
.loan-card:focus-visible { outline-color: var(--blue); }
.loan-icon { color: #5169e6; }
.loan-card:nth-child(2) .loan-icon, .loan-card:nth-child(6) .loan-icon { color: #7d6bd6; }
.loan-card:nth-child(3) .loan-icon, .loan-card:nth-child(7) .loan-icon { color: #597bc8; }
.loan-card p { color: #626774; }
.loan-arrow { color: var(--blue); }

.statement { background: var(--blue); color: #fff; }
.contact { background: #101115; color: #fff; }
.contact-side p { color: #c2c6d0; }
.draft-note { color: #aeb4c2 !important; border-color: #ffffff2a; }
.contact footer { color: #aeb4c2; }

@media (max-width: 900px) {
  .hero-visual { width: 75vw; height: 75vw; right: -32vw; top: 22%; opacity: .55; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(50px, 11.8vw, 72px); line-height: 1.02; letter-spacing: -.08em; }
  .hero-visual { width: 85vw; height: 85vw; right: -41vw; top: 26%; opacity: .32; }
  .hero-backdrop { background: radial-gradient(circle at 95% 55%, #e9edff, transparent 56%), #fff; }
  .site-header nav { display: none; }
  .header-cta { background: #111113; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
}