/* =================================================================
   CAMUJO — style.css
   Letakkan di: /assets/css/style.css
   Ditulis dengan CSS3 murni (tanpa framework). Token warna OKLCH.
   ================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Neutrals, tinted warm toward the gold hue */
  --bg:          oklch(99% 0.004 85);
  --bg-alt:      oklch(97.4% 0.006 84);
  --surface:     oklch(100% 0 0);
  --ink:         oklch(23% 0.012 66);
  --ink-soft:    oklch(45% 0.012 68);
  --ink-faint:   oklch(60% 0.010 70);
  --line:        oklch(91% 0.008 80);
  --line-soft:   oklch(94.5% 0.006 82);

  /* Brand */
  --gold:        oklch(72% 0.118 79);
  --gold-deep:   oklch(56% 0.105 72);
  --gold-wash:   oklch(96% 0.03 82);
  --ocean:       oklch(53% 0.088 232);
  --ocean-wash:  oklch(96% 0.02 232);
  --green:       oklch(57% 0.082 152);
  --green-wash:  oklch(96% 0.02 152);

  /* Dark surfaces */
  --dark:        oklch(24% 0.018 72);
  --dark-deep:   oklch(19.5% 0.016 72);
  --on-dark:     oklch(96% 0.006 84);
  --on-dark-soft:oklch(78% 0.010 78);

  --wa:          oklch(63% 0.16 150);
  --wa-deep:     oklch(56% 0.15 150);

  /* Rhythm (4pt base) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem;
  --sp-24:6rem;  --sp-32:8rem;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --shadow-sm: 0 1px 2px oklch(23% 0.02 66 / .05), 0 2px 8px oklch(23% 0.02 66 / .04);
  --shadow-md: 0 4px 12px oklch(23% 0.02 66 / .06), 0 12px 32px oklch(23% 0.02 66 / .07);
  --shadow-lg: 0 18px 48px oklch(23% 0.02 66 / .12);

  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);

  --maxw: 1200px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{line-height:1.1;text-wrap:balance;font-weight:800;letter-spacing:-.02em}
p{text-wrap:pretty}
section{scroll-margin-top:88px}
::selection{background:var(--gold-wash);color:var(--gold-deep)}

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-6)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px}
.section-title{
  font-size:clamp(2rem,1.2rem + 3vw,3.25rem);
  margin-top:var(--sp-4);
  max-width:16ch;
}
.lead{font-size:clamp(1.05rem,1rem + .4vw,1.2rem);color:var(--ink-soft);max-width:62ch}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.9em 1.5em;border-radius:var(--r-pill);
  font-weight:700;font-size:.98rem;line-height:1;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out);
  will-change:transform;
}
.btn svg{width:1.15em;height:1.15em}
.btn-primary{background:var(--ink);color:var(--on-dark);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:oklch(30% 0.014 66)}
.btn-gold{background:var(--gold);color:oklch(28% 0.05 66);box-shadow:0 8px 24px oklch(72% 0.118 79 / .35)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 34px oklch(72% 0.118 79 / .45)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
/* ghost button on the dark hero */
.btn-on-hero{color:#fff;border-color:oklch(100% 0 0 / .4)}
.btn-on-hero:hover{border-color:#fff}
.btn-lg{padding:1.05em 1.9em;font-size:1.05rem}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 24px oklch(63% 0.16 150 / .3)}
.btn-wa:hover{transform:translateY(-3px);background:var(--wa-deep);box-shadow:0 14px 34px oklch(63% 0.16 150 / .4)}

/* ---------- 5. NAVBAR ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease-out), box-shadow .45s var(--ease-out), backdrop-filter .45s var(--ease-out);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.brandmark{display:flex;align-items:center;gap:.6em;font-weight:800;font-size:1.35rem;letter-spacing:.04em;color:#fff;transition:color .45s var(--ease-out)}
.brandmark .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.nav-links{display:none;align-items:center;gap:var(--sp-8);list-style:none}
.nav-links a{font-size:.95rem;font-weight:600;color:oklch(96% 0.006 84 / .9);position:relative;padding:.3em 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);border-radius:2px;transition:width .3s var(--ease-out)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-cta{display:none}

/* scrolled state -> glass, white, shadow */
.nav.scrolled{
  background:oklch(99% 0.004 85 / .78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line-soft), 0 8px 30px oklch(23% 0.02 66 / .06);
}
.nav.scrolled .brandmark{color:var(--ink)}
.nav.scrolled .nav-links a{color:var(--ink-soft)}
.nav.scrolled .nav-links a:hover{color:var(--ink)}
.nav.scrolled .burger span{background:var(--ink)}

/* burger */
.burger{ display:flex;flex-direction:column;gap:5px;padding:.5em;
  position:relative;   /* tadinya z-index ga aktif tanpa ini */
  z-index:130;         /* naikkan di atas .mobile-menu (110) */}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease-out),opacity .3s}
