/* public/css/home.css */
.home-hero__cta{
  margin-top: 32px; /* ideal untuk hero */
}

.home{
  width:100%;
  min-height:100vh;
  background:#1e1e1e;
  padding-top:81px; /* dari pt-[81px] */
}

/* ===== container ===== */
.home-container{
  max-width:1280px;
  margin:0 auto;
  padding-left:72px;
  padding-right:72px;
}

/* ===== HERO ===== */
.home-hero{
  width:100%;
  height:554px;
  background:#1e1e1e;
  overflow:hidden;
}

.home-hero__stage{
  position:relative;
  width:100%;
  height:554px;
}

.home-hero__bg{
  position:absolute;
  inset:0;
  height:560px;
  background-position:center;
  background-size:cover;
  opacity:.6;
}

.home-hero__gradient{
  position:absolute;
  top:0;
  left:0;
  height:560px;
  width:1068px;
  padding-left:195px;
  padding-top:129px;
  padding-right:579px;
  background:linear-gradient(90deg, rgba(35,37,38,1) 0%, rgba(39,42,44,0.8) 50%, rgba(0,0,0,0) 100%);
}

.home-hero__content{
  position:relative;
  width:672px;
}

.home-hero__title{
  margin:9.5px 0 0 0;
  width:631px;
  height:150px;
  font-family:"Gotham-Book", Helvetica, Arial, sans-serif;
  font-weight:400;
  color:#dcdbdb;
  font-size:60px;           /* text-6xl */
  letter-spacing:-1.24px;
  line-height:75px;
}

.home-hero__subtitle{
  margin:24px 0 0 0;
  width:518px;
  font-family:"Gotham-Book", Helvetica, Arial, sans-serif;
  font-weight:400;
  color:#8b9299;
  font-size:20px;
  letter-spacing:-0.45px;
  line-height:32.5px;
}



/* ===== VISUALIZE ===== */
.home-visualize{
  position:relative;
  width:100%;
  height:306px;
  overflow:hidden;
}

.home-visualize__bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  opacity:.6;
}

.home-visualize__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, #1e1e1e 0%, rgba(0,0,0,0) 50%, #1e1e1e 100%);
}

.home-visualize__content{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}

.home-visualize__copy{
  max-width:672px;
}

.home-visualize__title{
  font-family:"Gotham-Book", Helvetica, Arial, sans-serif;
  font-weight:400;
  color:#dcdbdb;
  font-size:48px;
  letter-spacing:-0.85px;
  line-height:48px;
  margin:0 0 16px 0;
}

.home-visualize__desc{
  font-family:"Gotham-Book", Helvetica, Arial, sans-serif;
  font-weight:400;
  color:#dcdbdb;
  font-size:18px;
  letter-spacing:-0.44px;
  line-height:28px;
  margin:0 0 24px 0;
  opacity:.9;
}
/* =========================================================
   FEATURED PRODUCTS (HOME ONLY)
========================================================= */
.featured-section{
  width:100%;
  background:var(--bg);
}

.featured-section__inner{
  padding-top:96px;
  padding-bottom:96px;
}

/* grid */
.featured-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:768px){
  .featured-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width:1200px){
  .featured-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

/* card */
.product-card{
  background:#0f0f0f;
  border:1px solid rgba(220,219,219,.10);
  border-radius:24px;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  height:100%;
}

.product-card__image{
  width:100%;
  /* height:220px; */
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card__image img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* body */
.product-card__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

.product-card__name{
  font-family:"Gotham-Medium", Helvetica, Arial, sans-serif;
  font-weight:500;
  color:var(--text);
  font-size:16px;
  letter-spacing:-0.31px;
  line-height:24px;
  margin:0;
}

.product-card__desc{
  font-family:"Gotham-Light", Helvetica, Arial, sans-serif;
  font-weight:300;
  color:var(--muted);
  font-size:14px;
  line-height:22px;
  margin:0;
  flex:1;
}

/* footer */
.product-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}

.product-card__price{
  font-family:"Gotham-Medium", Helvetica, Arial, sans-serif;
  font-weight:500;
  color:var(--orange);
  font-size:16px;
}
/* ===========================
   BRANDS (DARK THEME)
=========================== */

.brand-section{
  padding: 44px 0;
}

.brand-scroller{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  gap: 18px;
  justify-content: center;
  margin-top: 22px;
}

/* Card dark */
.brand-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;

  /* lebih tinggi */

  min-height: 300px;   /* tetap berasa tinggi */
  height: auto;        
  padding: 20px 18px;
  border-radius: 22px;

  /* dark like shop-by-category */
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.brand-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.18);
}

