:root{
  --primary:#dd5b00;
  --primary-pressed:#b84b00;
  --primary-deep:#793400;
  --on-primary:#ffffff;
  --brand-navy:#0a1530;
  --brand-navy-deep:#070f24;
  --brand-navy-mid:#1a2a52;
  --link-blue:#0075de;
  --whatsapp-green:#25d366;
  --whatsapp-green-pressed:#1ebc57;

  --category-steel:#1a2a52;
  --category-roof:#dd5b00;
  --category-water:#2a9d99;

  --card-tint-steel:#dcecfa;
  --card-tint-roof:#ffe8d4;
  --card-tint-water:#d9f3e1;
  --card-tint-yellow-bold:#f9e79f;
  --card-tint-cream:#f8f5e8;
  --card-tint-gray:#f0eeec;

  --canvas:#ffffff;
  --surface:#f6f5f4;
  --surface-soft:#fafaf9;
  --hairline:#e5e3df;
  --hairline-soft:#ede9e4;
  --hairline-strong:#c8c4be;
  --ink-deep:#000000;
  --ink:#1a1a1a;
  --charcoal:#37352f;
  --slate:#5d5b54;
  --steel:#787671;
  --stone:#a4a097;
  --muted:#bbb8b1;
  --on-dark:#ffffff;
  --on-dark-muted:#a4a097;
  --semantic-success:#1aae39;
  --semantic-warning:#dd5b00;
  --semantic-error:#e03131;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;
  --font-display:'Plus Jakarta Sans', 'Notion Sans', sans-serif;
  --font-body:'Inter', 'Notion Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--canvas);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{ font-family:var(--font-display); letter-spacing:-0.4px; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Wave divider (corrugated sheet motif) ---------- */
.wave-divider{ display:block; width:100%; height:36px; margin-bottom:-1px; }
.wave-divider svg{ width:100%; height:100%; display:block; }

/* ---------- Navbar ---------- */
.navbar-brand-mark{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.5px;
}
.navbar-brand-mark span{ color:var(--primary); }

/* ---------- Hero ---------- */
.hero-band-dark {
  /* Ganti URL gambar di bawah sesuai dengan path gambar Anda */
  background-image: 
    linear-gradient(
      to right, 
      rgba(15, 23, 42, 0.88) 0%,   /* Overlay lebih gelap di sisi kiri (teks) */
      rgba(15, 23, 42, 0.75) 100%  /* Overlay sedikit lebih terang di sisi kanan */
    ),
    url('./bg-hero.png');
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Sisanya tetap sama seperti CSS awal Anda */
  color: var(--on-dark);
  padding: 88px 0 110px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.hero-band-dark::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.hero-band-dark::after{
  content:"";
  position:absolute;
  right:-8%;
  top:-25%;
  width:520px;
  height:520px;
  background:radial-gradient(circle, var(--brand-navy-mid) 0%, transparent 70%);
  opacity:0.7;
}
.hero-kicker{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#ff9f57;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.hero-kicker::before{ content:""; width:18px; height:2px; background:#ff9f57; display:inline-block; }
.hero-display{
  font-size:clamp(2.1rem, 4.6vw, 3.85rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-1.4px;
}
.hero-subtitle{
  font-size:17.5px;
  line-height:1.55;
  color:var(--on-dark-muted);
  max-width:520px;
}

.btn-brand-primary{
  background-color:var(--primary); color:var(--on-primary); border:none;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:var(--radius-md); padding:12px 22px;
  transition:background-color .15s ease, transform .15s ease;
}
.btn-brand-primary:hover{ background-color:var(--primary-pressed); color:var(--on-primary); transform:translateY(-1px); }

.btn-whatsapp{
  background-color:var(--whatsapp-green); color:var(--on-primary); border:none;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:var(--radius-md); padding:12px 22px;
  transition:background-color .15s ease, transform .15s ease;
}
.btn-whatsapp:hover{ background-color:var(--whatsapp-green-pressed); color:var(--on-primary); transform:translateY(-1px); }

.btn-secondary-dark{
  background-color:transparent; color:var(--on-dark); border:1px solid rgba(255,255,255,0.3);
  font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:var(--radius-md); padding:12px 22px; transition:all .15s ease;
}
.btn-secondary-dark:hover{ background-color:rgba(255,255,255,0.08); color:var(--on-dark); border-color:rgba(255,255,255,0.55); }


/* ---------- Stats ---------- */
.stat-row{
  background-color:var(--surface);
  padding:22px 0;
  border-bottom:1px solid var(--hairline);
}
.stat-pill{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--charcoal); }
.stat-pill i{ color:var(--primary); font-size:17px; }

/* ---------- Section framing ---------- */
section{ padding:70px 0; position:relative; }
.section-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase;
}
.section-title{ font-size:30px; font-weight:800; letter-spacing:-0.6px; color:var(--ink); }
.section-desc{ color:var(--slate); font-size:15.5px; max-width:640px; }

/* ---------- Logo wall ---------- */
.logo-wall-item{
  background-color:var(--surface-soft);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius-md);
  padding:16px 10px;
  text-align:center;
  font-size:13px; font-weight:600; color:var(--slate);
  height:100%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.logo-wall-item:hover{ border-color:var(--primary); color:var(--primary-deep); }

/* ---------- About ---------- */
.about-mini-stat{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:20px; }
.about-mini-stat .num{ font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--primary); line-height:1; }
.about-mini-stat .label{ font-size:13.5px; color:var(--slate); margin-top:6px; }

.about-visual{ display:flex; flex-direction:column; gap:16px; padding:12px; }
.about-visual-card{ display:flex; align-items:flex-start; gap:14px; background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:0 10px 30px rgba(10,21,48,0.06); }
.about-visual-card i{ font-size:22px; color:var(--primary); flex-shrink:0; margin-top:2px; }
.about-visual-card .title{ font-weight:700; font-size:15px; margin-bottom:2px; }
.about-visual-card .desc{ font-size:13.5px; color:var(--slate); }
.about-visual-card.card-b{ margin-left:24px; }

/* ---------- Product cards ---------- */
.product-card{
  padding:0;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  transition:box-shadow .25s ease, transform .25s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(10,21,48,0.08); }

.product-media{
  aspect-ratio: 4 / 3;
  width:100%;
  background:repeating-linear-gradient(45deg, var(--surface-soft), var(--surface-soft) 10px, var(--hairline-soft) 10px, var(--hairline-soft) 20px);
  border-bottom:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--stone);
}
.product-media i{ font-size:34px; }
.product-media span{ font-size:12.5px; font-weight:600; letter-spacing:0.3px; }
.product-media img{ width:100%; height:100%; object-fit:cover; }