.nav.scrolled .burger span,.nav.menu-open .burger span{background:var(--ink)}
.nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .burger span:nth-child(2){opacity:0}
.nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobile-menu{
  position:fixed;inset:76px 0 auto 0;z-index:110;
  background:var(--surface);
  padding:var(--sp-6) var(--sp-6) var(--sp-8);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);
  transform:translateY(-120%);
  transition:transform .5s var(--ease-out);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.mobile-menu a{display:block;padding:.85em .5em;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{margin-top:var(--sp-6);width:100%}

/* ---------- 6. HERO (split layout) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:110px;padding-bottom:var(--sp-16);
  isolation:isolate;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 70% at 85% 110%, oklch(96% 0.05 82 / .35), transparent 65%),
    linear-gradient(165deg, oklch(34% 0.05 235), oklch(24% 0.03 232) 60%, oklch(22% 0.04 150));
}

/* grid: 1 kolom (mobile) -> 2 kolom (desktop) */
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12);align-items:center}
.hero-content{max-width:640px;color:#fff}

.hero-badge{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.55em 1.1em;border-radius:var(--r-pill);
  background:oklch(100% 0 0 / .12);border:1px solid oklch(100% 0 0 / .22);
  backdrop-filter:blur(8px);
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
  margin-bottom:var(--sp-6);
}
.hero h1{font-size:clamp(2.6rem,1.6rem + 4.5vw,4.6rem);letter-spacing:-.03em;line-height:1.02}
.hero h1 .accent{color:var(--gold);font-family:"Fraunces",serif;font-weight:500;font-style:italic;letter-spacing:-.01em}
.hero p{margin-top:var(--sp-6);font-size:clamp(1.05rem,1rem + .5vw,1.25rem);color:oklch(94% 0.006 84 / .92);max-width:52ch;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}

/* wadah foto produk */
.hero-media{
  position:relative;border-radius:var(--r-xl);
  background:oklch(100% 0 0 / .06);border:1px solid oklch(100% 0 0 / .12);
  backdrop-filter:blur(4px);padding:var(--sp-8);display:grid;place-items:center;
}
.hero-media img{
  width:100%;height:auto;
  filter:drop-shadow(0 20px 36px oklch(15% 0.03 240 / .5));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* scroll indicator */
.scroll-cue{
  position:absolute;left:50%;bottom:var(--sp-6);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  color:oklch(96% 0 0 / .8);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
}
.scroll-cue .mouse{width:24px;height:38px;border:2px solid oklch(96% 0 0 / .6);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;background:var(--gold);border-radius:2px;transform:translateX(-50%);animation:wheel 1.8s var(--ease-out) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* wave divider */
.wave-divider{display:block;width:100%;height:auto;color:var(--bg)}
.wave-divider.on-alt{color:var(--bg-alt)}

/* ---------- 7. TENTANG ---------- */
.about{padding:var(--sp-24) 0}
.about-grid{display:grid;gap:var(--sp-12);align-items:center}
.about-copy p{margin-top:var(--sp-6)}
.about-copy p + p{margin-top:var(--sp-4)}
.about-stats{display:flex;gap:var(--sp-8);margin-top:var(--sp-8);flex-wrap:wrap}
.about-stats .stat strong{display:block;font-family:"Fraunces",serif;font-size:2.2rem;font-weight:500;color:var(--gold-deep);line-height:1}
.about-stats .stat span{font-size:.9rem;color:var(--ink-soft)}
.about-visual{position:relative}
.about-visual .frame{
  aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg, oklch(92% 0.04 152), oklch(88% 0.05 232));
  box-shadow:var(--shadow-lg);position:relative;
}
.about-visual .frame img{width:100%;height:100%;object-fit:cover}
.about-visual .tag{
  position:absolute;left:-16px;bottom:32px;
  background:var(--surface);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-6);
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.8em;
}
.about-visual .tag .ic{width:40px;height:40px;border-radius:12px;background:var(--gold-wash);display:grid;place-items:center;color:var(--gold-deep)}
.about-visual .tag small{color:var(--ink-soft);font-size:.78rem}
.about-visual .tag b{display:block;font-size:.95rem}
.leaf{position:absolute;color:var(--green);opacity:.18;z-index:-1}

/* ---------- 8. NILAI (values) ---------- */
.values{padding:var(--sp-24) 0;background:var(--bg-alt)}
.values-head{max-width:640px;margin-bottom:var(--sp-16)}
.values-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.value-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.value-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:oklch(72% 0.118 79 / .5)}
.value-card .ic{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:var(--sp-6);
  background:var(--gold-wash);color:var(--gold-deep);transition:transform .4s var(--ease-out)
}
.value-card:nth-child(2) .ic{background:var(--ocean-wash);color:var(--ocean)}
.value-card:nth-child(3) .ic{background:var(--green-wash);color:var(--green)}
.value-card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.value-card .ic svg{width:28px;height:28px}
.value-card h3{font-size:1.15rem;letter-spacing:-.01em}
.value-card p{margin-top:var(--sp-2);font-size:.92rem;color:var(--ink-soft)}