/* Area logo: seragam */
.brand-card__image{
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* bikin logo seragam: max width & max height */
.brand-card__image img{
  width: auto;
  height: auto;

  /* kunci seragam */
  max-width: 78%;
  max-height: 88px;

  object-fit: contain;
  display: block;
}

/* Nama brand */
.brand-card__name{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-align: center;
  letter-spacing: .2px;
}

/* fallback kalau image kosong */
.brand-fallback{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: rgba(255,255,255,0.85);
}
.brand-card__desc{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.35;

  /* max 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile */
@media (max-width: 768px){
  .brand-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .brand-card{
    height: 170px;
    padding: 16px 14px;
    border-radius: 18px;
  }
  .brand-card__image img{
    max-width: 82%;
    max-height: 74px;
  }
}

/* =========================
   HOME – NEW SECTIONS (REV2)
   - highlight (flat image + hotspots)
   - visualizer card
   - full-width slider
   - products grid
   - blogs grid
   ========================= */

.home-highlight{
  width:100%;
  padding: 24px 0;
}
.home-highlight__frame{
  position:relative;
  width:100%;
  overflow:hidden;
}
.home-highlight__img{
  display:block;
  width:100%;
  height:auto;
}

.home-hotspot{
  position:absolute;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(255, 153, 51, .92);
  box-shadow: 0 0 0 6px rgba(255,153,51,.20), 0 10px 30px rgba(0,0,0,.45);
}
.home-hotspot__plus{
  color:#111;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}
/* === Hotspot look (gradient + white plus) === */
.home-hotspot{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  /* gradient */
/* linear gradient (not radial) */
  background: linear-gradient(20deg,
    #ffcf67 0%,
    #FF9A2F 35%,
    #FF6A1A 70%,
    #FF4D0F 100%
  );


  /* ring + glow */
  box-shadow:
    0 0 0 4px rgba(0,0,0,.25),          /* dark rim */
    0 0 0 8px rgba(255,153,51,.18),     /* outer glow ring */
    0 14px 30px rgba(0,0,0,.45);        /* drop shadow */
}

.home-hotspot__plus{
  color: #fff;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
}

/* optional: hover pop */
.home-hotspot:hover{
  filter: brightness(1.03) saturate(1.05);
  transform: translate(-50%, -50%) scale(1.08);
}

/* keep animation compatible: hotspotPulse uses transform already,
   so we should NOT override transform on hover via scale unless we merge.
   If you want hover scale, we can disable pulse on hover (already done). */


/* Visualizer (new) */
.home-visualizer2{
  padding: 28px 0;
}
.home-visualizer2__card{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  background: rgba(20,20,20,.75);
  border: 1px solid rgba(255,255,255,.08);
}
.home-visualizer2__glow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 20% 60%, rgba(255,153,51,.35), transparent 55%);
  pointer-events:none;
}
.home-visualizer2__body{
  position:relative;
  display:flex;
  gap: 22px;
  align-items: stretch;
  padding: 26px;
}
.home-visualizer2__copy{
  flex: 1 1 52%;
  max-width: 640px;
}
.home-visualizer2__title{
  font-family:"Gotham-Book", Helvetica, Arial, sans-serif;
  font-size: 44px;
  line-height: 1.05;
  color: rgba(255,255,255,.92);
  margin: 0 0 10px;
}
.home-visualizer2__desc{
  color: rgba(255,255,255,.60);
  margin: 0 0 18px;
  font-size: 14px;
}
.home-visualizer2__media{
  flex: 1 1 48%;
  position:relative;
  min-height: 210px;
}
.home-visualizer2__split{
  position:absolute;
  inset: 12px 12px 12px 0;
  border-radius: 18px;
  overflow:hidden;
  display:flex;
}
.home-visualizer2__img{
  flex:1;
  background-size: cover;
  background-position: center;
}
.home-visualizer2__knob{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Full-width slider */
.home-slider{
  padding: 18px 0 10px;
}
.home-slider__track{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 10px 16px 22px;
}
.home-slider__slide{
  position:relative;
  flex: 0 0 92vw;
  height: 240px;
  border-radius: 22px;
  overflow:hidden;
  scroll-snap-align: center;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.08);
}
@media(min-width: 900px){
  .home-slider__slide{ flex-basis: 1280px; height: 260px; }
}
.home-slider__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: .95;
}
.home-slider__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.25) 100%);
}
.home-slider__content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content: flex-end;
  padding: 18px 18px;
}
.home-slider__text{
  text-align:left;
  max-width: 520px;
}
.home-slider__title{
  color: rgba(255,255,255,.85);
  font-size: 40px;
  line-height: 1.1;
}
.home-slider__subtitle{
  color: rgba(255,255,255,.50);
  letter-spacing: .10em;
  font-size: 12px;
  margin-top: 8px;
}
.home-slider__badge{
  position:absolute;
  left: 55%;
  top: 70%;
  width: 70px;
  height:auto;
  opacity: .95;
}
.home-slider__nav{
  display:none;
}
.home-slider__dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: -8px;
  margin-bottom: 6px;
}
.home-slider__dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.home-slider__dot.is-active{ background: rgba(255,255,255,.70); }

