<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avoid4Closure Atlanta | The Maki Group – Keller Williams Realty</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════
   ROOT TOKENS
═══════════════════════════════════════════ */
:root {
  --ink: #080E1A;
  --ink-2: #111827;
  --ink-3: #1E2D45;
  --gold: #C4962E;
  --gold-2: #D9AD4E;
  --gold-3: #EDD07A;
  --gold-pale: rgba(196,150,46,0.08);
  --cream: #FAF7F2;
  --cream-2: #F2EDE3;
  --white: #FFFFFF;
  --muted: rgba(255,255,255,0.45);
  --muted-2: rgba(255,255,255,0.25);
  --border: rgba(255,255,255,0.07);
  --border-gold: rgba(196,150,46,0.25);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform 0.1s, width 0.25s, height 0.25s, background 0.25s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(196,150,46,0.5);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform 0.12s cubic-bezier(0.22,1,0.36,1),
              width 0.3s, height 0.3s, border-color 0.3s;
}
.cursor-dot.hover { width: 14px; height: 14px; background: var(--gold-3); }
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--gold); }

/* ═══════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════ */
.topbar {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 200;
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.topbar-left {
  display: flex; align-items: center; gap: 20px;
  font-size: 12px; color: rgba(255,255,255,0.4);
  font-weight: 300; letter-spacing: 0.3px;
}
.topbar-left a {
  color: var(--gold-2); text-decoration: none; font-weight: 500;
  letter-spacing: 0.5px; transition: color 0.2s;
}
.topbar-left a:hover { color: var(--gold-3); }
.topbar-phone {
  font-size: 13px; font-weight: 600; color: var(--gold-2);
  text-decoration: none; letter-spacing: 1px;
  transition: color 0.2s;
}
.topbar-phone:hover { color: var(--gold-3); }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.navbar {
  position: sticky; top: 0; z-index: 500;
  padding: 0;
  background: rgba(8,14,26,0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: all 0.4s;
}
.navbar.scrolled {
  background: rgba(8,14,26,0.96);
  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; justify-content: space-between;
  align-items: center; height: 74px;
}
.logo { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.logo-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  color: var(--white); line-height: 1;
  letter-spacing: -0.5px;
}
.logo-main em { color: var(--gold); font-style: normal; }
.logo-sub {
  font-size: 9px; color: rgba(255,255,255,0.3);
  letter-spacing: 2.5px; text-transform: uppercase; font-weight: 400;
}
.nav-links {
  display: flex; list-style: none; gap: 2px; align-items: center;
}
.nav-links a {
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55);
  text-decoration: none; padding: 8px 14px; border-radius: var(--r-sm);
  transition: all 0.25s; letter-spacing: 0.2px; cursor: none;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-cta {
  background: var(--gold) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  margin-left: 10px;
  border-radius: var(--r-md) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s !important;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s;
}
.nav-cta:hover::before { transform: translateX(100%); }
.nav-cta:hover {
  background: var(--gold-2) !important;
  box-shadow: 0 6px 24px rgba(196,150,46,0.4);
  transform: translateY(-1px);
}
.hamburger {
  display: none; flex-direction: column;
  gap: 5px; cursor: none; padding: 4px;
}
.hamburger span {
  width: 22px; height: 1.5px;
  background: var(--white); border-radius: 2px;
  transition: all 0.3s; display: block;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background: var(--ink);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}

/* Animated blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(196,150,46,0.12), transparent 70%);
  top: -200px; right: -150px;
  animation: blobFloat1 12s ease-in-out infinite;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,45,69,0.8), transparent 70%);
  bottom: -100px; left: -100px;
  animation: blobFloat2 15s ease-in-out infinite;
}
.blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(196,150,46,0.07), transparent 70%);
  top: 50%; left: 40%;
  animation: blobFloat3 10s ease-in-out infinite;
}
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(-40px,30px) scale(1.05); }
  66%       { transform: translate(30px,-20px) scale(0.95); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%       { transform: translate(50px,-30px) scale(1.08); }
  70%       { transform: translate(-20px,40px) scale(0.97); }
}
@keyframes blobFloat3 {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%       { transform: translate(-50%,-50%) scale(1.2); opacity: 0.5; }
}

/* Floating particles */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--gold);
  border-radius: 50%;
  animation: particleRise linear infinite;
  opacity: 0;
}
@keyframes particleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

.hero-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 120px 48px 80px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px; align-items: center;
  position: relative; z-index: 1;
  width: 100%;
}

/* Eyebrow */
.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px var(--gold); }
  50% { box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(196,150,46,0.3); }
}
.hero-tag-text {
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-2);
}

/* Hero headline */
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 6.5vw, 90px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 28px;
  overflow: hidden;
}
.h1-line {
  display: block; overflow: hidden;
  opacity: 0; transform: translateY(100%);
  animation: lineReveal 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}
