/* =====================
   Get Right Housing Styles
   Vibrant + Action Oriented
======================== */
:root{
  --navy:#0b3d6e;
  --gold:#d4a017;
  --teal:#00bfa6;
  --coral:#ff6b6b;
  --ink:#1f2937;
  --cream:#fffaf2;
  --bg:#f7f9fc;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--ink);
}

.container{width:92%;max-width:1200px;margin:0 auto}

/* Header */
header{
  background:linear-gradient(90deg,var(--navy), #092a48);
  color:#fff;
  padding:14px 0;
  position:sticky; top:0; z-index:10;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:48px;height:48px;object-fit:contain}
header h1{font-size:1.4rem; letter-spacing:.3px}

nav ul{display:flex; list-style:none; gap:18px; flex-wrap:wrap}
nav a{color:#fff; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:10px; transition:transform .15s ease, background .2s ease}
nav a:hover{background:rgba(255,255,255,.12); transform:translateY(-1px)}

/* Hero */
.hero{
  background: radial-gradient(1200px 500px at 10% 0%, rgba(212,160,23,.25), transparent),
              radial-gradient(1200px 500px at 90% 20%, rgba(0,191,166,.25), transparent),
              linear-gradient(180deg,#ffffff, var(--cream));
  padding:72px 0 84px;
  text-align:center;
}
.hero h2{font-size:2.4rem; color:var(--navy); margin-bottom:12px}
.hero p{font-size:1.15rem; max-width:820px; margin:0 auto 24px}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block; padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:800; letter-spacing:.3px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn.primary{background:var(--teal); color:#002b24; box-shadow:0 10px 20px rgba(0,191,166,.35)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 14px 24px rgba(0,191,166,.45)}
.btn.ghost{border:2px solid var(--navy); color:var(--navy); background:transparent}
.btn.ghost:hover{background:var(--navy); color:#fff}

/* About */
.about{padding:64px 0; background:#fff}
.about h2{color:var(--navy); text-align:center; margin-bottom:14px}
.about p{max-width:900px; margin:0 auto; font-size:1.08rem}

/* Features */
.features{padding:50px 0; background:var(--cream)}
.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:#fff; border-radius:18px; padding:20px; box-shadow:0 6px 18px rgba(0,0,0,.08); border:1px solid #eef2f7}
.feature h3{color:var(--gold); margin-bottom:8px}
.feature p{color:#4b5563}

/* Updates */
.updates{padding:60px 0; background:linear-gradient(90deg, rgba(255,107,107,.12), rgba(0,191,166,.12))}
.updates-inner{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.updates h2{color:var(--navy)}
.updates p{max-width:740px}

/* Map / Location */
.map{padding:60px 0; background:#fff}
.map h2{color:var(--navy); text-align:center; margin-bottom:10px}
.address{text-align:center; margin:6px 0 16px;}

/* Footer */
footer{background:#0f172a; color:#e5e7eb; padding:24px 0; text-align:center}