/* ============================================================
   TARZAN — TERRITORY MASTER FRANCHISE
   Palette + type drawn from the deck (Tarzan Nature Retreat / EBG Group)
   ============================================================ */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --green-deep:    #11301E;
  --green:         #1C4630;
  --green-mid:     #2C5A41;
  --green-soft:    #5C7A63;
  --gold:          #B08B4A;
  --gold-deep:     #9A7635;
  --gold-soft:     #CBA869;
  --cream:         #F6F1E7;
  --cream-2:       #F1EADB;
  --paper:         #FBF8F1;
  --ink:           #283027;
  --ink-soft:      #55604F;
  --line:          #E2D7BF;
  --shadow:        0 24px 60px -32px rgba(17, 48, 30, .35);
  --shadow-sm:     0 14px 34px -22px rgba(17, 48, 30, .40);
  --pad:           clamp(1.25rem, 5vw, 6rem);
  --maxw:          1280px;
  --r:             18px;
}


@font-face {
  font-family: 'Glance Sans';
  src: url('./fonts/GlanceSans-Regular.woff2') format('woff2'),
       url('./fonts/GlanceSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Glance Sans';
  src: url('./fonts/GlanceSans-Bold.woff2') format('woff2'),
       url('./fonts/GlanceSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}


/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior:        smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* font-family:  'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; */
  font-family: 'Glance Sans';
  background:   var(--cream);
  color:        var(--ink);
  line-height:  1.6;
  overflow-x:   hidden;
  font-weight:  400;
}

img {
  max-width: 100%;
  display:   block;
}

a {
  color:           inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  /* font-family:    'Cormorant Garamond', Georgia, serif; */
  font-family: 'Glance Sans';
  font-weight:    600;
  line-height:    1.08;
  color:          var(--green-deep);
  letter-spacing: .005em;
}

/* ============================================================
   SHARED LAYOUT
   ============================================================ */
.wrap {
  max-width:     var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  width:         100%;
}

.section {
  padding-block: clamp(3.75rem, 8vw, 7rem);
  position:      relative;
}

.eyebrow {
  font-family:    'Jost', sans-serif;
  font-weight:    500;
  font-size:      .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          #ae441d;
  display:        inline-flex;
  align-items:    center;
  gap:            .7rem;
}

/* .eyebrow::before {
  content:    "";
  width:      34px;
  height:     1px;
  background: var(--gold);
  display:    inline-block;
} */

.sec-head {
  max-width:     760px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.sec-head h2 {
  font-size:  clamp(2.15rem, 4.7vw, 3.6rem);
  margin:     .6rem 0 .9rem;
  line-height: 2.0rem;
}

.sec-head p {
  font-size:  clamp(1.02rem, 1.6vw, 1.18rem);
  color:      var(--ink-soft);
  max-width:  60ch;
}

.lead-green {
  color:       var(--green);
  font-family: 'Cormorant Garamond', serif;
  font-size:   clamp(1.4rem, 2.4vw, 1.9rem);
  font-style:  italic;
  font-weight: 500;
  line-height: 1.3;
}

/* Clover Ornament */
.clover {
  width:   22px;
  height:  22px;
  display: inline-block;
  color:   var(--gold);
  flex:    none;
}

.divider {
  display:     flex;
  align-items: center;
  gap:         1rem;
  color:       var(--line);
}

.divider::before,
.divider::after {
  content:    "";
  height:     1px;
  background: var(--line);
  flex:       1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family:     'Jost', sans-serif;
  font-weight:     500;
  letter-spacing:  .04em;
  font-size:       .95rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .6rem;
  padding:         .95rem 1.9rem;
  border-radius:   999px;
  cursor:          pointer;
  border:          1.5px solid transparent;
  transition:      transform .25s ease,
                   background .25s ease,
                   color .25s ease,
                   box-shadow .25s ease;
  white-space:     nowrap;
}

.btn-gold {
  background: #d35d13;
  color:      #fff;
  box-shadow: 0 12px 28px -14px rgba(176, 139, 74, .8);
}

/* .btn-gold:hover {
  background: var(--gold-deep);
  transform:  translateY(-2px);
} */

.btn-ghost {
  background:   transparent;
  border-color: var(--green);
  color:        var(--green);
}

.btn-ghost:hover {
  background: var(--green);
  color:      var(--cream);
  transform:  translateY(-2px);
}

.btn-ghost-light {
  background:   transparent;
  border-color: rgba(255, 255, 255, .55);
  color:        #fff;
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  transform:  translateY(-2px);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:   fixed;
  inset:      0 0 auto 0;
  z-index:    100;
  transition: background .35s ease,
              box-shadow .35s ease,
              padding .35s ease;
  padding-block: 1.15rem;
  background: rgba(246, 241, 231, .92);
}

.nav.scrolled {
  background:      rgba(246, 241, 231, .92);
  backdrop-filter: blur(12px);
  box-shadow:      0 1px 0 var(--line);
  padding-block:   .7rem;
}

.nav-inner {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1.5rem;
}

.brand {
  display:     flex;
  align-items: center;
  gap:         .9rem;
  min-width:   0;
}

/* nav */

.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 50px; /* Adjust as needed */
    width: auto;
    display: block;
}

/*  */

.brand .mark {
  font-family:    'Cormorant Garamond', serif;
  font-weight:    700;
  font-size:      1.75rem;
  letter-spacing: .02em;
  color:          var(--green);
  line-height:    1;
}

.nav.scrolled .brand .mark,
.nav.scrolled .brand .sub {
  color: var(--green);
}

.nav .brand .mark,
.nav .brand .sub {
  color:      #fff;
  transition: color .35s ease;
}

.brand .sub {
  font-family:    'Jost', sans-serif;
  font-size:      .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity:        .85;
  margin-top:     3px;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
}

.nav-links a {
  font-family:    'Jost', sans-serif;
  font-size:      .9rem;
  letter-spacing: .03em;
  color:          #000;
  transition:     color .25s ease, opacity .25s;
}

.nav.scrolled .nav-links a {
  color: var(--ink);
}

.nav-links a:hover {
  opacity: .7;
}

.nav-cta {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.nav .powered {
  font-family:    'Jost', sans-serif;
  font-size:      .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          #fff;
  opacity:        .85;
  text-align:     right;
  line-height:    1.3;
}

.nav.scrolled .powered {
  color: var(--ink-soft);
}

.nav .powered b {
  color:          var(--gold-soft);
  font-weight:    600;
  font-size:      .82rem;
  letter-spacing: .04em;
}

.nav.scrolled .powered b {
  color: var(--gold-deep);
}

.menu-btn {
  display:        none;
  background:     none;
  border:         0;
  cursor:         pointer;
  flex-direction: column;
  gap:            5px;
  padding:        6px;
}

.menu-btn span {
  width:      24px;
  height:     2px;
  background: #fff;
  display:    block;
  transition: .3s;
}

.nav.scrolled .menu-btn span {
  background: var(--green);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* Background Image */
    background: url('../images/hero.png') center center/cover no-repeat;
}

/* Dark overlay for better text readability */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.55); */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-grid {
    position: relative;
    z-index: 2;
}
.hero-scene {
  position: absolute;
  inset:    0;
  z-index:  0;
}

/* .hero-sky {
  position:   absolute;
  inset:      0;
  background:
    radial-gradient(120% 90% at 82% 8%,  rgba(243, 232, 200, .55) 0%, rgba(243, 232, 200, 0) 45%),
    radial-gradient(140% 100% at 78% 0%, #cfd9b8 0%, #9fb591 38%, #5c7a5f 64%, #2a4a36 100%),
    linear-gradient(180deg,              #bcc8a6 0%, #7d9879 45%, #34543d 100%);
} */

.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    105deg,
    rgba(12, 34, 21, .92) 0%,
    rgba(14, 40, 25, .74) 34%,
    rgba(16, 44, 28, .30) 58%,
    rgba(20, 50, 32, .05) 100%
  );
}

