:root{
  /* New color scheme: White, Blue, Touch of Green */
  --background-white: #ffffff;
  --background-light: #f8fafc;
  --primary-blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #60a5fa;
  --accent-green: #10b981;
  --accent-green-dark: #059669;
  --text-dark: #1e293b;
  --text-medium: #64748b;
  --text-light: #94a3b8;
  --border-light: #e2e8f0;
  --radius: 10px;
  --glass-blur-light: 8px;
  --glass-blur-medium: 12px;
  --glass-blur-heavy: 16px;
  /* Glassmorphism for light background */
  --glass-opacity-light: rgba(255,255,255,0.85);
  --glass-opacity-medium: rgba(255,255,255,0.75);
  --glass-opacity-dark: rgba(255,255,255,0.65);
}

/* Maintain variable names for backward compatibility but assign new meanings */
:root{
  --ink: var(--background-white); /* body background */
  --ink-2: var(--background-light); /* section backgrounds */
  --ink-3: var(--border-light); /* alternate/borders */
  --chalk: var(--text-dark); /* primary text */
  --chalk-dim: var(--text-medium); /* secondary text */
  --chalk-faint: var(--text-light); /* muted text */
  --whatsapp: var(--primary-blue); /* primary accent (blue) */
  --whatsapp-dim: var(--blue-dark); /* darker blue for hover */
  --mango: var(--accent-green); /* touch of green */
  --tomato: var(--accent-green-dark); /* darker green for accents */
  --rule: var(--border-light); /* borders */
  --radius: 10px;
  --glass-blur-light: 8px;
  --glass-blur-medium: 12px;
  --glass-blur-heavy: 16px;
  --glass-opacity-light: rgba(255,255,255,0.85);
  --glass-opacity-medium: rgba(255,255,255,0.75);
  --glass-opacity-dark: rgba(255,255,255,0.65);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Remove chalkboard texture */
body::before{
  content:none;
}

/* Glassmorphism utilities */
.glass-panel{
  background:var(--glass-opacity-light);
  backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--rule);
}
.glass-panel-medium{
  background:var(--glass-opacity-medium);
  backdrop-filter:blur(var(--glass-blur-medium));
  border:1px solid var(--rule);
}
.glass-panel-dark{
  background:var(--glass-opacity-dark);
  backdrop-filter:blur(var(--glass-blur-heavy));
  border:1px solid var(--rule);
}

/* Enhanced focus styles for accessibility */
:focus-visible{
  outline:2px solid var(--mango);
  outline-offset:3px;
}

/* Layout containers */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  background:var(--glass-opacity-light);
  backdrop-filter:blur(var(--glass-blur-light));
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}
.logo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:1.3rem;letter-spacing:-0.01em;
  display:flex;align-items:baseline;gap:6px;
}
.logo span{color:var(--mango); /* touch of green for logo accent */}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{
  font-size:0.92rem;color:var(--chalk-dim);transition:color .15s ease;
}
.nav-links a:hover{color:var(--chalk);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;
  font-size:0.92rem;
  padding:11px 20px;border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:focus-visible{outline:2px solid var(--mango);outline-offset:3px;}
.btn-primary{
  background:var(--whatsapp);color:var(--background-white);
}
.btn-primary:hover{background:var(--whatsapp-dim);transform:translateY(-1px);}
.btn-ghost{
  border-color:var(--rule);color:var(--chalk);
}
.btn-ghost:hover{border-color:var(--chalk-dim);background:var(--glass-opacity-light);}

/* Hero */
.hero{
  padding:88px 0 96px;
  position:relative;z-index:1;
  background:var(--background-light);
  overflow: hidden;
}

/* Hero Background Slider */
.hero-bg-slider{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
}
.hero-bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.2s ease, transform 8s ease;
  will-change:opacity, transform;
}
.hero-bg-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