.h1-line:nth-child(1) { animation-delay: 0.35s; }
.h1-line:nth-child(2) { animation-delay: 0.5s; color: var(--gold); font-style: italic; }
.h1-line:nth-child(3) { animation-delay: 0.65s; font-weight: 600; }
@keyframes lineReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-desc {
  font-size: 16px; line-height: 1.85;
  color: rgba(255,255,255,0.5);
  max-width: 520px; margin-bottom: 44px;
  font-weight: 300;
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.85s forwards;
}

/* Buttons */
.hero-btns {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 1s forwards;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 15px 30px; border-radius: var(--r-md);
  cursor: none; border: none; text-decoration: none;
  position: relative; overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  letter-spacing: 0.3px;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
  transform: translateX(-150%);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.btn-primary:hover { background: var(--gold-2); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(196,150,46,0.35); }
.btn-primary:hover::after { transform: translateX(150%); }
.btn-secondary {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-secondary:hover {
  border-color: rgba(196,150,46,0.5);
  color: var(--white);
  background: rgba(196,150,46,0.06);
  transform: translateY(-3px);
}
.btn-arrow {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  font-size: 16px; line-height: 1;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Stats */
.hero-stats {
  display: flex; gap: 40px;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 1.15s forwards;
}
.stat { }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px; font-weight: 500;
  color: var(--gold); line-height: 1;
  letter-spacing: -1px;
}
.stat-label {
  font-size: 11px; color: rgba(255,255,255,0.3);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 6px; font-weight: 300;
}

/* ── HERO CARD ── */
.hero-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: 38px;
  backdrop-filter: blur(24px);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(40px);
  animation: slideLeft 1s cubic-bezier(0.22,1,0.36,1) 0.6s forwards;
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-card-shine {
  position: absolute; inset: 0; border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.hero-card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(196,150,46,0.12);
  border: 1px solid rgba(196,150,46,0.2);
  color: var(--gold-2); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 30px; margin-bottom: 18px;
}
.hero-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 400;
  color: var(--white); margin-bottom: 4px; letter-spacing: -0.5px;
}
.hero-card p {
  font-size: 13px; color: rgba(255,255,255,0.35);
  margin-bottom: 26px; font-weight: 300;
}
.card-field { margin-bottom: 12px; position: relative; }
.card-field input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 13px 16px 13px 42px;
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 300;
  outline: none; transition: all 0.3s;
}
.card-field input::placeholder { color: rgba(255,255,255,0.22); }
.card-field input:focus {
  border-color: rgba(196,150,46,0.5);
  background: rgba(196,150,46,0.04);
  box-shadow: 0 0 0 3px rgba(196,150,46,0.08);
}
.card-field-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; pointer-events: none;
}
.btn-card-submit {
  width: 100%; margin-top: 6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 15px; border: none; border-radius: var(--r-md);
  cursor: none; transition: all 0.35s; letter-spacing: 0.3px;
  position: relative; overflow: hidden;
}
.btn-card-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
  transform: translateX(-150%); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.btn-card-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(196,150,46,0.4); }
.btn-card-submit:hover::after { transform: translateX(150%); }
.card-note {
  text-align: center; font-size: 11px;
  color: rgba(255,255,255,0.2); margin-top: 12px;
  letter-spacing: 0.3px; font-weight: 300;
}