/* Products grid */
.home-products2{
  padding: 26px 0 10px;
}
.home-products2__title{
  text-align:center;
  color: rgba(255,255,255,.75);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 14px;
}
.home-products2__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.home-products2__card{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  min-height: 140px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.08);
}
.home-products2__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.home-products2__shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)); }
.home-products2__name{
  position:absolute;
  left: 14px;
  bottom: 12px;
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 14px;
  max-width: 80%;
}

/* desktop layout slots */
.home-products2__card--a{ grid-column: 1 / span 3; grid-row: 1; min-height: 140px; }
.home-products2__card--b{ grid-column: 4 / span 6; grid-row: 1; min-height: 140px; }
.home-products2__card--c{ grid-column: 10 / span 3; grid-row: 1 / span 2; min-height: 294px; }
.home-products2__card--d{ grid-column: 1 / span 6; grid-row: 2; min-height: 140px; }
.home-products2__card--e{ grid-column: 7 / span 3; grid-row: 2; min-height: 140px; }

@media(max-width: 900px){
  .home-products2__grid{ grid-template-columns: repeat(2, 1fr); }
  .home-products2__card{ grid-column:auto; grid-row:auto; min-height: 160px; }
  .home-products2__name{ font-size: 13px; }
}

.home-products2__cta{
  display:flex;
  justify-content:center;
  margin-top: 16px;
}

/* ===== BLOGS ===== */
.home-blogs2{
  padding: 80px 0;
}

.home-blogs2 .section-head{
  margin-bottom: 32px; /* jarak title ke cards */
}

/* 3 kolom, sama seperti figma */
.home-blogs2__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* CARD 1:1 */
.home-blogs2__card{
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1 / 1;           /* ini kuncinya */
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* background image */
.home-blogs2__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

/* shade (atas lebih gelap, bawah lebih tebal) */
.home-blogs2__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,.85) 100%
    );
}

/* content area bawah kiri */
.home-blogs2__content{
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
}

.home-blogs2__kicker{
  font-size: 14px;
  opacity: .55;
  margin-bottom: 6px;
}

.home-blogs2__headline{
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 10px;
}