/* ---------- 9. BRAND KAMI ---------- */
.brands{padding:var(--sp-24) 0;position:relative}
.brands-head{max-width:640px;margin-bottom:var(--sp-16)}
.brands-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
/* --- Sub-brand card: DUPLICATE this block to add a brand --- */
.brand-card{
  aspect-ratio:1;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);
  padding:var(--sp-6);text-align:center;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.brand-logo{height:50px;width:auto;display:block}
.brand-card .logo{
  width:120px;height:120px;border-radius:18px;display:grid;place-items:center;
  background:var(--bg-alt);color:var(--ink);font-family:"Fraunces",serif;font-size:1.6rem;font-weight:600;
  transition:transform .4s var(--ease-out);overflow:hidden;
}
.brand-card .logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.brand-card .name{font-weight:700;font-size:.98rem;letter-spacing:.01em}
.brand-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.brand-card:hover .logo{transform:scale(1.12)}

/* ---------- LEGALITAS (dalam Brand Kami) ---------- */
.brand-legal{
  margin-top:var(--sp-16);padding-top:var(--sp-12);
  border-top:1px solid var(--line);
}
.brand-legal-title{
  text-align:center;color:var(--ink-faint);
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:var(--sp-8);
}
.brand-legal-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-12);
}
.brand-legal-logos img{
  height:64px;width:auto;filter:grayscale(1);opacity:.6;
  transition:filter .4s var(--ease-out), opacity .4s var(--ease-out);
}
.brand-legal-logos img:hover{filter:none;opacity:1}
/* ---------- 10. PRODUK (marketplace-style grid) ---------- */
.produk{padding:var(--sp-24) 0;background:var(--bg-alt)}
.produk-head{max-width:640px;margin-bottom:var(--sp-16)}
.produk-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* --- Product card: DUPLICATE this block to add a product --- */
.p-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.p-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:oklch(72% 0.118 79 / .5)}
.p-thumb{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg, oklch(93% 0.035 82), oklch(90% 0.04 152));
}
.p-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.p-card:hover .p-thumb img{transform:scale(1.06)}
.p-cat{
  position:absolute;top:12px;left:12px;
  padding:.35em .8em;border-radius:var(--r-pill);
  background:oklch(100% 0 0 / .92);backdrop-filter:blur(6px);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);
}
.p-cat.laut{color:var(--ocean)}
.p-cat.tani{color:var(--green)}
.p-body{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.p-body h3{font-size:1.08rem;letter-spacing:-.01em}
.p-body p{font-size:.88rem;color:var(--ink-soft);flex:1}
.p-brand{
  display:inline-flex;align-items:center;gap:.45em;margin-top:var(--sp-2);
  font-size:.8rem;font-weight:600;color:var(--ink-faint);
}
.p-brand .swatch{width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* catalog note + CTA */
.produk-foot{
  margin-top:var(--sp-16);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-8);border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.produk-foot .txt h3{font-size:1.3rem}
.produk-foot .txt p{margin-top:var(--sp-2);color:var(--ink-soft);font-size:.95rem;max-width:52ch}
.produk-foot .btn{flex-shrink:0}

/* ---------- 11. MEDIA SOSIAL ---------- */
.sosial{padding:var(--sp-24) 0}
.sosial-head{max-width:640px;margin-bottom:var(--sp-16)}
.sosial-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sosial-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-6);
  background:var(--surface);display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.sosial-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--line)}
