@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600&family=Open+Sans:wght@400;600;700&display=swap');

/* ==========================================================================
   ZANANA CHIPS — STYLESHEET (Diperbaiki & Dirapikan)
   Struktur HTML & data tidak diubah. Hanya perbaikan visual & tata letak.
   ========================================================================== */

/* ===== 1. Tokens ===== */
:root{
  --yellow:#FFDD33;
  --yellow-deep:#F2C400;
  --cream:#FFF8E7;
  --cream-deep:#FFF1DD;
  --brown:#795548;
  --brown-dark:#4A2F22;
  --ink:#1C140F;
  --muted:#7A5B43;
  --green:#4F7942;
  --green-light:#BFD8AF;
  --tan:#C9A36A;
  --white:#FFFFFF;
  --border:#E5D9C3;

  --font-display:'Bebas Neue', sans-serif;
  --font-sub:'Poppins', sans-serif;
  --font-body:'Open Sans', sans-serif;

  --max:1140px;
  --radius-lg:24px;
  --radius-md:16px;
  --shadow-sm:0 4px 12px rgba(74,47,34,.06);
  --shadow-md:0 12px 28px rgba(74,47,34,.1);
  --shadow-lg:0 20px 48px rgba(74,47,34,.16);
}

/* ===== 2. Reset & Dasar ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}

h1,h2{
  font-family:var(--font-display);
  margin:0;
  font-weight:400;
  letter-spacing:.3px;
  line-height:1.1;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.3rem);}

p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}

.muted{color:var(--muted);}

.eyebrow{
  font-family:var(--font-sub);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brown);
  display:block;
  margin-bottom:.6rem;
}

:focus-visible{outline:2.5px solid var(--brown-dark);outline-offset:3px;border-radius:4px;}

/* ===== 3. Layout Helpers ===== */
.section{padding:5rem 1.5rem;}
.section-tight{padding:3.5rem 1.5rem;}
.wrap{max-width:var(--max);margin:0 auto;}
.center{text-align:center;}

.section-header{margin-bottom:3rem;}
.section-header h2{margin-bottom:.2rem;}
.section-header p{max-width:480px;margin:0 auto;}

.text-highlight{color:var(--yellow-deep);}

/* Swoosh signature underline */
.swoosh{display:block;margin:.6rem 0 1.1rem;}
.swoosh--center{margin-left:auto;margin-right:auto;}
.swoosh path{stroke-linecap:round;}

/* ===== 4. Tombol ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.8rem;
  border-radius:999px;
  font-family:var(--font-sub);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn-primary{
  background:var(--yellow);
  color:var(--brown-dark);
  position:relative;
  overflow:hidden;
  z-index:1;
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition:left .5s ease;
  z-index:-1;
}
.btn-primary:hover{background:var(--yellow-deep);}
.btn-primary:hover::before{left:100%;}

.btn-dark{background:var(--brown-dark);color:var(--cream);}
.btn-dark:hover{background:#3a2419;}

.btn-outline-dark{background:transparent;border-color:var(--brown);color:var(--brown);}
.btn-outline-dark:hover{background:var(--cream);border-color:var(--brown-dark);color:var(--brown-dark);}

.btn-outline-light{
  background:transparent;
  border-color:rgba(255,248,231,.4);
  color:var(--cream);
}
.btn-outline-light:hover{
  background:rgba(255,248,231,.12);
  border-color:var(--cream);
}

.btn-sm{padding:.55rem 1.2rem;font-size:.82rem;}
.btn-lg{padding:1rem 2.2rem;font-size:1rem;}

/* ===== 5. Navbar ===== */
.navbar{
  background:var(--yellow);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 12px rgba(74,47,34,.08);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 1.5rem;
}

.logo-pill{
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.3rem 1.15rem;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.logo-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(74,47,34,.12);
}
.logo-img{
  height:40px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  gap:1.6rem;
}
.nav-links a{
  font-family:var(--font-sub);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding:.35rem 1rem;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.nav-links a:hover{
  background:rgba(255,255,255,.35);
}
.nav-links a.active{
  color:var(--brown-dark);
  background:var(--white);
  font-weight:600;
  box-shadow:0 2px 8px rgba(74,47,34,.1);
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:34px;
  height:28px;
  flex-direction:column;
  justify-content:space-between;
  padding:0;
}
.nav-toggle span{display:block;height:2.5px;background:var(--ink);border-radius:2px;}

/* ===== 6. Hero (Halaman Utama) ===== */
.hero{
  padding:5rem 1.5rem;
  background:var(--white);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-10%;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.12) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation:float 6s ease-in-out infinite;
}
.hero::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-5%;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(121,85,72,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation:float 8s ease-in-out infinite reverse;
}

.hero-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
  position:relative;
}
.hero.img-right .hero-inner{grid-template-areas:"text media";}
.hero.img-left  .hero-inner{grid-template-areas:"media text";}

.hero-text{
  grid-area:text;
  position:relative;
  z-index:1;
}
.hero-media{
  grid-area:media;
  display:flex;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}

.hero-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:480px;
  width:100%;
  margin-left:auto;
}
.hero-frame img{
  max-width:100%;
  max-height:500px;
  object-fit:contain;
  filter:drop-shadow(0 15px 30px rgba(74,47,34,.2));
  transform:rotate(-3deg);
  transition:transform .4s ease;
}
.hero-frame:hover img{
  transform:rotate(0deg) scale(1.05);
}
.hero-img-png{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 15px 30px rgba(74,47,34,.2));
}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;}

/* ===== 7. Home: Keunggulan ===== */
.advantages-section{
  background:linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  position:relative;
  overflow:hidden;
}
.advantages-section::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.advantages-section::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(191,216,175,.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.advantages-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  position:relative;
  z-index:1;
}

.advantage-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:2rem 1.5rem;
  text-align:center;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease, border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.advantage-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.advantage-card::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:rotate(45deg) translateX(-100%);
  transition:transform .6s ease;
  pointer-events:none;
}
.advantage-card:hover::before{transform:scaleX(1);}
.advantage-card:hover::after{transform:rotate(45deg) translateX(100%);}
.advantage-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-deep);
}