.hero-hills {
  position: absolute;
  left:     0;
  right:    0;
  bottom:   0;
  height:   62%;
}

.hero-content {
  position: relative;
  z-index:  2;
  width:    100%;
}

.hero-grid {
  max-width:      var(--maxw);
  margin-inline:  auto;
  padding-inline: var(--pad);
  padding-block:  7rem 4rem;
}

.hero-eyebrow {
  color: var(--gold-soft);
}

.hero-eyebrow::before {
  background: var(--gold-soft);
}

.hero h1 {
  color:       #fff;
  font-size: 65px;
  font-weight: 600;
  margin:      1.4rem 0 1.5rem;
  max-width:   600px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
  /* line-height: 5.45rem; */
}

.hero h1 em {
  /* font-style: italic; */
  color:      #ef7623;
}

.hero-sub {
  font-size:   clamp(1.05rem, 1.7vw, 1.32rem);
  max-width:   54ch;
  color:       rgba(255, 255, 255, .9);
  font-weight: 300;
}

.hero-cta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  margin-top: 2.4rem;
}

.hero-chips {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            .65rem 1.1rem;
  margin-top:     2.8rem;
  font-family:    'Jost', sans-serif;
  font-size:      .86rem;
  letter-spacing: .04em;
  color:          rgba(255, 255, 255, .92);
}

.hero-chips .dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--gold-soft);
}

.scroll-cue {
  position:       absolute;
  left:           50%;
  bottom:         1.6rem;
  transform:      translateX(-50%);
  z-index:        3;
  font-family:    'Jost', sans-serif;
  font-size:      .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .7);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .5rem;
}

