:root{
  --brand:#CD3C80;
  --accent:#FE4FA5;
  --accent-secondary:#B52E6D;
  --muted:#7F8C8D;
  --bg:#ffffff;
  --bg-alt:#FDF2F7;
  --card:#fafafa;
  --text:#2C3E50;
  --max-width:1100px;
  --radius:12px;
  --container-padding:18px;
  --break-sm:900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.5;color:var(--text);background:var(--bg);margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max-width);margin:0 auto;padding:var(--container-padding)}

.site-header{background:var(--brand);color:#fff; position: absolute; top: 0; left: 0; right: 0; z-index: 1000; width: 100%;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand h1{margin:0;font-size:1.5rem;color:white;font-weight:700}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:white;font-weight:700;padding:8px 10px;border-radius:6px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,0.1)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:700;transition: all 0.2s ease;}
.btn:hover{transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.btn-primary{background:var(--accent);color:white}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent);font-weight:700}
.btn-large{padding: 14px 24px; font-size: 1.1em;}
.btn-light{background: white; color: var(--brand);}

.mobile-menu-toggle{display:none;flex-direction:column;background:transparent;border:none;cursor:pointer;padding:8px;width:36px;height:36px;justify-content:space-between;}
.mobile-menu-toggle span{display:block;height:3px;width:100%;background-color:white;border-radius:3px;transition:all 0.3s ease;}
.mobile-menu-toggle.active span:nth-child(1){transform: rotate(45deg) translate(5px, 5px);}
.mobile-menu-toggle.active span:nth-child(2){opacity: 0;}
.mobile-menu-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(7px, -6px);}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:100px 0 44px;}
.hero-media{display:flex;justify-content:center}
.hero-body h1{font-size:30px;margin:0 0 10px;color:var(--brand)}
.lead{color:var(--muted);margin-bottom:12px; font-size: 1.1em;}
.highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:10px 0 16px}
.highlights li{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.04); position: relative; padding-left: 32px;}
.highlights li:before{content: "✓"; position: absolute; left: 12px; color: var(--accent); font-weight: bold;}
.cta-row{display:flex;gap:12px; margin: 20px 0;}
.note.small{font-size:13px;color:var(--muted);margin-top:12px}

