/* ════════════════════════════════════════════════════════════
   PUTON — style.css  |  Mobile-First Approach
════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FFFBF5;
  --bg2:#FFF6EC;
  --bg3:#FEF0DC;
  --cognac:#C4712A;
  --cognac-light:#E0924A;
  --cognac-pale:#F7DDB8;
  --cognac-ultra:#FDF0DC;
  --ink:#2A1A08;
  --text-mid:#7A5530;
  --text-soft:#A8835A;
  --gold-line:rgba(196,113,42,0.25);
  --nav-h:56px;
}

html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;
  /* pastikan tidak ada horizontal scroll */
  max-width:100vw;
}

/* noise texture */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;opacity:0.4;
}

/* ════════════════════════════════════
   NAV  (mobile base)
════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  height:var(--nav-h);
  padding:0 4vw;
  background:rgba(255,251,245,0.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gold-line);
}
.nav-brand{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;font-weight:700;
  letter-spacing:0.22em;color:var(--ink);
  text-decoration:none;flex-shrink:0;
}
.nav-brand span{color:var(--cognac)}

.nav-right{
  display:flex;align-items:center;
  gap:0.6rem;            /* compact di mobile */
}

/* nav links — hidden mobile, shown desktop */
.nav-links{
  display:none;
  gap:2rem;list-style:none;align-items:center;
}
.nav-links a{
  font-size:0.75rem;font-weight:500;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-mid);text-decoration:none;transition:color 0.3s;
}
.nav-links a:hover{color:var(--cognac)}

/* lang switcher */
.lang-switcher{
  display:flex;
  border:1px solid rgba(196,113,42,0.3);
  border-radius:2px;overflow:hidden;flex-shrink:0;
}
.lang-btn{
  background:transparent;border:none;
  padding:0.3rem 0.6rem;
  font-family:'DM Sans',sans-serif;
  font-size:0.65rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  color:#A8835A;cursor:pointer;
  transition:background 0.2s,color 0.2s;line-height:1;
}
.lang-btn.active{background:var(--cognac);color:#fff}
.lang-btn:hover:not(.active){background:var(--cognac-ultra);color:var(--cognac)}

/* nav CTA — hidden mobile */
.nav-cta{display:none}

/* hamburger — visible mobile */
.nav-hamburger{
  display:flex;
  flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:6px;flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:20px;height:2px;
  background:var(--ink);border-radius:2px;
  transition:transform 0.3s,opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.nav-drawer{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:190;
  background:rgba(255,251,245,0.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gold-line);
  padding:1.2rem 5vw 1.8rem;
  flex-direction:column;gap:0;
}
.nav-drawer.open{display:flex}
.nav-drawer a{
  font-size:0.82rem;font-weight:500;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-mid);text-decoration:none;
  padding:0.85rem 0;
  border-bottom:1px solid var(--cognac-pale);
  display:block;
}
.nav-drawer a:last-of-type{border-bottom:none}
.nav-drawer a.drawer-cta{
  background:var(--cognac);color:#fff;
  text-align:center;padding:0.85rem;
  border:none;border-radius:2px;
  margin-top:1rem;
}

/* ════════════════════════════════════
   HERO  (mobile base — stacked)
════════════════════════════════════ */
.hero{
  display:flex;flex-direction:column;
  padding-top:var(--nav-h);
  background:var(--bg);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;left:-20%;top:5%;
  width:80vw;height:80vw;border-radius:50%;
  background:radial-gradient(circle,rgba(228,166,80,0.15) 0%,transparent 70%);
  pointer-events:none;
}
.hero-right{
  width:100%;
  height:55vw;
  min-height:200px;
  max-height:320px;
  overflow:hidden;
  position:relative;
  order:-1;   /* gambar di atas teks di mobile */
}
.hero-right img{
  width:100%;height:100%;object-fit:cover;
  object-position:center top;
}
.hero-right::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 60%,var(--bg) 100%);
}
.hero-left{
  display:flex;flex-direction:column;
  padding:1.5rem 5vw 3rem;
  position:relative;z-index:2;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.62rem;font-weight:500;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--cognac);margin-bottom:1.2rem;
}
.hero-tag::before{content:'';width:24px;height:1px;background:var(--cognac);}
.hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,7.5vw,3.2rem);
  font-weight:400;line-height:1.1;color:var(--ink);margin-bottom:1rem;
}
.hero-title em{font-style:italic;color:var(--cognac);}
.hero-subtitle{
  font-size:0.88rem;font-weight:300;line-height:1.8;
  color:var(--text-mid);margin-bottom:2rem;
}
.hero-actions{
  display:flex;flex-direction:column;gap:0.75rem;
}
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;
  padding:0.9rem 1.6rem;background:#25D366;color:#fff;
  text-decoration:none;border-radius:2px;
  font-size:0.82rem;font-weight:500;letter-spacing:0.06em;
  box-shadow:0 4px 20px rgba(37,211,102,0.3);
  transition:transform 0.2s,box-shadow 0.2s;
}
.btn-primary:active{transform:scale(0.98)}
.btn-secondary{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;
  padding:0.9rem 1.6rem;background:transparent;color:var(--ink);
  text-decoration:none;border-radius:2px;
  font-size:0.82rem;font-weight:500;letter-spacing:0.06em;
  border:1.5px solid var(--cognac-pale);
  transition:border-color 0.2s,background 0.2s;
}
.btn-secondary:active{background:var(--cognac-ultra);border-color:var(--cognac)}