.home-blogs2__more{
  font-size: 14px;
  opacity: .55;
}

/* Fix link color inside Blogs cards */
.home-blogs2__card,
.home-blogs2__card:visited,
.home-blogs2__card:hover,
.home-blogs2__card:active{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

/* pastikan semua text di dalam ikut putih (ngalahin global a/typography) */
.home-blogs2__card *{
  color: inherit;
}

/* opsional: hover sedikit lebih terang */
.home-blogs2__card:hover{
  color: #fff;
}

/* hover (halus) */
.home-blogs2__card:hover .home-blogs2__bg{
  transform: scale(1.06);
  transition: transform .35s ease;
}
.home-blogs2__card:hover{
  border-color: rgba(255,255,255,.14);
}

/* Hotspot pulse + micro-wiggle */
.home-hotspot{
  animation: hotspotPulse 1.6s ease-in-out infinite;
}

.home-hotspot__plus{
  animation: hotspotWiggle 1.2s ease-in-out infinite;
}

@keyframes hotspotPulse{
  0%   { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 6px rgba(255,153,51,.20), 0 10px 30px rgba(0,0,0,.45); }
  50%  { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 10px rgba(255,153,51,.14), 0 14px 34px rgba(0,0,0,.50); }
  100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 6px rgba(255,153,51,.20), 0 10px 30px rgba(0,0,0,.45); }
}

@keyframes hotspotWiggle{
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-1px) rotate(-4deg); }
  50%      { transform: translateX(1px) rotate(4deg); }
  75%      { transform: translateX(-0.5px) rotate(-2deg); }
}

/* stop anim on hover (optional, biar enak diklik) */
.home-hotspot:hover,
.home-hotspot:focus{
  animation: none;
}
.home-hotspot:hover .home-hotspot__plus,
.home-hotspot:focus .home-hotspot__plus{
  animation: none;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .home-hotspot, .home-hotspot__plus{ animation: none !important; }
}

/* =========================
   VISUALIZER (FIGMA – FIXED)
   ========================= */

.home-visualizer3{ padding: 28px 0; }

.home-visualizer3__outer{
  position: relative;
  border-radius: 28px;
  padding: 18px;                 /* ruang untuk glow */
}

/* OUTER GLOW: tebal & soft */
/* === SYMMETRIC / BOTH-SIDES GLOW === */
.home-visualizer3__outer::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 28px;

  /* 2 glow: kiri + kanan */
  background:
    radial-gradient(circle at 22% 45%,
      rgba(255,153,51,.55) 0%,
      rgba(255,153,51,.30) 34%,
      rgba(255,153,51,.14) 54%,
      rgba(255,153,51,0) 74%
    ),
    radial-gradient(circle at 78% 45%,
      rgba(255,153,51,.45) 0%,
      rgba(255,153,51,.24) 34%,
      rgba(255,153,51,.10) 56%,
      rgba(255,153,51,0) 76%
    );

  filter: blur(18px);
  pointer-events:none;
  z-index: 0;
}

.home-visualizer3__outer::after{
  content:"";
  position:absolute;
  inset: -22px;
  border-radius: 36px;

  /* halo lebar untuk keseluruhan shape */
  background: radial-gradient(circle at 50% 50%,
    rgba(255,153,51,.16) 0%,
    rgba(255,153,51,.10) 45%,
    rgba(255,153,51,0) 78%
  );

  filter: blur(28px);
  pointer-events:none;
  z-index: 0;
}


/* CARD */
.home-visualizer3__card{
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  min-height: 350px;

  background-size: cover;
  background-position: center;

  /* inner stroke tipis */
  border: 2px solid rgb(255 93 11 / 63%);

  /* glow ring + depth (stroke glow) */
  box-shadow:
    0 0 0 1px rgba(255,153,51,.22) inset,
    0 0 0 1px rgba(255,153,51,.18),
    0 28px 70px rgba(0,0,0,.62);
}

/* extra stroke line (lebih mirip figma) */
/* .home-visualizer3__card::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,153,51,.28);
  
  opacity: .80;
  pointer-events:none;
} */

