<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-H41MZR586H"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-H41MZR586H');
  </script>
  <!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '2210714386127504');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2210714386127504&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CharlottePlus | Full-Stack Dev, Lead Generation & Mobile Apps, Since 2012</title>
  <meta name="description" content="Anthony at CharlottePlus, full-stack developer, lead generation expert, and mobile app creator in Charlotte NC. Building websites, apps & revenue since 2012.">

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="manifest" href="/images/site.webmanifest">

  <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:wght@600;700&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<style>
/* =====================================================
   CSS CUSTOM PROPERTIES
===================================================== */
:root {
  --cream:    #FAF3E8;
  --ivory:    #EFE4CC;
  --espresso: #180E07;
  --walnut:   #3A1D0D;
  --amber:    #C07830;
  --rust:     #9C3B20;
  --gold:     #DFA84E;
  --gold-lt:  #EEC87A;
  --muted:    #8A7860;
  --white:    #FFFDF8;
  --dark:     #120A04;
}

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--cream);
  color: var(--espresso);
  overflow-x: hidden;
  line-height: 1.65;
}
img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; transition: color .3s; }
ul   { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }

/* =====================================================
   NAVIGATION
===================================================== */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 5rem;
  transition: background .45s ease, padding .45s ease, box-shadow .45s ease;
}
#nav.scrolled {
  background: rgba(18, 10, 4, .95);
  backdrop-filter: blur(16px);
  padding: 1rem 5rem;
  box-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem; font-weight: 700;
  color: #fff; letter-spacing: .03em;
}
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  background: var(--amber); color: #fff !important;
  padding: .6rem 1.5rem; border-radius: 1px;
}
.nav-cta:hover { background: var(--gold); color: var(--espresso) !important; }

/* =====================================================
   HERO
===================================================== */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; background: var(--dark);
}
.hero-bg {
  position: absolute; inset: -25%;
  will-change: transform;
  background:
    radial-gradient(ellipse 70% 60% at 18% 55%, rgba(192,120,48,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 82% 20%, rgba(156,59,32,.13) 0%, transparent 60%),
    linear-gradient(150deg, #140A03 0%, #1B1008 45%, #0C0603 100%);
}
/* grain */
.hero-bg::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  opacity:.5;
}
/* decorative vertical line */
.hero-bg::after {
  content:''; position:absolute; top:0; right:18%;
  width:1px; height:100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(192,120,48,.35) 40%, rgba(192,120,48,.1) 80%, transparent 100%);
}

.hero-inner {
  position:relative; z-index:2;
  width:100%; max-width:1300px; margin:0 auto; padding:0 5rem;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem;
}

.hero-left {}

.eyebrow {
  display:flex; align-items:center; gap:.85rem; margin-bottom:2rem;
  opacity:0; transform:translateY(18px);
  animation: fadeUp .8s .3s forwards;
}
.eyebrow-dash { width:36px; height:1px; background:var(--amber); }
.eyebrow-txt {
  font-family:'Space Mono',monospace; font-size:.68rem;
  color:var(--amber); letter-spacing:.22em; text-transform:uppercase;
}

.hero-h1 {
  font-family:'Cormorant Garamond',serif;
  font-size: clamp(3.4rem, 6.5vw, 6.8rem);
  font-weight:700; line-height:.97;
  color:#fff; margin-bottom:1.6rem;
  opacity:0; transform:translateY(28px);
  animation: fadeUp .9s .5s forwards;
}
.hero-h1 .line-amber { color:var(--gold); display:block; }
.hero-h1 .line-under {
  position:relative; display:inline-block;
}
.hero-h1 .line-under::after {
  content:''; position:absolute; left:0; bottom:.06em;
  width:100%; height:3px; background:var(--rust);
}

.hero-p {
  font-size:1.08rem; color:rgba(250,240,220,.65);
  max-width:480px; line-height:1.75; margin-bottom:2.8rem;
  opacity:0; transform:translateY(18px);
  animation: fadeUp .9s .7s forwards;
}

.hero-btns {
  display:flex; gap:1.1rem; align-items:center;
  opacity:0; transform:translateY(18px);
  animation: fadeUp .9s .9s forwards;
}
.btn-primary {
  display:inline-block;
  background:var(--amber); color:#fff;
  padding:1rem 2.2rem;
  font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  position:relative; overflow:hidden; transition: all .3s;
}
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .5s;
}
.btn-primary:hover::before { left:100%; }
.btn-primary:hover {
  background:var(--gold); color:var(--espresso);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(192,120,48,.45);
}
.btn-ghost {
  display:flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.72); font-size:.82rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition: all .3s;
}
.btn-ghost::after { content:'→'; transition:transform .3s; }
.btn-ghost:hover { color:var(--gold); }
.btn-ghost:hover::after { transform:translateX(5px); }

/* hero right - decorative stats */
.hero-right {
  display:flex; flex-direction:column; gap:1.5rem; align-items:flex-end;
  opacity:0; animation: fadeIn 1s 1.1s forwards;
}
.hero-stat-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(192,120,48,.2);
  padding:1.4rem 2rem; text-align:right;
  position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
  min-width:190px;
}
.hero-stat-card::before {
  content:''; position:absolute; top:0; right:0;
  width:3px; height:100%; background:var(--amber);
}
.stat-big {
  font-family:'Cormorant Garamond',serif;
  font-size:3rem; font-weight:700; color:var(--gold-lt); line-height:1;
  display:block; margin-bottom:.2rem;
}
.stat-lbl {
  font-family:'Space Mono',monospace; font-size:.62rem;
  color:rgba(255,255,255,.45); letter-spacing:.18em; text-transform:uppercase;
}

.hero-scroll {
  position:absolute; bottom:2.2rem; left:5rem; z-index:3;
  display:flex; align-items:center; gap:.7rem;
  opacity:0; animation:fadeIn 1s 1.5s forwards;
}
.scroll-bar {
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--amber), transparent);
  animation:scrollPulse 2s infinite;
}
.scroll-lbl {
  font-family:'Space Mono',monospace; font-size:.6rem;
  color:rgba(255,255,255,.35); letter-spacing:.2em; text-transform:uppercase;
  writing-mode:vertical-lr;
}

/* =====================================================
   TICKER BAR
===================================================== */
#ticker {
  background:var(--amber); overflow:hidden; padding:.95rem 0;
  display:flex; align-items:center;
}
.ticker-inner {
  display:flex; gap:0; animation:ticker 28s linear infinite;
  white-space:nowrap;
}
.tick-item {
  display:flex; align-items:center; gap:2rem;
  padding:0 2rem; color:#fff;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tick-item::after {
  content:'✦'; font-size:.5rem; color:rgba(255,255,255,.5);
}

/* =====================================================
   SECTION HELPERS
===================================================== */
.wrap { max-width:1280px; margin:0 auto; padding:7rem 5rem; }
.wrap-dark { background:var(--dark); }
.wrap-white { background:var(--white); }
.wrap-cream { background:var(--cream); }
.wrap-walnut { background:var(--walnut); }

.sec-tag {
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem;
}
.sec-tag-line { width:28px; height:2px; background:var(--amber); }
.sec-tag-txt {
  font-family:'Space Mono',monospace; font-size:.65rem;
  color:var(--amber); letter-spacing:.22em; text-transform:uppercase;
}

.sec-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem, 3.8vw, 3.2rem);
  font-weight:700; line-height:1.08; margin-bottom:1.2rem;
}
.sec-title.lt { color:#fff; }
.sec-sub { font-size:1rem; line-height:1.75; color:var(--muted); max-width:480px; }
.sec-sub.lt  { color:rgba(250,240,220,.6); }

/* REVEAL */
.rv {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.rv.on { opacity:1; transform:none; }
.rv.d1 { transition-delay:.1s; }
.rv.d2 { transition-delay:.2s; }
.rv.d3 { transition-delay:.3s; }
.rv.d4 { transition-delay:.4s; }
.rv.d5 { transition-delay:.5s; }

/* =====================================================
   ABOUT SECTION
===================================================== */
#about-section { background:var(--espresso); }
.about-grid {
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:6rem; align-items:center;
}
.about-photo-wrap {
  position:relative;
}
.about-photo-frame {
  position:relative; display:inline-block; width:100%;
}
.about-photo-frame::before {
  content:''; position:absolute;
  top:-18px; left:-18px; right:18px; bottom:18px;
  border:2px solid rgba(192,120,48,.35);
  pointer-events:none; z-index:0;
}
.about-photo-frame::after {
  content:''; position:absolute;
  bottom:-18px; right:-18px; left:18px; top:18px;
  background:rgba(192,120,48,.07);
  pointer-events:none; z-index:0;
}
.about-img {
  width:100%; aspect-ratio:4/5;
  object-fit:cover; display:block;
  position:relative; z-index:1;
  filter:grayscale(15%) contrast(1.04);
}
.about-img-placeholder {
  width:100%; aspect-ratio:4/5;
  background:linear-gradient(160deg,#221208 0%,#2E1A0A 60%,#1A0E05 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.about-img-placeholder .ph-icon { font-size:3.5rem; margin-bottom:.8rem; opacity:.4; }
.about-img-placeholder .ph-txt {
  font-family:'Space Mono',monospace; font-size:.6rem;
  color:rgba(255,255,255,.25); letter-spacing:.2em; text-transform:uppercase;
}
.about-badge {
  position:absolute; bottom:-1.5rem; right:-1.5rem; z-index:2;
  background:var(--amber); padding:1.2rem 1.5rem; text-align:center;
}
.about-badge-big {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem; font-weight:700; color:#fff; line-height:1; display:block;
}
.about-badge-sm {
  font-family:'Space Mono',monospace; font-size:.55rem;
  color:rgba(255,255,255,.75); letter-spacing:.15em; text-transform:uppercase;
}
.about-name-tag {
  font-family:'Space Mono',monospace; font-size:.65rem;
  color:var(--amber); letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.6rem; margin-top:2rem;
}
.about-bio {
  font-size:.97rem; color:rgba(250,240,220,.62); line-height:1.82;
  margin-bottom:1.5rem;
}
.about-skills {
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem;
}
.about-pill {
  background:rgba(192,120,48,.12);
  border:1px solid rgba(192,120,48,.25);
  color:rgba(250,240,220,.7);
  font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .85rem;
}
@media(max-width:860px){
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .about-photo-wrap { max-width:380px; }
}

/* =====================================================
   SERVICES
===================================================== */
#services-section { background:var(--white); }

.svc-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2px; margin-top:4rem; background:var(--ivory);
}
.svc-card {
  background:var(--white); padding:3rem;
  position:relative; overflow:hidden; transition:all .4s;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:3px; background:var(--amber);
  transition:width .4s ease;
}
.svc-card:hover::after { width:100%; }
.svc-card:hover {
  background:var(--cream);
  transform:translateY(-5px);
  box-shadow:0 24px 60px rgba(24,14,7,.09);
  z-index:1;
}
.svc-num {
  font-family:'Space Mono',monospace; font-size:.6rem;
  color:var(--amber); letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1rem;
}
.svc-icon { font-size:2.2rem; margin-bottom:1.2rem; }
.svc-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1.9rem; font-weight:700; color:var(--espresso);
  line-height:1.15; margin-bottom:.9rem;
}
.svc-desc {
  font-size:.93rem; color:var(--muted); line-height:1.75; margin-bottom:1.5rem;
}
.svc-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.pill {
  background:var(--ivory); color:var(--walnut);
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:1px;
}

/* =====================================================
   PORTFOLIO
===================================================== */
#portfolio-section { background:var(--espresso); }

.port-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:4rem;
}
.port-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.port-item {
  position:relative; overflow:hidden; border-radius:1px; cursor:pointer;
}
.port-item.span2 { grid-column:span 2; }

.port-thumb {
  width:100%; aspect-ratio:4/3;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:transform .65s ease;
}
.port-item.span2 .port-thumb { aspect-ratio:16/7; }

.port-item:hover .port-thumb { transform:scale(1.06); }

.thumb-icon { font-size:2.4rem; position:relative; z-index:1; margin-bottom:.5rem; }
.thumb-note {
  font-family:'Space Mono',monospace; font-size:.58rem;
  color:rgba(255,255,255,.35); letter-spacing:.2em; text-transform:uppercase;
  position:relative; z-index:1;
}

/* always visible label */
.port-label {
  position:absolute; bottom:0; left:0; right:0; padding:1.4rem;
  background:linear-gradient(to top, rgba(8,4,1,.92), transparent);
  pointer-events:none;
}
.port-type {
  font-family:'Space Mono',monospace; font-size:.58rem;
  color:var(--amber); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.25rem;
}
.port-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem; font-weight:700; color:#fff; line-height:1.2;
}