.scroll-cue .line {
  width:      1px;
  height:     38px;
  background: linear-gradient(rgba(255, 255, 255, .7), transparent);
  animation:  cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% {
    opacity:   .3;
    transform: scaleY(.5);
  }
  50% {
    opacity:   1;
    transform: scaleY(1);
  }
}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stats {
  background: var(--green-deep);
  color:      var(--cream);
}

.stats .wrap {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
  padding-block:         clamp(2.4rem, 4vw, 3.4rem);
}

.stat {
  text-align: center;
  position:   relative;
  padding:    .4rem 1rem;
}

.stat:not(:last-child)::after {
  content:    "";
  position:   absolute;
  right:      0;
  top:        15%;
  height:     70%;
  width:      1px;
  background: rgba(203, 168, 105, .3);
}

.stat .num {
 font-family:'Times New Roman', Times, serif;
  font-size:  60px;
  font-weight: 600;
  color:       #ef7623;
  line-height: 1;
}

.stat .lbl {
  font-family:    'Jost', sans-serif;
  font-size:      .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          rgba(246, 241, 231, .7);
  margin-top:     .55rem;
}

/* ============================================================
   PHASE MARKER
   ============================================================ */
.phase {
  font-family:    'Jost', sans-serif;
  font-size:      .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color:          #ae441d;
  display:        flex;
  align-items:    center;
  gap:            .6rem;
  margin-bottom:  .4rem;
}

.phase b {
  color:       var(--green);
  font-weight: 600;
}

/* ============================================================
   CARD GRID (Generic)
   ============================================================ */
.grid    { display: grid; gap: 1.4rem; }

.cards-5 { grid-template-columns: repeat(5, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background:    var(--paper);
  border:        1px solid #ae441d;
  border-radius: var(--r);
  padding:       1.9rem 1.7rem;
  box-shadow:    var(--shadow-sm);
  transition:    transform .35s ease,
                 box-shadow .35s ease,
                 border-color .35s ease;
  height:        100%;
}

.card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--shadow);
  border-color: var(--gold-soft);
}

.icon-badge {
  width:         54px;
  height:        54px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  margin-bottom: 1.1rem;
  border:        1px solid var(--gold-soft);
  color:         var(--gold-deep);
  background:    rgba(176, 139, 74, .06);
}

.icon-badge.filled {
  background:   var(--green);
  border-color: var(--green);
  color:        var(--gold-soft);
}

.icon-badge svg {
  width:  26px;
  height: 26px;
}

.card h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.card h4 {
  font-size:   1.18rem;
  margin-bottom: .4rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
}
.card p  { font-size: .95rem; color: var(--ink-soft); }

.card .kt {
    font-family: 'Glance Sans';
  font-size:      12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gold-deep);
  margin-bottom:  .4rem;
  display:        block;
}

/* Problem List Variant */
.problem-list {
  display: grid;
  gap:     1rem;
}

.prob {
  display:       flex;
  gap:           1.2rem;
  align-items:   flex-start;
  background:    var(--paper);
  border:        1px solid #ae441d;
  border-radius: 14px;
  padding:       1.25rem 1.4rem;
  transition:    border-color .3s, transform .3s;
}

.prob:hover {
  border-color: var(--gold-soft);
  transform:    translateX(4px);
}

.prob .icon-badge {
  width:        46px;
  height:       46px;
  margin:       0;
  flex:         none;
  background:   var(--green);
  border-color: var(--green);
  color:        var(--gold-soft);
}

.prob .icon-badge svg {
  width:  22px;
  height: 22px;
}

.prob h3 { font-size: 1.18rem; margin-bottom: .2rem; }
.prob p  { font-size: .92rem;  color: var(--ink-soft); }

/* Two-Column Split */
.split {
  display:               grid;
  grid-template-columns: 1.05fr .95fr;
  gap:                   clamp(2rem, 4vw, 4rem);
  align-items:           center;
}

.panel {
  background: #25591f;
  color:         var(--cream);
  border-radius: 24px;
  padding:       clamp(2rem, 4vw, 3.2rem);
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--shadow);
}

.panel::after {
  content:       "";
  position:      absolute;
  right:         -60px;
  bottom:        -60px;
  width:         240px;
  height:        240px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(203, 168, 105, .22), transparent 70%);
}

.panel h3 { color: #fff; }

/* Amplify Drivers */
.drivers {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   1rem;
  margin-top:            .5rem;
}

.driver {
  text-align:    center;
  background:    var(--paper);
  border:        1px solid #ae441d;
  border-radius: 16px;
  padding:       1.6rem 1rem;
  transition:    transform .35s, box-shadow .35s;
}

.driver:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.driver .icon-badge { margin-inline: auto; }
.driver h4 { font-size: 1.12rem; margin-bottom: .4rem; }
.driver p  { font-size: .85rem;  color: var(--ink-soft); }

/* Pull Quote Band */
.band {
  background:    #25591f;
  color:         var(--cream);
  border-radius: 20px;
  padding:       clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 4vw, 3rem);
  display:       flex;
  align-items:   center;
  gap:           1.4rem;
  margin-top:    2.4rem;
}

