/* =========================================================
   Best Loan Available Landing Page
   Updated package: 7 linked service cards + hover effects
   + primary CTA buttons with "TAKES 5 MINUTES"
   ========================================================= */

:root{
  --black:#000000;
  --panel:#050505;
  --white:#ffffff;
  --muted:#e7e7e7;
  --gold:#d8b52c;
  --gold-2:#ffe05b;
  --green:#24a83a;
  --green-dark:#08731c;
  --border:rgba(216,181,44,.62);
  --max:1280px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--white);
  background:#000;
  line-height:1.35;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.section-shell{
  max-width:var(--max);
  margin-inline:auto;
}

/* =========================
   Header
   ========================= */

.topbar{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:72px;
  padding:8px clamp(18px,3.2vw,36px);
  background:linear-gradient(180deg,#060606,#000 90%);
  border-bottom:1px solid rgba(216,181,44,.35);
}

.brand img{
  width:118px;
  height:auto;
}

.call-top{
  display:flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  color:var(--gold-2);
  letter-spacing:.4px;
}

.call-top .call-icon{
  width:40px;
  height:40px;
  border:3px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  color:var(--gold);
}

.call-top strong{
  display:block;
  font-size:14px;
  line-height:1;
  color:var(--gold);
}

.call-top b{
  display:block;
  font-size:26px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 11px rgba(255,255,255,.24);
}

/* =========================
   Hero
   ========================= */

.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(420px,43%) 1fr;
  align-items:stretch;
  gap:10px;
  min-height:500px;
  padding:24px clamp(20px,3vw,30px) 18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 34%,rgba(35,120,218,.45),transparent 31%),
    linear-gradient(180deg,#061724 0%,#000 82%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.97) 22%,
      rgba(0,0,0,.80) 37%,
      rgba(0,0,0,.24) 56%,
      rgba(0,0,0,.06) 73%,
      rgba(0,0,0,.50) 100%
    ),
    radial-gradient(circle at 73% 53%,
      transparent 0 30%,
      rgba(0,0,0,.12) 49%,
      #000 100%
    );
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:3;
  align-self:center;
}

.eyebrow{
  margin:0 0 8px;
  color:var(--gold-2);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.7px;
  font-size:16px;
}

.hero h1{
  margin:0;
  font-family:Arial Black, Impact, Arial, sans-serif;
  font-size:clamp(55px,5.9vw,74px);
  line-height:.93;
  text-transform:uppercase;
  letter-spacing:-1.6px;
  text-shadow:0 4px 18px rgba(0,0,0,.85);
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.7));
}

.hero h1 span{
  display:block;
  color:var(--gold);
  text-shadow:0 0 24px rgba(216,181,44,.58);
}

.subhead{
  margin:14px 0 12px;
  font-size:17px;
  font-weight:800;
  color:#f6f6f6;
  border-bottom:1px solid rgba(216,181,44,.65);
  display:inline-block;
  padding-bottom:7px;
}

.loan-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 22px;
  margin:0 0 20px;
  max-width:575px;
  font-weight:900;
  font-size:15px;
}

.loan-list span{
  position:relative;
  padding-left:27px;
  text-shadow:0 1px 8px #000;
}

.loan-list span::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-2px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:#050505;
  font-weight:900;
  font-size:14px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  max-width:470px;
}

.hero-media{
  position:relative;
  z-index:1;
  align-self:stretch;
  min-height:100%;
  overflow:hidden;
  margin-left:-60px;
  margin-right:-22px;
}

.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.58) 8%,
      rgba(0,0,0,.22) 19%,
      rgba(0,0,0,.04) 39%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,.32) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 44%,
      rgba(0,0,0,.40) 100%
    );
  pointer-events:none;
}

.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:58% center;
  filter:saturate(1.12) contrast(1.12) brightness(1.08);
  border-radius:0;
  mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 96%,transparent 100%);
}

/* =========================
   Buttons
   ========================= */