/* Hero Overlay for text readability */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    135deg,
    rgba(15,23,42,0.75) 0%,
    rgba(15,23,42,0.55) 50%,
    rgba(15,23,42,0.65) 100%
  );
}

/* Ensure hero content is above overlay */
.hero .wrap.hero-grid{
  position:relative;
  z-index:2;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
}

/* Hero text colors - white for visibility over background images */
.hero .eyebrow{
  color:var(--mango);
}
.hero .eyebrow::before{
  background:var(--mango);
  box-shadow:0 0 0 4px rgba(16,185,129,0.15);
}
.hero h1.headline{
  color:#ffffff;
}
.hero h1.headline .chalk-underline{
  color:#ffffff;
}
.hero h1.headline .chalk-underline svg path{
  stroke:#F2A63C;
}
.hero .sub{
  color:rgba(255,255,255,0.9);
}
.hero .hero-note{
  color:rgba(255,255,255,0.7);
}
.hero .stat-number{
  color:#ffffff;
}
.hero .stat-label{
  color:rgba(255,255,255,0.8);
}

/* Hero button adjustments for white background */
.hero .btn-primary{
  background:#2563eb;
  color:#ffffff;
}
.hero .btn-primary:hover{
  background:#f8fafc;
  color:#1e293b;
}
.hero .btn-primary svg{
  fill:#1e293b;
}
.hero .btn-ghost{
  border-color:rgba(255,255,255,0.5);
  color:#ffffff;
}
.hero .btn-ghost:hover{
  border-color:#ffffff;
  background:rgba(255,255,255,0.15);
  color:#ffffff;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--mango);
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--whatsapp);
  box-shadow:0 0 0 4px rgba(37,211,102,0.15);
}
h1.headline{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  line-height:1.06;letter-spacing:-0.02em;
  margin:0 0 22px;
}
h1.headline .chalk-underline{
  position:relative;
  font-family:'Caveat',cursive;font-weight:700;
  color:var(--chalk);
}
h1.headline .chalk-underline svg{
  position:absolute;left:0;bottom:-10px;width:100%;height:14px;
}
.sub{
  font-size:1.08rem;line-height:1.6;color:var(--chalk-dim);
  max-width:480px;margin-bottom:34px;
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.hero-note{font-size:0.85rem;color:var(--chalk-faint);}

/* Phone mock / whatsapp chat - updated for new theme */
.phone{
  background:var(--glass-opacity-light);
  border:1px solid var(--rule);
  border-radius:22px;
  padding:14px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.08);
}
.phone-inner{
  background:var(--glass-opacity-medium);
  border-radius:16px;
  padding:16px;
  min-height:420px;
  display:flex;flex-direction:column;gap:10px;
}
.phone-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.phone-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--background-white);font-size:0.85rem;
}
.phone-head .name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.92rem;color:var(--chalk);}
.phone-head .status{font-size:0.72rem;color:var(--whatsapp);}
.bubble{
  max-width:82%;padding:10px 13px;border-radius:12px;
  font-size:0.85rem;line-height:1.45;
  opacity:0;transform:translateY(10px);
  animation:bubbleIn .5s ease forwards;
}
.bubble.in{background:var(--glass-opacity-light);align-self:flex-start;border-bottom-left-radius:3px;}
.bubble.out{background:var(--whatsapp);color:var(--background-white);align-self:flex-end;border-bottom-right-radius:3px;}
.bubble.out .mono{font-weight:600;}
.bubble b{color:var(--mango);}
.bubble.out b{color:#08150D;}
@keyframes bubbleIn{to{opacity:1;transform:translateY(0);}}
.b1{animation-delay:.1s;} .b2{animation-delay:.5s;} .b3{animation-delay:1.1s;} .b4{animation-delay:1.7s;}
.price-line{display:flex;justify-content:space-between;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:0.8rem;padding:3px 0;}
.price-line .cheapest{color:var(--background-white);background:var(--mango);padding:1px 6px;border-radius:4px;font-weight:600;}

/* Sections shared */
section{position:relative;z-index:1;padding:80px 0;}
.section-head{max-width:620px;margin-bottom:48px;}
.kicker{
  font-family:'IBM Plex Mono',monospace;font-size:0.78rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--mango);
  margin-bottom:12px;display:block;
}
h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-0.01em;margin:0 0 14px;
}
.section-head p{color:var(--chalk-dim);font-size:1.02rem;line-height:1.6;margin:0;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1;transform:translateY(0);}