.band .clover {
  color:  var(--gold-soft);
  width:  30px;
  height: 30px;
}

.band p {
    font-family: 'Glance Sans';
  /* font-family: 'Cormorant Garamond', serif; */
  /* font-style:  italic; */
  font-size:   clamp(1.3rem, 2.4vw, 1.85rem);
  color:       #fff;
  line-height: 1.25;
  margin-bottom: 30px;
}

/* ============================================================
   REVENUE ENGINES
   ============================================================ */
.engine {
  background:    var(--paper);
  border:        1px solid var(--line);
  border-radius: 22px;
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  margin-bottom: 1.6rem;
  transition:    box-shadow .35s, border-color .35s;
}

.engine:hover {
  box-shadow:   var(--shadow);
  border-color: var(--gold-soft);
}

.engine-head {
  display:       flex;
  align-items:   center;
  gap:           1.3rem;
  padding:       1.7rem clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  background:    linear-gradient(120deg, rgba(28, 70, 48, .05), transparent);
}

.engine-no {
  font-family: 'Cormorant Garamond', serif;
  font-size:   2.6rem;
  font-weight: 600;
  color:       var(--gold);
  line-height: 1;
  flex:        none;
  width:       64px;
}

.engine-head .icon-badge {
  margin: 0;
  flex:   none;
}

.engine-title h3 { font-size: 1.55rem; margin-bottom: .15rem; }
.engine-title p  { font-size: .95rem;  color: var(--ink-soft); }

.engine-body {
  padding: 1.6rem clamp(1.5rem, 3vw, 2.4rem) 1.9rem;
}

.tier-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
}

.tier {
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.3rem 1.1rem;
  text-align:    center;
  background:    var(--cream);
}

.tier .stage {
  font-family:    'Jost', sans-serif;
  font-size:      .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--ink-soft);
  min-height:     2.4em;
  display:        block;
  margin-bottom:  .7rem;
}

.tier .price {
  font-family:'Times New Roman', Times, serif;
  font-size:   2.1rem;
  font-weight: 600;
  color:       var(--green);
}

.tier .price span {
  font-size: 1.1rem;
  color:     var(--gold-deep);
}

.spec-row {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   1rem;
}

.spec {
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.2rem 1rem;
  text-align:    center;
  background:    var(--cream);
}

.spec .k {
  font-family: 'Glance Sans';
  font-size:      10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gold-deep);
  margin-bottom:  .45rem;
  display:        block;
}

.spec .v {
 font-family:'Times New Roman', Times, serif;
  font-size:   18px;
  font-weight: 600;
  color:       var(--green);
  line-height: 1.15;
}

.product-row {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   .9rem;
}

.product {
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.2rem .8rem;
  text-align:    center;
  background:    var(--cream);
  transition:    transform .3s, border-color .3s;
}

.product:hover {
  transform:    translateY(-4px);
  border-color: var(--gold-soft);
}

.product .icon-badge {
  margin:  0 auto .7rem;
  width:   46px;
  height:  46px;
}

.product .icon-badge svg {
  width:  22px;
  height: 22px;
}

.product .name {
  font-family: 'Cormorant Garamond', serif;
  font-size:   1.12rem;
  font-weight: 600;
  color:       var(--green);
}

.engine-note {
  display:       flex;
  align-items:   center;
  gap:           .8rem;
  margin-top:    1.4rem;
  padding:       .95rem 1.3rem;
  background:    rgba(28, 70, 48, .06);
  border-radius: 12px;
  font-size:     .92rem;
  color:         var(--green);
}

.engine-note .clover { flex: none; }

.ticket-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           .6rem;
  background:    var(--green);
  color:         var(--gold-soft);
  font-family:   'Cormorant Garamond', serif;
  font-size:     1.4rem;
  font-weight:   600;
  padding:       .5rem 1.3rem;
  border-radius: 999px;
  margin-top:    1rem;
}

/* Earnings Wheel Grid */
.earn-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.2rem;
}

.earn {
  display:       flex;
  gap:           1rem;
  align-items:   flex-start;
  background:    var(--paper);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.4rem;
  transition:    transform .3s, border-color .3s;
}

.earn:hover {
  transform:    translateY(-4px);
  border-color: var(--gold-soft);
}

.earn .no {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  color:       var(--gold);
  font-size:   1.7rem;
  line-height: 1;
  flex:        none;
}

.earn h4 { font-size: 1.12rem; margin-bottom: .2rem; }
.earn p  { font-size: .88rem;  color: var(--ink-soft); }

