:root {
  --green-dark:  #25591F;
  --green-mid:   #6CA439;
  --orange:      #EF7623;
  --orange-dark: #AE441D;
  --orange-deep: #FF5000;
  --cream:       #F7F4EC;
  --cream-soft:  #FBFAF5;
  --ink:         #1C2218;
  --ink-soft:    #4A5645;
  --line:        #E0DDD0;
  --white:       #FFFFFF;
  --radius:      12px;
  --radius-lg:   20px;
  --container:   1240px;
}


@font-face {
  font-family: "glancesans";
  src: url("./glancesans.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ============ RESET ============ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; width:100%; }
body {
  /* font-family:'Segoe UI',system-ui,-apple-system,sans-serif; */
   font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; height:auto; }
a { text-decoration:none; color:inherit; }

/* ============ LAYOUT ============ */
.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 40px;
  width:100%;
  box-sizing:border-box;
}
.section { padding:60px 0; }
.section-alt  { background:var(--white); }
.section-dark { background:#1e4f19; color:var(--cream); }
.center { text-align:center; }

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4 {
  color:var(--green-dark);
  font-family:'glancesans';
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.01em;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4 { color:var(--cream); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:#c8a35f; margin-bottom:12px;
}
.eyebrow-white { color:rgba(255,255,255,0.7);  margin-top: 40px;}

.lead { font-size:18px; line-height:1.7; color:var(--ink-soft); max-width:660px; }
.section-dark .lead { color:rgba(247,244,236,0.8); }
.center .lead { margin:0 auto; }

/* ============ BUTTONS ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 32px; border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:0.04em;
  border:2px solid transparent; cursor:pointer;
  transition:all 0.22s ease; white-space:nowrap;
  box-sizing:border-box;
}
.btn-primary     { background:var(--green-dark); color:white; }
.btn-primary:hover { background:var(--orange); border-color:var(--orange); }
.btn-orange      { background: var(--orange);color: white; }
/* .btn-orange:hover { background:var(--orange-deep); } */
.btn-outline     { background:transparent; color:var(--cream); border-color:rgba(247,244,236,0.4); }
.btn-outline:hover { background:var(--green-dark); border-color:var(--green-dark); }
.btn-outline-dark { background:transparent; color:var(--green-dark); border-color:var(--green-dark); }
.btn-outline-dark:hover { background:var(--green-dark); color:var(--cream); }
.btn-lg   { padding:18px 40px; font-size:15px; }
.btn-block { width:100%; display:flex; }

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:1000;
  background:rgba(247,244,236,0.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  width:100%;
}
.nav-wrap {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-text { display:flex; align-items:center; }
.logo-img { width:130px; height:auto; object-fit:contain; }
.nav-cta { display:flex; gap:10px; flex-shrink:0; }
.nav-cta .btn { padding:10px 20px; font-size:13px; }

/* ============ HERO ============ */
.hero {
  padding:64px 0 80px;
  background:linear-gradient(135deg,var(--cream) 55%,rgba(108,164,57,0.08) 100%);
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(37,89,31,0.08);
  pointer-events:none;
}
.hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(37,89,31,0.08); border:1px solid rgba(37,89,31,0.15);
  color:var(--green-dark); border-radius:999px;
  padding:6px 16px; font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px;
}
.hero h1 { font-size:52px; margin-bottom:20px; }
.hero h1 .accent { color:var(--green-mid); }
.hero .lead { margin-bottom:30px; font-size:17px; }
.hero-ctas { display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap; }
.trust-row {
  display:flex; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--line);
}
.trust-item { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--green-dark); }
.trust-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.hero-visual {
  position:relative; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 28px 60px -20px rgba(37,89,31,0.3);
}
.hero-visual img { width:100%; height:480px; object-fit:cover; }

/* ============ STATS STRIP ============ */
.stats-strip { background:var(--green-dark); padding:36px 0; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.stat-item { padding:8px 0; }
.stat-item .n { font-size:34px; font-weight:800; color:#E6CF9C; line-height:1; margin-bottom:6px; }
.stat-item .l { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(247,244,236,0.65); }

/* ============ SECTION HEAD ============ */
.section-head { margin-bottom:48px;margin-left: 10; }
.section-head h2 { font-size:38px; margin-bottom:14px; }

/* ============ ABOUT ============ */
/* .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: sticky;
  top: 80px;
  align-self: start;
}
.about-imgs .img-main { grid-column:1/-1; border-radius:var(--radius-lg); overflow:hidden; height:240px; }
.about-imgs .img-small { border-radius:var(--radius); overflow:hidden; height:150px; }
.about-imgs img { width:100%; height:100%; object-fit:cover; }
.about-features { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.about-features li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); }
.feat-icon {
  width:24px; height:24px; border-radius:50%;
  background:rgba(108,164,57,0.15); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; margin-top:1px;
} */

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:stretch; }
.about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px;
  position: sticky;
  top: 80px;
  align-self: start;
  height: 100%;
}
.about-imgs .img-main { grid-column:1/-1; grid-row:1; border-radius:var(--radius-lg); overflow:hidden; min-height:0; }
.about-imgs .img-small { grid-row:2; border-radius:var(--radius); overflow:hidden; height:150px; }
.about-imgs img { width:100%; height:100%; object-fit:cover; }
.about-features { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.about-features li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); }
.feat-icon {
  width:24px; height:24px; border-radius:50%;
  background:rgba(108,164,57,0.15); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; margin-top:1px;
}


