* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-color: #14532d;
  --accent-color: #22c55e;
  --secondary-color: #16a34a;
  --dark-bg: #052e16;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --bg-light: #f0fdf4;
  --bg-white: #ffffff;
  --success-color: #16a34a;
  --warning-color: #eab308;
  --danger-color: #dc2626;
  --border-color: #bbf7d0;
}
body { font-family: Inter, sans-serif; line-height: 1.7; color: var(--text-primary); background: #f7fff8; }
.container { max-width: 1180px; margin: 0 auto; padding: 20px; }
header { background: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 20; }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: Poppins, sans-serif; font-size: 30px; font-weight: 800; color: var(--primary-color); letter-spacing: 1px; }
.header-ad-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; }
.hero-section { background: radial-gradient(circle at top left, #4ade80, #15803d); color: #fff; padding: 72px 20px; text-align: center; }
.hero-title { font-family: Poppins, sans-serif; font-size: 46px; font-weight: 800; margin-bottom: 16px; }
.hero-subtitle { font-size: 21px; max-width: 760px; margin: 0 auto 30px; }
.features-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.feature-item { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); padding: 10px 14px; border-radius: 999px; font-size: 14px; }
.product-section, .section { padding: 64px 20px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.product-info { background: #fff; border: 1px solid var(--border-color); border-radius: 24px; padding: 30px; box-shadow: 0 10px 25px rgba(20,83,45,.08); }
.product-info h2, .section-title { font-family: Poppins, sans-serif; color: var(--primary-color); }
.section-title { text-align: center; font-size: 34px; margin-bottom: 26px; }
.limited-badge { background: #166534; color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 12px; display: inline-block; margin-bottom: 10px; }
.price-section { border: 1px solid #86efac; border-radius: 18px; padding: 18px; background: #f0fdf4; margin: 16px 0; }
.price-title { font-weight: 700; margin-bottom: 10px; }
.package-options { display: grid; gap: 10px; }
.package-option { background: #fff; border: 2px solid #dcfce7; border-radius: 14px; padding: 14px; cursor: pointer; }
.package-option.selected { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.package-header { display: flex; align-items: center; justify-content: space-between; }
.package-name { font-family: Poppins, sans-serif; font-weight: 700; font-size: 20px; }
.package-price { font-family: Poppins, sans-serif; font-weight: 800; color: var(--secondary-color); font-size: 24px; }
.package-details { color: var(--text-secondary); font-size: 13px; }
.btn-primary, .btn-cta, .btn-back-home { display: inline-block; text-decoration: none; border: none; cursor: pointer; border-radius: 12px; font-weight: 700; }
.btn-primary { width: 100%; padding: 16px; background: linear-gradient(135deg,#16a34a,#22c55e); color: #fff; margin-top: 15px; }
.section-content-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.section-content p { margin-bottom: 14px; color: var(--text-secondary); }
.section-video img, .section-video video, .section-image img, .recommendation-image img, .recommendation-video img, .recommendation-video video { width: 100%; border-radius: 20px; display: block; }
.benefits-grid, .instruction-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 26px; }
.benefit-card, .instruction-step, .recommendation-item, .product-specs, .package-contents, .legal-content { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 22px; }
.benefit-card { text-align: center; }
.benefit-icon { font-size: 34px; margin-bottom: 8px; }
.benefit-title { font-size: 20px; margin-bottom: 10px; }
.benefit-text, .step-text { color: var(--text-secondary); }
.recommendations, .instructions, .legal-page { background: var(--bg-light); }
.recommendation-list, .contents-list, .footer-navigation { list-style: none; }
.recommendation-item { margin-bottom: 14px; }
.recommendation-number, .step-number { width: 40px; height: 40px; border-radius: 999px; background: var(--secondary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 8px; }
.recommendation-title, .step-title { font-family: Poppins, sans-serif; color: var(--primary-color); margin-bottom: 8px; }
.spec-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #dcfce7; }
.spec-item:last-child { border-bottom: none; }
.spec-label { font-weight: 700; color: var(--primary-color); }
.contents-list li { padding: 8px 0; }
.cta-section { background: linear-gradient(135deg,#14532d,#16a34a); color: #fff; text-align: center; padding: 60px 20px; }
.cta-section h2 { font-family: Poppins, sans-serif; font-size: 34px; margin-bottom: 14px; }
.cta-section p { max-width: 660px; margin: 0 auto 20px; }
.btn-cta { background: #fff; color: #166534; padding: 14px 24px; }
footer { background: var(--dark-bg); color: #fff; padding: 40px 20px; }
.footer-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.footer-section h3 { margin-bottom: 10px; }
.footer-section p, .footer-section a { color: rgba(255,255,255,.85); line-height: 1.7; font-size: 14px; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; text-align: center; }
.carousel-container { width: 500px; max-width: 100%; height: 500px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color); margin: 0 auto; background: #fff; }
.carousel-wrapper, .carousel-track { height: 100%; }
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide { min-width: 100%; display: flex; align-items: center; justify-content: center; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; border: none; background: rgba(255,255,255,.95); color: #14532d; cursor: pointer; }
.carousel-nav.prev { left: 8px; } .carousel-nav.next { right: 8px; }
.carousel-thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.carousel-thumbnail { height: 72px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; }
.carousel-thumbnail.active { border-color: #16a34a; }
.carousel-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.btn-back-home { background: #16a34a; color: #fff; padding: 10px 14px; }
.legal-page h1 { font-family: Poppins, sans-serif; color: var(--primary-color); text-align: center; margin-bottom: 20px; }
.legal-content h2 { color: var(--primary-color); margin: 14px 0 8px; font-family: Poppins, sans-serif; }
.legal-content p, .legal-content li { color: var(--text-secondary); }
@media (max-width: 900px) {
  .product-grid, .section-content-wrapper, .footer-content, .benefits-grid, .instruction-steps { grid-template-columns: 1fr; }
  .hero-title { font-size: 34px; }
  .section-title { font-size: 28px; }
  .carousel-container { height: 380px; }
}