/* How it works — receipt line items */
.steps{
  background:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:6px 0;
}
.step{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:26px 32px;
  border-bottom:1px dashed var(--rule);
}
.step:last-child{border-bottom:none;}
.step-no{
  font-family:'IBM Plex Mono',monospace;font-size:1.5rem;color:var(--mango);font-weight:600;
}
.step h3{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;margin:0 0 6px;font-weight:600;
}
.step p{margin:0;color:var(--chalk-dim);font-size:0.96rem;line-height:1.55;max-width:520px;}

/* Stores */
.stores-row{display:flex;flex-wrap:wrap;gap:14px;}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:0.88rem;
  border:1px dashed var(--chalk-faint);
  color:var(--chalk);
  padding:10px 18px;border-radius:6px;
  background:var(--glass-opacity-light);
  transform:rotate(var(--r,0deg));
}
.tag:nth-child(2n){--r:-1.2deg;}
.tag:nth-child(3n){--r:1deg;}
.tag:nth-child(5n){--r:-0.6deg;}

/* Receipt signature element */
.receipt-wrap{display:flex;justify-content:center;}
.receipt{
  background:var(--chalk);
  color:#1A1A1A;
  width:100%;max-width:400px;
  font-family:'IBM Plex Mono',monospace;
  padding:32px 26px 20px;
  position:relative;
  box-shadow:0 40px 70px -30px rgba(0,0,0,0.55);
  filter:drop-shadow(0 0 0 transparent);
}
.receipt::before, .receipt::after{
  content:"";
  position:absolute;left:0;right:0;height:12px;
  background:
    radial-gradient(circle at 8px 6px, var(--ink) 6px, transparent 7px) repeat-x;
  background-size:16px 12px;
}
.receipt::before{top:-6px;}
.receipt::after{bottom:-6px;transform:scaleY(-1);}
.receipt h3{
  font-family:'Plus Jakarta Sans',sans-serif;text-align:center;font-size:1.05rem;
  letter-spacing:0.03em;margin:0 0 2px;
}
.receipt .rsub{text-align:center;font-size:0.72rem;color:#555;margin-bottom:18px;letter-spacing:0.04em;}
.rline{display:flex;justify-content:space-between;font-size:0.82rem;padding:6px 0;border-bottom:1px dotted #bbb;}
.rline .store{color:#666;}
.rline.best{font-weight:600;}
.rline.best .price{color:var(--mango); /* use green for best price */}
.rtotal{display:flex;justify-content:space-between;font-size:0.92rem;font-weight:700;padding:14px 0 6px;margin-top:6px;border-top:1px solid #1A1A1A;}
.stamp{
  margin-top:18px;border:2px solid var(--tomato);color:var(--tomato);
  text-align:center;padding:9px;border-radius:6px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.85rem;
  transform:rotate(-2deg);letter-spacing:0.03em;
}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.stat{
  background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:28px 24px;
}
.stat .num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:2.1rem;color:var(--mango); /* use green for stats numbers */}
.stat .label{font-size:0.88rem;color:var(--chalk-dim);margin-top:6px;}

/* Final CTA */
.cta-band{
  background:var(--ink-2);border:1px solid var(--rule);
  border-radius:16px;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;
}
.cta-band h2{margin-bottom:8px;}
.cta-band p{color:var(--chalk-dim);margin:0;max-width:420px;}

/* Footer */
footer{
  border-top:1px solid var(--rule);
  padding:32px 0;
  font-size:0.85rem;color:var(--chalk-faint);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
footer a{color:var(--chalk-dim);}
footer a:hover{color:var(--chalk);}

/* Responsive */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero .phone{display:none;} /* Hide phone mockup on mobile */
  .hero{padding:64px 0 72px;}
  .hero .hero-note{display:block;margin-top:16px;}
  .stats-grid{grid-template-columns:1fr;}
  .step{grid-template-columns:44px 1fr;padding:20px;}
  .nav-links{display:none;}
  .cta-band{padding:36px 24px;}
}

@media (max-width:480px){
  .hero{padding:56px 0 64px;}
  .hero h1.headline{font-size:clamp(2rem, 8vw, 2.6rem);}
  .hero .sub{font-size:1rem;}
  .hero .cta-row{flex-direction:column;align-items:stretch;}
  .hero .btn{width:100%;justify-content:center;}
  .hero .hero-stats{gap:16px;}
  .hero .stat-item{text-align:center;}
}

/* Accessibility enhancements */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:0;
  top:0;
  width:auto;
  height:auto;
  overflow:auto;
  background:#000;
  left:7px;
  top:7px;
  width:auto;
  height:auto;
  padding:8px 15px 8px 15px;
  z-index:100;
}

/* Animation enhancements */
.glass-hover-lift{
  transition:all 0.3s ease;
}
.glass-hover-lift:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
}

/* New component styles */
.testimonial-card{
  background:var(--glass-opacity-medium);
  backdrop-filter:blur(var(--glass-blur-medium));
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:16px;
}
.testimonial-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--mango);
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--background-white);
  margin-bottom:12px;
}
.testimonial-text{
  font-style:italic;
  color:var(--chalk-dim);
  line-height:1.6;
}
.testimonial-author{
  font-weight:600;
  color:var(--chalk);
  margin-top:8px;
  display:flex;align-items:center;gap:8px;
}
.testimonial-author .name{
  font-family:'Plus Jakarta Sans',sans-serif;
}
.testimonial-author .role{
  font-size:0.85rem;
  color:var(--chalk-faint);
}

