/* Ahmad Hadi — Mortgage Agent (Cornerstone-inspired blue/yellow accents)
   Clean, light layout inspired by common mortgage brokerage templates.
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --text:#0b1220;
  --muted:#51607a;
  --line:rgba(12, 25, 51, .12);
  --shadow: 0 10px 30px rgba(12, 25, 51, .10);

  /* Brand accents */
  --blue:#0b2a5a;
  --blue-2:#0f3c7d;
  --yellow:#f4c10f;
  --yellow-2:#e5b700;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{color:inherit; text-decoration:none}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}

/* Top utility bar */
.utility{
  background: var(--blue);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.4;
}
.utility .container{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding:10px 0;
}
.utility a{color:rgba(255,255,255,.92); text-decoration:underline}

/* Header */
header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{height:40px; width:auto; display:block}
.brand .title{line-height:1.15}
.brand .title .name{font-weight:900; letter-spacing:.2px}
.brand .title .sub{font-size:12px; color:var(--muted)}

nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
nav a{
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
}
nav a:hover{background: rgba(11,42,90,.06); color:var(--blue)}
nav a.active{
  background: rgba(244,193,15,.22);
  color: var(--blue);
  border: 1px solid rgba(244,193,15,.45);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(11,42,90,.18);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 6px 16px rgba(11,42,90,.10);
  font-weight: 700;
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  border-color: rgba(244,193,15,.65);
  color: #0b1220;
}
.btn.ghost{
  background: rgba(11,42,90,.05);
  border-color: rgba(11,42,90,.12);
}

/* Hero */
.hero{
  padding: 36px 0 22px;
  background:
    radial-gradient(700px 260px at 12% -10%, rgba(244,193,15,.22), transparent 60%),
    radial-gradient(780px 280px at 95% 0%, rgba(15,60,125,.16), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
}
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.hero-card{padding: 22px}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size:12px; color: var(--blue);
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,42,90,.18);
  background: rgba(11,42,90,.04);
}
h1{margin: 14px 0 10px; font-size: 42px; line-height: 1.06; letter-spacing: -.2px}
.lead{color: var(--muted); font-size: 16px; line-height: 1.65; margin:0 0 14px}
.actions{display:flex; gap: 12px; flex-wrap:wrap; margin-top: 10px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,42,90,.14);
  background: rgba(11,42,90,.03);
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}
.hero-side{padding: 16px}
.hero-side img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* Sections */
.section{padding: 22px 0}
.section-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin: 6px 0 12px;
}
.section-title h2{margin:0; font-size: 28px; color: var(--blue)}
.section-title p{margin:0; color: var(--muted)}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
.tile{padding: 16px}
.tile h3{margin: 0 0 8px; font-size: 16px; color: var(--blue)}
.tile p{margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px}
.tile .mini-cta{margin-top: 12px}
.tile .mini-cta a{font-size: 13px; text-decoration: underline; color: var(--blue-2)}

/* Content card */
.page-title{padding: 22px 0 10px}
.page-title h2{margin: 0; font-size: 34px; color: var(--blue)}
.page-title p{margin: 10px 0 0; color: var(--muted); line-height: 1.6}
.content-card{padding: 18px}

/* Forms */
.form{display:grid; gap: 12px}
label{font-size: 13px; color: var(--muted); font-weight: 700}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(12,25,51,.18);
  background: #fff;
  color: var(--text);
  outline: none;
}
textarea{min-height: 140px; resize: vertical}
small.muted{color: var(--muted)}

/* Footer */
footer{
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
  color: var(--muted);
  background: linear-gradient(180deg, #fff, var(--surface-2));
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}
.footer-grid a{color: var(--blue-2); text-decoration: underline}
.disclaimer{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(81,96,122,.95);
}

/* Responsive */
@media (max-width: 920px){
  .utility .container{flex-direction:column; align-items:flex-start}
  .topbar{flex-direction:column; align-items:flex-start}
  .hero-grid{grid-template-columns: 1fr}
  h1{font-size: 36px}
  .grid3{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
}