.adv-highlight{
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border-color:var(--yellow-deep);
}
.adv-highlight::before{background:var(--brown-dark);}
.adv-highlight h3,
.adv-highlight p{color:var(--brown-dark);}
.adv-highlight .adv-icon-wrapper{
  background:rgba(255,255,255,.4);
  border-color:rgba(74,47,34,.15);
}
.adv-highlight p{color:rgba(74,47,34,.8);}

.adv-icon-wrapper{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  border:2px solid var(--border);
  transition:all .3s ease;
  overflow:hidden;
  padding:12px;
}
.advantage-card:hover .adv-icon-wrapper{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  transform:scale(1.1);
}
.adv-highlight:hover .adv-icon-wrapper{
  background:var(--yellow);
  border-color:var(--brown-dark);
}
.adv-icon-img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.adv-line{
  width:40px;
  height:3px;
  background:var(--yellow);
  border-radius:2px;
  margin:0 auto 1rem;
  transition:width .3s ease;
}
.advantage-card:hover .adv-line{width:60px;}
.adv-highlight .adv-line{background:var(--brown-dark);}

.advantage-card h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:400;
  color:var(--brown-dark);
  margin-bottom:.5rem;
  letter-spacing:.5px;
}
.advantage-card p{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* ===== 8. Home: Stats Bar ===== */
.advantages-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:3rem;
  background:var(--brown-dark);
  border-radius:20px;
  padding:1.5rem 2rem;
  position:relative;
  z-index:1;
  box-shadow:0 12px 30px rgba(74,47,34,.2);
  overflow:hidden;
}
.advantages-stats::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,222,51,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,222,51,.03) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

.stat-item{
  flex:1;
  text-align:center;
  padding:.5rem 1rem;
  position:relative;
  z-index:1;
}
.stat-number{
  display:block;
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--yellow);
  line-height:1.1;
  letter-spacing:1px;
}
.stat-label{
  display:block;
  font-family:var(--font-sub);
  font-size:.75rem;
  color:rgba(255,248,231,.7);
  letter-spacing:.05em;
  margin-top:.2rem;
}
.stat-divider{
  width:1px;
  height:40px;
  background:rgba(255,248,231,.15);
  flex-shrink:0;
  position:relative;
  z-index:1;
}

/* ===== 9. Home: Produk Pilihan ===== */
.featured-products{background:var(--white);}

.product-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.product-highlight-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
}
.product-highlight-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,221,51,.1) 0%, transparent 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:1;
  pointer-events:none;
}
.product-highlight-card:hover::before{opacity:1;}
.product-highlight-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--yellow-deep);
}

.ph-image{
  background:var(--cream);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  overflow:hidden;
}
.ph-image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(74,47,34,.15));
  transform:rotate(-2deg);
  transition:transform .3s ease;
}
.product-highlight-card:hover .ph-image img{
  transform:rotate(0deg) scale(1.05);
}

.ph-body{padding:1.5rem;position:relative;z-index:2;}
.ph-tag{
  display:inline-block;
  background:var(--yellow);
  color:var(--brown-dark);
  font-family:var(--font-sub);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.2rem .7rem;
  border-radius:999px;
  margin-bottom:.6rem;
}
.ph-tag-green{background:var(--green-light);color:var(--green);}
.ph-tag-brown{background:var(--tan);color:var(--white);}

.ph-body h3{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:400;
  margin-bottom:.4rem;
  color:var(--brown-dark);
}
.ph-body p{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:1rem;
  line-height:1.5;
}

/* ===== 10. Home: Kenapa Zanana ===== */
.why-section{background:var(--cream);}

.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.why-visual{position:relative;}
.why-frame{
  background:var(--white);
  border-radius:24px;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.why-frame img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 28px rgba(74,47,34,.2));
  transform:rotate(-3deg);
}
.why-experience-badge{
  position:absolute;
  bottom:-1rem;
  right:-1rem;
  background:var(--yellow);
  border-radius:16px;
  padding:1rem 1.5rem;
  text-align:center;
  box-shadow:0 8px 20px rgba(74,47,34,.15);
}
.why-experience-badge strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--brown-dark);
  line-height:1;
}
.why-experience-badge small{
  font-size:.72rem;
  color:var(--brown);
  font-family:var(--font-sub);
}

.why-content h2{margin-bottom:.2rem;}
.why-content > p{
  color:var(--muted);
  margin-bottom:1.5rem;
}
.why-points{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:.5rem;
}
.why-point{display:flex;align-items:flex-start;gap:.85rem;}
.why-point-icon{
  font-size:1.2rem;
  margin-top:.1rem;
  flex-shrink:0;
  background:var(--white);
  width:34px;height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.why-point strong{
  display:block;
  font-family:var(--font-sub);
  font-size:.9rem;
  color:var(--brown-dark);
  line-height:1.3;
}
.why-point small{
  font-size:.78rem;
  color:var(--muted);
}

/* ===== 11. Home: Testimoni Preview ===== */
.testimoni-preview{background:var(--white);}

.testi-preview-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.tp-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
  overflow:hidden;
}
.tp-card::before{
  content:'"';
  position:absolute;
  top:-10px;
  right:20px;
  font-size:8rem;
  font-family:Georgia, serif;
  color:rgba(255,221,51,.12);
  line-height:1;
  pointer-events:none;
  transition:all .3s ease;
}
.tp-card:hover::before{
  color:rgba(255,221,51,.22);
  transform:scale(1.1) rotate(-10deg);
}
.tp-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--tan);
}
.tp-stars{
  font-size:1rem;
  margin-bottom:.8rem;
  letter-spacing:2px;
}
.tp-card p{
  font-size:.9rem;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:1.2rem;
  font-style:italic;
}
.tp-user{display:flex;align-items:center;gap:.75rem;position:relative;z-index:1;}
.tp-avatar{
  width:40px;height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sub);
  font-weight:700;
  font-size:.8rem;
  color:var(--white);
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(74,47,34,.1);
}
.tp-user strong{
  display:block;
  font-family:var(--font-sub);
  font-size:.85rem;
  color:var(--brown-dark);
  line-height:1.2;
}
.tp-user small{
  font-size:.72rem;
  color:var(--muted);
}