/* LEFT FADE – lebih gelap */
.home-visualizer3__left-fade{
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.80) 26%,
    rgba(0,0,0,.52) 48%,
    rgba(0,0,0,.22) 62%,
    rgba(0,0,0,0) 78%
  );
}

/* TEXT */
.home-visualizer3__content{
  position: relative;
  z-index: 2;
  padding: 70px 40px 88px; /* bottom lebih besar, biar ga tabrakan CTA layer */
  max-width: 760px;
}

.home-visualizer3__title{
  margin: 0 0 12px;
  font-size: 50px;
  line-height: 1.02;
  letter-spacing: .2px;
  color: rgba(255,255,255,.94);
}

.home-visualizer3__desc{
  margin: 0;
  max-width: 560px;
  color: rgba(255,255,255,.58);
  font-size: 16px;
  line-height: 1.4;
}

/* knob */
.home-visualizer3__knob{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 3;
}

/* CTA LAYER (separate from card; can "hang" out) */
.home-visualizer3__ctaLayer{
  position:absolute;
  left: 56px;
  bottom: -4px;          /* ini yang bikin tombol turun keluar shape */
  z-index: 5;
}

/* CTA BUTTON (strong orange glow) */
.home-visualizer3__ctaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
  text-decoration:none;

  color: rgba(0,0,0,.85);
  background: linear-gradient(135deg, #FFC24D 0%, #FF8F1F 45%, #FF6A1A 100%);

  box-shadow:
    0 10px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 32px rgba(255,153,51,.55),     /* glow */
    0 0 70px rgba(255,153,51,.22);     /* wider glow */

  transition: transform .15s ease, filter .15s ease;
}

.home-visualizer3__ctaBtn:hover{
  filter: brightness(1.03) saturate(1.05);
  transform: translateY(-1px);
}

.btn--cta{
  font-family: "Gotham-Bold", Helvetica, Arial, sans-serif;
    font-weight: 700;
    transform: translateY(1px);
}

/* responsive */
@media(max-width: 900px){
  .home-visualizer3__outer{ padding: 14px; }
  .home-visualizer3__content{ padding: 28px 22px 86px; }
  .home-visualizer3__title{ font-size: 36px; }
  .home-visualizer3__desc{ font-size: 14px; max-width: 360px; }
  .home-visualizer3__ctaLayer{ left: 26px; bottom: 10px; }
  .home-visualizer3__ctaBtn{ height: 50px; padding: 0 26px; font-size: 18px; }
}
/* ========== BRAND STRIP (EVEN LOGO) ========== */
.brand-strip__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 34px;
  flex-wrap: nowrap;            /* biar 1 baris kayak figma */
  overflow-x: auto;             /* kalau layar kecil, scroll */
  padding: 6px 0;
  scrollbar-width: none;
}
.brand-strip__row::-webkit-scrollbar{ display:none; }

/* setiap logo punya slot lebar yang sama */
.brand-strip__item{
  width: 150px;                 /* kunci slot width */
  height: 56px;                 /* kunci slot height */
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  opacity: .92;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

.brand-strip__item img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* penting! */
  object-position: center;      /* penting! */
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* hover */
.brand-strip__item:hover{
  opacity: 1;
  transform: translateY(-1px);
  filter: brightness(1.03);
}

@media(max-width: 900px){
  .brand-strip__item{ width: 120px; height: 44px; }
  .brand-strip__row{ gap: 18px; }
}

/* ===== PRODUCTS GRID SECTION ===== */
.home-products2{
  padding: 40px 0; /* top & bottom */
}

.home-products2 .section-title{
  width: 100%;
  text-align: center;
  margin: 0 0 32px; /* space setelah title (atur 24/32/40 sesuai figma) */
}

/* jarak antara title dan grid (opsional kalau masih kurang) */
.home-products2__grid{
  margin-top: 8px; /* atau 0 kalau sudah cukup dari margin title */
      margin-bottom: 50px;

}