/* hover overlay */
.port-hover {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,6,2,.97) 0%, rgba(12,6,2,.5) 60%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem;
  opacity:0; transition:opacity .4s ease;
}
.port-item:hover .port-hover { opacity:1; }

.port-link {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem;
  color:var(--gold); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  transition:gap .3s;
}
.port-link:hover { gap:.85rem; }

/* =====================================================
   TESTIMONIALS
===================================================== */
#testimonials-section { background:var(--cream); }

.test-slider { margin-top:4rem; overflow:hidden; }
.test-track {
  display:flex;
  transition:transform .65s cubic-bezier(.25,.46,.45,.94);
}
.test-slide { min-width:100%; }

.test-card {
  background:var(--white); padding:3.5rem;
  border-left:4px solid var(--amber);
  position:relative; max-width:860px;
}
.big-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:7rem; line-height:.55; color:var(--ivory);
  position:absolute; top:2rem; left:2.5rem; user-select:none;
}
.test-stars { color:var(--amber); font-size:.85rem; margin-bottom:.8rem; }
.test-text {
  font-family:'Cormorant Garamond',serif; font-size:1.35rem;
  font-style:italic; line-height:1.65; color:var(--espresso);
  margin-bottom:2rem; position:relative; z-index:1;
}
.test-author { display:flex; align-items:center; gap:1rem; }
.test-avatar {
  width:48px; height:48px; border-radius:50%; background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem; font-weight:700; color:var(--amber); flex-shrink:0;
}
.test-name { font-weight:700; font-size:.92rem; color:var(--espresso); }
.test-role {
  font-family:'Space Mono',monospace; font-size:.65rem; color:var(--muted);
}

.slider-footer {
  display:flex; justify-content:space-between; align-items:center;
  max-width:860px; margin-top:2rem;
}
.dots { display:flex; gap:.55rem; align-items:center; }
.dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--ivory); cursor:pointer; transition:all .3s;
}
.dot.on { background:var(--amber); width:26px; border-radius:3px; }
.arrows { display:flex; gap:.6rem; }
.arrow-btn {
  width:46px; height:46px; border:2px solid var(--ivory);
  background:transparent; font-size:1rem; color:var(--espresso);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.arrow-btn:hover {
  border-color:var(--amber); background:var(--amber); color:#fff;
}

/* =====================================================
   CTA PARALLAX BAND
===================================================== */
#cta-band {
  position:relative; overflow:hidden;
  padding:9rem 5rem; text-align:center;
  background:var(--walnut);
}
.cta-bg {
  position:absolute; inset:-30%; will-change:transform;
  background:
    radial-gradient(ellipse 60% 50% at 28% 55%, rgba(192,120,48,.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 72% 45%, rgba(156,59,32,.2) 0%, transparent 55%),
    #3A1D0D;
}
.cta-bg::after {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:700px; border-radius:50%;
  border:1px solid rgba(192,120,48,.12);
  box-shadow:0 0 0 100px rgba(192,120,48,.06), 0 0 0 200px rgba(192,120,48,.03);
}
.cta-inner { position:relative; z-index:2; }
.cta-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:700; color:#fff; line-height:1.08; margin-bottom:1.5rem;
}
.cta-title span { color:var(--gold-lt); }
.cta-sub {
  font-size:1.05rem; color:rgba(250,240,220,.6); line-height:1.75;
  max-width:460px; margin:0 auto 3rem;
}

/* =====================================================
   CONTACT
===================================================== */
#contact-section { background:var(--white); }

.contact-grid {
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:7rem; align-items:start;
}
.ci-item {
  display:flex; gap:1rem; align-items:flex-start; margin-bottom:2rem;
}
.ci-icon {
  width:44px; height:44px; background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--amber); flex-shrink:0;
}
.ci-lbl {
  font-family:'Space Mono',monospace; font-size:.62rem;
  color:var(--muted); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.2rem;
}
.ci-val {
  font-size:.98rem; font-weight:700; color:var(--espresso);
}
.ci-val a:hover { color:var(--amber); }

/* form */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.fg { display:flex; flex-direction:column; margin-bottom:1rem; }
.fg label {
  font-family:'Space Mono',monospace; font-size:.6rem;
  color:var(--muted); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.5rem;
}
.fg input, .fg select, .fg textarea {
  background:var(--cream); border:1px solid var(--ivory);
  padding:.9rem 1rem;
  font-family:'Nunito Sans',sans-serif; font-size:.93rem; color:var(--espresso);
  outline:none; transition:border-color .3s; appearance:none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--amber); }
.fg textarea { height:130px; resize:vertical; }

.url-input-wrap {
  display:flex; align-items:stretch;
  background:var(--cream); border:1px solid var(--ivory);
  transition:border-color .3s;
}
.url-input-wrap:focus-within { border-color:var(--amber); }
.url-prefix {
  padding:.9rem 0 .9rem 1rem;
  font-size:.93rem; color:var(--muted);
  background:transparent; user-select:none;
}
.url-input-wrap input {
  flex:1; border:none; padding:.9rem 1rem .9rem 0;
  background:transparent;
}
.url-input-wrap input::placeholder { color:var(--muted); opacity:.7; }

.submit-btn {
  width:100%; background:var(--amber); color:#fff;
  padding:1.1rem; margin-top:.3rem;
  font-size:.88rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:all .3s;
}
.submit-btn:hover { background:var(--espresso); transform:translateY(-2px); }

.msg-ok, .msg-err {
  padding:.9rem 1.3rem; margin-top:1rem;
  font-size:.88rem; display:none;
}
.msg-ok  { background:rgba(192,120,48,.1); border-left:3px solid var(--amber); color:var(--walnut); }
.msg-err { background:rgba(156,59,32,.1);  border-left:3px solid var(--rust); color:var(--rust); }

/* =====================================================
   FOOTER
===================================================== */
#footer {
  background:var(--espresso); padding:2.5rem 5rem;
  display:flex; justify-content:space-between; align-items:center;
}
.f-logo {
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem; font-weight:700; color:#fff;
}
.f-logo span { color:var(--gold); }
.f-copy { font-size:.75rem; color:rgba(255,255,255,.3); }
.f-links { display:flex; gap:1.5rem; }
.f-links a { font-size:.75rem; color:rgba(255,255,255,.45); }
.f-links a:hover { color:var(--gold); }

/* =====================================================
   KEYFRAMES
===================================================== */
@keyframes fadeUp  { to { opacity:1; transform:none; } }
@keyframes fadeIn  { to { opacity:1; } }
@keyframes ticker  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes scrollPulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1024px) {
  #nav,#nav.scrolled { padding-left:2.5rem; padding-right:2.5rem; }
  .wrap { padding:5.5rem 2.5rem; }
  .hero-inner { grid-template-columns:1fr; }
  .hero-right { flex-direction:row; align-items:flex-start; margin-top:3rem; }
  #cta-band { padding:7rem 2.5rem; }
  #footer { padding:2rem 2.5rem; }
}
@media(max-width:800px) {
  .nav-links { display:none; }
  .hero-inner { padding:0 2rem; }
  .svc-grid { grid-template-columns:1fr; }
  .port-grid { grid-template-columns:1fr 1fr; }
  .port-item.span2 { grid-column:span 1; }
  .port-item.span2 .port-thumb { aspect-ratio:4/3; }
  .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .port-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  #footer { flex-direction:column; gap:1.2rem; text-align:center; }
  .hero-right { display:none; }
}
@media(max-width:540px) {
  .port-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}