/* ===== 12. CTA Banner ===== */
.cta-banner{
  background:linear-gradient(135deg, var(--brown-dark) 0%, #3a2419 100%);
  padding:4rem 1.5rem;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute;
  top:-60%;
  right:-10%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.cta-banner::after{
  content:'';
  position:absolute;
  bottom:-60%;
  left:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(255,248,231,.06) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.cta-banner-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-banner-text h2{
  color:var(--cream);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom:.3rem;
  line-height:1.2;
}
.cta-banner-text h2 .text-highlight{color:var(--yellow);}
.cta-banner-text p{
  color:rgba(255,248,231,.75);
  font-size:.95rem;
  margin:0;
}
.cta-banner-actions{display:flex;gap:1rem;flex-wrap:wrap;}

/* ===== 13. Footer ===== */
.footer{
  background:var(--brown-dark);
  color:var(--cream);
  padding:4rem 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
}
.footer-brand{max-width:320px;}
.footer-logo{
  height:40px;
  width:auto;
  margin-bottom:.8rem;
  background:var(--cream);
  border-radius:999px;
  padding:.4rem 1rem;
}
.footer-brand p{
  font-size:.88rem;
  color:#D9C6B4;
  line-height:1.6;
  margin-bottom:1rem;
}

.footer-links{display:flex;flex-direction:column;gap:.55rem;}
.footer-links h4{
  font-family:var(--font-sub);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--yellow);
  margin:0 0 .3rem;
}
.footer-links a{
  text-decoration:none;
  color:#D9C6B4;
  font-size:.88rem;
  transition:color .2s ease, padding-left .2s ease;
}
.footer-links a:hover{
  color:var(--cream);
  padding-left:.25rem;
}

.footer-bottom{
  border-top:1px solid rgba(255,248,231,.12);
  padding:1.25rem 1.5rem;
  text-align:center;
  font-size:.8rem;
  color:#B79C84;
}

/* ===== 14. Halaman Tentang: Hero ===== */
.about-hero-section{
  padding:6rem 1.5rem;
  background:linear-gradient(135deg, var(--cream) 0%, var(--white) 50%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.about-hero-section::before{
  content:'';
  position:absolute;
  top:-10%;right:-10%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 6s ease-in-out infinite;
}
.about-hero-section::after{
  content:'';
  position:absolute;
  bottom:-10%;left:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(121,85,72,.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 8s ease-in-out infinite reverse;
}

.about-hero-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  grid-template-areas:"media text";
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.about-hero-text-col{grid-area:text;animation:fadeInUp .8s ease;}
.about-hero-media{
  grid-area:media;
  display:flex;
  justify-content:flex-end;
  position:relative;
  animation:fadeInUp .8s ease .2s backwards;
}
.about-hero-text-col h1{margin-bottom:.2rem;}
.about-hero-text-col > p{
  color:var(--muted);
  margin-bottom:1.5rem;
  line-height:1.8;
}
.about-hero-meta{
  display:flex;
  gap:1rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.about-meta-item{
  text-align:left;
  padding:1rem 1.2rem;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:12px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.about-meta-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
  border-color:var(--yellow-deep);
}
.about-meta-item strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--brown-dark);
  line-height:1;
  letter-spacing:.5px;
  margin-bottom:.3rem;
}
.about-meta-item small{
  font-size:.72rem;
  color:var(--muted);
  font-family:var(--font-sub);
}

.about-hero-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:550px;
  position:relative;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:24px;
  padding:2.5rem;
  box-shadow:var(--shadow-md);
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.about-hero-frame:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-deep);
}
.about-hero-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 15px 30px rgba(74,47,34,.2));
  transform:rotate(-3deg);
  transition:transform .4s ease;
}
.about-hero-frame:hover .about-hero-img{
  transform:rotate(0deg) scale(1.05);
}
.about-hero-floating-badge{
  position:absolute;
  bottom:-1rem;
  left:-1rem;
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border-radius:16px;
  padding:.8rem 1.4rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  box-shadow:0 10px 24px rgba(74,47,34,.2);
  animation:floatBadge 3s ease-in-out infinite;
  border:2px solid var(--white);
}
.about-hero-floating-badge span{font-size:1.3rem;}
.about-hero-floating-badge strong{
  font-family:var(--font-sub);
  font-size:.85rem;
  color:var(--brown-dark);
  white-space:nowrap;
  font-weight:700;
}

/* ===== 15. Halaman Tentang: Milestone ===== */
.milestone-section{
  padding:5rem 1.5rem;
  background:linear-gradient(135deg, var(--brown-dark) 0%, #3a2419 100%);
  position:relative;
  overflow:hidden;
}
.milestone-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,222,51,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,222,51,.03) 1px, transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.milestone-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
  z-index:1;
}
.milestone-card{
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,248,231,.1);
  border-radius:20px;
  padding:2.5rem 2rem;
  text-align:center;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.milestone-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.milestone-card:hover::before{transform:scaleX(1);}
.milestone-card:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-8px);
  box-shadow:0 16px 32px rgba(0,0,0,.2);
  border-color:rgba(255,221,51,.3);
}
.milestone-active{
  background:rgba(255,221,51,.15);
  border-color:rgba(255,221,51,.4);
  box-shadow:0 8px 24px rgba(255,221,51,.2);
}
.milestone-active::before{transform:scaleX(1);}
.milestone-year{
  display:inline-block;
  font-family:var(--font-display);
  font-size:2.5rem;
  color:var(--yellow);
  line-height:1;
  margin-bottom:.8rem;
  letter-spacing:1px;
  text-shadow:0 2px 8px rgba(255,221,51,.3);
}
.milestone-card h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--cream);
  font-weight:400;
  margin-bottom:.5rem;
  letter-spacing:.5px;
}
.milestone-card p{
  font-size:.85rem;
  color:rgba(255,248,231,.7);
  line-height:1.6;
  margin:0;
}