/* ============================================================
   ZONE FEE SLABS
   ============================================================ */
.zones {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
}

.zone {
  background:    var(--paper);
  border:        1.5px solid var(--line);
  border-radius: 22px;
  padding:       2rem 1.8rem;
  position:      relative;
  cursor:        pointer;
  transition:    transform .35s, box-shadow .35s, border-color .35s;
}

.zone:hover,
.zone.active {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow);
  border-color: var(--gold);
}

.zone.active {
  background: #25591f;
  color:      var(--cream);
}

.zone.active h3,
.zone.active .price  { color: #fff; }
.zone.active .zlabel { color: var(--gold-soft); }
.zone.active li      { color: rgba(246, 241, 231, .85); }
.zone.active li svg  { color: var(--gold-soft); }

.zone .icon-badge { margin-bottom: 1rem; }

.zone.active .icon-badge {
  background:   rgba(203, 168, 105, .18);
  border-color: var(--gold-soft);
  color:        var(--gold-soft);
}

.zlabel {
  font-family:    'Jost', sans-serif;
  font-size:      .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold-deep);
}

.zone h3    { font-size: 1.4rem; margin: .15rem 0 .8rem; }

.zone .price {
  font-family:'Times New Roman', Times, serif;
  font-size:   3rem;
  font-weight: 600;
  color:       var(--green);
  line-height: 1;
  margin-bottom: 1.1rem;
}

.zone ul {
  list-style: none;
  display:    grid;
  gap:        .6rem;
}

.zone li {
  display:     flex;
  gap:         .6rem;
  align-items: flex-start;
  font-size:   .92rem;
  color:       var(--ink-soft);
}

.zone li svg {
  width:      16px;
  height:     16px;
  color:      var(--gold);
  flex:       none;
  margin-top: 4px;
}

.zone-foot {
  display:     flex;
  align-items: center;
  gap:         .7rem;
  margin-top:  1.6rem;
  font-size:   .85rem;
  color:       var(--ink-soft);
}

.zone-foot svg {
  width:  18px;
  height: 18px;
  color:  var(--gold-deep);
  flex:   none;
}

/* 90-Day Plan Timeline */
.timeline {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.4rem;
  position:              relative;
}

.tl {
  background:    var(--paper);
  border:        1px solid var(--line);
  border-radius: 18px;
  padding:       1.8rem 1.6rem;
  position:      relative;
}

.tl .icon-badge {
  background:    var(--green);
  border-color:  var(--green);
  color:         var(--gold-soft);
  margin-bottom: 1rem;
}

.tl .days {
  font-family:    'Jost', sans-serif;
  font-size:      .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gold-deep);
}

.tl h3 { font-size: 1.45rem; margin: .2rem 0 1rem; }

.tl ul {
  list-style: none;
  display:    grid;
  gap:        .65rem;
}

.tl li {
  display:     flex;
  gap:         .55rem;
  align-items: flex-start;
  font-size:   .9rem;
  color:       var(--ink-soft);
}

.tl li svg {
  width:      15px;
  height:     15px;
  color:      var(--gold);
  flex:       none;
  margin-top: 5px;
}

/* Who Is It For */
.who-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.2rem;
}

.who {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  background:    var(--paper);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.2rem 1.4rem;
  transition:    transform .3s, border-color .3s;
}

.who:hover {
  transform:    translateY(-4px);
  border-color: var(--gold-soft);
}

.who .icon-badge {
  margin: 0;
  width:  48px;
  height: 48px;
  flex:   none;
}

.who .icon-badge svg {
  width:  24px;
  height: 24px;
}

.who span {
  font-family: 'Cormorant Garamond', serif;
  font-size:   1.2rem;
  font-weight: 600;
  color:       var(--green);
  line-height: 1.2;
}

/* ============================================================
   CTA SECTION / FORM
   ============================================================ */
.cta-section {
  background: #25591f;
  color:      var(--cream);
  position:   relative;
  overflow:   hidden;
}

.cta-section::before {
  content:    "";
  position:   absolute;
  inset:      0;
  background: radial-gradient(80% 60% at 85% 10%, rgba(203, 168, 105, .16), transparent 60%);
}

.cta-grid {
  display:               grid;
  grid-template-columns: 1fr 1.05fr;
  gap:                   clamp(2rem, 5vw, 4.5rem);
  align-items:           start;
  position:              relative;
  z-index:               1;
}

.cta-copy .eyebrow        { color: var(--gold-soft); }
.cta-copy .eyebrow::before { background: var(--gold-soft); }

.cta-copy h2 {
  color:       #fff;
  font-size:   clamp(2.2rem, 4.4vw, 3.4rem);
  margin:      .7rem 0 1.1rem;
}

.cta-copy h2 em {
  font-style: italic;
  color:      var(--gold-soft);
}

.cta-copy p {
  color:     rgba(246, 241, 231, .82);
  font-size: 1.05rem;
  max-width: 46ch;
}