/* =====================================================
   CLICK-TO-CALL MOBILE BUTTON
===================================================== */
#click-to-call {
  color: var(--espresso);
  font-weight: 700;
  transition: color .3s;
}
#click-to-call:hover { color: var(--amber); }
@media (max-width: 768px) {
  #click-to-call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--amber);
    color: #fff !important;
    padding: .75rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: .4rem;
    border-radius: 1px;
  }
  #click-to-call::before { content: '📞 '; }
  #click-to-call:hover { background: var(--espresso); color: #fff !important; }
}
/* =====================================================
   LOCAL SMALL BUSINESS SPECIAL
===================================================== */
#local-special { background: var(--walnut); position: relative; overflow: hidden; }
#local-special::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 90% 50%, rgba(192,120,48,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 5%  20%, rgba(156,59,32,.12) 0%, transparent 60%);
  pointer-events: none;
}
.local-inner { position: relative; z-index: 2; }
.price-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 4rem; margin-bottom: 4rem; flex-wrap: wrap;
}
.price-tag-block { flex-shrink: 0; text-align: center; }
.price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 5.5rem; font-weight: 700; color: var(--gold-lt);
  line-height: 1; display: block;
}
.price-label {
  font-family: 'Space Mono', monospace; font-size: .62rem;
  color: rgba(255,255,255,.45); letter-spacing: .2em; text-transform: uppercase;
  margin-top: .3rem; display: block;
}
.price-unlimited {
  display: inline-block; margin-top: .7rem;
  background: rgba(192,120,48,.2); border: 1px solid rgba(192,120,48,.4);
  color: var(--gold-lt); font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem 1rem;
}
.local-features-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem;
}
.feat-col-title {
  font-family: 'Space Mono', monospace; font-size: .62rem;
  color: var(--amber); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 1rem; display: block;
}
.feat-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .9rem 1.1rem; margin-bottom: .6rem;
  background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(192,120,48,.35);
  transition: all .3s;
}
.feat-item:hover {
  background: rgba(255,255,255,.08);
  border-left-color: var(--amber);
}
.feat-item.addon { border-left-color: rgba(255,255,255,.15); }
.feat-item.addon:hover { border-left-color: rgba(255,255,255,.35); }
.feat-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.feat-name {
  font-weight: 700; font-size: .88rem; color: #fff; margin-bottom: .15rem;
}
.feat-desc { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.5; }
.addon-badge {
  font-family: 'Space Mono', monospace; font-size: .55rem;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.4);
  padding: .15rem .5rem; letter-spacing: .1em; text-transform: uppercase;
  margin-left: auto; flex-shrink: 0; align-self: flex-start; margin-top: .1rem;
}
.bonus-band {
  margin-top: 2.5rem; padding: 1.4rem 2rem;
  background: linear-gradient(90deg, rgba(192,120,48,.2), rgba(192,120,48,.07));
  border: 1px solid rgba(192,120,48,.3);
  display: flex; align-items: center; gap: 1.2rem;
}
.bonus-star { font-size: 1.4rem; }
.bonus-text { font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.6; }
.bonus-text strong { color: var(--gold-lt); }

/* =====================================================
   FREE SEO ANALYSIS
===================================================== */
#seo-section { background: var(--white); }
.seo-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
}
.seo-what-list { margin-top: 2rem; display: flex; flex-direction: column; gap: .9rem; }
.seo-what-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ivory);
  transition: border-color .3s, box-shadow .3s;
}
.seo-what-item:hover {
  border-color: var(--amber);
  box-shadow: 0 6px 24px rgba(192,120,48,.08);
}
.seo-what-icon { font-size: 1.3rem; flex-shrink: 0; }
.seo-what-name { font-weight: 700; font-size: .9rem; color: var(--espresso); margin-bottom: .2rem; }
.seo-what-desc { font-size: .82rem; color: var(--muted); line-height: 1.6; }

.seo-form-card {
  background: var(--cream);
  border-top: 3px solid var(--amber);
  padding: 2.8rem;
}
.seo-form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 700; color: var(--espresso);
  margin-bottom: .4rem;
}
.seo-form-sub { font-size: .85rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.8rem; }
.seo-timeline {
  display: flex; gap: 1.5rem; margin-bottom: 2rem;
  padding: 1rem 1.2rem; background: var(--white);
  border-left: 3px solid var(--amber);
}
.seo-tl-item { text-align: center; flex: 1; }
.seo-tl-icon { font-size: 1.3rem; display: block; margin-bottom: .3rem; }
.seo-tl-lbl {
  font-family: 'Space Mono', monospace; font-size: .58rem;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}
.seo-submit-btn {
  width: 100%; background: var(--espresso); color: #fff;
  padding: 1.1rem; margin-top: .3rem;
  font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: all .3s; cursor: pointer; border: none; font-family: inherit;
}
.seo-submit-btn:hover { background: var(--amber); transform: translateY(-2px); }
.seo-msg-ok, .seo-msg-err {
  padding: .9rem 1.3rem; margin-top: 1rem;
  font-size: .88rem; display: none;
}
.seo-msg-ok  { background: rgba(192,120,48,.1); border-left: 3px solid var(--amber); color: var(--walnut); }
.seo-msg-err { background: rgba(156,59,32,.1);  border-left: 3px solid var(--rust);  color: var(--rust); }

@media(max-width: 860px) {
  .price-hero { flex-direction: column; gap: 2rem; }
  .local-features-wrap { grid-template-columns: 1fr; }
  .seo-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* =====================================================
   HAMBURGER MENU
===================================================== */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 42px; height: 42px; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 0; z-index: 1001;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .35s ease, opacity .35s ease, width .35s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8, 4, 1, .97);
  backdrop-filter: blur(20px);
  z-index: 1000;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.mobile-menu.open {
  opacity: 1; pointer-events: all;
}
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem; font-weight: 700;
  color: rgba(255,255,255,.75); padding: .6rem 0;
  display: block; text-align: center;
  transition: color .25s;
  letter-spacing: .02em;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mob-cta {
  margin-top: 1.5rem;
  background: var(--amber); color: #fff !important;
  font-family: 'Nunito Sans', sans-serif;
  font-size: .9rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem 2.8rem;
  border-radius: 1px;
}

/* =====================================================
   STICKY MOBILE CTA BAR
===================================================== */
#mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 800;
  grid-template-columns: 1fr 1fr;
  background: var(--espresso);
  border-top: 1px solid rgba(192,120,48,.25);
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
}
#mobile-cta-bar a {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; transition: background .2s;
}
#mobile-cta-bar .bar-call {
  background: var(--amber);
  border-right: 1px solid rgba(255,255,255,.1);
}
#mobile-cta-bar .bar-call:hover { background: var(--gold); }
#mobile-cta-bar .bar-quote { background: var(--walnut); }
#mobile-cta-bar .bar-quote:hover { background: rgba(58,29,13,.85); }

@media(max-width:800px) {
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  #mobile-cta-bar { display: grid; }
  /* push page content up so bar doesn't cover it */
  body { padding-bottom: 58px; }
}

/* =====================================================
   DREAM SECTION
===================================================== */
.dream-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:start;
}
.dream-checks { margin-top:2rem; display:flex; flex-direction:column; gap:.85rem; }
.dc {
  display:flex; align-items:flex-start; gap:.75rem;
  font-size:.93rem; color:var(--walnut); font-weight:600;
}
.dc span { color:var(--muted); font-weight:400; }
.dream-card {
  background:var(--white);
  border-top:3px solid var(--amber);
  padding:2.8rem;
  box-shadow:0 20px 60px rgba(24,14,7,.07);
}
.dc-label {
  font-family:'Space Mono',monospace; font-size:.62rem;
  color:var(--amber); letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:2rem;
}
.dc-steps { display:flex; flex-direction:column; gap:1.8rem; }
.dc-step { display:flex; gap:1.4rem; align-items:flex-start; }
.dc-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; font-weight:700; color:var(--ivory);
  line-height:1; flex-shrink:0; min-width:2rem;
  transition:color .3s;
}
.dc-step:hover .dc-num { color:var(--amber); }
.dc-step-name {
  font-weight:700; font-size:.97rem;
  color:var(--espresso); margin-bottom:.3rem;
}
.dc-step-desc { font-size:.87rem; color:var(--muted); line-height:1.7; }

@media(max-width:860px){
  .dream-grid { grid-template-columns:1fr; gap:3rem; }
}


/* =====================================================
   DEMO SITES CAROUSEL
===================================================== */
#demo-carousel { background: var(--espresso); overflow: hidden; }

.demo-carousel-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;
}

.carousel-viewport { overflow: hidden; }

.demo-track {
  display: flex; gap: 1.5rem;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

.demo-slide {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: calc(33.333% - 1rem);
  position: relative; overflow: hidden;
}

.demo-thumb {
  width: 100%; aspect-ratio: 650/503;
  overflow: hidden; position: relative;
  background: var(--walnut);
}
.demo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .55s ease;
}
.demo-slide:hover .demo-thumb img { transform: scale(1.04); }

.demo-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(12,6,2,.95) 0%, transparent 60%);
  padding: 1.8rem 1.4rem 1.2rem;
  pointer-events: none;
}
.demo-industry {
  font-family: 'Space Mono', monospace; font-size: .58rem;
  color: var(--amber); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: .3rem;
}
.demo-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.2;
}

.demo-hover {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,6,2,.97) 0%, rgba(12,6,2,.45) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem 1.4rem;
  opacity: 0; transition: opacity .35s;
}
.demo-slide:hover .demo-hover { opacity: 1; }
.demo-hover .demo-industry { margin-bottom: .3rem; }
.demo-hover .demo-tagline { margin-bottom: .9rem; }
.demo-view {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gold); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: gap .3s; text-decoration: none;
}
.demo-view:hover { gap: .75rem; color: var(--gold-lt); }
.demo-view::after { content: '→'; }