/* ===== 16. Halaman Tentang: Visi Misi ===== */
.vision-section{
  background:linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.vision-section::before{
  content:'';
  position:absolute;
  top:-30%;right:-20%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.vision-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  position:relative;
  z-index:1;
}
.vision-card{
  border-radius:24px;
  padding:3rem;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.vision-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.vision-card:hover::before{transform:scaleX(1);}
.vision-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}

.vision-mission{
  background:var(--white);
  border:1.5px solid var(--border);
}
.vision-value{
  background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
  border:1.5px solid var(--brown-dark);
}

.vision-icon-box{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  overflow:hidden;
  padding:12px;
  transition:all .3s ease;
}
.vision-card:hover .vision-icon-box{
  background:var(--yellow);
  transform:scale(1.1);
  box-shadow:0 8px 20px rgba(255,221,51,.4);
}
.vision-value:hover .vision-icon-box{
  background:var(--yellow);
  transform:scale(1.1);
  box-shadow:0 8px 20px rgba(255,221,51,.4);
}
.vision-icon-img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.vision-card h2{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:400;
  color:var(--brown-dark);
  margin-bottom:1rem;
  letter-spacing:.5px;
}
.vision-value h2{color:var(--yellow);}
.vision-card > p{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:1.5rem;
  line-height:1.7;
}
.vision-value p{color:rgba(255,248,231,.85);}

.vision-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.vision-list li{
  font-family:var(--font-sub);
  font-size:.9rem;
  color:var(--ink);
  line-height:1.5;
  padding:.5rem .7rem;
  background:rgba(255,255,255,.5);
  border-radius:8px;
  transition:all .3s ease;
}
.vision-list li:hover{
  background:rgba(255,255,255,.8);
  transform:translateX(5px);
}
.vision-value .vision-list li{
  color:var(--yellow);
  background:rgba(255,255,255,.15);
}
.vision-value .vision-list li:hover{
  background:rgba(255,255,255,.25);
}

/* ===== 17. Halaman Tentang: Tim ===== */
.team-about-section{
  background:linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.team-about-section::before{
  content:'';
  position:absolute;
  top:-30%;left:-20%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.team-about-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  position:relative;
  z-index:1;
}
.team-about-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:3rem 2rem;
  text-align:center;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.team-about-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.team-about-card:hover::before{transform:scaleX(1);}
.team-about-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-deep);
}

.card-highlight{
  background:linear-gradient(180deg, var(--white) 0%, rgba(255,221,51,.08) 100%);
  border-color:var(--yellow);
  box-shadow:0 8px 24px rgba(255,221,51,.15);
}
.card-highlight::before{transform:scaleX(1);}

.team-avatar-box{
  width:90px;height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  box-shadow:0 10px 24px rgba(74,47,34,.15);
  transition:transform .3s ease, box-shadow .3s ease;
  border:3px solid var(--white);
}
.team-about-card:hover .team-avatar-box{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 12px 28px rgba(74,47,34,.2);
}
.team-avatar-initial{
  font-family:var(--font-sub);
  font-size:1.4rem;
  font-weight:700;
  color:var(--white);
  text-shadow:0 2px 4px rgba(0,0,0,.15);
}
.team-about-card h3{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:400;
  color:var(--brown-dark);
  margin-bottom:.3rem;
  letter-spacing:.5px;
}
.team-role{
  display:block;
  font-family:var(--font-sub);
  font-size:.85rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:1rem;
}
.team-role-line{
  width:50px;
  height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  border-radius:2px;
  margin:0 auto 1.2rem;
  transition:width .3s ease;
}
.team-about-card:hover .team-role-line{width:70px;}
.team-about-card p{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

/* ===== 18. Halaman Produk: Mega Hero ===== */
.mega-hero-banner{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#FFFDE4;
  position:relative;
}
.mega-hero-inner{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.mega-hero-img-full{
  width:100%;
  height:auto;
  max-height:640px;
  object-fit:cover;
  display:block;
}
.mega-hero-overlay-text{
  position:absolute;
  left:6%;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(255,248,231,.94) 0%, rgba(255,248,231,.7) 40%, rgba(255,248,231,0) 100%);
  padding:2.2rem 3.5rem 2.2rem 2.5rem;
  border-radius:20px;
  color:var(--brown-dark);
  max-width:56%;
  pointer-events:none;
}
.mega-badge{
  display:inline-block;
  background:var(--yellow);
  padding:6px 16px;
  font-family:var(--font-sub);
  font-weight:700;
  font-size:12px;
  border-radius:999px;
  letter-spacing:.08em;
  color:var(--brown-dark);
  box-shadow:0 4px 12px rgba(74,47,34,.12);
}
.mega-hero-overlay-text h1{
  font-size:clamp(2rem, 4vw, 3.2rem) !important;
  font-weight:400 !important;
  margin-top:12px !important;
  line-height:1.1;
  color:var(--brown-dark);
}

/* ===== 19. Halaman Produk: Filter & Daftar ===== */
.product-list-section{
  background:linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  position:relative;
  overflow:hidden;
}
.product-list-section::before{
  content:'';
  position:absolute;
  top:-30%;right:-15%;
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(255,221,51,.06) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.product-section-header{
  max-width:var(--max);
  margin:0 auto 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.product-filter-group{display:flex;gap:.6rem;flex-wrap:wrap;}
.filter-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--white);
  border:1.5px solid var(--border);
  padding:.55rem 1.2rem;
  border-radius:999px;
  font-family:var(--font-sub);
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{
  border-color:var(--yellow-deep);
  color:var(--brown-dark);
  transform:translateY(-1px);
}
.filter-btn.is-active{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  color:var(--brown-dark);
  box-shadow:0 4px 12px rgba(255,221,51,.3);
}
.filter-icon{font-size:.9rem;line-height:1;}
.filter-btn[data-filter="all"] .filter-icon::before{content:'▦';}
.filter-btn[data-filter="best"] .filter-icon::before{content:'★';}
.filter-btn[data-filter="promo"] .filter-icon::before{content:'%';}

.product-count-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:var(--cream);
  border:1px solid var(--border);
  padding:.4rem 1rem;
  border-radius:999px;
  font-family:var(--font-sub);
  font-size:.78rem;
  font-weight:600;
  color:var(--brown-dark);
  white-space:nowrap;
}
.product-count-badge span{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--brown-dark);
  letter-spacing:.5px;
}