/* ═══════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════ */
.trust-bar {
  background: var(--gold);
  padding: 16px 0; overflow: hidden;
  position: relative;
}
.trust-marquee {
  display: flex; gap: 0;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.trust-marquee:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 40px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.3px; white-space: nowrap; flex-shrink: 0;
}
.trust-item-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(8,14,26,0.3); flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   WHY SECTION
═══════════════════════════════════════════ */
.why-section {
  padding: 120px 0;
  background: var(--ink-2);
  position: relative; overflow: hidden;
}
.why-section::before {
  content: '';
  position: absolute; top: -300px; right: -300px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,150,46,0.06), transparent 65%);
  pointer-events: none;
}
.why-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center;
}
.why-visual { position: relative; }
.why-img {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(145deg, var(--ink-3) 0%, #0a1525 100%);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.why-img-glow {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,150,46,0.15), transparent 70%);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}
.why-img-icon {
  font-size: 90px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 30px rgba(196,150,46,0.3));
  animation: iconFloat 6s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
.why-badge {
  position: absolute; bottom: -22px; right: -22px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  padding: 20px 24px; border-radius: var(--r-lg);
  text-align: center; font-weight: 700;
  box-shadow: 0 20px 50px rgba(196,150,46,0.4);
  transition: transform 0.3s;
}
.why-badge:hover { transform: scale(1.05) rotate(-2deg); }
.why-badge strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 700; line-height: 1;
}
.why-badge span { font-size: 11px; opacity: 0.7; display: block; margin-top: 4px; }

/* Floating tags */
.float-tag {
  position: absolute;
  background: rgba(8,14,26,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 12px; font-weight: 500; color: var(--white);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 8px;
}
.float-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.float-tag-1 { top: 20px; left: -20px; animation: floatTag 5s ease-in-out infinite; }
.float-tag-2 { top: 50%; right: -30px; animation: floatTag 5s ease-in-out 1.5s infinite; }
@keyframes floatTag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.section-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.eyebrow-line {
  width: 36px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.eyebrow-text {
  font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 400; color: var(--white);
  line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px;
}
.section-desc {
  font-size: 16px; color: rgba(255,255,255,0.45);
  line-height: 1.85; font-weight: 300; max-width: 520px;
}

.features {
  display: flex; flex-direction: column;
  gap: 24px; margin-top: 44px;
}
.feat {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px; border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
}
.feat::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r-lg);
  background: rgba(196,150,46,0.04);
  opacity: 0; transition: opacity 0.35s;
}
.feat:hover { border-color: rgba(196,150,46,0.2); transform: translateX(6px); }
.feat:hover::before { opacity: 1; }
.feat-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: rgba(196,150,46,0.1);
  border: 1px solid rgba(196,150,46,0.2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: all 0.35s;
}
.feat:hover .feat-icon {
  background: rgba(196,150,46,0.2);
  transform: scale(1.1) rotate(5deg);
}
.feat-text h4 {
  font-size: 16px; font-weight: 600; color: var(--white);
  margin-bottom: 5px; position: relative; z-index: 1;
}
.feat-text p {
  font-size: 13.5px; color: rgba(255,255,255,0.4);
  line-height: 1.7; font-weight: 300; position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════
   OPTIONS SECTION
═══════════════════════════════════════════ */
.options-section {
  padding: 120px 0;
  background: var(--ink);
  position: relative; overflow: hidden;
}
.options-section::after {
  content: '';
  position: absolute; bottom: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,150,46,0.05), transparent 65%);
  pointer-events: none;
}
.sec-header { text-align: center; margin-bottom: 64px; }
.sec-header .section-eyebrow { justify-content: center; }
.sec-header .section-desc { margin: 0 auto; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
.opt-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden; cursor: none;
}
.opt-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg, rgba(196,150,46,0.1), transparent);
  transition: height 0.4s cubic-bezier(0.22,1,0.36,1);
}
.opt-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.opt-card:hover { transform: translateY(-10px); box-shadow: 0 32px 80px rgba(0,0,0,0.4); border-color: rgba(196,150,46,0.2); }
.opt-card:hover::before { height: 100%; }
.opt-card:hover::after { transform: scaleX(1); }

