/* =========================================
   mobile design system – christmas lights
   utility-style classes (tailwind-ish)
   ========================================= */

/* ---- root tokens ---- */
:root{
  /* colors */
  --c-primary:#F5B301;         /* warm gold */
  --c-primary-pressed:#E6A200;
  --c-secondary:#1E3D34;       /* deep forest green */
  --c-bg:#FFFFFF;
  --c-accent:#F4F4F4;
  --c-text:#111111;
  --c-text-2:#555555;
  --c-glow:#FFF8E1;

  /* typography */
  --ff: "Open Sans", "Inter", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-h1:38px;
  --fs-h2:28px;
  --fs-h3:18px;
  --fs-body:15px;
  --fs-small:13px;
  --lh:1.45;

  /* spacing (8px scale) */
  --s-4:4px;
  --s-8:8px;
  --s-12:12px;
  --s-16:16px;
  --s-20:20px;
  --s-24:24px;
  --s-32:32px;
  --s-40:40px;
  --s-48:48px;

  /* radii & shadows */
  --r-10:10px;
  --r-12:12px;
  --r-16:16px;
  --shadow-soft: 0 4px 8px rgba(0,0,0,0.10);
  --shadow-card: 0 8px 20px rgba(0,0,0,0.12);
}


/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-text);font-family:var(--ff);line-height:var(--lh); width: 100%;}
img{max-width:100%;height:auto;display:block}

.hero .badges .badge-chip {
  border-color: var(--c-primary) !important;
}
.hero .badges .badge-chip svg {
  fill: var(--c-primary);
}

h1{
   font-family: "Anton";
   text-transform: uppercase;
}
/* =========================================
   layout utilities
   ========================================= */
.container{max-width:480px;margin-inline:auto;padding-inline:20px}
.section{padding-block:var(--s-32)}
.section-lg{padding-block:var(--s-48)}
.section-sm{padding-block:var(--s-24)}
.section--light{background:var(--c-accent)}
.section--glow{background:var(--c-glow)}

.card{background:#fff;border-radius:var(--r-16);box-shadow:var(--shadow-soft);padding:var(--s-16)}
.shadow-soft{box-shadow:var(--shadow-soft)}
.shadow-card{box-shadow:var(--shadow-card)}
.rounded-10{border-radius:var(--r-10)}
.rounded-12{border-radius:var(--r-12)}
.rounded-16{border-radius:var(--r-16)}

/* stack gap helper: apply to a parent to add vertical rhythm */
.stack-8 > * + *{margin-top:var(--s-8)}
.stack-12 > * + *{margin-top:var(--s-12)}
.stack-16 > * + *{margin-top:var(--s-16)}
.stack-24 > * + *{margin-top:var(--s-24)}
.stack-32 > * + *{margin-top:var(--s-32)}

/* simple grid for icon rows etc. (still mobile-first single column by default) */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-16)}

/* paddings / margins (common ones) */
.p-16{padding:var(--s-16)} .p-24{padding:var(--s-24)} .p-32{padding:var(--s-32)}
.py-16{padding-block:var(--s-16)} .py-24{padding-block:var(--s-24)} .py-32{padding-block:var(--s-32)} .py-48{padding-block:var(--s-48)}
.px-16{padding-inline:var(--s-16)} .px-20{padding-inline:var(--s-20)} .px-24{padding-inline:var(--s-24)}
.mt-8{margin-top:var(--s-8)} .mt-16{margin-top:var(--s-16)} .mt-24{margin-top:var(--s-24)} .mt-32{margin-top:var(--s-32)}
.mb-8{margin-bottom:var(--s-8)} .mb-16{margin-bottom:var(--s-16)} .mb-24{margin-bottom:var(--s-24)} .mb-32{margin-bottom:var(--s-32)}

/* alignment */
.center{text-align:center}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center}
.inline-flex{display:inline-flex}

/* =========================================
   typography
   ========================================= */
.h1{font-size:var(--fs-h1);font-weight:200; font-style:normal;}
.h2{font-size:var(--fs-h2);font-weight:600; font-style: normal; color: #000000;}
.h3{font-size:var(--fs-h3);font-weight:500}
.text{font-size:var(--fs-body)}
.small{font-size:var(--fs-small);color:var(--c-text-2)}
.muted{color:var(--c-text-2)}

/* emphasis helpers */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--c-glow);font-size:12px;font-weight:400}

/* =========================================
   buttons / CTAs
   ========================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;gap:8px;
     padding:14px 18px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;
     transition:transform .06s ease, background-color .06s ease, border-color .06s ease, opacity .06s ease;}

/* primary */
.btn-primary{background:var(--c-primary);color:var(--c-text)}
.btn-primary:active{background:var(--c-primary-pressed);transform:scale(0.97)}

/* outline secondary */
.btn-outline{background:transparent;color:var(--c-secondary);border-color:var(--c-secondary)}
.btn-outline:active{opacity:.85;transform:scale(0.97)}

/* sticky bottom CTA bar */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee;
  padding:var(--s-12) var(--s-16);box-shadow:0 -6px 20px rgba(0,0,0,0.06);z-index:50;
}
.sticky-cta .btn{width:100%}

/* =========================================
   forms
   ========================================= */