/* ════════════════════════════════════
   MARQUEE
════════════════════════════════════ */
.marquee-wrap{
  overflow:hidden;
  background:linear-gradient(90deg,var(--cognac),var(--cognac-light),var(--cognac));
  padding:0.65rem 0;
}
.marquee-track{
  display:flex;gap:2rem;
  animation:scroll 20s linear infinite;
  white-space:nowrap;width:max-content;
}
.marquee-item{
  font-size:0.65rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  display:inline-flex;align-items:center;gap:0.7rem;
}
.marquee-item::after{content:'✦';color:rgba(255,255,255,0.5)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ════════════════════════════════════
   PRODUCTS  (mobile: 1 kolom)
════════════════════════════════════ */
.products{padding:3.5rem 4vw;background:var(--bg2)}
.sec-header{margin-bottom:2rem}
.sec-tag{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.62rem;font-weight:500;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--cognac);margin-bottom:0.6rem;
}
.sec-tag::before{content:'';width:20px;height:1px;background:var(--cognac);}
.sec-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,6vw,2.8rem);
  font-weight:400;color:var(--ink);line-height:1.15;
}
.sec-title em{font-style:italic;color:var(--cognac)}

.grid-products{
  display:grid;
  grid-template-columns:1fr 1fr;   /* 2 kolom di mobile */
  gap:2px;
  background:var(--cognac-pale);
  border-radius:4px;overflow:hidden;
}
.product-cell{
  background:var(--bg);overflow:hidden;
  position:relative;cursor:pointer;
  aspect-ratio:3/4;
}
.product-cell img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(0.95) saturate(1.05);
  transition:transform 0.5s ease;
}
.product-cell:active img{transform:scale(1.04)}
.product-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(42,26,8,0.85) 0%,rgba(42,26,8,0.1) 50%,transparent 70%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1rem;
}
/* Di mobile product info selalu visible (tidak butuh hover) */
.product-name{
  font-family:'Playfair Display',serif;font-size:0.9rem;font-weight:400;
  color:#fff;margin-bottom:0.2rem;
}
.product-mat{
  font-size:0.6rem;font-weight:400;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--cognac-pale);
  opacity:1;          /* selalu tampil di mobile, tidak perlu hover */
}
.product-badge{
  position:absolute;top:0.8rem;left:0.8rem;
  background:var(--cognac);color:#fff;
  font-size:0.55rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.2rem 0.6rem;border-radius:1px;
}
.product-cell.large{grid-column:span 2}

/* ════════════════════════════════════
   CRAFTSMANSHIP  (mobile: stacked)
════════════════════════════════════ */
.craft{
  padding:3.5rem 4vw;
  display:flex;flex-direction:column;gap:2rem;
  background:var(--bg);position:relative;overflow:hidden;
}
.craft-visual{
  position:relative;
  padding-bottom:0;    /* no inset di mobile */
}
.craft-img-main{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;box-shadow:0 12px 40px rgba(100,60,20,0.18);
}
.craft-img-inset{display:none}   /* hidden mobile — shown desktop */