.card-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px; font-weight: 300;
  color: rgba(196,150,46,0.08);
  line-height: 1; letter-spacing: -3px;
  margin-bottom: 20px;
  transition: color 0.4s;
}
.opt-card:hover .card-num { color: rgba(196,150,46,0.15); }
.card-icon-wrap {
  width: 52px; height: 52px;
  background: rgba(196,150,46,0.08);
  border: 1px solid rgba(196,150,46,0.15);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 22px;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.opt-card:hover .card-icon-wrap {
  background: rgba(196,150,46,0.18);
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 24px rgba(196,150,46,0.2);
}
.opt-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  color: var(--white); margin-bottom: 14px; letter-spacing: -0.5px;
}
.opt-card p {
  font-size: 14px; color: rgba(255,255,255,0.4);
  line-height: 1.8; font-weight: 300; margin-bottom: 28px;
}
.card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gold);
  cursor: none; transition: gap 0.3s; letter-spacing: 0.3px;
  text-decoration: none;
}
.card-cta-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(196,150,46,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
}
.opt-card:hover .card-cta { gap: 12px; }
.opt-card:hover .card-cta-arrow {
  background: var(--gold); border-color: var(--gold);
  color: var(--ink); transform: rotate(45deg);
}

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.steps-section {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  position: relative; overflow: hidden;
}
.steps-section::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(196,150,46,0.2), transparent);
  pointer-events: none;
}
.steps-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
.steps-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 32px; margin-top: 64px;
  position: relative;
}
.step-connector {
  position: absolute; top: 44px;
  left: calc(12.5% + 20px); right: calc(12.5% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(196,150,46,0.3), var(--gold));
  opacity: 0.3; pointer-events: none;
}
.step {
  text-align: center; position: relative; z-index: 1;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.step:hover { transform: translateY(-8px); }
.step-circle {
  width: 88px; height: 88px; border-radius: 50%;
  border: 1px solid rgba(196,150,46,0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 500; color: var(--gold);
  background: var(--ink);
  position: relative; transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.step-circle::before {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(196,150,46,0.1);
  transition: all 0.4s;
}
.step:hover .step-circle {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 0 0 8px rgba(196,150,46,0.1), 0 16px 40px rgba(196,150,46,0.3);
}
.step:hover .step-circle::before {
  inset: -12px; border-color: rgba(196,150,46,0.15);
}
.step h4 {
  font-size: 16px; font-weight: 600; color: var(--white);
  margin-bottom: 10px; letter-spacing: -0.1px;
}
.step p {
  font-size: 13.5px; color: rgba(255,255,255,0.35);
  line-height: 1.7; font-weight: 300;
}

/* ═══════════════════════════════════════════
   SOCIAL PROOF / NUMBERS
═══════════════════════════════════════════ */
.proof-section {
  padding: 100px 0;
  background: var(--ink-3);
  position: relative; overflow: hidden;
}
.proof-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,150,46,0.04) 0%, transparent 50%, rgba(196,150,46,0.03) 100%);
}
.proof-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center; position: relative; z-index: 1;
}
.proof-numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.proof-num-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg);
  padding: 30px 24px;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
}
.proof-num-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.proof-num-card:hover { transform: translateY(-6px); border-color: rgba(196,150,46,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.proof-num-card:hover::before { transform: scaleX(1); }
.proof-big-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 500;
  color: var(--gold); line-height: 1;
  letter-spacing: -2px; margin-bottom: 8px;
}
.proof-num-label {
  font-size: 13px; color: rgba(255,255,255,0.4);
  font-weight: 300; line-height: 1.5;
}

/* ═══════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════ */
.cta-band {
  padding: 100px 0;
  background: linear-gradient(135deg, #0C1420 0%, #111827 100%);
  position: relative; overflow: hidden;
}
.cta-blob-1 {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,150,46,0.12), transparent 65%);
  top: -150px; right: -100px; animation: blobFloat1 14s ease-in-out infinite;
  pointer-events: none;
}
.cta-blob-2 {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,150,46,0.06), transparent 65%);
  bottom: -100px; left: 200px; animation: blobFloat2 12s ease-in-out infinite;
  pointer-events: none;
}
.cta-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 50px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.cta-text { }
.cta-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400; color: var(--white);
  letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px;
}
.cta-text h2 em { color: var(--gold); font-style: italic; }
.cta-text p {
  font-size: 16px; color: rgba(255,255,255,0.4);
  font-weight: 300; max-width: 420px;
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background: #050A12;
  color: rgba(255,255,255,0.45);
  padding-top: 70px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.foot-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 48px 56px;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr;
  gap: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.foot-brand .logo-main { font-size: 28px; color: var(--white); display: block; margin-bottom: 16px; }
.foot-brand p { font-size: 13.5px; line-height: 1.8; font-weight: 300; max-width: 300px; }
.foot-phone {
  display: inline-block; margin-top: 20px;
  color: var(--gold); text-decoration: none;
  font-weight: 600; font-size: 16px; letter-spacing: 0.5px;
  transition: color 0.2s;
}
.foot-phone:hover { color: var(--gold-3); }
.foot-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500;
  color: var(--white); margin-bottom: 20px; letter-spacing: -0.2px;
}
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-links a {
  font-size: 13.5px; color: rgba(255,255,255,0.35);
  text-decoration: none; font-weight: 300;
  transition: all 0.25s; display: inline-flex; align-items: center; gap: 6px;
}
.foot-links a::before {
  content: '→'; font-size: 11px; opacity: 0;
  transform: translateX(-6px); transition: all 0.25s; color: var(--gold);
}
.foot-links a:hover { color: var(--gold); }
.foot-links a:hover::before { opacity: 1; transform: translateX(0); }
.foot-bottom {
  max-width: 1280px; margin: 0 auto; padding: 20px 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; flex-wrap: wrap; gap: 10px; font-weight: 300;
}
.foot-disclaimer {
  max-width: 1280px; margin: 0 auto; padding: 0 48px 22px;
  font-size: 11px; color: rgba(255,255,255,0.15);
  line-height: 1.7; border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 18px; font-weight: 300;
}