.carousel-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.2rem;
}
.c-dots { display: flex; gap: .5rem; align-items: center; }
.c-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.2); cursor: pointer; transition: all .3s;
  border: none; padding: 0;
}
.c-dot.on { background: var(--amber); width: 24px; border-radius: 3px; }
.c-arrows { display: flex; gap: .5rem; }
.c-arrow {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.55);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.c-arrow:hover { border-color: var(--amber); background: var(--amber); color: #fff; }

.demo-see-all {
  text-align: center; margin-top: 3rem;
}
.demo-see-all a {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(192,120,48,.35); color: var(--gold-lt);
  padding: .9rem 2.4rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: all .3s;
}
.demo-see-all a::after { content: '→'; transition: transform .3s; }
.demo-see-all a:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.demo-see-all a:hover::after { transform: translateX(4px); }

@media(max-width:900px) {
  .demo-slide { flex: 0 0 calc(50% - .75rem); min-width: calc(50% - .75rem); }
}
@media(max-width:540px) {
  .demo-slide { flex: 0 0 100%; min-width: 100%; }
  .demo-carousel-header { flex-direction: column; align-items: flex-start; }
}

</style>
</head>
<body>
<script>window._formLoadTime=Date.now();</script>

<!-- ======================================================
     NAV
====================================================== -->
<nav id="nav">
  <a href="#hero" class="nav-logo">Charlotte<span>Plus</span></a>
  <ul class="nav-links">
    <li><a href="#local-special">$499 Special</a></li>
    <li><a href="#demo-carousel">Demo Sites</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Work</a></li>
    <li><a href="#seo-section">Free SEO</a></li>
    <li><a href="#contact" class="nav-cta">Let's Build</a></li>
  </ul>
  <button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
    <span></span><span></span><span></span>
  </button>
</nav>

<!-- ======================================================
     MOBILE MENU OVERLAY
====================================================== -->
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
  <a href="#local-special" class="mob-link">$499 Special</a>
  <a href="#demo-carousel" class="mob-link">Demo Sites</a>
  <a href="#about"         class="mob-link">About</a>
  <a href="#services"      class="mob-link">Services</a>
  <a href="#portfolio"     class="mob-link">Work</a>
  <a href="#seo-section"   class="mob-link">Free SEO</a>
  <a href="#contact"       class="mob-cta">Get a Free Quote</a>
</div>

<!-- ======================================================
     STICKY MOBILE CTA BAR
====================================================== -->
<div id="mobile-cta-bar" aria-label="Quick actions">
  <a href="tel:7048132085" class="bar-call">📞 Call Now</a>
  <a href="#contact"       class="bar-quote">✉ Free Quote</a>
</div>

<!-- ======================================================
     HERO
====================================================== -->
<section id="hero">
  <div class="hero-bg" id="hero-bg"></div>

  <div class="hero-inner">
    <div class="hero-left">
      <div class="eyebrow">
        <div class="eyebrow-dash"></div>
        <span class="eyebrow-txt">CharlottePlus.com &nbsp;·&nbsp; Est. 2012</span>
      </div>

      <h1 class="hero-h1">
        Websites.<br>
        Apps. <span class="line-amber">Results.</span>
        <span class="line-under">Since 2012.</span>
      </h1>

      <p class="hero-p">
        Full-stack development, expert lead generation, and mobile apps, backed by over a decade of real-world results.
      </p>

      <div class="hero-btns">
        <a href="#contact" class="btn-primary">Get a Free Quote</a>
        <a href="#portfolio" class="btn-ghost">See My Work</a>
      </div>
    </div>

    <div class="hero-right">
      <div class="hero-stat-card">
        <span class="stat-big" data-count="12">0</span>
        <span class="stat-lbl">Years in Business</span>
      </div>
      <div class="hero-stat-card">
        <span class="stat-big" data-count="100">0</span>
        <span class="stat-lbl">Projects Shipped</span>
      </div>
      <div class="hero-stat-card" style="min-width:auto">
        <span class="stat-big" style="font-size:2.5rem;">∞</span>
        <span class="stat-lbl">With AI</span>
      </div>
    </div>
  </div>

  <div class="hero-scroll">
    <div class="scroll-bar"></div>
    <span class="scroll-lbl">Scroll</span>
  </div>
</section>

<!-- ======================================================
     TICKER
====================================================== -->
<div id="ticker" aria-hidden="true">
  <div class="ticker-inner">
        <span class="tick-item">Full-Stack Development</span>
        <span class="tick-item">Lead Generation Expert</span>
        <span class="tick-item">iOS &amp; Android Apps</span>
        <span class="tick-item">AI-Powered Solutions</span>
        <span class="tick-item">SaaS Applications</span>
        <span class="tick-item">Charlotte NC, Since 2012</span>
        <span class="tick-item">Websites that Convert</span>
        <span class="tick-item">Apps People Love</span>
        <span class="tick-item">Full-Stack Development</span>
        <span class="tick-item">Lead Generation Expert</span>
        <span class="tick-item">iOS &amp; Android Apps</span>
        <span class="tick-item">AI-Powered Solutions</span>
        <span class="tick-item">SaaS Applications</span>
        <span class="tick-item">Charlotte NC, Since 2012</span>
        <span class="tick-item">Websites that Convert</span>
        <span class="tick-item">Apps People Love</span>
        <span class="tick-item">Full-Stack Development</span>
        <span class="tick-item">Lead Generation Expert</span>
        <span class="tick-item">iOS &amp; Android Apps</span>
        <span class="tick-item">AI-Powered Solutions</span>
        <span class="tick-item">SaaS Applications</span>
        <span class="tick-item">Charlotte NC, Since 2012</span>
        <span class="tick-item">Websites that Convert</span>
        <span class="tick-item">Apps People Love</span>
      </div>
</div>

<!-- ======================================================
     LOCAL SMALL BUSINESS SPECIAL
====================================================== -->
<section id="local-special">
  <div class="wrap local-inner">

    <div class="price-hero">
      <div>
        <div class="sec-tag rv">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt" style="color:var(--gold-lt);">Small Business Special</span>
        </div>
        <h2 class="sec-title lt rv d1">Local Small<br>Business Special</h2>
        <p class="sec-sub lt rv d2" style="max-width:520px;">
          A custom one-page lander built specifically for your business, your service, and your customers. Designed to match your brand, built to convert, and ready to launch in 24 to 48 hours.
        </p>
      </div>
      <div class="price-tag-block rv d2">
        <span class="price-amount">$499</span>
        <span class="price-label">One-Time Investment</span>
        <span class="price-unlimited">Unlimited Revisions</span>
      </div>
    </div>

    <div class="local-features-wrap rv d2">
      <div>
        <span class="feat-col-title">Included with Every Lander</span>

        <div class="feat-item">
          <span class="feat-icon">🎨</span>
          <div>
            <div class="feat-name">Custom Design, Built to Match Your Brand</div>
            <div class="feat-desc">Colors, fonts, and feel matched to your existing look. AI-generated imagery included.</div>
          </div>
        </div>

        <div class="feat-item">
          <span class="feat-icon">📋</span>
          <div>
            <div class="feat-name">Lead Capture Form + CRM Post</div>
            <div class="feat-desc">Every inquiry goes straight to your inbox and optionally to your CRM via webhook or Zapier.</div>
          </div>
        </div>

        <div class="feat-item">
          <span class="feat-icon">📅</span>
          <div>
            <div class="feat-name">Calendly Booking Embed</div>
            <div class="feat-desc">Let customers book appointments directly on the page. No phone tag, no friction.</div>
          </div>
        </div>

        <div class="feat-item">
          <span class="feat-icon">📍</span>
          <div>
            <div class="feat-name">Google Maps + Local Schema</div>
            <div class="feat-desc">Embedded map and LocalBusiness schema markup baked in for local SEO from day one.</div>
          </div>
        </div>

        <div class="feat-item">
          <span class="feat-icon">📱</span>
          <div>
            <div class="feat-name">Mobile-First, Click-to-Call</div>
            <div class="feat-desc">Looks great on every screen. Sticky phone button so mobile visitors can call in one tap.</div>
          </div>
        </div>

        <div class="feat-item">
          <span class="feat-icon">⚡</span>
          <div>
            <div class="feat-name">Google Analytics + Meta Pixel</div>
            <div class="feat-desc">GA4 and Facebook Pixel installed and ready so you can track every visit and run retargeting ads.</div>
          </div>
        </div>

      </div>

      <div>
        <span class="feat-col-title">Popular Add-Ons</span>

        <div class="feat-item addon">
          <span class="feat-icon">⏳</span>
          <div>
            <div class="feat-name">Countdown Timer / Urgency Block</div>
            <div class="feat-desc">Drive action with a limited-time offer or seasonal promotion countdown.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

        <div class="feat-item addon">
          <span class="feat-icon">💬</span>
          <div>
            <div class="feat-name">Live Chat Widget</div>
            <div class="feat-desc">Tidio or Crisp integrated so you can chat with visitors in real time from your phone.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

        <div class="feat-item addon">
          <span class="feat-icon">🖼️</span>
          <div>
            <div class="feat-name">Before / After Photo Slider</div>
            <div class="feat-desc">Perfect for contractors, cleaners, landscapers. Show the transformation visually.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

        <div class="feat-item addon">
          <span class="feat-icon">⭐</span>
          <div>
            <div class="feat-name">Google Reviews Widget</div>
            <div class="feat-desc">Pull in your live Google Reviews automatically to build instant trust.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

        <div class="feat-item addon">
          <span class="feat-icon">📲</span>
          <div>
            <div class="feat-name">SMS Opt-In</div>
            <div class="feat-desc">Capture mobile numbers and follow up via text. Integrates with SimpleTexting or similar.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

        <div class="feat-item addon">
          <span class="feat-icon">🔲</span>
          <div>
            <div class="feat-name">QR Code Package</div>
            <div class="feat-desc">Custom QR code linking to your lander, sized for business cards, truck wraps, and yard signs.</div>
          </div>
          <span class="addon-badge">Add-On</span>
        </div>

      </div>
    </div>

    <div class="bonus-band rv d3">
      <span class="bonus-star">🎁</span>
      <div class="bonus-text">
        <strong>Bonus included:</strong> Every lander ships with a free basic SEO setup, your NAP (Name, Address, Phone) formatted for local search, and a PDF one-page summary of your site you can hand to customers or share on social.
      </div>
    </div>

    <div style="text-align:center;margin-top:3rem;" class="rv d4">
      <a href="#contact" class="btn-primary" style="font-size:.95rem;padding:1.1rem 3rem;">Claim Your Lander for $499</a>
    </div>

  </div>
</section>

<!-- ======================================================
     DEMO SITES CAROUSEL
====================================================== -->
<section id="demo-carousel">
  <div class="wrap">

    <div class="demo-carousel-header">
      <div>
        <div class="sec-tag rv">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt">Demo Sites</span>
        </div>
        <h2 class="sec-title lt rv d1">See what $499<br>actually looks like.</h2>
      </div>
      <p class="sec-sub lt rv d2" style="text-align:right;max-width:260px;">
        Real sites built for real local industries. Click any to see it live.
      </p>
    </div>

    <div class="carousel-viewport rv d2">
      <div class="demo-track" id="demo-track">

                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/plumber.png" alt="Plumbing demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Plumbing</div>
              <div class="demo-tagline">Emergency Plumbing &amp; Drain Services</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Plumbing</div>
              <div class="demo-tagline">Emergency Plumbing &amp; Drain Services</div>
              <a href="/demo/plumber/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/electrical.png" alt="Electrical demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Electrical</div>
              <div class="demo-tagline">Licensed Electrical Contractors</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Electrical</div>
              <div class="demo-tagline">Licensed Electrical Contractors</div>
              <a href="/demo/electrical/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/hvac.png" alt="HVAC demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">HVAC</div>
              <div class="demo-tagline">Heating, Cooling &amp; Air Quality</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">HVAC</div>
              <div class="demo-tagline">Heating, Cooling &amp; Air Quality</div>
              <a href="/demo/hvac/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/landscaping.png" alt="Landscaping demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Landscaping</div>
              <div class="demo-tagline">Lawn Care &amp; Landscape Design</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Landscaping</div>
              <div class="demo-tagline">Lawn Care &amp; Landscape Design</div>
              <a href="/demo/landscaping/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/roofing.png" alt="Roofing demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Roofing</div>
              <div class="demo-tagline">Roof Replacement &amp; Storm Repair</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Roofing</div>
              <div class="demo-tagline">Roof Replacement &amp; Storm Repair</div>
              <a href="/demo/roofing/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/pressure-washing.png" alt="Pressure Washing demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Pressure Washing</div>
              <div class="demo-tagline">Professional Exterior Cleaning</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Pressure Washing</div>
              <div class="demo-tagline">Professional Exterior Cleaning</div>
              <a href="/demo/pressure-washing/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/pest-control.png" alt="Pest Control demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Pest Control</div>
              <div class="demo-tagline">Residential &amp; Commercial Pest Services</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Pest Control</div>
              <div class="demo-tagline">Residential &amp; Commercial Pest Services</div>
              <a href="/demo/pest-control/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/cleaning.png" alt="House Cleaning demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">House Cleaning</div>
              <div class="demo-tagline">Professional Home Cleaning Services</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">House Cleaning</div>
              <div class="demo-tagline">Professional Home Cleaning Services</div>
              <a href="/demo/cleaning/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/handyman.png" alt="Handyman demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Handyman</div>
              <div class="demo-tagline">Home Repair &amp; Maintenance</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Handyman</div>
              <div class="demo-tagline">Home Repair &amp; Maintenance</div>
              <a href="/demo/handyman/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/pool.png" alt="Pool Service demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Pool Service</div>
              <div class="demo-tagline">Pool Maintenance &amp; Repair</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Pool Service</div>
              <div class="demo-tagline">Pool Maintenance &amp; Repair</div>
              <a href="/demo/pool/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/hair-salon.png" alt="Hair Salon demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Hair Salon</div>
              <div class="demo-tagline">Expert Cuts, Color &amp; Styling</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Hair Salon</div>
              <div class="demo-tagline">Expert Cuts, Color &amp; Styling</div>
              <a href="/demo/hair-salon/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/nail-salon.png" alt="Nail Salon demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Nail Salon</div>
              <div class="demo-tagline">Manicure, Pedicure &amp; Nail Art</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Nail Salon</div>
              <div class="demo-tagline">Manicure, Pedicure &amp; Nail Art</div>
              <a href="/demo/nail-salon/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/massage.png" alt="Massage Therapy demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Massage Therapy</div>
              <div class="demo-tagline">Therapeutic &amp; Relaxation Massage</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Massage Therapy</div>
              <div class="demo-tagline">Therapeutic &amp; Relaxation Massage</div>
              <a href="/demo/massage/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/pet-grooming.png" alt="Pet Grooming demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Pet Grooming</div>
              <div class="demo-tagline">Professional Dog &amp; Cat Grooming</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Pet Grooming</div>
              <div class="demo-tagline">Professional Dog &amp; Cat Grooming</div>
              <a href="/demo/pet-grooming/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
                <div class="demo-slide">
          <div class="demo-thumb">
            <img src="/demo/screenshots/junk.png" alt="Junk Removal demo site preview" width="650" height="503" loading="lazy">
            <div class="demo-label">
              <div class="demo-industry">Junk Removal</div>
              <div class="demo-tagline">Fast &amp; Affordable Junk Hauling</div>
            </div>
            <div class="demo-hover">
              <div class="demo-industry">Junk Removal</div>
              <div class="demo-tagline">Fast &amp; Affordable Junk Hauling</div>
              <a href="/demo/junk/" target="_blank" class="demo-view">View Demo</a>
            </div>
          </div>
        </div>
        
      </div>
    </div>

    <div class="carousel-footer rv d3">
      <div class="c-dots" id="c-dots"></div>
      <div class="c-arrows">
        <button class="c-arrow" id="c-prev" aria-label="Previous">←</button>
        <button class="c-arrow" id="c-next" aria-label="Next">→</button>
      </div>
    </div>

    <div class="demo-see-all rv d4">
      <a href="/small-business">Browse All 15 Industries &amp; Get Your Site</a>
    </div>

  </div>
</section>


<!-- ======================================================
     ABOUT
====================================================== -->
<section id="about-section">
  <div class="wrap" id="about">
    <div class="about-grid">

      <div class="about-photo-wrap rv">
        <div class="about-photo-frame">

          <!-- ============================================================
               IMAGE PLACEHOLDER: Anthony - Headshot / Profile Photo
               FILE: /images/anthony-photo.jpg
               RECOMMENDED SIZE: 600 x 750 px (4:5 portrait, professional headshot or candid)
               When ready: replace <div class="about-img-placeholder"> block
               with: <img src="/images/anthony-photo.jpg" alt="Anthony - CharlottePlus" class="about-img">
               Then delete this entire comment block
          ============================================================ -->
          <img src="/images/anthony-photo.jpg" alt="Anthony - CharlottePlus" class="about-img" width="600" height="750">
          <!-- END IMAGE PLACEHOLDER: anthony-photo.jpg -->

        </div>
        <div class="about-badge">
          <span class="about-badge-big">12+</span>
          <span class="about-badge-sm">Years<br>Experience</span>
        </div>
      </div>

      <div class="rv d2">
        <div class="sec-tag">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt">About Me</span>
        </div>
        <h2 class="sec-title lt">The person<br>behind the code.</h2>
        <div class="about-name-tag">Anthony · CharlottePlus · Dallas, NC</div>
        <p class="about-bio">
          I'm Anthony, a full-stack developer and digital strategist based in Dallas, NC. I founded CharlottePlus in 2012 with a simple belief: technology should solve real problems and drive real growth, not just look good in a proposal.
        </p>
        <p class="about-bio">
          Over the past 12+ years I've built everything from lead generation systems and SaaS platforms to native iOS apps with thousands of active users. I work directly with clients, no middlemen, no handoffs, which means your vision gets my full attention from kickoff to launch and beyond.
        </p>
        <p class="about-bio">
          With AI now in the toolkit, the scope of what a single motivated developer can build has changed dramatically. I use it as a force multiplier to ship faster, smarter, and at a scale that would have required a full team just a few years ago.
        </p>
        <div class="about-skills">
          <span class="about-pill">PHP</span>
          <span class="about-pill">JavaScript</span>
          <span class="about-pill">React</span>
          <span class="about-pill">React Native</span>
          <span class="about-pill">MySQL</span>
          <span class="about-pill">iOS / Android</span>
          <span class="about-pill">Lead Generation</span>
          <span class="about-pill">AI Integration</span>
          <span class="about-pill">SaaS Architecture</span>
          <span class="about-pill">WordPress</span>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     SERVICES
====================================================== -->
<section id="services-section">
  <div class="wrap" id="services">
    <div class="sec-tag rv">
      <div class="sec-tag-line"></div>
      <span class="sec-tag-txt">What I Do</span>
    </div>
    <h2 class="sec-title rv d1">Built for results.<br>Engineered to last.</h2>
    <p class="sec-sub rv d2">From first line of code to first dollar of revenue. I handle the full picture.</p>

    <div class="svc-grid">

      <div class="svc-card rv d1">
        <div class="svc-icon">🌐</div>
        <div class="svc-num">01 / Service</div>
        <h3 class="svc-name">Full-Stack Web Development</h3>
        <p class="svc-desc">Custom websites and web applications built to perform, scale, and convert. From sharp marketing sites to complex data-driven platforms, architected for the long run.</p>
        <div class="svc-pills">
          <span class="pill">PHP</span><span class="pill">MySQL</span>
          <span class="pill">JavaScript</span><span class="pill">React</span>
          <span class="pill">WordPress</span><span class="pill">REST APIs</span>
        </div>
      </div>

      <div class="svc-card rv d2">
        <div class="svc-icon">🎯</div>
        <div class="svc-num">02 / Service</div>
        <h3 class="svc-name">Lead Generation Mastery</h3>
        <p class="svc-desc">Proven systems that turn traffic into qualified leads and leads into revenue. I've been engineering conversion funnels since 2012, long before "lead gen" was a buzzword.</p>
        <div class="svc-pills">
          <span class="pill">Funnels</span><span class="pill">Landing Pages</span>
          <span class="pill">CRO</span><span class="pill">Automation</span>
          <span class="pill">Analytics</span>
        </div>
      </div>

      <div class="svc-card rv d3">
        <div class="svc-icon">📱</div>
        <div class="svc-num">03 / Service</div>
        <h3 class="svc-name">Mobile App Development</h3>
        <p class="svc-desc">Native and cross-platform apps that users actually love. From concept to App Store approval. MainPro and FreshLocal are live proof of what's possible.</p>
        <div class="svc-pills">
          <span class="pill">iOS</span><span class="pill">Android</span>
          <span class="pill">React Native</span><span class="pill">App Store</span>
        </div>
      </div>

      <div class="svc-card rv d4">
        <div class="svc-icon">🤖</div>
        <div class="svc-num">04 / Service</div>
        <h3 class="svc-name">AI-Powered Solutions</h3>
        <p class="svc-desc">AI isn't the future. It's the present. I integrate cutting-edge AI into apps, workflows, and products to give your business capabilities that simply weren't possible before.</p>
        <div class="svc-pills">
          <span class="pill">OpenAI</span><span class="pill">Claude API</span>
          <span class="pill">Automation</span><span class="pill">Custom AI</span>
          <span class="pill">No Limits</span>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     PORTFOLIO
====================================================== -->
<section id="portfolio-section">
  <div class="wrap" id="portfolio">
    <div class="port-header">
      <div>
        <div class="sec-tag rv">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt">Selected Work</span>
        </div>
        <h2 class="sec-title lt rv d1">Real products.<br>Real results.</h2>
      </div>
      <p class="sec-sub lt rv d2" style="text-align:right;max-width:260px;">
        A decade of building things that actually work in the market.
      </p>
    </div>

    <div class="port-grid">

      <!-- PublishRank - featured wide -->
      <div class="port-item span2 rv">
        <!-- ============================================================
             IMAGE PLACEHOLDER: PublishRank.io - Featured Screenshot
             FILE: /images/publishrank-screenshot.jpg
             RECOMMENDED SIZE: 1200 x 500 px (landscape, wide crop)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#0C1219 0%,#141C28 55%,#1B2536 100%);">
          <img src="/images/publishrank-screenshot.jpg" alt="PublishRank.io Screenshot" width="1200" height="500" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: publishrank-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">SaaS Application</div>
          <div class="port-name">PublishRank.io</div>
        </div>
        <div class="port-hover">
          <div class="port-type">SaaS Application</div>
          <div class="port-name">AI-Powered Publishing & Rank Tracking</div>
          <a href="https://publishrank.io" target="_blank" class="port-link">Visit PublishRank.io</a>
        </div>
      </div>

      <!-- MainPro Web -->
      <div class="port-item rv d1">
        <!-- ============================================================
             IMAGE PLACEHOLDER: MainPro.io - Website Screenshot
             FILE: /images/mainpro-screenshot.jpg
             RECOMMENDED SIZE: 800 x 600 px (4:3 crop)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#0F1E3D 0%,#172849 100%);">
          <img src="/images/mainpro-screenshot.jpg" alt="MainPro.io Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: mainpro-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">Web Platform</div>
          <div class="port-name">MainPro.io</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Field Service Platform</div>
          <div class="port-name">MainPro.io</div>
          <a href="https://mainpro.io" target="_blank" class="port-link">Visit Site</a>
        </div>
      </div>

      <!-- Roofng -->
      <div class="port-item rv d2">
        <!-- ============================================================
             IMAGE PLACEHOLDER: Roofng.com - Website Screenshot
             FILE: /images/roofng-screenshot.jpg
             RECOMMENDED SIZE: 800 x 600 px (4:3 crop)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#191109 0%,#281808 100%);">
          <img src="/images/roofng-screenshot.jpg" alt="Roofng.com Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: roofng-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">Lead Generation</div>
          <div class="port-name">Roofng.com</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Lead Generation Site</div>
          <div class="port-name">Roofng.com</div>
          <a href="https://roofng.com" target="_blank" class="port-link">Visit Site</a>
        </div>
      </div>

      <!-- FreshLocal Web -->
      <div class="port-item rv d3">
        <!-- ============================================================
             IMAGE PLACEHOLDER: FreshLocal.co - Website Screenshot
             FILE: /images/freshlocal-screenshot.jpg
             RECOMMENDED SIZE: 800 x 600 px (4:3 crop)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#091A09 0%,#102010 100%);">
          <img src="/images/freshlocal-screenshot.jpg" alt="FreshLocal.co Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: freshlocal-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">Marketplace</div>
          <div class="port-name">FreshLocal.co</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Local Marketplace</div>
          <div class="port-name">FreshLocal.co</div>
          <a href="https://freshlocal.co" target="_blank" class="port-link">Visit Site</a>
        </div>
      </div>

      <!-- MainPro iOS -->
      <div class="port-item rv d4">
        <!-- ============================================================
             IMAGE PLACEHOLDER: MainPro V3 - iOS App Screenshot
             FILE: /images/mainpro-app-screenshot.jpg
             RECOMMENDED SIZE: 800 x 600 px (4:3, use device mockup or cropped screen)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#0F1E3D 0%,#1A2A50 100%);">
          <img src="/images/mainpro-app-screenshot.jpg" alt="MainPro V3 App Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: mainpro-app-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">iOS App</div>
          <div class="port-name">MainPro V3</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Native iOS App</div>
          <div class="port-name">MainPro V3</div>
          <a href="https://apps.apple.com/us/app/mainpro-v3/id6471679982" target="_blank" class="port-link">App Store</a>
        </div>
      </div>

      <!-- FreshLocal iOS -->
      <div class="port-item rv d5">
        <!-- ============================================================
             IMAGE PLACEHOLDER: FreshLocal Marketplace - iOS App Screenshot
             FILE: /images/freshlocal-app-screenshot.jpg
             RECOMMENDED SIZE: 800 x 600 px (4:3, use device mockup or cropped screen)
             Replace the <img> tag src below, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#0C1E0C 0%,#152815 100%);">
          <img src="/images/freshlocal-app-screenshot.jpg" alt="FreshLocal App Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: freshlocal-app-screenshot.jpg -->
        </div>
        <div class="port-label">
          <div class="port-type">iOS App</div>
          <div class="port-name">FreshLocal Marketplace</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Native iOS App</div>
          <div class="port-name">FreshLocal Marketplace</div>
          <a href="https://apps.apple.com/us/app/freshlocal-marketplace/id6504767445" target="_blank" class="port-link">App Store</a>
        </div>
      </div>

      <!-- Msky Learning -->
      <div class="port-item rv d6">
        <!-- ============================================================
             IMAGE PLACEHOLDER: Msky Learning - Screenshot
             FILE: /images/msky-learning.png
             RECOMMENDED SIZE: 800 x 600 px (4:3 crop)
             Add your screenshot to /images/, then delete this comment block
        ============================================================ -->
        <div class="port-thumb" style="background:linear-gradient(135deg,#1A1A2E 0%,#16213E 55%,#0F3460 100%);">
          <img src="/images/msky-learning.png" alt="Msky Learning Screenshot" width="800" height="600" style="width:100%;height:100%;object-fit:cover;opacity:0.85;position:absolute;inset:0;">
          <!-- END IMAGE PLACEHOLDER: msky-learning.png -->
        </div>
        <div class="port-label">
          <div class="port-type">Learning Platform</div>
          <div class="port-name">Msky Learning</div>
        </div>
        <div class="port-hover">
          <div class="port-type">Learning Platform</div>
          <div class="port-name">Msky Learning</div>
          <a href="https://mskylearning.com" target="_blank" class="port-link">Visit Site</a>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     FREE SEO ANALYSIS
====================================================== -->
<section id="seo-section">
  <div class="wrap">
    <div class="seo-grid">

      <div>
        <div class="sec-tag rv">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt">Free Offer</span>
        </div>
        <h2 class="sec-title rv d1">Free SEO<br>Analysis</h2>
        <p class="sec-sub rv d2" style="margin-bottom:.5rem;">
          Not sure why your site isn't ranking? I'll take a look and send you a real, actionable report, no strings attached.
        </p>

        <div class="seo-what-list rv d3">
          <div class="seo-what-item">
            <span class="seo-what-icon">🔍</span>
            <div>
              <div class="seo-what-name">Instant Automated Report</div>
              <div class="seo-what-desc">Within minutes you'll get a baseline report covering page speed, mobile score, meta tags, and Core Web Vitals.</div>
            </div>
          </div>
          <div class="seo-what-item">
            <span class="seo-what-icon">📄</span>
            <div>
              <div class="seo-what-name">Custom PDF Analysis</div>
              <div class="seo-what-desc">I personally evaluate your site and send a report with specific findings and recommendations within a few minutes.</div>
            </div>
          </div>
          <div class="seo-what-item">
            <span class="seo-what-icon">🎯</span>
            <div>
              <div class="seo-what-name">Keyword Gap Review</div>
              <div class="seo-what-desc">I'll identify what terms your competitors are ranking for that you're missing out on.</div>
            </div>
          </div>
          <div class="seo-what-item">
            <span class="seo-what-icon">🗺️</span>
            <div>
              <div class="seo-what-name">Local Visibility Check</div>
              <div class="seo-what-desc">Google Business Profile audit, citation consistency, and map pack ranking opportunities for your area.</div>
            </div>
          </div>
          <div class="seo-what-item">
            <span class="seo-what-icon">💡</span>
            <div>
              <div class="seo-what-name">No Pitch. Just Value.</div>
              <div class="seo-what-desc">The report is yours to keep and act on however you like. No obligation, no follow-up sales call unless you want one.</div>
            </div>
          </div>
        </div>
      </div>

      <div class="rv d3">
        <div class="seo-form-card">
          <div class="seo-form-title">Get Your Free Analysis</div>
          <p class="seo-form-sub">Enter your site below. I'll do a personal evaluation of your site and send you a report within a few minutes.</p>

          <div class="seo-timeline">
            <div class="seo-tl-item">
              <span class="seo-tl-icon">⚡</span>
              <span class="seo-tl-lbl">Instant<br>Auto Report</span>
            </div>
            <div class="seo-tl-item">
              <span class="seo-tl-icon">👤</span>
              <span class="seo-tl-lbl">24-48hr<br>PDF Review</span>
            </div>
            <div class="seo-tl-item">
              <span class="seo-tl-icon">📬</span>
              <span class="seo-tl-lbl">Sent to<br>Your Email</span>
            </div>
          </div>

          <form id="seo-form" method="POST" action="#seo-section">
            <input type="hidden" name="seo_request" value="1">
            <input type="hidden" name="_form_ts" value="">
            <div class="hp" style="position:absolute;left:-9999px;opacity:0;pointer-events:none;" aria-hidden="true">
              <label for="hp_url">Leave empty</label>
              <input type="text" name="_hp_url" id="hp_url" tabindex="-1" autocomplete="off">
            </div>

            <div class="fg">
              <label for="seo-name">Your Name</label>
              <input type="text" id="seo-name" name="seo_name" placeholder="Jane Smith" required>
            </div>
            <div class="fg">
              <label for="seo-email">Email Address</label>
              <input type="email" id="seo-email" name="seo_email" placeholder="jane@yourbusiness.com" required>
            </div>
            <div class="fg">
              <label for="seo-phone">Phone Number <span style="font-size:.7em;color:var(--muted);font-family:'Nunito Sans',sans-serif;text-transform:none;letter-spacing:0;">(optional)</span></label>
              <input type="tel" id="seo-phone" name="seo_phone" placeholder="704-000-0000">
            </div>
            <div class="fg">
              <label for="seo-url">Your Website URL</label>
              <div class="url-input-wrap">
                <span class="url-prefix">https://</span>
                <input type="text" id="seo-url" name="seo_url" placeholder="yourbusiness.com" required autocomplete="url">
              </div>
            </div>
            <div class="fg">
              <label for="seo-keyword">Your Main Target Keyword (Optional)</label>
              <input type="text" id="seo-keyword" name="seo_keyword" placeholder="e.g. roofing contractor Charlotte NC">
            </div>

            <button type="submit" class="seo-submit-btn" id="seo-submit-btn">Send Me My Free Report</button>
            <div class="seo-msg-ok" id="seo-msg-ok">Got it! Check your inbox for your report within a few minutes.</div>
            <div class="seo-msg-err" id="seo-msg-err">Something went wrong. Please email anthony@charlotteplus.com directly.</div>
          </form>

        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     TESTIMONIALS
====================================================== -->
<section id="testimonials-section">
  <div class="wrap" id="testimonials">
    <div class="sec-tag rv"><div class="sec-tag-line"></div><span class="sec-tag-txt">Client Reviews</span></div>
    <h2 class="sec-title rv d1">Don't take<br>my word for it.</h2>

    <div class="test-slider rv d2">
      <div class="test-track" id="test-track">

        <div class="test-slide">
          <div class="test-card">
            <div class="big-quote">"</div>
            <div class="test-stars">★★★★★</div>
            <p class="test-text">Anthony doesn't just build websites. He builds revenue engines. The lead gen system he put together for us tripled our inbound leads within 90 days. Couldn't recommend him more highly.</p>
            <div class="test-author">
              <div class="test-avatar">JM</div>
              <div>
                <div class="test-name">James M.</div>
                <div class="test-role">CEO · Home Services Company</div>
              </div>
            </div>
          </div>
        </div>

        <div class="test-slide">
          <div class="test-card">
            <div class="big-quote">"</div>
            <div class="test-stars">★★★★★</div>
            <p class="test-text">We had an idea for an app and Anthony brought it to life, on time and on budget. The MainPro platform is exactly what we envisioned, and his attention to detail on the iOS build was exceptional.</p>
            <div class="test-author">
              <div class="test-avatar">SR</div>
              <div>
                <div class="test-name">Sarah R.</div>
                <div class="test-role">Founder · Field Service Startup</div>
              </div>
            </div>
          </div>
        </div>

        <div class="test-slide">
          <div class="test-card">
            <div class="big-quote">"</div>
            <div class="test-stars">★★★★★</div>
            <p class="test-text">I've worked with a lot of developers over the years. Anthony is in a different league. He understands business, not just code. The AI features he added completely changed the game for us.</p>
            <div class="test-author">
              <div class="test-avatar">DK</div>
              <div>
                <div class="test-name">David K.</div>
                <div class="test-role">Director of Product · SaaS Company</div>
              </div>
            </div>
          </div>
        </div>

      </div><!-- /track -->

      <div class="slider-footer">
        <div class="dots">
          <div class="dot on" data-i="0"></div>
          <div class="dot" data-i="1"></div>
          <div class="dot" data-i="2"></div>
        </div>
        <div class="arrows">
          <button class="arrow-btn" id="prev">←</button>
          <button class="arrow-btn" id="next">→</button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ======================================================
     DREAM IT / BUILD IT
====================================================== -->
<section id="dream-section">
  <div class="wrap" style="padding-top:7rem;padding-bottom:7rem;background:var(--cream);">
    <div class="dream-grid">

      <div class="dream-left">
        <div class="sec-tag rv">
          <div class="sec-tag-line"></div>
          <span class="sec-tag-txt">The Big Idea</span>
        </div>
        <h2 class="sec-title rv d1">You dream it.<br><span style="color:var(--amber);">We build it.</span></h2>
        <p class="sec-sub rv d2" style="margin-bottom:2rem;">
          The gap between a great idea and a live product used to be enormous: expensive agencies, long timelines, uncertain results. That gap is gone.
        </p>
        <p style="font-size:.97rem;color:var(--muted);line-height:1.8;max-width:480px;" class="rv d3">
          With 12+ years of full-stack experience and AI as a force multiplier, I can take a napkin sketch and turn it into a polished, market-ready product faster than you'd expect, at a fraction of traditional cost. Custom web apps, mobile platforms, automation systems, SaaS tools. If you can describe it, I can build it.
        </p>
        <div class="dream-checks rv d4">
          <div class="dc">✦ <span>From idea to MVP in weeks, not months</span></div>
          <div class="dc">✦ <span>One person accountable, no agency layers</span></div>
          <div class="dc">✦ <span>AI-accelerated development that cuts costs</span></div>
          <div class="dc">✦ <span>Built to scale as your business grows</span></div>
          <div class="dc">✦ <span>You own every line of code</span></div>
        </div>
      </div>

      <div class="dream-right rv d3">
        <div class="dream-card">
          <div class="dc-label">The Process</div>
          <div class="dc-steps">
            <div class="dc-step">
              <div class="dc-num">01</div>
              <div>
                <div class="dc-step-name">Tell Me Your Vision</div>
                <div class="dc-step-desc">A conversation, a sketch, a doc. However it lives in your head is fine. We'll shape it together.</div>
              </div>
            </div>
            <div class="dc-step">
              <div class="dc-num">02</div>
              <div>
                <div class="dc-step-name">Scope & Strategy</div>
                <div class="dc-step-desc">I map out what needs to be built, the right tech stack, and a realistic timeline with no surprises.</div>
              </div>
            </div>
            <div class="dc-step">
              <div class="dc-num">03</div>
              <div>
                <div class="dc-step-name">Build &amp; Iterate</div>
                <div class="dc-step-desc">You see progress early and often. Feedback loops are fast. Nothing ships that you haven't approved.</div>
              </div>
            </div>
            <div class="dc-step">
              <div class="dc-num">04</div>
              <div>
                <div class="dc-step-name">Launch &amp; Grow</div>
                <div class="dc-step-desc">We go live, then optimize, iterate, and scale. The relationship doesn't end at launch.</div>
              </div>
            </div>
          </div>
          <a href="#contact" class="btn-primary" style="display:inline-block;margin-top:2rem;">Start the Conversation &#8594;</a>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     CTA BAND (Parallax)
====================================================== -->
<div id="cta-band">
  <div class="cta-bg" id="cta-bg"></div>
  <div class="cta-inner rv">
    <h2 class="cta-title">Ready to build something<br><span>the market hasn't seen yet?</span></h2>
    <p class="cta-sub">With 12+ years of experience and AI in our toolkit, there's no ceiling on what we can create together.</p>
    <a href="#contact" class="btn-primary">Let's Talk →</a>
  </div>
</div>

<!-- ======================================================
     CONTACT
====================================================== -->
<section id="contact-section">
  <div class="wrap" id="contact">
    <div class="contact-grid">

      <div>
        <div class="sec-tag rv"><div class="sec-tag-line"></div><span class="sec-tag-txt">Get in Touch</span></div>
        <h2 class="sec-title rv d1">Let's build<br>something great.</h2>
        <p class="sec-sub rv d2" style="margin-bottom:3rem;">Have a project in mind? Drop me a line. I respond fast and I love a good challenge.</p>

        <div class="ci-item rv d3">
          <div class="ci-icon">📧</div>
          <div>
            <div class="ci-lbl">Email</div>
            <div class="ci-val"><a href="mailto:anthony@charlotteplus.com">anthony@charlotteplus.com</a></div>
          </div>
        </div>
        <div class="ci-item rv d4">
          <div class="ci-icon">📞</div>
          <div>
            <div class="ci-lbl">Phone</div>
            <div class="ci-val">
              <a href="tel:7048132085" id="click-to-call"
                 onclick="fbq('track','Contact',{content_name:'click_to_call'});gtag('event','click_to_call',{event_category:'engagement',event_label:'phone_link'});">
                704-813-2085
              </a>
            </div>
          </div>
        </div>
        <div class="ci-item rv d5">
          <div class="ci-icon">📍</div>
          <div>
            <div class="ci-lbl">Location</div>
            <div class="ci-val">Dallas, NC</div>
          </div>
        </div>
      </div>

      <div class="rv d2">
        
        <form id="contact-form" method="POST" action="#contact">
          <input type="hidden" name="contact" value="1">
          <input type="hidden" name="_form_ts" value="">
          <div class="hp" style="position:absolute;left:-9999px;opacity:0;pointer-events:none;" aria-hidden="true">
            <label for="hp_company">Leave empty</label>
            <input type="text" name="_hp_company" id="hp_company" tabindex="-1" autocomplete="off">
          </div>

          <div class="form-row">
            <div class="fg">
              <label for="name">Your Name</label>
              <input type="text" id="name" name="name" placeholder="John Smith" required>
            </div>
            <div class="fg">
              <label for="email">Email Address</label>
              <input type="email" id="email" name="email" placeholder="john@company.com" required>
            </div>
          </div>

          <div class="form-row">
            <div class="fg">
              <label for="phone">Phone Number</label>
              <input type="tel" id="phone" name="phone" placeholder="704-000-0000" required>
            </div>
            <div class="fg">
              <label for="service">I Need Help With</label>
              <select id="service" name="service">
                <option value="">Select a Service</option>
                <option value="website">Website Development</option>
                <option value="leadgen">Lead Generation</option>
                <option value="app">Mobile App</option>
                <option value="ai">AI Integration</option>
                <option value="saas">SaaS / Custom App</option>
                <option value="other">Something Else</option>
              </select>
            </div>
          </div>

          <div class="fg">
            <label for="message">Tell Me About Your Project</label>
            <textarea id="message" name="message" placeholder="Describe what you're building, your timeline, and any specifics..." required></textarea>
          </div>

          <button type="submit" class="submit-btn" id="submit-btn">Send Message →</button>
          <div class="msg-ok" id="msg-ok">✓ Message sent! I'll be in touch shortly.</div>
          <div class="msg-err" id="msg-err">Something went wrong. Please email directly at anthony@charlotteplus.com</div>
        </form>
      </div>

    </div>
  </div>
</section>

<!-- ======================================================
     FOOTER
====================================================== -->
<footer id="footer">
  <div class="f-logo">Charlotte<span>Plus</span></div>
  <div class="f-copy">© 2026 CharlottePlus.com · All rights reserved.</div>
  <div class="f-links">
    <a href="/privacy.php">Privacy Policy</a>
    <a href="https://publishrank.io" target="_blank">PublishRank</a>
    <a href="https://mainpro.io" target="_blank">MainPro</a>
    <a href="https://freshlocal.co" target="_blank">FreshLocal</a>
    <a href="mailto:anthony@charlotteplus.com">Email</a>
  </div>
</footer>

<!-- ======================================================
     JAVASCRIPT (jQuery)
====================================================== -->
<script>
$(function () {

  /* ---- HAMBURGER MENU ---- */
  const $ham  = $('#hamburger');
  const $menu = $('#mobile-menu');

  function openMenu() {
    $ham.addClass('open').attr('aria-expanded', 'true');
    $menu.addClass('open').attr('aria-hidden', 'false');
    $('body').css('overflow', 'hidden');
  }
  function closeMenu() {
    $ham.removeClass('open').attr('aria-expanded', 'false');
    $menu.removeClass('open').attr('aria-hidden', 'true');
    $('body').css('overflow', '');
  }

  $ham.on('click', function () {
    $ham.hasClass('open') ? closeMenu() : openMenu();
  });

  // close on any menu link click, then smooth scroll
  $menu.find('a').on('click', function () {
    closeMenu();
  });

  // close on ESC
  $(document).on('keydown', function (e) {
    if (e.key === 'Escape') closeMenu();
  });

  /* ---- NAV scroll ---- */
  $(window).on('scroll.nav', function () {
    $('#nav').toggleClass('scrolled', $(this).scrollTop() > 55);
  });

  /* ---- PARALLAX ---- */
  $(window).on('scroll.parallax', function () {
    const sy = $(this).scrollTop();

    // hero parallax
    $('#hero-bg').css('transform', 'translateY(' + (sy * 0.32) + 'px)');

    // cta band parallax
    const $cta = $('#cta-band');
    if ($cta.length) {
      const off  = $cta.offset().top;
      const rel  = sy - off;
      const wh   = window.innerHeight;
      if (rel > -wh && rel < wh) {
        $('#cta-bg').css('transform', 'translateY(' + (rel * 0.22) + 'px)');
      }
    }
  });

  /* ---- REVEAL on scroll ---- */
  function doReveal () {
    const bot = $(window).scrollTop() + $(window).height() - 70;
    $('.rv:not(.on)').each(function () {
      if ($(this).offset().top < bot) $(this).addClass('on');
    });
  }
  $(window).on('scroll.reveal', doReveal);
  doReveal();

  /* ---- COUNT-UP for hero stats ---- */
  let counted = false;
  function countUp () {
    if (counted) return;
    const $stats = $('.hero-right');
    if (!$stats.length) return;
    const bot = $(window).scrollTop() + $(window).height();
    if ($stats.offset().top < bot) {
      counted = true;
      $('[data-count]').each(function () {
        const $el  = $(this);
        const end  = parseInt($el.data('count'));
        const dur  = 1400;
        const step = 16;
        const inc  = end / (dur / step);
        let cur = 0;
        const t = setInterval(function () {
          cur += inc;
          if (cur >= end) { cur = end; clearInterval(t); $el.text(end + '+'); }
          else { $el.text(Math.floor(cur)); }
        }, step);
      });
    }
  }
  $(window).on('scroll.count', countUp);
  countUp();

  /* ---- TESTIMONIAL SLIDER ---- */
  let cur   = 0;
  const tot = $('.test-slide').length;

  function goSlide (i) {
    cur = ((i % tot) + tot) % tot;
    $('#test-track').css('transform', 'translateX(-' + (cur * 100) + '%)');
    $('.dot').removeClass('on');
    $('.dot[data-i="' + cur + '"]').addClass('on');
  }

  $('#next').on('click', function () { goSlide(cur + 1); });
  $('#prev').on('click', function () { goSlide(cur - 1); });
  $('.dot').on('click',  function () { goSlide(parseInt($(this).data('i'))); });

  // auto-advance every 6 s
  const autoSlide = setInterval(function () { goSlide(cur + 1); }, 6000);


  /* ---- SEO ANALYSIS FORM (AJAX) ---- */
  $('#seo-form').on('submit', function (e) {
    e.preventDefault();
    const $form = $(this);
    $form.find('[name=_form_ts]').val(window._formLoadTime || Date.now());
    const $btn = $('#seo-submit-btn');
    $btn.text('Generating report...').prop('disabled', true);
    $('.seo-msg-ok, .seo-msg-err').hide();
    $.ajax({
      url    : window.location.href,
      method : 'POST',
      data   : $form.serialize() + '&ajax=1',
      dataType: 'text',
      timeout: 120000,
      success: function (raw) {
        try {
          const r = (typeof raw === 'object') ? raw : JSON.parse(raw);
          if (r.status === 'success') { $('#seo-msg-ok').fadeIn(300); $('#seo-form')[0].reset();
            fbq('track', 'Lead', {content_name: 'seo_analysis_request', content_category: 'seo_form'});
            gtag('event', 'generate_lead', {event_category: 'form', event_label: 'seo_analysis'});
          }
          else { $('#seo-msg-err').fadeIn(300); }
        } catch (ex) { $('#seo-msg-err').fadeIn(300); }
      },
      error  : function (xhr) {
        if (xhr.status === 200 && xhr.responseText) {
          try {
            const r = (typeof xhr.responseText === 'object') ? xhr.responseText : JSON.parse(xhr.responseText);
            if (r.status === 'success') { $('#seo-msg-ok').fadeIn(300); $('#seo-form')[0].reset(); return; }
          } catch (e) {}
        }
        $('#seo-msg-err').fadeIn(300);
      },
      complete: function () { $btn.text('Send Me My Free Report').prop('disabled', false); }
    });
  });

  /* ---- CONTACT FORM (AJAX) ---- */
  $('#contact-form').on('submit', function (e) {
    e.preventDefault();
    clearInterval(autoSlide);           // stop slide auto on user action
    const $form = $(this);
    $form.find('[name=_form_ts]').val(window._formLoadTime || Date.now());
    const $btn = $('#submit-btn');
    $btn.text('Sending...').prop('disabled', true);
    $('#msg-ok, #msg-err').hide();

    $.ajax({
      url    : window.location.href,
      method : 'POST',
      data   : $form.serialize() + '&ajax=1',
      dataType: 'text',
      success: function (raw) {
        try {
          const r = (typeof raw === 'object') ? raw : JSON.parse(raw);
          if (r.status === 'success') {
            $('#msg-ok').fadeIn(300);
            $('#contact-form')[0].reset();
            fbq('track', 'Contact', {content_name: 'contact_form', content_category: 'contact'});
            gtag('event', 'generate_lead', {event_category: 'form', event_label: 'contact_form'});
          } else { $('#msg-err').fadeIn(300); }
        } catch (ex) { $('#msg-err').fadeIn(300); }
      },
      error  : function (xhr) {
        if (xhr.status === 200 && xhr.responseText) {
          try {
            const r = JSON.parse(xhr.responseText);
            if (r.status === 'success') {
              $('#msg-ok').fadeIn(300);
              $('#contact-form')[0].reset();
              return;
            }
          } catch (e) {}
        }
        $('#msg-err').fadeIn(300);
      },
      complete: function () {
        $btn.text('Send Message →').prop('disabled', false);
      }
    });
  });

  /* ---- DEMO CAROUSEL ---- */
  (function () {
    var $track  = $('#demo-track');
    var $slides = $track.find('.demo-slide');
    var total   = $slides.length;
    function perView() { return window.innerWidth <= 540 ? 1 : window.innerWidth <= 900 ? 2 : 3; }
    var cur = 0;

    function maxIdx() { return Math.max(0, total - perView()); }

    // Build dots
    var numDots = Math.ceil(total / perView());
    var $dotsWrap = $('#c-dots');
    for (var i = 0; i < numDots; i++) {
      $dotsWrap.append('<button class="c-dot' + (i===0?' on':'') + '" data-dot="'+i+'" aria-label="Slide '+(i+1)+'"></button>');
    }

    function slideTo(idx) {
      cur = Math.max(0, Math.min(idx, maxIdx()));
      var w = $slides.first().outerWidth(true);
      $track.css('transform', 'translateX(-' + (cur * w) + 'px)');
      var activeDot = Math.min(Math.round(cur / perView()), numDots - 1);
      $dotsWrap.find('.c-dot').removeClass('on');
      $dotsWrap.find('[data-dot="'+activeDot+'"]').addClass('on');
    }

    var autoT;
    function startAuto() { stopAuto(); autoT = setInterval(function(){ slideTo(cur >= maxIdx() ? 0 : cur+1); }, 4500); }
    function stopAuto()  { clearInterval(autoT); }

    $('#c-next').on('click', function(){ stopAuto(); slideTo(cur >= maxIdx() ? 0 : cur+1); startAuto(); });
    $('#c-prev').on('click', function(){ stopAuto(); slideTo(cur <= 0 ? maxIdx() : cur-1); startAuto(); });
    $dotsWrap.on('click', '.c-dot', function(){
      stopAuto();
      slideTo(parseInt($(this).data('dot')) * perView());
      startAuto();
    });

    $(window).on('resize.democar', function(){
      cur = Math.min(cur, maxIdx());
      slideTo(cur);
    });

    startAuto();
  })();


  /* ---- SMOOTH SCROLL ---- */
  $(document).on('click', 'a[href^="#"]', function (e) {
    const $t = $($(this).attr('href'));
    if ($t.length) {
      e.preventDefault();
      $('html,body').animate({ scrollTop: $t.offset().top - 75 }, 680, 'swing');
    }
  });

});
</script>
</body>
</html>