/* ---------- HERO ---------- */
.hero { position: relative; padding: 56px 0 76px; overflow: hidden; background:
    radial-gradient(1100px 540px at 88% -8%, var(--red-soft), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, var(--orange-soft), transparent 60%),
    var(--cream); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 900; letter-spacing: -.03em; }
.hero h1 .hl { color: var(--red); position: relative; white-space: nowrap; }
.hero h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:6px; height:14px; background: var(--orange); opacity:.35; border-radius:6px; z-index:-1; }
.hero-sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); margin: 22px 0 30px; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 30px; margin-top: 38px; flex-wrap: wrap; }
.hero-trust .t { display: flex; flex-direction: column; }
.hero-trust .t b { font-family: var(--font-head); font-size: 26px; color: var(--ink); }
.hero-trust .t span { font-size: 13.5px; color: var(--ink-3); }
.hero-trust .div { width: 1px; background: var(--line); }

.hero-visual { position: relative; }
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 150px; gap: 16px; }
.hero-collage .ph { border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.hero-collage .big { grid-row: 1 / span 2; height: auto; }
.hero-float-card {
  position: absolute; left: -18px; bottom: 26px; background: #fff; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: 13px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line);
}
.hero-float-card .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--orange-soft); display: grid; place-items: center; }
.hero-float-card .ic svg { width: 22px; height: 22px; color: var(--orange); }
.hero-float-card b { font-family: var(--font-head); font-size: 14px; display: block; }
.hero-float-card span { font-size: 12.5px; color: var(--ink-3); }
.hero-promo { position:absolute; top:-10px; right:-6px; transform: rotate(7deg); }

.logos-strip { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos-strip .wrap { display: flex; align-items: center; gap: 30px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; justify-content: center; }
.logos-strip .lbl { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.logos-strip .ph { width: 118px; height: 34px; border-radius: 7px; opacity: .8; }

/* ---------- Categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cat-card .ph { height: 178px; }
.cat-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat-card h3 { font-size: 21px; }
.cat-card p { color: var(--ink-2); font-size: 14.5px; }
.cat-card .go { margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--red); display: inline-flex; align-items: center; gap: 7px; }
.cat-card:hover .go { gap: 11px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: s; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 20px; }
.step .num { font-family: var(--font-head); font-weight: 900; font-size: 15px; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.step h4 { font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 14px; }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 40px; color: var(--orange); font-weight: 900; font-size: 20px; z-index: 2; }

/* ---------- Keunggulan ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.feat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 22px; }
.feat .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; margin-bottom: 16px; }
.feat .ic svg { width: 27px; height: 27px; }
.feat h4 { font-size: 17px; margin-bottom: 7px; }
.feat p { color: var(--ink-2); font-size: 14px; }

/* ---------- Best seller ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prod { overflow: hidden; display: flex; flex-direction: column; }
.prod .imgwrap { position: relative; }
.prod .ph { height: 210px; }
.prod .imgwrap .badge { position: absolute; top: 12px; left: 12px; }
.prod .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod .cat { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.prod h3 { font-size: 18px; }
.prod .price { font-family: var(--font-head); font-weight: 800; color: var(--red); font-size: 18px; margin-top: 4px; }
.prod .price small { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.prod .rating { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.prod .rating .star { color: var(--orange); }
.prod .btn { margin-top: 14px; }

/* ---------- Inspirasi ---------- */
.insp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.insp { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 240px; box-shadow: var(--sh-sm); }
.insp .ph { position: absolute; inset: 0; }
.insp .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(transparent, rgba(34,26,23,.82)); color: #fff; }
.insp .cap h4 { color: #fff; font-size: 20px; }
.insp .cap p { font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 3px; }
.insp.tall { height: 100%; }

/* ---------- Portfolio ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 14px; }
.gallery .ph { border-radius: var(--r-md); }
.gallery .w2 { grid-column: span 2; }
.gallery .h2 { grid-row: span 2; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-head); font-weight: 700; font-size: 16.5px; }
.faq-q .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-weight: 900; transition: transform .2s; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 260px; }
.faq-a p { padding: 0 22px 22px; color: var(--ink-2); font-size: 15px; }

/* ---------- Closing CTA ---------- */
.cta-band { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; border-radius: var(--r-xl); padding: 60px; position: relative; overflow: hidden; text-align: center; }
.cta-band::before { content:""; position:absolute; width: 320px; height:320px; border-radius:50%; background: rgba(255,138,0,.30); top:-120px; right:-80px; }
.cta-band::after { content:""; position:absolute; width: 240px; height:240px; border-radius:50%; background: rgba(255,255,255,.08); bottom:-110px; left:-60px; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
.cta-band p { color: rgba(255,255,255,.9); font-size: 18px; margin: 16px auto 30px; max-width: 560px; }

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-collage { grid-template-rows: 150px 130px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .insp-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { padding: 40px 24px; }
}
@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 20px; }
}