.cta-points {
  list-style: none;
  margin-top: 2rem;
  display:    grid;
  gap:        1.1rem;
}

.cta-points li {
  display:     flex;
  gap:         .9rem;
  align-items: flex-start;
}

.cta-points .icon-badge {
  width:        42px;
  height:       42px;
  margin:       0;
  flex:         none;
  border-color: var(--gold-soft);
  color:        var(--gold-soft);
  background:   rgba(203, 168, 105, .08);
}

.cta-points .icon-badge svg {
  width:  20px;
  height: 20px;
}

.cta-points b {
  font-family:   'Cormorant Garamond', serif;
  font-size:     1.2rem;
  color:         #fff;
  font-weight:   600;
  display:       block;
  margin-bottom: .1rem;
}

.cta-points span {
  font-size: .9rem;
  color:     rgba(246, 241, 231, .72);
}

/* Form Card */
.form-card {
  background:    var(--paper);
  border-radius: 24px;
  padding:       clamp(1.8rem, 3vw, 2.8rem);
  box-shadow:    var(--shadow);
  color:         var(--ink);
}

.form-card h3      { font-size: 1.7rem; margin-bottom: .3rem; }
.form-card .fc-sub { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.6rem; }

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

.field {
  margin-bottom:  1rem;
  display:        flex;
  flex-direction: column;
}

.field.full { grid-column: 1 / -1; }

.field label {
  font-family:    'Jost', sans-serif;
  font-size:      .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--ink-soft);
  margin-bottom:  .4rem;
}

.field label .req { color: var(--gold-deep); }

.field input,
.field select,
.field textarea {
  font-family: 'Mulish', sans-serif;
  font-size:   .95rem;
  color:       var(--ink);
  border:      1.5px solid var(--line);
  border-radius: 11px;
  padding:     .85rem 1rem;
  background:  var(--cream);
  width:       100%;
  transition:  border-color .25s, box-shadow .25s;
}

.field textarea {
  resize:     vertical;
  min-height: 96px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline:    none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 139, 74, .16);
}

.field.error input,
.field.error select { border-color: #b4503f; }

.err-msg {
  color:       #b4503f;
  font-size:   .78rem;
  margin-top:  .3rem;
  display:     none;
}

.field.error .err-msg { display: block; }

.form-card .btn-gold {
  width:      100%;
  margin-top: .4rem;
  font-size:  1rem;
  padding:    1.05rem;
}

.consent {
  font-size:  .78rem;
  color:      var(--ink-soft);
  margin-top: .9rem;
  text-align: center;
}

.form-success {
  display:    none;
  text-align: center;
  padding:    2rem 1rem;
}

.form-success.show { display: block; }

.form-success .icon-badge {
  margin:       0 auto 1.2rem;
  width:        64px;
  height:       64px;
  background:   var(--green);
  border-color: var(--green);
  color:        var(--gold-soft);
}

.form-success h3 { font-size: 1.9rem; margin-bottom: .6rem; }
.form-success p  { color: var(--ink-soft); max-width: 34ch; margin-inline: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:   #0E2718;
  color:        rgba(246, 241, 231, .7);
  padding-block: 3.4rem 2rem;
}

.foot-top {
  display:         flex;
  justify-content: space-between;
  gap:             2.5rem;
  flex-wrap:       wrap;
  padding-bottom:  2.4rem;
  border-bottom:   1px solid rgba(203, 168, 105, .18);
}

.foot-brand .mark {
  font-family:    'Cormorant Garamond', serif;
  font-weight:    700;
  font-size:      2rem;
  color:          var(--cream);
  letter-spacing: .02em;
}

.foot-brand .sub {
  font-family:    'Jost', sans-serif;
  font-size:      .6rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color:          var(--gold-soft);
  margin-top:     .2rem;
}

.foot-brand p {
  margin-top: 1rem;
  max-width:  34ch;
  font-size:  .9rem;
}

.foot-cols {
  display:   flex;
  gap:       3.5rem;
  flex-wrap: wrap;
}

.foot-col h5 {
  font-family:    'Jost', sans-serif;
  font-size:      .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--gold-soft);
  margin-bottom:  1rem;
}

.foot-col a,
.foot-col p {
  display:       block;
  font-size:     .9rem;
  margin-bottom: .55rem;
  transition:    color .25s;
}

.foot-col a:hover { color: var(--gold-soft); }

.foot-bottom {
  display:         flex;
  justify-content: space-between;
  gap:             1rem;
  flex-wrap:       wrap;
  padding-top:     1.6rem;
  font-size:       .8rem;
}