.product-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
  position:relative;
  z-index:1;
}
.product-item{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease, border-color .4s ease;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.product-item:hover{
  transform:translateY(-12px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-deep);
}

.product-item-visual{
  width:100%;
  height:260px;
  background:linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.product-item-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,221,51,.12) 0%, transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
.product-item:hover .product-item-visual::before{opacity:1;}
.product-item-visual::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition:left .6s ease;
}
.product-item:hover .product-item-visual::after{left:100%;}

.product-item-badge{
  position:absolute;
  top:1rem;
  left:1rem;
  font-family:var(--font-sub);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.4rem 1rem;
  border-radius:999px;
  color:var(--white);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  z-index:2;
}
.badge-best{
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  color:var(--brown-dark);
}
.badge-new{
  background:linear-gradient(135deg, var(--green) 0%, #3d6633 100%);
}
.badge-promo{
  background:linear-gradient(135deg, #E74C3C 0%, #c0392b 100%);
}

.product-item-img{
  max-width:85%;
  max-height:85%;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(74,47,34,.25));
  transform:rotate(-2deg) translateY(0);
  transition:transform .5s cubic-bezier(.25,.46,.45,.94), filter .5s ease;
  position:relative;
  z-index:1;
}
.product-item:hover .product-item-img{
  transform:rotate(0deg) scale(1.08) translateY(-5px);
  filter:drop-shadow(0 20px 36px rgba(74,47,34,.35));
}

.product-item-body{
  padding:2rem;
  flex:1;
  display:flex;
  flex-direction:column;
  position:relative;
}
.product-item-body::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.product-item:hover .product-item-body::before{transform:scaleX(1);}

.product-item-body h3{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:400;
  color:var(--brown-dark);
  margin-bottom:.5rem;
  letter-spacing:.5px;
  transition:color .3s ease;
}
.product-item:hover .product-item-body h3{color:var(--yellow-deep);}

.product-item-rating{
  font-size:.9rem;
  margin-bottom:.7rem;
  letter-spacing:1.5px;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.product-item-rating span{
  font-family:var(--font-sub);
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:0;
  margin-left:.3rem;
}

.product-item-desc{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:1.5rem;
  flex:1;
}

.product-item-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:auto;
  padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.product-item-price{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--brown-dark);
  letter-spacing:.5px;
  line-height:1;
  transition:color .3s ease, transform .3s ease;
}
.product-item:hover .product-item-price{
  color:var(--yellow-deep);
  transform:scale(1.05);
}
.product-item-price-original{
  font-family:var(--font-sub);
  font-size:.9rem;
  color:var(--muted);
  text-decoration:line-through;
  margin-left:.5rem;
  opacity:.7;
}

.product-item-action{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.3rem;
  font-weight:700;
  color:var(--brown-dark);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s ease;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(255,221,51,.4);
  position:relative;
  overflow:hidden;
}
.product-item-action::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%);
  transition:width .4s ease, height .4s ease;
}
.product-item-action:hover::before{width:100%;height:100%;}
.product-item-action:hover{
  transform:scale(1.15) rotate(90deg);
  box-shadow:0 8px 20px rgba(255,221,51,.5);
}
.product-item-action:active{
  transform:scale(.95) rotate(90deg);
}
.product-item-action span{
  position:relative;
  z-index:1;
}

/* ===== 20. Halaman Produk: Kenapa Beli ===== */
.product-why-section{background:var(--white);}
.product-why-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.product-why-card{
  background:var(--cream);
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:2rem 1.5rem;
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-why-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--yellow-deep);
}
.pwc-icon{
  font-size:2rem;
  display:block;
  margin-bottom:.8rem;
  line-height:1;
}
.product-why-card:nth-child(1) .pwc-icon::before{content:'🏅';}
.product-why-card:nth-child(2) .pwc-icon::before{content:'🚚';}
.product-why-card:nth-child(3) .pwc-icon::before{content:'💬';}
.product-why-card:nth-child(4) .pwc-icon::before{content:'🔒';}

.product-why-card h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:400;
  color:var(--brown-dark);
  margin-bottom:.4rem;
  letter-spacing:.5px;
}
.product-why-card p{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.5;
  margin:0;
}

/* ===== 21. Halaman Testimoni: Header ===== */
.testi-header-section{
  background:linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.testi-header-rating{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:.6rem 1.3rem;
  margin-top:1rem;
  box-shadow:var(--shadow-sm);
}
.thr-stars{
  font-size:1.1rem;
  letter-spacing:2px;
}
.thr-text{
  font-family:var(--font-sub);
  font-size:.8rem;
  color:var(--muted);
}
.thr-text strong{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--brown-dark);
  letter-spacing:.5px;
}

/* ===== 22. Halaman Testimoni: Stats Marquee ===== */
.testi-stats-section{
  padding:3rem 1.5rem;
  background:var(--brown-dark);
  overflow:hidden;
  position:relative;
}
.testi-stats-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,222,51,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,222,51,.03) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.testi-stats-wrapper{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
}
.testi-stats-track{
  display:flex;
  gap:0;
  width:max-content;
  animation:scrollStats 28s linear infinite;
}
.testi-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  flex-shrink:0;
  padding-right:1.5rem;
}
@keyframes scrollStats{
  0%{transform:translateX(0);}
  100%{transform:translateX(-33.3333%);}
}
.testi-stats-section:hover .testi-stats-track{animation-play-state:paused;}