/* ═══════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .why-grid, .proof-inner { grid-template-columns: 1fr; gap: 60px; }
  .cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); }
  .step-connector { display: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 74px; left: 0; right: 0;
    background: rgba(8,14,26,0.98); backdrop-filter: blur(20px);
    padding: 20px; border-top: 1px solid var(--border);
    z-index: 498;
  }
  .cards-grid, .steps-grid, .proof-numbers { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .cta-inner { flex-direction: column; text-align: center; }
  .topbar-inner { flex-direction: column; gap: 6px; }
  .hero-inner, .why-inner, .steps-inner, .options-section, .proof-inner, .cta-inner, .foot-grid, .foot-bottom, .foot-disclaimer { padding-left: 24px; padding-right: 24px; }
  .nav-inner, .topbar-inner { padding-left: 24px; padding-right: 24px; }
  .cards-grid { padding: 0 24px; }
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}
</style>
</head>
<body>

<!-- CUSTOM CURSOR -->
<div class="cursor-dot" id="cursorDot"></div>
<div class="cursor-ring" id="cursorRing"></div>

<!-- TOP BAR -->
<div class="topbar">
  <div class="topbar-inner">
    <div class="topbar-left">
      <span>The Maki Group — Keller Williams Realty</span>
      <a href="#contact-form">Free Consultation →</a>
    </div>
    <a href="tel:4042025668" class="topbar-phone">📞 404-202-5668</a>
  </div>
</div>

<!-- NAVBAR -->
<nav class="navbar" id="mainNav">
  <div class="nav-inner">
    <a class="logo" href="#">
      <span class="logo-main">Avoid<em>4</em>Closure</span>
      <span class="logo-sub">Atlanta, Georgia</span>
    </a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#">Home</a></li>
      <li><a href="avoid-foreclosure.html">Avoid Foreclosure</a></li>
      <li><a href="short-sale.html">Short Sale</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="getting-started.html">Getting Started</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html" class="nav-cta">Contact Us</a></li>
    </ul>
    <div class="hamburger" onclick="toggleMenu()">
      <span></span><span></span><span></span>
    </div>
  </div>
</nav>

<!-- ══ HERO ══ -->
<section class="hero">
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>
  <div class="blob blob-3"></div>
  <div class="particles" id="particles"></div>

  <div class="hero-inner">
    <div class="hero-content">
      <div class="hero-tag">
        <div class="hero-tag-dot"></div>
        <span class="hero-tag-text">Gwinnett County · Georgia · Confidential</span>
      </div>

      <h1>
        <span class="h1-line">Facing</span>
        <span class="h1-line">Foreclosure?</span>
        <span class="h1-line">You Have Options.</span>
      </h1>

      <p class="hero-desc">Thousands of Georgia homeowners face foreclosure every day. You don't have to navigate this alone. The Maki Group helps families explore every available alternative — starting with a short sale.</p>

      <div class="hero-btns">
        <button class="btn btn-primary" onclick="document.getElementById('contact-form').scrollIntoView({behavior:'smooth'})">
          Get Free Consultation
          <span class="btn-arrow">→</span>
        </button>
        <button class="btn btn-secondary" onclick="document.getElementById('short-sale').scrollIntoView({behavior:'smooth'})">
          What Is A Short Sale?
        </button>
      </div>

      <div class="hero-stats">
        <div class="stat">
          <div class="stat-num" data-count="100" data-suffix="%">0%</div>
          <div class="stat-label">Confidential</div>
        </div>
        <div class="stat">
          <div class="stat-num">$50K</div>
          <div class="stat-label">Avg. Lender Loss in Foreclosure</div>
        </div>
        <div class="stat">
          <div class="stat-num" data-count="10" data-suffix="+">0+</div>
          <div class="stat-label">Years Serving Georgia</div>
        </div>
      </div>
    </div>

    <div class="hero-card" id="contact-form">
      <div class="hero-card-shine"></div>
      <div class="hero-card-badge">✦ Free Assessment</div>
      <h3>See If You Qualify</h3>
      <p>Short sale qualification — zero obligation</p>
      <form onsubmit="return false;">
        <div class="card-field">
          <div class="card-field-icon">👤</div>
          <input type="text" placeholder="Your Full Name *">
        </div>
        <div class="card-field">
          <div class="card-field-icon">✉️</div>
          <input type="email" placeholder="Email Address *">
        </div>
        <div class="card-field">
          <div class="card-field-icon">📞</div>
          <input type="tel" placeholder="Phone Number *">
        </div>
        <div class="card-field">
          <div class="card-field-icon">📍</div>
          <input type="text" placeholder="Property City *">
        </div>
        <button type="submit" class="btn-card-submit">Check My Qualification →</button>
        <div class="card-note">🔒 All information is 100% confidential</div>
      </form>
    </div>
  </div>
</section>

<!-- TRUST MARQUEE -->
<div class="trust-bar">
  <div class="trust-marquee" id="trustMarquee">
    <span class="trust-item"><div class="trust-item-dot"></div>100% Confidential</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Certified CDPE Experts</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Free No-Obligation Consultation</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Serving All Gwinnett County</span>
    <span class="trust-item"><div class="trust-item-dot"></div>10+ Years of Experience</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Keller Williams Realty</span>
    <span class="trust-item"><div class="trust-item-dot"></div>100% Confidential</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Certified CDPE Experts</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Free No-Obligation Consultation</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Serving All Gwinnett County</span>
    <span class="trust-item"><div class="trust-item-dot"></div>10+ Years of Experience</span>
    <span class="trust-item"><div class="trust-item-dot"></div>Keller Williams Realty</span>
  </div>
</div>

<!-- WHY US -->
<section class="why-section" id="why-us">
  <div class="why-inner">
    <div class="why-grid">
      <div class="why-visual reveal-left">
        <div class="why-img">
          <div class="why-img-glow"></div>
          <div class="why-img-icon">🏡</div>
        </div>
        <div class="why-badge">
          <strong>CDPE</strong>
          <span>Certified Distressed Property Expert</span>
        </div>
        <div class="float-tag float-tag-1">
          <div class="float-tag-dot"></div>
          100% Confidential
        </div>
        <div class="float-tag float-tag-2">
          <div class="float-tag-dot"></div>
          Georgia Specialists
        </div>
      </div>
      <div class="reveal-right">
        <div class="section-eyebrow">
          <div class="eyebrow-line"></div>
          <span class="eyebrow-text">Why Choose Us</span>
        </div>
        <h2 class="section-title">We Understand<br><em style="color:var(--gold);font-style:italic;">What You're Going Through</em></h2>
        <p class="section-desc">Facing foreclosure can feel overwhelming and isolating. The Maki Group brings compassion, expertise, and deep local Georgia market knowledge to help you find the best path forward.</p>
        <div class="features">
          <div class="feat">
            <div class="feat-icon">🛡️</div>
            <div class="feat-text">
              <h4>Strict Confidentiality</h4>
              <p>Everything we discuss is kept completely private. We will never share your information without your explicit written consent.</p>
            </div>
          </div>
          <div class="feat">
            <div class="feat-icon">⚖️</div>
            <div class="feat-text">
              <h4>Certified Distressed Property Experts</h4>
              <p>As CDPE-certified professionals, we're uniquely trained to navigate complex short sale and foreclosure situations in Georgia.</p>
            </div>
          </div>
          <div class="feat">
            <div class="feat-icon">🗺️</div>
            <div class="feat-text">
              <h4>Local Georgia Specialists</h4>
              <p>Serving Gwinnett County, Duluth, Norcross, Johns Creek, Alpharetta, Buford, Suwanee, and surrounding communities.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- YOUR OPTIONS -->
<section class="options-section" id="short-sale">
  <div class="sec-header container" style="max-width:1280px;margin:0 auto;padding:0 48px;">
    <div class="section-eyebrow reveal" style="justify-content:center;">
      <div class="eyebrow-line"></div>
      <span class="eyebrow-text">Your Options</span>
      <div class="eyebrow-line"></div>
    </div>
    <h2 class="section-title reveal reveal-d1">Solutions, Not Just Information</h2>
    <p class="section-desc reveal reveal-d2" style="margin:0 auto;">We walk you through every available option so you can make a fully informed decision about your home and your family's future.</p>
  </div>
  <div class="cards-grid" style="margin-top:60px;">
    <div class="opt-card reveal reveal-d1">
      <div class="card-num">01</div>
      <div class="card-icon-wrap">🚫</div>
      <h3>Avoid Foreclosure</h3>
      <p>Understand the foreclosure process and learn the concrete steps you can take — from contacting your lender to exploring legal alternatives before it's too late.</p>
      <a class="card-cta" href="avoid-foreclosure.html">
        Learn How
        <div class="card-cta-arrow">→</div>
      </a>
    </div>
    <div class="opt-card reveal reveal-d2">
      <div class="card-num">02</div>
      <div class="card-icon-wrap">📋</div>
      <h3>What Is A Short Sale?</h3>
      <p>A short sale allows you to sell your home for less than you owe on the mortgage, with lender approval — causing far less credit damage than foreclosure.</p>
      <a class="card-cta" href="short-sale.html">
        Explore Short Sales
        <div class="card-cta-arrow">→</div>
      </a>
    </div>
    <div class="opt-card reveal reveal-d3">
      <div class="card-num">03</div>
      <div class="card-icon-wrap">✅</div>
      <h3>Do You Qualify?</h3>
      <p>Not every homeowner qualifies for a short sale. Fill out our simple form and our specialists will determine your eligibility and best options.</p>
      <a class="card-cta" href="getting-started.html">
        Check Eligibility
        <div class="card-cta-arrow">→</div>
      </a>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="steps-section">
  <div class="steps-inner">
    <div class="sec-header">
      <div class="section-eyebrow reveal" style="justify-content:center;">
        <div class="eyebrow-line"></div>
        <span class="eyebrow-text">Simple Process</span>
        <div class="eyebrow-line"></div>
      </div>
      <h2 class="section-title reveal reveal-d1">Getting Started Is Easy</h2>
    </div>
    <div class="steps-grid">
      <div class="step-connector"></div>
      <div class="step reveal reveal-d1">
        <div class="step-circle">1</div>
        <h4>Contact Us</h4>
        <p>Reach out by phone, email, or our secure online form. Everything is strictly confidential.</p>
      </div>
      <div class="step reveal reveal-d2">
        <div class="step-circle">2</div>
        <h4>Free Consultation</h4>
        <p>We review your situation, discuss your options, and explain what a short sale means for you.</p>
      </div>
      <div class="step reveal reveal-d3">
        <div class="step-circle">3</div>
        <h4>Qualify & Plan</h4>
        <p>We determine if you qualify and create a customized action plan for your situation.</p>
      </div>
      <div class="step reveal reveal-d4">
        <div class="step-circle">4</div>
        <h4>New Beginning</h4>
        <p>Move forward with significantly less credit damage and a brighter financial future.</p>
      </div>
    </div>
  </div>
</section>

<!-- PROOF NUMBERS -->
<section class="proof-section">
  <div class="proof-inner">
    <div class="reveal-left">
      <div class="section-eyebrow">
        <div class="eyebrow-line"></div>
        <span class="eyebrow-text">By The Numbers</span>
      </div>
      <h2 class="section-title">The Facts About<br><em style="color:var(--gold);font-style:italic;">Foreclosure vs. Short Sale</em></h2>
      <p class="section-desc">The difference between a foreclosure and a short sale is not just financial — it's life-changing. Our clients move forward with dignity and a brighter future.</p>
      <div style="margin-top:32px;">
        <button class="btn btn-primary" onclick="window.location.href='short-sale.html'">
          See Full Comparison <span class="btn-arrow">→</span>
        </button>
      </div>
    </div>
    <div class="proof-numbers reveal-right">
      <div class="proof-num-card">
        <div class="proof-big-num" data-count="300" data-prefix="" data-suffix="pts">0pts</div>
        <div class="proof-num-label">Credit score damage from foreclosure</div>
      </div>
      <div class="proof-num-card">
        <div class="proof-big-num" data-count="50" data-prefix="" data-suffix="pts">0pts</div>
        <div class="proof-num-label">Credit score damage from short sale</div>
      </div>
      <div class="proof-num-card">
        <div class="proof-big-num" data-count="10" data-prefix="" data-suffix=" yrs">0 yrs</div>
        <div class="proof-num-label">Foreclosure stays on credit report</div>
      </div>
      <div class="proof-num-card">
        <div class="proof-big-num" data-count="2" data-prefix="" data-suffix=" yrs">0 yrs</div>
        <div class="proof-num-label">Typical wait to buy again after short sale</div>
      </div>
    </div>
  </div>
</section>

<!-- CTA BAND -->
<div class="cta-band">
  <div class="cta-blob-1"></div>
  <div class="cta-blob-2"></div>
  <div class="cta-inner">
    <div class="cta-text reveal-left">
      <h2>Ready to Explore<br><em>Your Options?</em></h2>
      <p>All communication is strictly confidential. No obligation, no judgment — just real help when you need it most.</p>
    </div>
    <div class="cta-actions reveal-right">
      <button class="btn btn-primary" onclick="document.getElementById('contact-form').scrollIntoView({behavior:'smooth'})">
        Get Free Consultation <span class="btn-arrow">→</span>
      </button>
      <a href="tel:4042025668" class="btn btn-secondary">📞 404-202-5668</a>
    </div>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="foot-grid">
    <div class="foot-brand">
      <span class="logo-main">Avoid<em style="color:var(--gold);font-style:normal;">4</em>Closure Atlanta</span>
      <p>Specializing in helping Georgia homeowners use a short sale to avoid home foreclosure. Brought to you by The Maki Group — Keller Williams Realty.</p>
      <a href="tel:4042025668" class="foot-phone">📞 404-202-5668</a>
    </div>
    <div>
      <div class="foot-heading">Quick Links</div>
      <ul class="foot-links">
        <li><a href="#">Home</a></li>
        <li><a href="avoid-foreclosure.html">Avoid Foreclosure</a></li>
        <li><a href="short-sale.html">What Is A Short Sale</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="getting-started.html">Getting Started</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div>
      <div class="foot-heading">Contact Info</div>
      <p style="font-size:13.5px;line-height:1.85;font-weight:300;">
        The Maki Group<br>
        Keller Williams Realty<br>
        1960 Satellite Blvd. Ste. 1100<br>
        Duluth, GA 30097<br><br>
        <a href="tel:4042025668" style="color:var(--gold);text-decoration:none;">404-202-5668</a><br>
        <a href="mailto:Info@Avoid4closureAtlanta.com" style="color:var(--gold);text-decoration:none;font-size:12.5px;">Info@Avoid4closureAtlanta.com</a>
      </p>
    </div>
  </div>
  <div class="foot-disclaimer">
    <strong>Disclaimer:</strong> The information provided on this website should not be construed as legal advice. The content is intended to provide general information about the short sale and foreclosure processes, and should not be acted upon without the counsel of a qualified REALTOR®, attorney, and tax expert. Copyright © 2009–Present. All Rights Reserved.
  </div>
  <div class="foot-bottom">
    <span>© 2025 Avoid4Closure Atlanta — The Maki Group, Keller Williams Realty. All Rights Reserved.</span>
    <span style="color:rgba(255,255,255,0.15);">Privacy Policy · Terms of Use</span>
  </div>
</footer>

<script>
/* ─── CUSTOM CURSOR ─── */
const dot = document.getElementById('cursorDot');
const ring = document.getElementById('cursorRing');
let mx = 0, my = 0, rx = 0, ry = 0;