/* ============ WHY PARTNER ============ */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card {
  background:var(--cream-soft); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px 26px; transition:all 0.22s;
}
.why-card:hover { border-color:var(--orange); transform:translateY(-4px); box-shadow:0 16px 36px rgba(37,89,31,0.08); }
.why-icon {
  width:52px; height:52px; border-radius:12px;
  background:var(--green-dark); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:18px;
}
.why-card h4 { font-size:18px; margin-bottom:8px; }
.why-card p  { font-size:14px; color:var(--ink-soft); line-height:1.65; }

/* ============ HOW IT WORKS ============ */
.steps-row { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.step { text-align:center; padding:0 12px; position:relative; }
.step-circle {
  width:90px; height:90px; border-radius:50%;
  background:linear-gradient(135deg,#c8a35f,#e5c17a);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; position:relative; z-index:2;
  color:#fff; font-size:34px;
  box-shadow:0 15px 40px rgba(200,163,95,0.25);
  transition:0.3s ease;
}
.step-circle:hover { transform:translateY(-6px); }
.step h4 { font-size:15px; margin-bottom:6px; color:var(--green-dark); }
.step-line {
  position:absolute; top:45px; left:12%; right:12%; height:1px;
  background:repeating-linear-gradient(to right,rgba(37,89,31,0.25) 0,rgba(37,89,31,0.25) 6px,transparent 6px,transparent 12px);
  z-index:1;
}


/* =========================
   TABLET
========================= */
@media (max-width: 992px) {

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .steps-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .step-line {
    display: none;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

  .why-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .why-card {
    padding: 24px 20px;
    text-align: center;
  }

  .why-icon {
    margin: 0 auto 15px;
  }

  .steps-row {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .step {
    padding: 0;
    max-width: 350px;
    margin: 0 auto;
  }

  .step-circle {
    width: 80px;
    height: 80px;
    font-size: 28px;
    margin-bottom: 15px;
  }

  .step h4 {
    font-size: 17px;
  }

  .step p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
  }

  .step-line {
    display: none;
  }

  .section-dark .lead { 
    color:rgba(247,244,236,0.8);
margin-left: 10px; }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px) {

  .why-card {
    padding: 20px 16px;
  }

  .why-card h4 {
    font-size: 16px;
  }

  .why-card p {
    font-size: 13px;
  }

  .step-circle {
    width: 70px;
    height: 70px;
    font-size: 24px;
  }

  .step h4 {
    font-size: 15px;
  }

  .step p {
    font-size: 13px;
  }
}

/* form */

.contact-bg-section {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
  background-image: url('../images/fbg.png'); /* ← your bg image */
  background-size: cover;
  background-position: center 30%;
  background-color: #c8c9b8; /* fallback */
}
/* .contact-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.05) 55%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
} */
.contact-bg-section .container {
  position: relative; z-index: 2;
}
.contact-form-card {
  background: rgba(255,255,255,0.97);
  border-radius: 20px;
  padding: 44px 40px;
  max-width: 500px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22);
}
.contact-form-card h3 {
  font-size: 26px; font-weight: 700;
  margin-bottom: 6px; color: #25591F;
}
.contact-form-card .sub {
  font-size: 14px; color: #4A5645; margin-bottom: 28px;
}
@media (max-width: 768px) {
  .contact-bg-section { padding: 50px 0; min-height: unset; }
  .contact-form-card { padding: 28px 20px; max-width: 100%; }
  .contact-form-card h3 { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}





/* ============ FRANCHISE MODELS ============ */
.models-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.model-card {
  border-radius:var(--radius-lg); overflow:hidden;
  border:2px solid var(--line); background:var(--white); transition:all 0.22s;
  position:relative;
}
.model-card:hover { border-color:var(--green-mid); transform:translateY(-4px); box-shadow:0 20px 44px rgba(37,89,31,0.1); }
.model-card.featured { border-color:var(--orange); }
.model-badge {
  position:absolute; top:16px; right:16px;
  background:var(--orange); color:white;
  font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; z-index:2;
}
.model-img { height:180px; overflow:hidden; }
.model-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.model-card:hover .model-img img { transform:scale(1.04); }
.model-body { padding:26px 22px; }
.model-tag {
  display:inline-block; background:rgba(37,89,31,0.1); color:var(--green-dark);
  font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.model-card.featured .model-tag { background:rgba(239,118,35,0.12); color:var(--orange-dark); }
.model-body h3 { font-size:22px; margin-bottom:6px; }
.model-body .sub { font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }
.model-invest { background:var(--cream); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.model-card.featured .model-invest { background:rgba(239,118,35,0.06); }
.invest-label { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:4px;font-weight: bold; }
.invest-val { font-size:35px; font-weight:800; color:var(--green-dark); }
.model-card.featured .invest-val { color:var(--orange); }
.model-features { list-style:none; margin-bottom:18px; }
.model-features li {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-soft);
  padding:6px 0; border-bottom:1px solid var(--line);
}
.model-features li:last-child { border-bottom:none; }
.model-features li::before { content:'✓'; color:var(--green-mid); font-weight:800; flex-shrink:0; }

/* ============ BRAND TRUST ============ */
.brand-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.brand-visual { position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.brand-visual img { width:100%; height:460px; object-fit:cover; }
.brand-visual::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(37,89,31,0.7) 100%);
}
.brand-points { list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.brand-points li {
  display:flex; align-items:center; gap:14px;
  background:rgba(247,244,236,0.07); border:1px solid rgba(247,244,236,0.15);
  border-radius:var(--radius); padding:16px 18px;
}
.bp-icon {
  width:60px; height:60px; min-width:60px; border-radius:50%;
  background:linear-gradient(135deg,#c8a35f,#e6c98a);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bp-icon i { font-size:24px; }
.bp-text h5 { font-size:15px; font-weight:700; color:var(--cream); }

/* ============ REVENUE ============ */
.rev-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.rev-card {
  background:rgba(247,244,236,0.07); border:1px solid rgba(247,244,236,0.15);
  border-radius:var(--radius-lg); padding:28px 20px; text-align:center; transition:all 0.22s;
}
.rev-card:hover { border-color:rgba(239,118,35,0.4); transform:translateY(-3px); }
.rev-icon {
  width:52px; height:52px; border-radius:12px;
  background:#E6CF9C; color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin:0 auto 16px;
}
.rev-card h4 { font-size:17px; color:var(--cream); margin-bottom:8px; }
.rev-card p  { font-size:13px; color:rgba(247,244,236,0.65); line-height:1.5; }

/* ============ ROI ============ */
.roi-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:52px; align-items:center; }
.roi-table { width:100%; border-collapse:collapse; margin-bottom:28px; }
.roi-table tr { border-bottom:1px solid rgba(247,244,236,0.1); }
.roi-table tr:last-child { border-bottom:none; }
.roi-table td { padding:14px 0; font-size:14px; }
.roi-table td:first-child { color:#E6CF9C; font-weight:700; width:40%; }
.roi-table td:last-child { color:rgba(247,244,236,0.85); }
.roi-cards { display:flex; gap:14px; }
.roi-card {
  flex:1; background:rgba(247,244,236,0.07);
  border:1px solid rgba(239,118,35,0.3); border-radius:var(--radius);
  padding:20px; text-align:center;
}
.roi-card .big { font-size:28px; font-weight:800; color:#E6CF9C; line-height:1; margin-bottom:4px; }
.roi-card .lbl { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(247,244,236,0.6); }
.roi-visual img { width:100%; height:440px; object-fit:cover; border-radius:var(--radius-lg); }

/* ============ FAQ ============ */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.faq-list { display:flex; flex-direction:column; width:100%; }
.faq-item { border-bottom:1px solid var(--line); width:100%; }
.faq-q {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 0; font-size:15px; font-weight:600; color:var(--green-dark);
  text-align:left; gap:12px; transition:color 0.2s; box-sizing:border-box;
}
.faq-q:hover { color:var(--orange); }
.faq-q .text {
  flex:1; min-width:0;
  word-wrap:break-word; overflow-wrap:break-word; line-height:1.4;
}
.faq-q .icon {
  width:26px; height:26px; min-width:26px; max-width:26px;
  border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:14px; transition:all 0.2s; margin-top:2px;
}
.faq-item.open .faq-q .icon { background:var(--orange); border-color:var(--orange); color:white; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-item.open .faq-a { max-height:300px; }
.faq-a p { font-size:14px; color:var(--ink-soft); line-height:1.65; padding-bottom:18px; }

/* ============ FORM ============ */
.form-wrap {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--line); padding:36px;
}
.form-wrap h3 { font-size:24px; margin-bottom:6px; }
.form-wrap .sub { font-size:14px; color:var(--ink-soft); margin-bottom:24px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fgroup { margin-bottom:14px; }
.fgroup label { display:block; font-size:12px; font-weight:700; color:var(--green-dark); margin-bottom:6px; }
.fgroup input,.fgroup select,.fgroup textarea {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:8px;
  font-size:14px; color:var(--ink); background:var(--cream-soft);
  font-family:inherit; transition:all 0.2s; box-sizing:border-box;
}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus {
  outline:none; border-color:var(--green-dark); background:var(--white);
  box-shadow:0 0 0 3px rgba(37,89,31,0.1);
}
.fgroup textarea { min-height:80px; resize:vertical; }
.form-note { font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:12px; }

/* ============ CTA BANNER ============ */
.cta-banner {
  background:var(--green-dark); padding:70px 0;
  position:relative; overflow:hidden; text-align:center;
}
.pattern-bg {
  position:absolute; inset:0; z-index:0; opacity:0.03;
  background-image:repeating-linear-gradient(45deg,var(--white) 0,var(--white) 1px,transparent 1px,transparent 50%);
  background-size:24px 24px;
}
.cta-banner h2 { font-size:42px; color:var(--cream); margin-bottom:16px; position:relative; z-index:1; }
.cta-banner p {
  font-size:17px; color:rgba(247,244,236,0.75); margin-bottom:32px;
  max-width:580px; margin-left:auto; margin-right:auto; position:relative; z-index:1;
}
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* ============ FOOTER ============ */
.site-footer { background:#111; color:#fff; padding:60px 20px 30px; text-align:center; }
.footer-center { display:flex; flex-direction:column; align-items:center; gap:20px; }
.footer-logo img { max-width:180px; height:auto; }
.footer-desc { max-width:700px; font-size:16px; line-height:1.8;margin-bottom: -30px; }
.footer-bottom {
  margin-top:30px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:14px; opacity:0.8;
}

/* ============ FOCUS ============ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--orange); outline-offset:2px;
}





/*  */

/*  */

.stats-strip{
  padding:0;
  background:#fff;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border-radius:0;
}

/* Common Card Style */
.stat-item{
  padding:30px 10px;
  text-align:center;
  position:relative;
}

/* Green Cards */
.stat-green{
  background:#1f5f1f;
}

/* Gold Cards */
.stat-orange{
  background:#195819;
}

/* Vertical Divider */
.stat-item:not(:last-child){
  border-right:2px solid rgba(255,255,255,0.15);
}

/* Numbers */
.stat-item .n{
  font-size:44px;
  font-weight:800;
  line-height:1;
  margin-bottom:12px;
}

/* Labels */
.stat-item .l{
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:2px;
}

/* Text Colors */
.stat-green .n{
  color:#e6cf9c;
}

.stat-green .l{
  color:rgba(255,255,255,0.9);
}

.stat-orange .n{
  color:#e6cf9c;
}

.stat-orange .l{
  color:rgba(255,255,255,0.9);
}

/* Tablet */
@media(max-width:1024px){
  .stat-item .n{
    font-size:48px;
  }

  .stat-item .l{
    font-size:14px;
  }
}

/* Mobile */
@media(max-width:768px){
  .stats-row{
    grid-template-columns:1fr 1fr;
  }

  .stat-item{
    padding:35px 15px;
  }

  .stat-item .n{
    font-size:38px;
  }

  .stat-item .l{
    font-size:12px;
  }
}

@media(max-width:480px){
  .stats-row{
    grid-template-columns:1fr;
  }
}


@media (max-width: 768px) {
  .hero-ctas .btn {
    font-size: 20px;
    padding: 16px 44px;
  }

  .trust-item {
    font-size: 18px;
  }
}


/* Hide mobile images on desktop */


@media (max-width: 768px) {
  /* Hide original, show moved */
  .about-grid > .about-imgs {
    display: none;
  }

  .about-imgs-moved {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
  }

  .about-imgs-moved .img-main {
    grid-column: 1 / -1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 200px;
  }

  .about-imgs-moved .img-small {
    border-radius: var(--radius);
    overflow: hidden;
    height: 130px;
  }

  .about-imgs-moved img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Hide mobile images on desktop */
.about-imgs-moved {
  display: none !important;
}

/* @media (max-width: 768px) {
  .about-imgs-moved {
    display: grid !important;
  }
} */







/* ============ RESPONSIVE: 1024px ============ */
@media(max-width:1024px) {
  .hero-grid        { grid-template-columns:1fr; gap:36px; }
  .hero-content     { text-align:center; }
  .hero .lead       { margin:0 auto 28px; }
  .hero-ctas        { justify-content:center; }
  .trust-row        { justify-content:center; }
  .hero h1          { font-size:42px; }
  .about-grid       { grid-template-columns:1fr; gap:36px; }
  .brand-grid       { grid-template-columns:1fr; gap:36px; }
  .roi-grid         { grid-template-columns:1fr; gap:36px; }
  .faq-grid         { grid-template-columns:1fr; gap:36px; }
  .why-grid         { grid-template-columns:1fr 1fr; }
  .models-grid      { grid-template-columns:1fr 1fr; }
  .rev-grid         { grid-template-columns:1fr 1fr; }
  .steps-row        { grid-template-columns:repeat(3,1fr); gap:24px; }
  .step-line        { display:none; }
}

/* ============ RESPONSIVE: 768px ============ */
@media(max-width:768px) {
  .container        { padding:0 16px; }
  .section          { padding:60px 0; }

  /* Header */
  .nav-cta .btn     { padding:9px 14px; font-size:12px; }
  .logo-img         { width:110px; }

  /* Hero */
  .hero             { padding:36px 0 48px; overflow:hidden; }
  .hero::before     { display:none; }
  .hero-grid        { grid-template-columns:1fr; gap:24px; }
  .hero-content     { text-align:center; }
  .hero h1          { font-size:32px; }
  .hero .lead       { font-size:16px; margin:0 auto 24px; width: 350px;}
  .hero-ctas        { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn   { width:100%; justify-content:center; }
  .hero-visual img  { height:260px; }
  .trust-row        { align-items:center; gap:10px;font-size: 20px; }

  /* Stats */
  .stats-row        { grid-template-columns:1fr 1fr; gap:5px; }
  .stat-item .n     { font-size:26px; }

  /* Section heads */
  .section-head h2  { font-size:26px; }
  

  /* About */
  .about-grid       { grid-template-columns:1fr; gap:30px; text-align:center; }
  .about-features li { text-align:left; }

  /* Why */
  .why-grid         { grid-template-columns:1fr; }

  /* Steps */
  .steps-row        { grid-template-columns:1fr 1fr; gap:10px; }
  .step-line        { display:none; }
  .step-circle      { width:70px; height:70px; font-size:26px; }

  /* Models */
  .models-grid      { grid-template-columns:1fr; }

  /* Brand */
  .brand-grid       { grid-template-columns:1fr; gap:30px; }
  .brand-points li  { text-align:left; }
  .brand-visual img { height:280px; }

  /* Revenue */
  .rev-grid         { grid-template-columns:1fr 1fr; gap:12px; }
  .rev-card         { padding:20px 14px; }

  /* ROI */
  .roi-grid         { grid-template-columns:1fr; gap:30px; }
  .roi-cards        { flex-direction:column; }
  .roi-visual img   { height:220px; }

  /* FAQ */
  .faq-grid         { grid-template-columns:1fr; gap:30px; }
  .faq-q            { font-size:14px; padding:16px 0; }

  /* Form */
  .form-wrap        { padding:24px 16px; }
  .form-row         { grid-template-columns:1fr; }

  /* CTA */
  .cta-banner       { padding:50px 0; }
  .cta-banner h2    { font-size:26px; }
  .cta-banner p     { font-size:15px; }
  .cta-btns         { flex-direction:column; align-items:center; }
  .cta-btns .btn    { width:100%; max-width:320px; }
}

/* ============ RESPONSIVE: 480px ============ */
@media(max-width:480px) {
  .container        { padding:0 14px; }
  .hero h1          { font-size:38px; margin-bottom: 5px;}
  .hero-tag         { font-size:10px; padding:5px 12px; }
  .stats-row        { grid-template-columns:1fr 1fr; }
  .stat-item .n     { font-size:22px; }
  .rev-grid         { grid-template-columns:1fr; }
  .steps-row        { grid-template-columns:1fr 1fr; }
  .section-head h2  { font-size:22px; }
  .why-grid         { grid-template-columns:1fr; }
}

/*  */



@media (max-width: 768px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
  }

  /* Place image right after the text block intro, before CTAs */
  .hero-visual {
    order: 0;   /* after hero-content's tag+h1+lead (which we'll reorder inside) */
    margin-top: -8px;
    margin-bottom: 20px;
  }

  .hero-content {
    display: contents; /* dissolves the div, lets children participate in flex order */
  }

  .hero-tag    { order: -3; }
  .hero h1     { order: -2; }
  .hero .lead  { order: -1; }
  /* image is order: 0 */
  .hero-ctas   { order: 1; }
  .trust-row   { order: 2; margin-top: -50px;}

  .hero-visual img { height: 300px;
   }


}

@media (max-width: 768px) {
  .roi-grid > div:first-child h2 {
    margin-right: 10px;
    /* text-align: right; */
  }
}









@media(prefers-reduced-motion:reduce) { *{transition:none!important;animation:none!important;} }