.review-meta {
  background: var(--bg-alt);
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.review-meta > div {
  flex: 1;
  min-width: 200px;
}

.stars {
  color: #e6b01c;
  font-size: 1.2em;
  position: relative;
}

.half-star {
  position: relative;
  color: #e6b01c;
}

.half-star:after {
  content: '★';
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #e6b01c;
}

.half-star:before {
  content: '★';
  position: absolute;
  left: 0;
  width: 100%;
  color: #e0e0e0;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.urgency-cta{background: linear-gradient(135deg, var(--brand) 0%, #2d202d 100%); color: white; text-align: center;}
.urgency-cta h2{color: white; margin-bottom: 20px;}
.countdown-timer{display: flex; justify-content: center; gap: 15px; margin: 25px 0;}
.countdown-box{background: rgba(255,255,255,0.15); padding: 15px; border-radius: 10px; min-width: 80px;}
.countdown-box span{display: block;}
.countdown-box span:first-child{font-size: 32px; font-weight: bold;}
.countdown-box span:last-child{font-size: 14px; opacity: 0.8;}
.urgency-text{color: #e8e8e8; margin: 20px 0;}

.section{padding: 50px 0;}
.section-title{text-align: center; font-size: 32px; color: var(--brand); margin-bottom: 30px; position: relative;}
.section-title:after{content: ""; display: block; width: 60px; height: 3px; background: var(--accent); margin: 15px auto;}
.bg-alt{background: var(--bg-alt);}

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 8px 20px rgba(20,20,20,0.04);text-align:center; transition: transform 0.2s ease;}
.card:hover{transform: translateY(-5px);}
.card h3{margin:10px 0 6px; color: var(--brand);}
.card p{color:var(--muted);margin:0}

.process-steps{margin: 30px 0;}
.step{display: flex; margin-bottom: 30px; align-items: flex-start;}
.step-number{flex-shrink: 0; width: 40px; height: 40px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px;}
.step-content h3{margin: 0 0 8px; color: var(--brand);}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.review{background:var(--card);padding:20px;border-radius:10px;text-align:center; transition: transform 0.2s ease;}
.review:hover{transform: translateY(-5px);}
.stars{color:#e6b01c;margin:8px 0; font-size: 1.2em;}
.quote{font-style:italic;color:var(--muted); line-height: 1.6;}
.author{font-weight:700;margin-top:10px; color: var(--brand);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.two-col img{max-width:100%;height:auto;border-radius:12px;margin-left:40px}
.bullets{list-style:disc;margin-left:18px;color:var(--muted); line-height: 1.6;}
.bullets li{margin-bottom: 8px;}

.ingredient-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0;}
.ingredient{background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.ingredient h3{color: var(--brand); margin: 0 0 10px;}

.price-block{text-align:center; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.08);}
.content-center{max-width:900px;margin:0 auto}

.comparison-table{margin: 30px 0; overflow-x: auto;}
.comparison-table table{width: 100%; border-collapse: collapse;}
.comparison-table th, .comparison-table td{padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee;}
.comparison-table th{background: var(--brand); color: white;}
.comparison-table tr:nth-child(even){background: #f9f9f9;}
.comparison-table td:first-child{font-weight: 600;}

.faq{margin-top:12px}
.faq-item{border-bottom:1px solid rgba(0,0,0,0.06);padding:10px 0}
.faq-item button{width:100%;text-align:left;padding:8px;border:0;background:none;font-weight:700; cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.faq-item button:after{content: "+"; font-size: 1.2em;}
.faq-item button[aria-expanded="true"]:after{content: "-";}
.faq-body{display:none;padding-top:8px;color:var(--muted); padding: 15px; background: #f9f9f9; border-radius: 8px; margin-top: 8px;}

.cta-section{background: var(--brand); color: white; text-align: center;}
.cta-section h2{color: white;}
.cta-section .section-title:after{background: var(--accent);}
.cta-highlights{display: flex; justify-content: center; gap: 20px; margin: 20px 0;}
.highlight-item{background: rgba(255,255,255,0.1); padding: 8px 15px; border-radius: 20px;}

.site-footer{background:#111;color:#fff;padding:30px 0;text-align:center}
.site-footer a{color:#fff;text-decoration:underline}

.discount-image {
  max-width: 400px;
  margin: 0 auto 20px auto;
  display: block;
}

@media (max-width: 900px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn {
    justify-content: center;
    text-align: center;
  }

  .bg-alt, .urgency-cta, .cta-section {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: calc(100% + 2 * var(--container-padding));
  }

  .hero-media,
  .content-center.text-center,
  .cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .discount-image {
    max-width: 300px;
  }

  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;text-align:center; padding: 80px 0 30px;}

  .two-col{
    grid-template-columns:1fr;
    gap: 25px;
    padding: 0 15px;
  }

  .two-col img {
    max-width: 280px;
    margin: 0 auto;
    display: block;
  }

  .two-col .bullets {
    margin-left: 18px;
    padding-right: 10px;
  }

  .two-col .cta-row {
    justify-content: center;
    margin: 20px 0;
  }

  .nav{
    display:none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--brand);
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    height: 100vh;
    overflow-y: auto;
    z-index: 999;
  }
  .nav.active{display: flex;}
  .nav a{
    width: 100%;
    text-align: center;
    padding: 15px;
    margin: 8px 0;
    font-size: 1.1em;
  }
  .mobile-menu-toggle{display: flex;}

  .highlights{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .ingredient-grid{grid-template-columns:1fr}
  .cta-highlights{flex-direction: column; align-items: center;}
  .cta-row{flex-direction: column;}
  .countdown-timer{gap: 10px;}
  .countdown-box{min-width: 70px; padding: 10px;}
  .countdown-box span:first-child{font-size: 26px;}

  .review-meta {
    flex-direction: column;
    gap: 10px;
  }

  .review-meta > div {
    min-width: auto;
  }

  .hero-body h1 {
    font-size: 24px;
    margin-top: 10px;
    line-height: 1.3;
    padding: 0 10px;
  }

  .lead {
    font-size: 1em;
    margin-bottom: 15px;
    line-height: 1.4;
    padding: 0 10px;
  }

  .highlights {
    margin: 15px 0;
    padding: 0 10px;
  }

  .highlights li {
    padding: 15px 15px 15px 35px;
    margin-bottom: 8px;
    text-align: left;
  }

  .review-meta {
    margin: 15px 10px;
    padding: 15px;
  }

  .section {
    padding: 35px 0;
  }

  .section-title {
    font-size: 26px;
    margin-bottom: 25px;
    padding: 0 15px;
  }

  .card {
    padding: 18px;
    margin-bottom: 8px;
  }

  .content-center {
    padding: 0 10px;
  }

  .hero-body p,
  .content-center p,
  .card p {
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 0 5px;
  }

  .bullets {
    margin-left: 20px;
    padding-right: 10px;
  }

  .bullets li {
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .process-steps {
    margin: 20px 0;
    padding: 0 10px;
  }

  .step {
    margin-bottom: 25px;
    align-items: flex-start;
    padding: 0 5px;
  }

  .step-content {
    flex: 1;
  }

  .review {
    padding: 18px;
    margin-bottom: 15px;
  }

  .quote {
    line-height: 1.5;
    margin: 10px 0;
  }

  .ingredient {
    padding: 18px;
    margin-bottom: 12px;
  }

  .price-block {
    margin: 0 10px;
    padding: 20px 15px;
  }

  .comparison-table {
    margin: 20px 0;
    padding: 0 5px;
  }

  .cta-section .content-center {
    padding: 0 15px;
  }

  .site-footer .wrap {
    padding: 20px;
  }
}

@media (max-width:600px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .hero{padding:70px 0 20px}
  .section{padding: 30px 0;}
  .countdown-timer{gap: 5px;}
  .countdown-box{min-width: 60px; padding: 8px;}
  .countdown-box span:first-child{font-size: 22px;}
  .countdown-box span:last-child{font-size: 12px;}

  .two-col {
    padding: 0 10px;
    gap: 20px;
  }

  .two-col img {
    max-width: 250px;
  }

  .two-col .bullets {
    margin-left: 15px;
    padding-right: 5px;
  }

  .two-col p,
  .two-col h3 {
    padding: 0 5px;
  }

  .site-header {
    position: static;
  }

  .hero {
    padding: 30px 0 20px;
  }

  .discount-image {
    max-width: 250px;
  }

  .wrap {
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero-body h1 {
    font-size: 22px;
    padding: 0 5px;
  }

  .section-title {
    font-size: 22px;
    padding: 0 10px;
  }

  .card {
    padding: 15px;
    margin: 0 5px 10px 5px;
  }

  .content-center {
    padding: 0 5px;
  }

  .highlights,
  .process-steps,
  .reviews {
    padding: 0 5px;
  }
}