.testi-stat-card{
  text-align:center;
  padding:1.2rem 1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,248,231,.15);
  border-radius:16px;
  backdrop-filter:blur(10px);
  transition:all .3s ease;
  width:200px;
  min-width:160px;
  max-width:200px;
}
.testi-stat-card:hover{
  background:rgba(255,255,255,.15);
  border-color:var(--yellow);
  transform:scale(1.05);
  box-shadow:0 8px 24px rgba(255,221,51,.2);
}
.ts-icon{
  display:block;
  font-size:1.8rem;
  margin-bottom:.5rem;
  line-height:1;
}
.testi-stat-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--yellow);
  line-height:1.1;
  letter-spacing:.5px;
}
.testi-stat-card small{
  display:block;
  font-family:var(--font-sub);
  font-size:.72rem;
  color:rgba(255,248,231,.7);
  margin-top:.3rem;
}

/* ===== 23. Halaman Testimoni: Daftar ===== */
.testi-list-section{background:var(--cream);}
.testi-list-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.testi-list-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:1.8rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
}
.testi-list-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--yellow-deep);
}
.tlc-highlight{
  background:linear-gradient(180deg, var(--white) 0%, rgba(255,221,51,.04) 100%);
  border-color:var(--yellow);
}

.tlc-header{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1rem;
}
.tlc-avatar{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sub);
  font-size:.85rem;
  font-weight:700;
  color:var(--white);
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(74,47,34,.1);
}
.tlc-user{flex:1;}
.tlc-user h3{
  font-family:var(--font-sub);
  font-size:.95rem;
  font-weight:700;
  color:var(--brown-dark);
  margin:0;
  line-height:1.2;
}
.tlc-city{
  font-size:.72rem;
  color:var(--muted);
  font-family:var(--font-sub);
}
.tlc-stars{
  font-size:.8rem;
  letter-spacing:1px;
  flex-shrink:0;
}
.tlc-comment{
  font-size:.88rem;
  color:var(--ink);
  line-height:1.6;
  font-style:italic;
  margin-bottom:1rem;
  flex:1;
}
.tlc-product{margin-top:auto;}
.tlc-product-tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:var(--cream);
  border:1px solid var(--border);
  padding:.3rem .8rem;
  border-radius:999px;
  font-family:var(--font-sub);
  font-size:.7rem;
  font-weight:600;
  color:var(--brown);
}

/* ===== 24. Halaman Testimoni: Galeri ===== */
.gallery-section{background:var(--white);}
.gallery-section .gallery-grid{
  max-width:var(--max);
  margin:0 auto;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1rem;
}
.gallery-item{
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s ease;
}
.gallery-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
}
.gallery-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
  display:block;
}
.gallery-item:hover .gallery-img{transform:scale(1.1);}

/* ===== 25. Halaman Kontak: Hero ===== */
.contact-hero-section{
  padding:6rem 1.5rem;
  background:linear-gradient(135deg, var(--cream) 0%, var(--white) 50%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.contact-hero-section::before{
  content:'';
  position:absolute;
  top:-10%;right:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(255,221,51,.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 6s ease-in-out infinite;
}
.contact-hero-section::after{
  content:'';
  position:absolute;
  bottom:-10%;left:-10%;
  width:350px;height:350px;
  background:radial-gradient(circle, rgba(191,216,175,.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:float 8s ease-in-out infinite reverse;
}
.contact-hero-inner{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
  z-index:1;
}
.contact-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.contact-hero-text h1{margin-bottom:.2rem;animation:fadeInUp .6s ease;}
.contact-hero-text > p{
  color:var(--muted);
  margin-bottom:1.2rem;
  animation:fadeInUp .6s ease .1s backwards;
}
.contact-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:.6rem 1.2rem;
  font-family:var(--font-sub);
  font-size:.8rem;
  font-weight:600;
  color:var(--brown-dark);
  box-shadow:var(--shadow-sm);
  transition:all .3s ease;
  animation:fadeInUp .6s ease .2s backwards;
}
.contact-hero-badge:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--yellow-deep);
}
.contact-hero-image{
  display:flex;
  justify-content:flex-end;
  animation:fadeInUp .6s ease .3s backwards;
}
.contact-hero-img{
  max-width:100%;
  max-height:500px;
  object-fit:contain;
  filter:drop-shadow(0 15px 30px rgba(74,47,34,.2));
  transform:rotate(-2deg);
  transition:transform .4s ease;
}
.contact-hero-image:hover .contact-hero-img{
  transform:rotate(0deg) scale(1.05);
}

/* ===== 26. Halaman Kontak: Info Cards ===== */
.contact-info-section{
  padding:4rem 1.5rem;
  background:linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  position:relative;
  overflow:hidden;
}
.contact-info-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,222,51,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,222,51,.03) 1px, transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.contact-info-box{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
  z-index:1;
}
.contact-cards-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}
.contact-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:1.8rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  text-decoration:none;
  color:inherit;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease, border-color .4s ease;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.contact-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.contact-card:hover::before{transform:scaleX(1);}
.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--yellow-deep);
}
.card-address{grid-column:span 2;}

.cc-icon{
  width:52px;height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  overflow:hidden;
  background:var(--ink);
  padding:10px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover .cc-icon{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.cc-icon-img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.cc-body{flex:1;}
.cc-body h3{
  font-family:var(--font-sub);
  font-size:.95rem;
  font-weight:700;
  color:var(--brown-dark);
  margin:0 0 .3rem;
  transition:color .3s ease;
}
.contact-card:hover .cc-body h3{color:var(--yellow-deep);}
.cc-value{
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:400;
  color:var(--brown-dark);
  margin:0 0 .2rem;
  letter-spacing:.5px;
}
.cc-note{
  font-size:.78rem;
  color:var(--muted);
}
.cc-arrow{
  font-size:1.2rem;
  color:var(--muted);
  transition:transform .3s ease, opacity .3s ease, color .3s ease;
  flex-shrink:0;
  opacity:.5;
}
.contact-card:hover .cc-arrow{
  transform:translateX(5px);
  opacity:1;
  color:var(--yellow-deep);
}

/* ===== 27. Halaman Kontak: Map ===== */
.contact-map-section{
  background:linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  position:relative;
  overflow:hidden;
}
.contact-map-section::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(255,221,51,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.contact-map-box{
  max-width:var(--max);
  margin:0 auto;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:3rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform .3s ease, box-shadow .3s ease;
}
.contact-map-box:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.map-pin-img{
  width:100px;height:100px;
  object-fit:contain;
  margin:0 auto 1.2rem;
  filter:drop-shadow(0 6px 16px rgba(74,47,34,.25));
  transition:transform .3s ease;
}
.contact-map-box:hover .map-pin-img{
  transform:scale(1.1) rotate(-5deg);
}
.map-address{
  font-size:1rem;
  color:var(--brown-dark);
  line-height:1.6;
  max-width:600px;
  margin:0 auto;
  font-family:var(--font-sub);
}
.map-grid-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,222,51,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,222,51,.06) 1px, transparent 1px);
  background-size:40px 40px;
  border-radius:20px;
  pointer-events:none;
  opacity:.5;
}