.faq-item{
  border-bottom:1px solid var(--rule);
  padding:20px 0;
}
.faq-item:last-child{
  border-bottom:none;
}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;
  padding:8px 0;
}
.faq-question h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.1rem;
  font-weight:600;
  margin:0;
  color:var(--chalk);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  color:var(--chalk-dim);
  font-size:0.95rem;
  line-height:1.6;
}
.faq-answer.show{
  max-height:200px;
  padding:8px 0;
}
.faq-toggle{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--glass-opacity-light);
  backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;
  color:var(--mango);
  transition:transform 0.3s ease;
}
.faq-toggle.rotate{
  transform:rotate(180px);
}

.savings-calculator{
  background:var(--glass-opacity-medium);
  backdrop-filter:blur(var(--glass-blur-medium));
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:32px;
}
.calculator-input{
  width:100%;
  padding:12px;
  margin:8px 0;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--glass-opacity-light);
  color:var(--chalk);
  font-family:'IBM Plex Mono',monospace;
}
.calculator-input:focus{
  outline:none;
  border-color:var(--mango);
  box-shadow:0 0 0 2px rgba(16,185,129,0.2);
}
.calculator-btn{
  width:100%;
  padding:14px;
  background:var(--whatsapp);
  color:var(--background-white);
  border:none;
  border-radius:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s ease;
}
.calculator-btn:hover{
  background:var(--whatsapp-dim);
}
.calculator-result{
  margin-top:16px;
  padding:16px;
  background:var(--glass-opacity-light);
  backdrop-filter:blur(var(--glass-blur-light));
  border:1px solid var(--rule);
  border-radius:6px;
}
.calculator-result h4{
  margin-top:0;
  color:var(--mango);
}