.craft-text h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,5.5vw,2.4rem);font-weight:400;
  line-height:1.25;color:var(--ink);margin-bottom:1rem;
}
.craft-text h2 em{font-style:italic;color:var(--cognac)}
.craft-text>p{
  font-size:0.88rem;font-weight:300;line-height:1.85;
  color:var(--text-mid);margin-bottom:1.8rem;
}
.craft-features{display:flex;flex-direction:column;gap:0.9rem}
.craft-feat{
  display:flex;gap:0.9rem;align-items:flex-start;
  padding-bottom:0.9rem;border-bottom:1px solid var(--cognac-pale);
}
.craft-feat:last-child{border-bottom:none}
.feat-num{
  font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:400;
  color:var(--cognac);line-height:1;min-width:1.8rem;flex-shrink:0;
}
.feat-info h4{font-size:0.82rem;font-weight:500;color:var(--ink);margin-bottom:0.2rem;letter-spacing:0.04em;}
.feat-info p{font-size:0.76rem;font-weight:300;color:var(--text-soft);line-height:1.55;margin-bottom:0;}

/* ════════════════════════════════════
   BAND
════════════════════════════════════ */
.band{
  height:50vw;
  min-height:180px;max-height:320px;
  position:relative;overflow:hidden;
}
.band img{width:100%;height:100%;object-fit:cover;filter:brightness(0.72) saturate(0.9);}
.band-caption{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:0 6vw;
}
.band-caption h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,6vw,5rem);font-weight:400;
  color:#fff;line-height:1.1;margin-bottom:0.5rem;
}
.band-caption h2 em{font-style:italic;color:var(--cognac-pale)}
.band-caption p{
  font-size:0.68rem;color:rgba(255,255,255,0.6);
  letter-spacing:0.1em;text-transform:uppercase;
}