/* ===== 28. Scroll Reveal ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ===== 28b. Loading Screen ===== */
.loader-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.loader-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-box{
  text-align:center;
  padding:2.5rem 3rem;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  animation:loaderPop .5s ease;
}
.loader-logo{
  height:70px;
  width:auto;
  margin:0 auto 1.5rem;
  animation:loaderPulse 1.6s ease-in-out infinite;
}
.loader-bar{
  width:220px;
  height:6px;
  background:var(--cream-deep);
  border-radius:999px;
  margin:0 auto 1rem;
  overflow:hidden;
  position:relative;
}
.loader-bar-fill{
  position:absolute;
  top:0;left:0;
  height:100%;
  width:40%;
  background:linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  border-radius:999px;
  animation:loaderSlide 1.2s ease-in-out infinite;
}
.loader-text{
  font-family:var(--font-sub);
  font-size:.85rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.05em;
  margin:0;
}

@keyframes loaderPop{
  0%{opacity:0;transform:scale(.85);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes loaderPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}
@keyframes loaderSlide{
  0%{transform:translateX(0);}
  50%{transform:translateX(150%);}
  100%{transform:translateX(0);}
}

/* Loading Screen Responsive */
@media (max-width: 820px){
  .loader-box{
    padding:2rem 1.8rem;
    max-width:90%;
  }
  .loader-logo{
    height:56px;
  }
  .loader-bar{
    width:180px;
  }
}

@media (max-width: 480px){
  .loader-box{
    padding:1.6rem 1.2rem;
  }
  .loader-logo{
    height:48px;
    margin-bottom:1.2rem;
  }
  .loader-bar{
    width:150px;
  }
  .loader-text{
    font-size:.75rem;
  }
}

/* ===== 29. Animasi ===== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes float{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-10px);}
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-8px) rotate(2deg);}
}

/* Staggered entrance untuk grid home */
.advantages-grid .advantage-card{animation:fadeInUp .6s ease forwards;opacity:0;}
.advantages-grid .advantage-card:nth-child(1){animation-delay:.1s;}
.advantages-grid .advantage-card:nth-child(2){animation-delay:.2s;}
.advantages-grid .advantage-card:nth-child(3){animation-delay:.3s;}
.advantages-grid .advantage-card:nth-child(4){animation-delay:.4s;}

.product-highlight-grid .product-highlight-card{animation:fadeInUp .6s ease forwards;opacity:0;}
.product-highlight-grid .product-highlight-card:nth-child(1){animation-delay:.1s;}
.product-highlight-grid .product-highlight-card:nth-child(2){animation-delay:.2s;}
.product-highlight-grid .product-highlight-card:nth-child(3){animation-delay:.3s;}

.testi-preview-grid .tp-card{animation:fadeInUp .6s ease forwards;opacity:0;}
.testi-preview-grid .tp-card:nth-child(1){animation-delay:.1s;}
.testi-preview-grid .tp-card:nth-child(2){animation-delay:.2s;}
.testi-preview-grid .tp-card:nth-child(3){animation-delay:.3s;}

/* ===== 30. Responsive: Tablet & HP ===== */
@media (max-width: 1024px){
  .advantages-grid{grid-template-columns:repeat(2,1fr);}
  .product-why-grid{grid-template-columns:repeat(2,1fr);}
  .milestone-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .about-hero-grid{gap:2.5rem;}
}

@media (max-width: 820px){
  /* ===== Navbar Mobile ===== */
  .nav-toggle{
    display:flex;
    z-index:101;
  }
  .nav-links{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--yellow);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    box-shadow:0 8px 20px rgba(74,47,34,.1);
  }
  .nav-links.open{max-height:340px;}
  .nav-links li{width:100%;}
  .nav-links a{
    display:block;
    padding:.9rem 1.5rem;
    border-top:1px solid rgba(0,0,0,.08);
    border-radius:0;
    color:var(--ink);
    background:transparent;
  }
  .nav-links a:hover{background:rgba(255,255,255,.3);}
  .nav-links a.active{
    background:var(--cream);
    color:var(--brown-dark);
    box-shadow:inset 4px 0 0 var(--brown-dark);
    font-weight:600;
  }

  /* ===== Hero Mobile ===== */
  .hero{padding:3rem 1.5rem;}
  .hero-inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "text";
    gap:2rem;
  }
  .hero-media{justify-content:center;}
  .hero-frame{max-width:300px;margin:0 auto;}

  /* ===== Home Sections ===== */
  .product-highlight-grid{grid-template-columns:1fr;}
  .testi-preview-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;gap:2.5rem;}
  .why-visual{order:1;}
  .why-content{order:2;}
  .why-experience-badge{
    bottom:-.5rem;
    right:-.5rem;
    padding:.8rem 1.2rem;
  }

  .advantages-stats{
    flex-wrap:wrap;
    gap:1rem;
    padding:1.5rem;
  }
  .stat-item{flex:1 1 40%;padding:.3rem .5rem;}
  .stat-divider{display:none;}
  .stat-number{font-size:1.4rem;}

  .cta-banner-inner{
    flex-direction:column;
    text-align:center;
  }
  .cta-banner-actions{justify-content:center;}

  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .footer-brand{max-width:100%;}

  /* ===== Halaman Tentang ===== */
  .about-hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "text";
    gap:2.5rem;
  }
  .about-hero-text-col{order:2;}
  .about-hero-media{order:1;justify-content:center;}
  .about-hero-frame{max-width:340px;}
  .about-hero-floating-badge{
    left:50%;
    transform:translateX(-50%);
    bottom:-.8rem;
  }
  .about-hero-meta{justify-content:center;}
  .about-meta-item{text-align:center;}
  .vision-grid{grid-template-columns:1fr;}
  .team-about-grid{grid-template-columns:1fr;}

  /* ===== Halaman Produk ===== */
  .mega-hero-overlay-text{
    left:50%;
    transform:translate(-50%,-50%);
    max-width:90%;
    width:90%;
    text-align:center;
    padding:1.4rem 1.2rem;
    background:rgba(255,248,231,.85);
  }
  .product-section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .product-grid{grid-template-columns:1fr;gap:1.5rem;}
  .product-item-visual{height:220px;padding:1.5rem;}
  .product-item-body{padding:1.5rem;}
  .product-item-body h3{font-size:1.3rem;}
  .product-item-price{font-size:1.3rem;}
  .product-why-grid{grid-template-columns:repeat(2,1fr);}

  /* ===== Halaman Testimoni ===== */
  .testi-stats-grid{grid-template-columns:repeat(2,minmax(140px,160px));}
  .testi-list-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;}
  .testi-stat-card{width:160px;min-width:140px;max-width:160px;}

  /* ===== Halaman Kontak ===== */
  .contact-hero-grid{grid-template-columns:1fr;gap:2rem;}
  .contact-hero-text{order:2;}
  .contact-hero-image{order:1;justify-content:center;}
  .contact-cards-grid{grid-template-columns:1fr;}
  .card-address{grid-column:span 1;}
}