.btn{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 26px;
  border-radius:9px;
  font-family:Arial Black, Arial, sans-serif;
  text-transform:uppercase;
  font-size:22px;
  line-height:1;
  border:2px solid rgba(255,255,255,.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 12px 26px rgba(0,0,0,.52);
  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.btn small{
  display:inline-block;
  font-size:14px;
  letter-spacing:.5px;
  margin-top:0;
  margin-left:2px;
  color:#fff;
  white-space:nowrap;
}

.btn span{
  font-size:28px;
  line-height:1;
  flex:0 0 auto;
}

.btn-primary{
  background:linear-gradient(180deg,#47cf55,#178d2a 72%,#0b6c19);
  border-color:#72e880;
}

.btn-outline{
  background:linear-gradient(180deg,#171717,#060606);
  border-color:#8e8e8e;
}

.btn-large{
  min-width:min(100%,405px);
  font-size:24px;
  padding:17px 30px;
}

.hero-actions .btn{
  width:100%;
  max-width:395px;
  min-height:84px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.btn-stack{
  flex-direction:column;
  justify-content:center !important;
  align-items:center !important;
  gap:6px;
  white-space:normal !important;
  text-align:center;
}

.btn-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.btn-row span:last-child{
  font-size:inherit;
  line-height:1;
}

.btn-sub{
  display:block;
  font-size:15px !important;
  line-height:1;
  letter-spacing:2.2px;
  color:#fff;
  text-transform:uppercase;
}

.app-icon,
.card-icon{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:23px;
  height:26px;
  border:3px solid currentColor;
  border-radius:2px;
}

.app-icon::before,
.card-icon::before{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:6px;
  height:3px;
  background:currentColor;
  box-shadow:0 6px 0 currentColor;
}

.app-icon::after,
.card-icon::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:1px;
  width:13px;
  height:4px;
  background:currentColor;
  transform:rotate(-42deg);
  border-radius:2px;
}

.btn:focus-visible,
.credit-cta:focus-visible,
.program-card:focus-visible{
  outline:3px solid var(--gold-2);
  outline-offset:4px;
}

/* =========================
   Program cards
   ========================= */

.programs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:13px;
  padding:14px 20px 13px;
  background:#fff;
  border-top:4px solid #fff;
  border-bottom:4px solid #fff;
}

.program-card{
  position:relative;
  display:block;
  flex:0 0 calc((100% - 39px) / 4);
  max-width:calc((100% - 39px) / 4);
  min-height:230px;
  overflow:hidden;
  border-radius:9px;
  border:2px solid #f6f6f6;
  background:#111;
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.program-card img{
  width:100%;
  min-height:230px;
  height:100%;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.06);
  transition:transform .28s ease, filter .28s ease;
}

.program-card::after{
  content:"";
  position:absolute;
  inset:43% 0 0;
  z-index:1;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 36%,#000 80%);
}

.program-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,181,44,.95);
  box-shadow:
    0 18px 30px rgba(0,0,0,.40),
    0 0 20px rgba(216,181,44,.18),
    inset 0 0 0 1px rgba(255,255,255,.28);
}

.program-card:hover img{
  transform:scale(1.04);
  filter:saturate(1.08) contrast(1.08) brightness(1.03);
}

.program-card:hover .program-icon{
  transform:translateX(-50%) translateY(-4px);
  box-shadow:
    0 12px 22px rgba(0,0,0,.62),
    0 0 22px rgba(216,181,44,.52);
}

.program-icon{
  position:absolute;
  left:50%;
  bottom:69px;
  z-index:2;
  transform:translateX(-50%);
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#ffd86c,#b88322);
  border:4px solid rgba(255,255,255,.65);
  color:#fff;
  font-size:24px;
  font-weight:900;
  box-shadow:
    0 8px 18px rgba(0,0,0,.62),
    0 0 20px rgba(216,181,44,.35);
  transition:transform .22s ease, box-shadow .22s ease;
}

.program-card h2{
  position:absolute;
  left:8px;
  right:8px;
  bottom:13px;
  z-index:2;
  margin:0;
  font-family:Arial Black, Arial, sans-serif;
  text-align:center;
  text-transform:uppercase;
  font-size:15.5px;
  line-height:1.05;
  text-shadow:0 4px 12px #000,0 0 1px #000;
}

/* =========================
   Benefit strip
   ========================= */

.benefit-strip{
  max-width:var(--max);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:9px 12px;
  background:#030303;
  border-bottom:1px solid rgba(216,181,44,.35);
}

.benefit-strip div{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 12px;
  border-right:1px solid rgba(216,181,44,.45);
  color:#fff;
  font-family:Arial Black, Arial, sans-serif;
  font-size:12px;
  line-height:1.1;
  text-transform:uppercase;
}

.benefit-strip div:last-child{ border-right:0; }

.benefit-strip span{
  color:var(--gold);
  font-size:26px;
  line-height:1;
}

/* =========================
   Main CTA panel
   ========================= */

.cta-panel{
  position:relative;
  display:grid;
  grid-template-columns:120px 1fr 120px;
  align-items:center;
  text-align:center;
  margin-top:0;
  padding:18px clamp(16px,3vw,28px);
  color:#000;
  background:#fff;
  border:4px solid var(--gold);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
}

.cta-panel h2{
  margin:0;
  font-family:Arial Black, Arial, sans-serif;
  font-size:clamp(34px,3.6vw,43px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.5px;
}

.cta-panel p{
  margin:6px 0 11px;
  color:#b79112;
  font-family:Arial Black, Arial, sans-serif;
  font-size:18px;
  text-transform:uppercase;
}

.arrow{
  color:#b99817;
  font-size:50px;
  font-weight:900;
}

/* =========================
   Line of credit band
   ========================= */

.credit-band{
  display:grid;
  grid-template-columns:38% 1fr 34%;
  gap:22px;
  align-items:center;
  margin-top:14px;
  padding:14px 20px;
  border:1px solid rgba(216,181,44,.65);
  border-radius:10px;
  background:linear-gradient(90deg,#050505,#101509,#050505);
}

.credit-image img{
  width:100%;
  max-height:190px;
  object-fit:cover;
  object-position:center center;
  border-radius:6px;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.65),
    0 10px 24px rgba(0,0,0,.4);
}

.credit-copy{
  border-left:1px solid rgba(216,181,44,.55);
  padding-left:24px;
}

.credit-copy h2{
  margin:0 0 10px;
  color:var(--gold);
  font-family:Arial Black, Arial, sans-serif;
  font-size:30px;
  line-height:1.05;
  text-transform:uppercase;
}

.credit-copy ul{
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial Black, Arial, sans-serif;
  font-size:16px;
  line-height:1.22;
}

.credit-copy li{
  position:relative;
  margin:0 0 8px;
  padding-left:28px;
}

.credit-copy li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-2px;
  color:var(--gold);
}

.credit-cta{
  min-height:98px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:16px 18px;
  color:#000;
  text-transform:uppercase;
  text-align:center;
  border-radius:10px;
  border:2px solid #ffe78a;
  background:linear-gradient(180deg,#ffdb66,#c48a1e);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 12px 26px rgba(0,0,0,.52);
  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.credit-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  background:linear-gradient(180deg,#ffe071,#d79e25 72%,#a87312);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    0 16px 30px rgba(0,0,0,.58),
    0 0 22px rgba(216,181,44,.36);
}

.credit-cta strong{
  font-family:Arial Black, Arial, sans-serif;
  font-size:18px;
  line-height:1.1;
}

.credit-cta small{
  font-family:Arial Black, Arial, sans-serif;
  font-size:12px;
}

/* =========================
   Footer
   ========================= */

.contact-footer{
  display:grid;
  grid-template-columns:1.05fr 1.18fr .55fr 1.42fr;
  gap:24px;
  align-items:center;
  padding:22px clamp(18px,3vw,26px) 28px;
  background:#020202;
  border-top:1px solid rgba(216,181,44,.36);
}

.contact-footer > div{
  min-height:118px;
  padding-right:20px;
  border-right:1px solid rgba(216,181,44,.45);
}

.contact-footer > div:last-child{ border-right:0; }

.footer-brand img{
  width:122px;
  margin-bottom:14px;
}

.footer-brand p,
.contact-card p,
.legal p{
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.35;
}

.contact-card h2{
  margin:0 0 6px;
  color:var(--gold);
  font-family:Arial Black, Arial, sans-serif;
  font-size:23px;
}

.contact-links a{
  color:var(--gold-2);
  font-weight:900;
}

.housing{
  display:grid;
  place-items:center;
}

.housing img{ width:84px; }

.legal strong{ font-weight:900; }

/* =========================
   Responsive
   ========================= */

@media (max-width:1050px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-bottom:0;
    gap:0;
  }

  .hero::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.74) 40%,
        rgba(0,0,0,.10) 65%,
        rgba(0,0,0,.70) 100%
      );
  }

  .hero-copy{ align-self:auto; }

  .hero-actions{
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .hero-actions .btn{
    max-width:none;
    width:100%;
    justify-content:center;
  }

  .hero-media{
    min-height:410px;
    margin-left:0;
    margin-right:0;
  }

  .hero-media::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 45%,
        rgba(0,0,0,.56) 100%
      );
  }

  .hero-media img{
    object-position:center center;
    filter:saturate(1.1) contrast(1.1) brightness(1.05);
    mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
  }

  .program-card{
    flex-basis:calc((100% - 26px) / 3);
    max-width:calc((100% - 26px) / 3);
  }

  .credit-band{ grid-template-columns:1fr 1fr; }

  .credit-cta{ grid-column:1/-1; }

  .contact-footer{ grid-template-columns:1fr 1fr; }

  .contact-footer > div:nth-child(2){ border-right:0; }
}