/* ════════════════════════════════════
   STATS  (mobile: 2×2 grid)
════════════════════════════════════ */
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--cognac);
}
.stat{
  padding:2rem 1rem;text-align:center;
  border-right:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.stat:nth-child(2n){border-right:none}
.stat:nth-last-child(-n+2){border-bottom:none}
.stat-n{
  font-family:'Playfair Display',serif;
  font-size:2rem;font-weight:400;color:#fff;line-height:1;
}
.stat-l{
  font-size:0.6rem;font-weight:400;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(255,255,255,0.75);
  margin-top:0.4rem;line-height:1.4;
}

/* ════════════════════════════════════
   CTA  (mobile: stacked, no image)
════════════════════════════════════ */
.cta-section{
  padding:3.5rem 4vw;
  background:var(--bg3);
  display:flex;flex-direction:column;gap:2rem;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;right:-10%;bottom:-10%;
  width:70vw;height:70vw;border-radius:50%;
  background:radial-gradient(circle,rgba(228,166,80,0.15) 0%,transparent 70%);
  pointer-events:none;
}
.cta-text h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,5.5vw,2.6rem);font-weight:400;
  line-height:1.25;color:var(--ink);margin-bottom:0.9rem;
}
.cta-text h2 em{font-style:italic;color:var(--cognac)}
.cta-text>p{
  font-size:0.88rem;font-weight:300;line-height:1.82;
  color:var(--text-mid);margin-bottom:1.6rem;
}
.cta-note{
  font-size:0.74rem!important;opacity:0.55;
  margin-top:0.8rem!important;margin-bottom:0!important;
}
.cta-btns{display:flex;flex-direction:column;gap:0.8rem;width:100%}
.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:0.7rem;
  padding:1rem 1.6rem;background:#25D366;color:#fff;
  text-decoration:none;border-radius:2px;
  font-size:0.82rem;font-weight:500;letter-spacing:0.06em;
  box-shadow:0 6px 22px rgba(37,211,102,0.3);
  transition:transform 0.2s;
}
.btn-wa:active{transform:scale(0.98)}
.btn-tokped{
  display:flex;align-items:center;justify-content:center;gap:0.7rem;
  padding:1rem 1.6rem;
  background:linear-gradient(135deg,#03AC0E,#00C411);
  color:#fff;text-decoration:none;border-radius:2px;
  font-size:0.82rem;font-weight:500;letter-spacing:0.06em;
  box-shadow:0 6px 22px rgba(3,172,14,0.25);
  transition:transform 0.2s;
}
.btn-tokped:active{transform:scale(0.98)}
.btn-tokped img{height:16px;width:auto;flex-shrink:0}
.btn-shopee{
  display:flex;align-items:center;justify-content:center;gap:0.7rem;
  padding:1rem 1.6rem;
  background:linear-gradient(135deg,#EE4D2D,#FF6B4D);
  color:#fff;text-decoration:none;border-radius:2px;
  font-size:0.82rem;font-weight:500;
  box-shadow:0 6px 22px rgba(238,77,45,0.25);
}
/* CTA image hidden mobile */
.cta-visual{display:none}

/* ════════════════════════════════════
   FOOTER  (mobile: stacked center)
════════════════════════════════════ */
footer{
  background:var(--ink);padding:2rem 5vw;
  display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:1rem;
}
.footer-brand{
  font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;
  letter-spacing:0.22em;color:#fff;
}
.footer-brand span{color:var(--cognac-light)}
.footer-copy{font-size:0.68rem;color:rgba(255,255,255,0.32);letter-spacing:0.07em}
.footer-links{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.footer-links a{
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.38);text-decoration:none;transition:color 0.3s;
}
.footer-links a:hover{color:var(--cognac-light)}


/* ── Product CTA Card ── */
.product-cta-card{
  background:var(--cognac);
  cursor:default;
  aspect-ratio:16/7;   /* landscape di mobile — tidak terlalu tinggi */
}
.product-cta-card:active img{transform:none}
.product-cta-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
  padding:1.6rem;
}
.product-cta-tag{
  font-size:0.6rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  margin-bottom:0.8rem;
  display:inline-flex;align-items:center;gap:0.4rem;
}
.product-cta-tag::before{content:'';width:16px;height:1px;background:rgba(255,255,255,0.4);}
.product-cta-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.1rem,3.5vw,2rem);
  font-weight:400;line-height:1.2;
  color:#fff;margin-bottom:1.6rem;
}
.product-cta-title em{font-style:italic;color:var(--cognac-pale)}
.product-cta-btn{
  display:inline-flex;align-items:center;
  padding:0.65rem 1.2rem;
  background:rgba(255,255,255,0.15);
  color:#fff;text-decoration:none;border-radius:2px;
  font-size:0.72rem;font-weight:500;letter-spacing:0.08em;
  border:1px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(4px);
  transition:background 0.25s,border-color 0.25s;
}
.product-cta-btn:hover{
  background:rgba(255,255,255,0.25);
  border-color:rgba(255,255,255,0.6);
}
/* ════════════════════════════════════
   ANIMATIONS
════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ════════════════════════════════════
   SCROLLBAR
════════════════════════════════════ */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--cognac);border-radius:2px}

/* ════════════════════════════════════
   TABLET  (≥600px)
════════════════════════════════════ */
@media(min-width:600px){
  .hero-right{height:48vw;max-height:400px}
  .hero-left{padding:2rem 5vw 3.5rem}
  .hero-actions{flex-direction:row}
  .btn-primary,.btn-secondary{width:auto}

  .grid-products{grid-template-columns:repeat(3,1fr)}
  .product-cell.large{grid-column:span 2}
  .product-cell.large .product-overlay{padding:2rem}
  .product-cta-card{aspect-ratio:auto;min-height:200px}
  .product-cta-inner{padding:2.5rem}
  .product-cta-title{font-size:2rem}
  .product-mat{opacity:0}   /* hover effect back on tablet+ */

  .craft{flex-direction:row;gap:3.5rem;align-items:center;padding:5rem 5vw}
  .craft-visual{flex:1;padding-bottom:3.5rem}
  .craft-img-main{aspect-ratio:4/5}
  .craft-img-inset{
    display:block;
    position:absolute;bottom:0;right:-1.5rem;
    width:48%;aspect-ratio:1;object-fit:cover;
    border-radius:3px;border:4px solid var(--bg);
    box-shadow:0 12px 36px rgba(100,60,20,0.2);
  }
  .craft-text{flex:1}

  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{border-right:1px solid rgba(255,255,255,0.2);border-bottom:none}
  .stat:last-child{border-right:none}
  .stat-n{font-size:2.4rem}
  .stat-l{font-size:0.65rem}

  .cta-section{flex-direction:row;align-items:center;gap:3.5rem;padding:6rem 5vw}
  .cta-visual{display:block;flex:1}
  .cta-visual img{
    width:100%;aspect-ratio:4/5;object-fit:cover;
    border-radius:3px;box-shadow:0 20px 50px rgba(100,60,20,0.2);
  }
  .cta-text{flex:1}
  .cta-btns{max-width:300px}

  footer{flex-direction:row;justify-content:space-between;text-align:left}
  .footer-links{justify-content:flex-end}
}