.sosial-card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:var(--sp-6)}
.sosial-card .ic svg{width:26px;height:26px}
.sosial-card h3{font-size:1.1rem}
.sosial-card p{margin-top:var(--sp-1);font-size:.9rem;color:var(--ink-soft);flex:1}
.sosial-card .go{margin-top:var(--sp-6);display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.9rem;color:var(--ink);transition:gap .3s var(--ease-out)}
.sosial-card .go svg{width:16px;height:16px}
.sosial-card:hover .go{gap:.9em}
.ig{background:linear-gradient(135deg,oklch(62% 0.2 30),oklch(55% 0.22 340))}
.tt{background:oklch(22% 0.01 66)}
.sh{background:oklch(66% 0.19 40)}
.fb{background:oklch(52% 0.16 258)}

/* ---------- 12. HUBUNGI KAMI ---------- */
.kontak{position:relative;background:var(--dark);color:var(--on-dark);padding:var(--sp-32) 0;overflow:hidden;isolation:isolate}
.kontak::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 120% at 80% 10%, oklch(58% 0.09 232 / .22), transparent 55%)}
.kontak-mtn{position:absolute;left:0;right:0;bottom:0;z-index:-1;color:var(--dark-deep)}
.kontak-inner{max-width:680px}
.kontak .eyebrow{color:var(--gold)}
.kontak h2{font-size:clamp(2.2rem,1.4rem + 3.5vw,3.6rem);margin-top:var(--sp-4)}
.kontak p{margin-top:var(--sp-6);font-size:1.15rem;color:var(--on-dark-soft);max-width:48ch;letter-spacing:.005em}
.kontak .btn{margin-top:var(--sp-8)}
.kontak .num{margin-top:var(--sp-6);font-size:1.05rem;color:var(--on-dark-soft)}
.kontak .num b{color:#fff;font-weight:700;letter-spacing:.02em}

/* ---------- 13. FOOTER ---------- */
.footer{background:var(--dark-deep);color:var(--on-dark-soft);padding:var(--sp-24) 0 var(--sp-8)}
.footer-top{display:grid;gap:var(--sp-12);grid-template-columns:1fr;padding-bottom:var(--sp-16);border-bottom:1px solid oklch(100% 0 0 / .08)}
.footer-brandmark{color:#fff;font-size:1.5rem;margin-bottom:var(--sp-4)}
.footer-brand p{max-width:34ch;font-size:.95rem;line-height:1.6}
.footer-brand .company{margin-top:var(--sp-4);font-size:.85rem;color:oklch(70% 0.01 78)}
.footer-cols{display:grid;gap:var(--sp-8);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.footer-col h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:var(--sp-4)}
.footer-col ul{list-style:none;display:grid;gap:var(--sp-3)}
.footer-col a{font-size:.95rem;transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;padding-top:var(--sp-8)}
.footer-bottom .tagline{color:var(--gold);font-weight:600;font-size:.92rem}
.footer-bottom .copy{font-size:.85rem;color:oklch(64% 0.01 78)}

/* ---------- 14. FLOATING WHATSAPP ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 30px oklch(63% 0.16 150 / .45);
  transition:transform .3s var(--ease-out);
}
.wa-float svg{width:30px;height:30px}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);z-index:-1;animation:pulse 2.4s var(--ease-out) infinite}
.wa-float:hover{transform:scale(1.08)}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.9);opacity:0}}
.btn-legalitas{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:fit-content;
    margin:22px auto 0; /* ini yang bikin center */
    padding:13px 28px;
    background:linear-gradient(135deg,#B88A2A,#D9B65A);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    border-radius:999px;
    box-shadow:0 8px 20px rgba(184,138,42,.25);
    transition:.25s ease;
}

.btn-legalitas:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#A57920,#CFA845);
    box-shadow:0 12px 28px rgba(184,138,42,.35);
}

.btn-legalitas:active{
    transform:translateY(0);
}

@media (max-width:768px){
    .btn-legalitas{
        width:100%;
        max-width:320px;
    }
}
/* ---------- 15. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
}
@media (max-width:899px){
  .scroll-cue{display:none}
  .hero{min-height:auto}
}

/* ---------- 16. RESPONSIVE (mobile-first breakpoints) ---------- */
@media (min-width:768px){
  .about-grid{grid-template-columns:1.1fr 1fr}
  .footer-top{grid-template-columns:1.4fr 2fr}

}
@media (min-width:960px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .burger{display:none}
  .wrap{padding-inline:var(--sp-8)}
}