document.addEventListener('mousemove', e => {
  mx = e.clientX; my = e.clientY;
  dot.style.left = mx + 'px'; dot.style.top = my + 'px';
});

(function animate() {
  rx += (mx - rx) * 0.12;
  ry += (my - ry) * 0.12;
  ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
  requestAnimationFrame(animate);
})();

document.querySelectorAll('a, button, .opt-card, .feat, .step, .proof-num-card').forEach(el => {
  el.addEventListener('mouseenter', () => { dot.classList.add('hover'); ring.classList.add('hover'); });
  el.addEventListener('mouseleave', () => { dot.classList.remove('hover'); ring.classList.remove('hover'); });
});

/* ─── NAVBAR SCROLL ─── */
window.addEventListener('scroll', () => {
  document.getElementById('mainNav').classList.toggle('scrolled', window.scrollY > 30);
}, { passive: true });

/* ─── MOBILE MENU ─── */
function toggleMenu() {
  document.getElementById('navLinks').classList.toggle('open');
}

/* ─── PARTICLES ─── */
(function createParticles() {
  const container = document.getElementById('particles');
  for (let i = 0; i < 30; i++) {
    const p = document.createElement('div');
    p.className = 'particle';
    p.style.cssText = `
      left: ${Math.random() * 100}%;
      bottom: -10px;
      animation-duration: ${6 + Math.random() * 10}s;
      animation-delay: ${Math.random() * 8}s;
      opacity: ${0.3 + Math.random() * 0.5};
      width: ${1 + Math.random() * 2}px;
      height: ${1 + Math.random() * 2}px;
    `;
    container.appendChild(p);
  }
})();