@media (max-width:720px){
  .topbar{ min-height:66px; }

  .brand img{ width:108px; }

  .call-top b{ font-size:18px; }

  .hero{ padding:19px 15px 0; }

  .hero h1{
    font-size:42px;
    letter-spacing:-.5px;
  }

  .loan-list{ grid-template-columns:1fr; }

  .hero-actions{ grid-template-columns:1fr; }

  .hero-actions .btn{
    min-height:80px;
    padding:12px 18px;
    font-size:19px;
  }

  .btn-sub{ font-size:14px !important; }

  .hero-media{ min-height:340px; }

  .hero-media img{
    object-position:center center;
    filter:saturate(1.08) contrast(1.08) brightness(1.03);
  }

  .programs{
    padding:10px;
  }

  .program-card{
    flex-basis:calc((100% - 13px) / 2);
    max-width:calc((100% - 13px) / 2);
  }

  .program-card,
  .program-card img{
    min-height:205px;
  }

  .benefit-strip{ grid-template-columns:1fr; }

  .benefit-strip div{
    border-right:0;
    border-bottom:1px solid rgba(216,181,44,.35);
    justify-content:flex-start;
  }

  .benefit-strip div:last-child{ border-bottom:0; }

  .cta-panel{
    grid-template-columns:1fr;
    padding:20px 14px;
  }

  .arrow{ display:none; }

  .cta-panel h2{ font-size:30px; }

  .cta-panel p{ font-size:16px; }

  .cta-panel .btn-large{ font-size:21px; }

  .credit-band{
    grid-template-columns:1fr;
    padding:16px;
  }

  .credit-image img{ max-height:none; }

  .credit-copy{
    border-left:0;
    padding-left:0;
  }

  .credit-cta{ min-height:90px; }

  .contact-footer{ grid-template-columns:1fr; }

  .contact-footer > div{
    border-right:0;
    border-bottom:1px solid rgba(216,181,44,.35);
    min-height:0;
    padding-right:0;
    padding-bottom:17px;
  }

  .contact-footer > div:last-child{ border-bottom:0; }

  .housing{ place-items:start; }
}

@media (max-width:480px){
  .call-top{ gap:8px; }

  .call-top strong{ display:none; }

  .call-top .call-icon{
    width:36px;
    height:36px;
    font-size:19px;
  }

  .hero-actions .btn{ white-space:normal; }

  .btn-row{
    gap:10px;
  }
}

@media (max-width:420px){
  .program-card{
    flex-basis:100%;
    max-width:100%;
  }

  .hero h1{ font-size:38px; }

  .btn-large{
    font-size:20px;
    padding:15px 18px;
  }
}