.foot-bottom .powered b { color: var(--gold-soft); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.in {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }
  html            { scroll-behavior: auto; }
  .scroll-cue .line { animation: none; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* 1440px */
@media (max-width: 1440px) {
  :root { --maxw: 1200px; }
}

/* 1280px */
@media (max-width: 1280px) {
  :root { --maxw: 1120px; }
  .product-row { grid-template-columns: repeat(3, 1fr); }
}

/* 1024px — Tablet */
@media (max-width: 1024px) {
  :root { --maxw: 920px; --pad: clamp(1.25rem, 4vw, 3rem); }
  .nav-links            { gap: 1.4rem; }
  .cards-5, .drivers    { grid-template-columns: repeat(3, 1fr); }
  .cards-4              { grid-template-columns: repeat(2, 1fr); }
  .spec-row             { grid-template-columns: repeat(3, 1fr); }
  .earn-grid,
  .who-grid,
  .timeline             { grid-template-columns: repeat(2, 1fr); }
  .cta-grid             { grid-template-columns: 1fr; gap: 2.6rem; }
  .cta-copy             { max-width: 640px; }
  .split                { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* 992px — Nav collapse */
@media (max-width: 992px) {
  .nav-links        { display: none; }
  .menu-btn         { display: none; }
  .nav.open .nav-links {
    display:        flex;
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    flex-direction: column;
    background:     var(--cream);
    padding:        1.4rem var(--pad);
    gap:            1.1rem;
    box-shadow:     0 14px 30px -18px rgba(0, 0, 0, .3);
  }
  .nav.open .nav-links a { color: var(--ink); }
  .nav .powered         { display: none; }
  .tier-row             { grid-template-columns: repeat(2, 1fr); }
  .stats .wrap          { grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; }
  .stat:nth-child(2)::after { display: none; }
  .stat                 { padding-block: 1rem; }
}

/* 768px */
@media (max-width: 768px) {
  .hero-grid   { padding-block: 6.5rem 3.5rem; }
  .hero h1     { max-width: 100%; }
  .cards-3,
  .cards-2,
  .drivers,
  .zones       { grid-template-columns: 1fr 1fr; }
  .who-grid    { grid-template-columns: 1fr 1fr; }
  .product-row { grid-template-columns: repeat(2, 1fr); }
  .engine-head { flex-wrap: wrap; gap: 1rem; }
  .engine-no {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cba869;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
}

.engine-no {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
}

/* 767px — Full Mobile */
@media (max-width: 767px) {
  .grid, .cards-5, .cards-4, .cards-3, .cards-2,
  .drivers, .zones, .earn-grid, .who-grid, .timeline,
  .tier-row, .spec-row, .product-row, .form-row {
    grid-template-columns: 1fr !important;
  }
  .stats .wrap       { grid-template-columns: 1fr 1fr; }
  .sec-head          { margin-inline: auto; }
  .hero-cta          { flex-direction: column; align-items: stretch; }
  .hero-cta .btn     { width: 100%; }
  .band              { flex-direction: column; text-align: center; gap: 1rem; }
  .prob              { flex-direction: row; }
  .engine-head       { align-items: center; }
  .foot-top          { flex-direction: column; gap: 1.8rem; }
  .foot-cols         { gap: 2.2rem; }
  .product-row       { grid-template-columns: 1fr 1fr !important; }
}

/* 576px */
@media (max-width: 576px) {
  .section     { padding-block: 3rem; }
  .sec-head h2 { font-size: 2rem; }
  .product-row { grid-template-columns: 1fr 1fr !important; }
  .who span    { font-size: 1.1rem; }
  .zone .price { font-size: 2.6rem; }
}

/* 480px */
@media (max-width: 480px) {
  :root           { --pad: 1.15rem; }
  .hero h1        { font-size: 2.35rem; }
  .hero-chips     { gap: .5rem .8rem; font-size: .8rem; }
  .stat .num      { font-size: 2rem; }
  .form-card      { padding: 1.5rem 1.2rem; }
  .engine-body    { padding: 1.3rem 1.2rem 1.5rem; }
  .engine-head    { padding: 1.3rem 1.2rem; }
  .product-row    { grid-template-columns: 1fr !important; }
}

/* 375px */
@media (max-width: 375px) {
  .hero h1     { font-size: 2.1rem; }
  .sec-head h2 { font-size: 1.8rem; }
  .btn         { padding: .85rem 1.4rem; font-size: .88rem; }
  .brand .mark { font-size: 1.5rem; }
}

/* 320px */
@media (max-width: 320px) {
  :root        { --pad: .9rem; }
  .hero h1     { font-size: 1.85rem; }
  .stat .num   { font-size: 1.7rem; }
  .engine-no   { font-size: 2rem; }
  .zone .price { font-size: 2.2rem; }
}


/*  */

@media (max-width: 768px) {

    .hero {
        min-height: 100vh;
        background-position: 65% center;
    }

    .hero-grid {
        padding-top: 120px;
        padding-bottom: 60px;
        text-align: center;
    }

    .hero h1 {
        font-size: 38px;
        line-height: 1.2;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    .hero-sub {
        font-size: 1rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-chips {
        justify-content: center;
        gap: 10px;
    }

    .hero-hills {
        display: none;
    }
}



.footer1 {
    background: #08361f;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    flex-direction: column;   /* Vertical Layout */
    justify-content: center;
    align-items: center;
    text-align: center;

    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.footer-left img {
    width: 280px;
    height: auto;
    display: block;
    margin: 0 auto 25px;
}

/* Description */
.footer-left p {
    max-width: 700px;
    margin: 0 auto 40px;
    color: #e6d8b5;
    font-size: 22px;
    line-height: 1.8;
}

/* Copyright Section */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    /* border-top: 1px solid rgba(255,255,255,.15); */
    padding-top: -10px;
    margin-bottom: 10px;
    width: 100%;
}

.footer-right span {
    color: #f3ead1;
    font-size: 18px;
    margin-top: -20px;
}

.powered1 b {
    color: #d4a54c;
}

/* Bottom Divider */
/* .footer-line {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    border-top: 1px solid rgba(255,255,255,.15);
} */
/* Tablet */
@media(max-width:992px){

    .footer-container{
        flex-direction:column;
        gap:40px;
    }

    .footer-right{
        margin-top:0;
        flex-wrap:wrap;
    }
}

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

    .footer-container{
        text-align:center;
        align-items:center;
        padding:0 20px;
    }

    .footer-left img{
        width:220px;
        margin:auto auto 20px;
    }

    .footer-right{
        flex-direction:column;
        gap:12px;
        margin-top: 30px;
    }

    .footer-right span{
        font-size:15px;
    }

    .footer-left p{
        font-size:16px;
        margin-bottom: -6px;
    }
}

/* Mobile — vertical centered */
@media (max-width: 768px) {
    .footer1 {
        padding: 50px 0 30px;
    }

    .footer-container {
        flex-direction:  column;
        align-items:     center;     /* CENTER everything */
        text-align:      center;
        padding:         0 20px;
        gap:             24px;
    }

    /* Left side — centered */
    .footer-left {
        max-width:   100%;
        display:     flex;
        flex-direction: column;
        align-items: center;         /* CENTER logo + text */
    }

    .footer-left img {
        width:         200px;
        margin:        0 auto 16px;  /* CENTER logo */
    }

    .footer-left p {
        font-size:  15px;
        text-align: center;
        line-height: 1.7;
    }

    /* Right side — vertical stack centered */
    .footer-right {
        flex-direction:  column;
        align-items:     center;     /* CENTER items */
        justify-content: center;
        gap:             10px;
        margin-top:      0;
        text-align:      center;
        width:           100%;
    }

    .footer-right span {
        font-size:   14px;
        text-align:  center;
        display:     block;
        width:       100%;
    }

    .powered1 {
        text-align: center;
        display:    block;
    }

    /* Bottom line */
    .footer-line {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .footer-left img {
        width: 170px;
    }

    .footer-left p {
        font-size: 14px;
    }

    .footer-right span {
        font-size: 13px;
    }
}



@media (max-width: 767px) {
  .section {
    text-align: center;
  }

  .sec-head {
    margin-inline: auto;
    text-align: center;
  }

  .sec-head p {
    margin-inline: auto;
  }

  .phase,
  .eyebrow {
    justify-content: center;
  }

  .zone-foot {
    justify-content: center;
  }

  .split > div {
    text-align: center;
  }

  .prob {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .earn {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .who {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tl {
    text-align: center;
  }

  .tl ul,
  
  .cta-points {
    text-align: left; /* keep list items left for readability */
  }

  .band {
    text-align: center;
   
  }

  .icon-badge {
    margin-inline: auto;
  }

  .btn {
    margin-inline: auto;
  }

  .hero-cta {
    align-items: center;
  }




 
}

@media (max-width: 767px) {
  .zone {
    text-align: left;
  }

  .zone li {
    display:         flex;
    gap:             .6rem;
    align-items:     center;
    justify-content: flex-start;
    font-size:       .92rem;
    color:           var(--ink-soft);
    text-align:      left;
  }

  .zone li svg {
    width:  16px;
    height: 16px;
    color:  var(--gold);
    flex:   none;
  }

  .zone .icon-badge {
    margin-inline: 0;
  }

  .zlabel,
  .zone h3,
  .zone .price {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .panel {
    text-align: left;
  }

  .panel > div {
    text-align: left;
  }

  .panel div[style*="display:flex"],
  .panel div[style*="display: flex"] {
    justify-content: flex-start;
    text-align:      left;
  }

  .feature-title,
  .feature-text {
    text-align: left;
  }

  .panel .icon-badge {
    margin-inline: 0;
    flex:          none;
  }

  .panel h3 {
    text-align: left;
  }
}