/* ─── SCROLL REVEAL ─── */
function initReveal() {
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
    });
  }, { threshold: 0.08 });
  document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4').forEach(el => obs.observe(el));
}

/* ─── COUNTER ANIMATION ─── */
function animateCounter(el) {
  const target = parseInt(el.dataset.count);
  const suffix = el.dataset.suffix || '';
  const dur = 1800;
  const start = performance.now();
  (function tick(now) {
    const p = Math.min((now - start) / dur, 1);
    const ease = 1 - Math.pow(1 - p, 4);
    el.textContent = Math.round(ease * target) + suffix;
    if (p < 1) requestAnimationFrame(tick);
  })(start);
}

function initCounters() {
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.querySelectorAll('[data-count]').forEach(animateCounter);
        obs.unobserve(e.target);
      }
    });
  }, { threshold: 0.3 });
  document.querySelectorAll('.hero-stats, .proof-numbers').forEach(el => obs.observe(el));
}

/* ─── CARD TILT EFFECT ─── */
function initTilt() {
  document.querySelectorAll('.opt-card').forEach(card => {
    card.addEventListener('mousemove', e => {
      const rect = card.getBoundingClientRect();
      const cx = (e.clientX - rect.left) / rect.width - 0.5;
      const cy = (e.clientY - rect.top) / rect.height - 0.5;
      card.style.transform = `translateY(-10px) rotateX(${-cy * 10}deg) rotateY(${cx * 10}deg)`;
      card.style.transition = 'transform 0.1s';
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = '';
      card.style.transition = 'all 0.4s cubic-bezier(0.22,1,0.36,1)';
    });
  });
}

/* ─── WHY SECTION PARALLAX ─── */
window.addEventListener('scroll', () => {
  const wy = document.querySelector('.why-img');
  if (wy) {
    const r = wy.getBoundingClientRect();
    const p = (window.innerHeight / 2 - r.top - r.height / 2) * 0.04;
    wy.querySelector('.why-img-glow').style.transform = `translate(${p*0.5}px, ${p}px)`;
  }
}, { passive: true });

/* ─── INIT ─── */
document.addEventListener('DOMContentLoaded', () => {
  initReveal();
  initCounters();
  initTilt();
});
</script>
</body>
</html>