/* ════════════════════════════════════
   DESKTOP  (≥900px)
════════════════════════════════════ */
@media(min-width:900px){
  :root{--nav-h:64px}

  nav{padding:0 5vw}
  .nav-brand{font-size:1.6rem}
  .nav-right{gap:1.8rem}
  .nav-links{display:flex}
  .nav-cta{
    display:inline-block;
    background:var(--cognac);color:#fff;
    padding:0.5rem 1.3rem;border-radius:2px;
    font-size:0.72rem;font-weight:500;
    letter-spacing:0.1em;text-transform:uppercase;
    text-decoration:none;transition:background 0.3s;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--cognac-light)}
  .nav-hamburger{display:none}

  /* hero: side by side */
  .hero{
    display:grid;grid-template-columns:1fr 1fr;
    min-height:calc(100vh - var(--nav-h));
  }
  .hero-right{
    order:0;
    height:auto;max-height:none;
    animation:fadeIn 1.2s 0.2s ease both;
  }
  .hero-right img{transition:transform 8s ease;}
  .hero-right:hover img{transform:scale(1.04)}
  .hero-right::after{
    background:linear-gradient(to right,var(--bg) 0%,transparent 28%),
               linear-gradient(to top,var(--bg) 0%,transparent 38%);
  }
  .hero-left{
    padding:0 4rem 5rem 6vw;
    justify-content:center;
    animation:fadeUp 0.9s ease both;
  }
  .hero-tag{margin-bottom:2rem;animation:fadeUp 0.9s ease both}
  .hero-title{
    font-size:clamp(3rem,4.5vw,4.8rem);
    margin-bottom:1.5rem;
    animation:fadeUp 0.9s 0.1s ease both;
  }
  .hero-subtitle{max-width:420px;margin-bottom:2.8rem;animation:fadeUp 0.9s 0.2s ease both}
  .hero-actions{animation:fadeUp 0.9s 0.3s ease both}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,0.45)}
  .btn-secondary:hover{border-color:var(--cognac);background:var(--cognac-ultra);transform:translateY(-2px)}

  /* products */
  .products{padding:7rem 5vw}
  .sec-header{margin-bottom:3.5rem}
  .product-cell:hover img{transform:scale(1.07);filter:brightness(1.05) saturate(1.1)}
  .product-cell:hover .product-name{transform:translateY(0)}
  .product-cell:hover .product-mat{opacity:1;transform:translateY(0)}
  .product-mat{transform:translateY(8px);transition:opacity 0.35s 0.05s,transform 0.35s 0.05s;}
  .product-name{transform:translateY(4px);transition:transform 0.35s;}
  .product-overlay{padding:1.8rem}

  /* craft */
  .craft{padding:7rem 5vw;gap:6rem}
  .craft-visual{padding-bottom:4rem}
  .craft-img-inset{right:-2.5rem;width:52%}

  /* band */
  .band{height:60vh;max-height:none}
  .band-caption p{display:block}

  /* stats */
  .stat{padding:3rem 2rem}

  /* cta */
  .cta-section{padding:7rem 5vw;gap:5rem}
  .cta-btns{max-width:320px}
  .btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(37,211,102,0.4)}
  .btn-tokped:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(3,172,14,0.35)}

  /* footer */
  footer{padding:3rem 5vw}
}