.form{display:grid;gap:var(--s-12)}
.input, .select, .textarea{
  width:100%;padding:14px;border:1px solid #DDD;border-radius:10px;background:#fff;
  font-size:15px;outline:none;transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus, .textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(245,179,1,0.25);
}
.textarea{min-height:110px;resize:vertical}
.form-card{background:#fff;border-radius:var(--r-16);box-shadow:var(--shadow-soft);padding:var(--s-16)}

/* inline helper text */
.help{font-size:12px;color:var(--c-text-2)}

/* =========================================
   components mapped to sections
   ========================================= */

/* hero */
.hero{padding-block:var(--s-48); text-align: center; min-height: 100vh;}
.hero-title{margin:0 0 var(--s-8);font-size:var(--fs-h1);font-weight:400; color: white;}
.hero-sub{color:rgb(233, 233, 233);margin:0 0 var(--s-16)}


/* icon row (why choose us) */
.icon{width:28px;height:28px;flex:0 0 28px;color:var(--c-secondary)}
.icon-row{display:grid;grid-template-columns:1fr;gap:var(--s-12)}
.icon-card{display:flex;gap:var(--s-12);align-items:flex-start;background:#fff;border-radius:12px;padding:var(--s-16);box-shadow:var(--shadow-soft)}
.icon-card p{margin:0;color:var(--c-text-2)}

/* gallery – swipeable */
.gallery{display:flex;gap:var(--s-12);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-8)}
.gallery::-webkit-scrollbar{display:none}
.gallery-item{min-width:76%;scroll-snap-align:start;background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card)}

/* how-it-works steps */
.steps{display:grid;gap:var(--s-12)}
.step{background:#fff;border-radius:12px;padding:var(--s-16);box-shadow:var(--shadow-soft)}
.step-num{font-weight:800;color:var(--c-secondary);margin-bottom:6px}

/* reviews */
.reviews{display:grid;gap:var(--s-12);position:relative}
.review{background:#fff;border-radius:12px;padding:var(--s-16);box-shadow:var(--shadow-soft)}
.stars{color:#F5B301;letter-spacing:1px;font-size:14px}

/* faq (accordion) */
.faq{display:grid;gap:var(--s-8)}
.faq-item{background:#fff;border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:16px;font-weight:600}
.faq-a{padding:0 16px 16px 16px;color:var(--c-text-2);display:none}
.faq-item.is-open .faq-a{display:block}

/* about */
.about{background:#fff;border-radius:12px;box-shadow:var(--shadow-soft);padding:var(--s-16)}

/* final CTA */
.final-cta{padding-block:var(--s-48);text-align:center}

/* utility colors */
.bg-white{background:#fff}
.bg-accent{background:var(--c-accent)}
.text-primary{color:var(--c-text)}
.text-secondary{color:var(--c-text-2)}
.text-green{color:var(--c-secondary)}
.bg-glow{background:var(--c-glow)}

/* visibility helpers */
.hide{display:none !important}

/* tap highlight cleanup for mobile */
a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }


/* badges: more spacing, white chips, borders, optional icons */
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;margin-top:12px;margin-bottom:12px}
.badge-chip{
  display:inline-flex;align-items:center;gap:8px;
  white-space: nowrap;
  background:#fff;border:1.5px solid #111;border-radius:999px;
  padding:6px 10px;font-size:12px;font-weight:500;color:var(--c-text);
  box-shadow:0 2px 6px rgba(0,0,0,0.06)
}
.badge-chip--gold{border-color:var(--c-primary)}
.badge-chip--mix:nth-child(odd){border-color:#111}
.badge-chip--mix:nth-child(even){border-color:var(--c-primary)}
.badge-chip svg{width:14px;height:14px;display:block;flex:0 0 14px}
.badge-icon-gold{fill:var(--c-primary)}
.badge-icon-black{fill:#111}

/* optional: ensure they fit on very small screens */
@media (max-width: 380px){
  .badges{ gap: 6px; }
  .badge-chip{
    font-size: 11px;
    padding: 6px 8px;
  }
}

.white {color:white;}
.light {color: rgb(246, 242, 234);}

/* sticky bar base */
.form-sticky{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid #eee; padding: 10px 12px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.form-sticky.is-visible{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.form-sticky .row{ display:flex; gap:8px; }

/* remove the boxed card look just for this section */
.section .ease-grid {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* optional: stagger for children inside a reveal */
.reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible [data-stagger] > * {
  opacity: 1;
  transform: none;
}


/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* continuous glowing pulse */
@keyframes form-glow {
  0% { box-shadow: 0 0 0 rgba(245,179,1,0); }
  50% { box-shadow: 0 0 24px rgba(245, 180, 1, 0.999); }
  100% { box-shadow: 0 0 0 rgba(245,179,1,0); }
}

.form-glow {
  animation: form-glow 2s ease-in-out infinite;
}

footer {
  border-top: 1px solid #ddd;
  background: #fff;
}
footer a:hover {
  color: var(--c-primary);
}


.fadeout::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: -10px;
  right: -10px;
  height: 80%; /* adjust height of fade */
  background: linear-gradient(to top, rgb(255, 255, 255) 69%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.review-fadeout{position:absolute; background:#fff;border-radius:12px;padding:var(--s-16);box-shadow:var(--shadow-soft)}

/* review meta row: name · location · time */
.review{ position: relative; }
.review p{ margin: 8px 0 10px; }

.review-meta{
  display:flex; align-items:center; gap:8px;
  font-size: var(--fs-small); color: var(--c-text-2);
  margin-top: 6px;
}

.review-meta .avatar{
  width:20px; height:20px; border-radius:50%;
  background: var(--c-accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; color: var(--c-text);
  flex: 0 0 20px;
}

.review-meta .dot{ opacity:.6; }

/* the "300+ happy reviews" label sits above the fade */
.reviews-counter{
  position: absolute;
  margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
width: fit-content;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  background: #fff; padding: 4px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}