.product-card-body{ padding:22px 24px 22px; }
.product-tag{ display:block; font-family:var(--font-mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
.product-title{ font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:-0.2px; }
.product-spec{ font-size:14px; color:var(--slate); line-height:1.55; margin-bottom:20px; min-height:44px; }
.product-price-row{ display:flex; align-items:flex-end; justify-content:space-between; padding-top:18px; border-top:1px solid var(--hairline-soft); }
.price-tag{ font-family:var(--font-mono); font-size:19px; font-weight:600; color:var(--primary-deep); }
.price-from{ font-size:12.5px; color:var(--slate); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--hairline); padding:20px 0; }
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; font-weight:700; font-size:16.5px; color:var(--ink); font-family:var(--font-display);
  background:none; border:none; width:100%; text-align:left; padding:0;
}
.faq-question .q-mark{
  font-family:var(--font-mono); color:var(--primary); font-weight:700; margin-right:10px; flex-shrink:0;
}
.faq-question .toggle-icon{ transition:transform .25s ease; color:var(--primary); flex-shrink:0; }
.faq-item.open .toggle-icon{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
  color:var(--slate); font-size:15px; line-height:1.6; padding-left:26px;
}
.faq-item.open .faq-answer{ max-height:220px; padding-top:12px; }

/* ---------- Footer ---------- */
.footer-region{ background-color:var(--brand-navy-deep); color:var(--on-dark-muted); padding:64px 0 24px; }
.footer-region h5{ color:var(--on-dark); font-weight:700; font-family:var(--font-display); }
.footer-region a{ color:var(--on-dark-muted); text-decoration:none; }
.footer-region a:hover{ color:var(--on-dark); }
.footer-map-wrap{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,0.12); filter:grayscale(0.2) contrast(1.05); }
.footer-bottom-line{ border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; font-size:13px; font-family:var(--font-mono); }

/* ---------- Floating WhatsApp ---------- */
.floating-wa{
  position:fixed; bottom:24px; right:24px; z-index:1050;
  background-color:var(--whatsapp-green); color:var(--on-primary);
  width:58px; height:58px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center; font-size:27px;
  box-shadow:0 6px 20px rgba(37,211,102,0.45);
  transition:transform .15s ease, background-color .15s ease;
}
.floating-wa::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--whatsapp-green); animation:wa-pulse 2.2s ease-out infinite;
}
.floating-wa:hover{ background-color:var(--whatsapp-green-pressed); color:var(--on-primary); transform:scale(1.06); }
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:0.6; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .floating-wa::before{ animation:none; } }

@media (max-width:767.98px){
  section{ padding:52px 0; }
  .hero-band-dark{ padding:60px 0 78px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%); }
  .spec-ticket:nth-child(2), .spec-ticket:nth-child(4){ margin-left:0; }
  .category-block-steel, .category-block-roof, .category-block-water{ padding:32px 18px 28px; }
}