:root {
    --green:#2d7a4f; 
    --green-light:#4caf78; 
    --green-pale:#e8f5ee;
    --orange:#f5873a; 
    --dark:#1a2e22; 
    --gray:#6b7c6e;
  }
  body { font-family:'Segoe UI',sans-serif; color:var(--dark); }

  /* POPUP */
  .modal-header-promo {
    background:linear-gradient(135deg,var(--green),var(--green-light));
    color:#fff; border:none; border-radius:16px 16px 0 0; padding:2rem;
    text-align:center; display:block;
  }
  .modal-content { border-radius:16px; border:none; box-shadow:0 25px 60px rgba(0,0,0,.3); overflow:hidden; }
  .promo-badge {
    background:var(--orange); display:inline-block; padding:5px 16px;
    border-radius:50px; font-size:.75rem; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; margin-bottom:14px;
  }
  .promo-discount { font-size:2.6rem; font-weight:900; line-height:1.1; }
  .promo-discount span { color:#ffde59; }
  .code-box {
    background:var(--green-pale); border:2px dashed var(--green);
    border-radius:10px; padding:10px 20px; font-weight:800;
    letter-spacing:3px; color:var(--green); font-size:1.2rem;
    display:none;
  }
  .btn-orange { background:var(--orange); color:#fff; border:none; }
  .btn-orange:hover { background:#e0722a; color:#fff; }

  /* PROMO BAR */
  .promo-bar {
    background:linear-gradient(90deg,var(--orange),#ff6b35);
    color:#fff; font-size:.88rem; font-weight:600; padding:10px;
    text-align:center;
  }
  .promo-bar .code-inline {
    background:rgba(255,255,255,.25); padding:2px 10px;
    border-radius:20px; font-weight:800; margin-left:6px;
  }

  /* NAV */
  .navbar { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.08); }
  .navbar-brand .brand-icon {
    width:40px; height:40px;
    background:linear-gradient(135deg,var(--green),var(--green-light));
    border-radius:12px; display:inline-flex; align-items:center;
    justify-content:center; font-size:1.3rem; margin-right:8px;
  }
  .navbar-brand span { font-size:1.4rem; font-weight:900; color:var(--dark); }
  .navbar-brand span em { color:var(--green); font-style:normal; }
  .nav-link { color:var(--gray) !important; font-weight:500; border-radius:8px; padding:8px 14px !important; }
  .nav-link:hover,.nav-link.active { color:var(--green) !important; background:var(--green-pale); }
  .cart-btn {
    position:relative; background:var(--green-pale); border:none;
    width:42px; height:42px; border-radius:12px; font-size:1.1rem;
    display:inline-flex; align-items:center; justify-content:center;
    transition:.2s; cursor:pointer;
  }
  .cart-btn:hover { background:var(--green); color:#fff; }
  .cart-count {
    position:absolute; top:-5px; right:-5px; background:var(--orange);
    color:#fff; font-size:.62rem; font-weight:800;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .btn-green { background:var(--green); color:#fff; border-radius:10px; font-weight:700; }
  .btn-green:hover { background:var(--dark); color:#fff; }
  .btn-green-outline { border:2px solid var(--green); color:var(--green); border-radius:10px; font-weight:700; }
  .btn-green-outline:hover { background:var(--green-pale); }

  /* HERO */
  .hero {
    background:linear-gradient(135deg,#f0faf4,#d6f0e2);
    min-height:560px; overflow:hidden; position:relative;
    padding:80px 0 60px;
  }
  .hero::before {
    content:''; position:absolute; right:-80px; top:-80px;
    width:460px; height:460px;
    background:radial-gradient(circle,rgba(76,175,120,.2),transparent 70%);
    border-radius:50%;
  }
  .hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; padding:8px 18px; border-radius:50px;
    font-size:.8rem; font-weight:600; color:var(--green);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
  }
  .hero h1 { font-size:2.8rem; font-weight:900; line-height:1.1; }
  .hero h1 em { color:var(--green); font-style:normal; }
  .hero-stat-num { font-size:1.5rem; font-weight:900; color:var(--green); }
  .hero-stat-label { font-size:.78rem; color:var(--gray); }
  .hero-img-wrap {
    background:#fff; border-radius:28px; padding:30px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    font-size:7rem; text-align:center; position:relative; z-index:1;
    border:4px solid var(--green-light);
  }
  .floating-tag {
    position:absolute; background:#fff; border-radius:14px;
    padding:8px 14px; box-shadow:0 8px 24px rgba(0,0,0,.12);
    font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:6px;
    animation:float 3s ease-in-out infinite;
    z-index: 999999;
  }
  .ft1 { top:-16px; left:-30px; color:var(--green); }
  .ft2 { bottom:-10px; right:-24px; color:var(--orange); animation-delay:1.5s; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

  /* SECTION COMMON */
  .section-tag {
    display:inline-block; background:var(--green-pale); color:var(--green);
    padding:5px 14px; border-radius:20px; font-size:.75rem;
    font-weight:700; letter-spacing:1px; text-transform:uppercase;
  }

  /* CATEGORIES */
  .cat-card {
    border:2px solid var(--green-pale); border-radius:20px;
    padding:28px 16px; text-align:center; cursor:pointer; transition:.3s;
    background:#fff;
  }
  .cat-card:hover {
    border-color:var(--green); box-shadow:0 10px 30px rgba(45,122,79,.15);
    transform:translateY(-4px);
  }
  .cat-icon { font-size:3rem; display:block; margin-bottom:12px; }
  .cat-count {
    display:inline-block; background:var(--green); color:#fff;
    padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
  }

  /* PRODUCTS */
  .products-bg { background:#f9fdf9; }
  .product-card { border-radius:20px; border:none; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:.3s; }
  .product-card:hover { box-shadow:0 12px 40px rgba(45,122,79,.18); transform:translateY(-4px); }
  .product-img-area {
    background:linear-gradient(135deg,var(--green-pale),#c8ecd8);
    height:180px; display:flex; align-items:center;
    justify-content:center; font-size:4.5rem; position:relative;
  }
  .badge-new { position:absolute; top:12px; left:12px; background:var(--green); font-size:.7rem; }
  .badge-promo { position:absolute; top:12px; left:12px; background:var(--orange); font-size:.7rem; }
  .animal-tag { font-size:.72rem; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:1px; }
  .price-main { font-size:1.2rem; font-weight:900; }
  .price-old { font-size:.85rem; color:var(--gray); text-decoration:line-through; }
  .stars { color:#f5c842; font-size:.85rem; }

  /* WHY */
  .why-card {
    border:2px solid var(--green-pale); border-radius:20px;
    padding:28px 20px; text-align:center; transition:.3s; height:100%;
  }
  .why-card:hover { border-color:var(--green); box-shadow:0 8px 24px rgba(45,122,79,.12); }
  .why-icon {
    width:62px; height:62px; background:var(--green-pale); border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; margin:0 auto 16px;
  }

  /* TESTIMONIALS */
  .testi-bg { background:var(--green-pale); }
  .testi-card { border:none; border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,.05); height:100%; }
  .testi-avatar {
    width:44px; height:44px; border-radius:50%; background:var(--green-pale);
    display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  }

  /* NEWSLETTER */
  .newsletter-section {
    background:linear-gradient(135deg,var(--green),var(--dark));
    color:#fff;
  }
  .newsletter-section .section-tag { background:rgba(255,255,255,.15); color:#fff; }
  .newsletter-input { border-radius:12px 0 0 12px !important; border:2px solid rgba(255,255,255,.2) !important; background:rgba(255,255,255,.1) !important; color:#fff !important; }
  .newsletter-input::placeholder { color:rgba(255,255,255,.6) !important; }
  .newsletter-input:focus { border-color:rgba(255,255,255,.5) !important; box-shadow:none !important; }
  .newsletter-btn { border-radius:0 12px 12px 0 !important; background:var(--orange) !important; border:none !important; font-weight:700 !important; }
  .newsletter-btn:hover { background:#e0722a !important; }

  /* FOOTER */
  footer { background:var(--dark); color:#fff; }
  .footer-link { color:rgba(255,255,255,.5); font-size:.85rem; display:block; margin-bottom:8px; text-decoration:none; transition:.2s; }
  .footer-link:hover { color:#fff; }
  .footer-bottom { border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:.8rem; }
  .social-btn {
    width:36px; height:36px; background:rgba(255,255,255,.1); border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:.2s; cursor:pointer; color:#fff; text-decoration:none;
  }
  .social-btn:hover { background:var(--green); color:#fff; }

  /* CONFETTI */
  .confetti-piece {
    position:absolute; width:9px; height:9px; border-radius:2px;
    animation:confettiFall 2.5s ease forwards; opacity:0; pointer-events:none;
  }
  @keyframes confettiFall {
    0%{transform:translateY(-20px) rotate(0deg);opacity:1}
    100%{transform:translateY(280px) rotate(720deg);opacity:0}
  }