/* ===== 30b. Breakpoint Lanjutan: HP Besar / Tablet Kecil ===== */
@media (max-width: 600px){
  .section{padding:3.5rem 1.2rem;}
  .hero{padding:3rem 1.2rem;}
  .about-hero-section{padding:3.5rem 1.2rem;}
  .contact-hero-section{padding:3.5rem 1.2rem;}
  .contact-info-section{padding:3rem 1.2rem;}
  .cta-banner{padding:3rem 1.2rem;}
  .footer{padding:3rem 0 0;}
  .footer-grid{gap:1.8rem;padding-bottom:2rem;}
  .product-grid{gap:1.2rem;}
  .product-why-grid{gap:1rem;}
  .gallery-grid{gap:.6rem;}
  .contact-cards-grid{gap:1rem;}
  .testi-preview-grid{gap:1rem;}
  .product-highlight-grid{gap:1rem;}
  .testi-list-grid{gap:1rem;}
  .about-hero-meta{gap:.8rem;}
  .about-hero-grid{gap:2rem;}
  .vision-grid{gap:1.5rem;}
  .team-about-grid{gap:1.5rem;}
}

@media (max-width: 480px){
  h1{font-size:1.9rem;}
  h2{font-size:1.5rem;}
  .section{padding:3rem 1rem;}
  .section-tight{padding:2.5rem 1rem;}
  .hero{padding:2.5rem 1rem;}

  .nav-inner{padding:.7rem 1rem;}
  .logo-pill{padding:.25rem .9rem;}
  .logo-img{height:34px;}

  .advantages-grid{grid-template-columns:1fr;}
  .product-why-grid{grid-template-columns:1fr;}
  .milestone-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:.5rem;}
  .testi-stats-grid{grid-template-columns:160px;}

  .hero-text{text-align:center;}
  .hero-cta{justify-content:center;}
  .hero-cta .btn{width:100%;justify-content:center;}
  .cta-banner-actions .btn{width:100%;justify-content:center;}
  .hero-frame{max-width:240px;margin:0 auto;}
  .hero-img-png{max-height:260px;}

  .product-item-visual{height:200px;padding:1.2rem;}
  .product-item-body{padding:1.2rem;}
  .product-item-foot{flex-wrap:wrap;}
  .filter-btn{flex:1;justify-content:center;padding:.5rem .8rem;font-size:.75rem;}

  .about-hero-meta{flex-direction:column;width:100%;}
  .about-meta-item{width:100%;text-align:center;}
  .about-hero-frame{max-width:280px;padding:1.5rem;}

  .why-experience-badge{right:0;bottom:0;padding:.7rem 1rem;}
  .why-experience-badge strong{font-size:1.1rem;}

  .contact-hero-badge{font-size:.72rem;padding:.5rem 1rem;}
  .cc-value{font-size:1rem;}
  .cc-icon{width:44px;height:44px;padding:8px;}
  .contact-map-box{padding:2rem 1.2rem;}
  .map-pin-img{width:80px;height:80px;}

  .vision-card{padding:2rem 1.5rem;}
  .vision-card h2{font-size:1.6rem;}
  .team-about-card{padding:2.5rem 1.5rem;}

  .mega-hero-img-full{max-height:360px;}
  .mega-hero-overlay-text{width:92%;padding:1.1rem .9rem;border-radius:12px;}
  .mega-hero-overlay-text h1{font-size:1.6rem !important;margin-top:8px !important;}
  .mega-badge{font-size:10px;padding:4px 12px;}

  .testi-list-card{padding:1.4rem;}
  .gallery-item{border-radius:12px;}
}

/* ===== 31. Reduced Motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:hover{transform:none;}
  .advantage-card,
  .product-highlight-card,
  .tp-card{animation:none;opacity:1;}
  .testi-stats-track{animation:none;}
  .hero::before,
  .hero::after,
  .about-hero-section::before,
  .about-hero-section::after,
  .contact-hero-section::before,
  .contact-hero-section::after,
  .about-hero-floating-badge{animation:none;}
  .loader-box,
  .loader-logo,
  .loader-bar-fill{animation:none;}
}