/* =============================================
   PAGES.CSS — components for the new local pages
   (about, scenarios, support, warranty, contact, dealer)
   plus homepage v2 additions (brand bar, bento, hero trust).
   Reuses tokens from homepage.css :root.
============================================= */

/* ---------------------------------------------
   PAGE HERO (compact banner for inner pages)
--------------------------------------------- */
.page-hero {
  position: relative; background: var(--black); color: #fff;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 80% 0%, rgba(26,140,78,.28), transparent 55%);
  pointer-events: none;
}
.page-hero.has-img { background-size: cover; background-position: center; }
.page-hero.has-img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.25) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wa-green); margin-bottom: 14px;
}
.page-hero-title {
  font-size: clamp(30px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; max-width: 760px;
}
.page-hero-sub {
  font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,.78);
  margin-top: 18px; max-width: 580px; line-height: 1.6;
}
.page-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* breadcrumb (reused from product, kept light here) */
.page-crumb { font-size: 12.5px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.page-crumb a { color: rgba(255,255,255,.85); }
.page-crumb a:hover { color: #fff; }
.page-crumb span { margin: 0 7px; opacity: .5; }

/* generic page section */
.page-sec { padding: var(--section-pad) 0; }
.page-sec.alt { background: var(--gray-bg); }
.page-sec-head { max-width: 640px; margin-bottom: 40px; }
.page-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.page-lead { font-size: clamp(15px, 1.5vw, 17px); color: var(--text-muted); line-height: 1.7; margin-top: 14px; }

/* ---------------------------------------------
   BRAND BAR (homepage v2 + about)
--------------------------------------------- */
.brand-bar { background: var(--black); color: #fff; }
.brand-bar .container {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 13px 40px; flex-wrap: wrap; text-align: center;
}
.brand-bar svg { color: var(--wa-green); flex-shrink: 0; }
.brand-bar-text { font-size: 13.5px; color: rgba(255,255,255,.9); letter-spacing: .01em; }
.brand-bar-text b { color: #fff; font-weight: 700; }
@media (max-width: 600px) { .brand-bar-text { font-size: 12px; } }

/* hero micro-trust strip (homepage v2) */
.hero-trust {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px;
}
.hero-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.82);
}
.hero-trust-item svg { color: var(--wa-green); flex-shrink: 0; }

/* ---------------------------------------------
   STAT counter band (reusable on about/home)
--------------------------------------------- */
.stat-band { background: var(--black); padding: clamp(44px,6vw,76px) 0; color: #fff; }
.stat-band-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.1); border-radius: 12px; overflow: hidden;
}
.stat-band-cell { background: var(--black); padding: 30px 18px; text-align: center; }
.stat-band-num {
  font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: #fff;
}
.stat-band-num small { font-size: .45em; font-weight: 700; margin-left: 2px; }
.stat-band-label { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 9px; }
@media (max-width: 720px) { .stat-band-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------
   FEATURE / VALUE GRID (about, scenarios)
--------------------------------------------- */
.val-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px;
}
.val-card {
  background: #fff; border: 1px solid var(--gray-border); border-radius: 14px;
  padding: 30px 26px; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.val-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.07); transform: translateY(-3px); }
.val-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(26,140,78,.1); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.val-media {
  display: flex; align-items: center; justify-content: center;
  height: 150px; margin-bottom: 18px; border-radius: 10px;
  background: var(--gray-bg); overflow: hidden;
}
.val-media img { max-height: 120px; max-width: 80%; object-fit: contain; }
.val-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 9px; }
.val-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 860px) { .val-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .val-grid { grid-template-columns: 1fr; } }
/* Home scenario recommendation: 4-up row */
#produk .val-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { #produk .val-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { #produk .val-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------
   SPLIT (image + text), alternating
--------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split + .split { margin-top: clamp(40px, 6vw, 88px); }
.split.reverse .split-media { order: 2; }
.split-media img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 4/3; }
.split-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.split-title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--black); }
.split-text p { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; margin-top: 16px; }
.split-list { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.split-list-item { display: flex; gap: 10px; font-size: 14px; color: #333; }
.split-list-item svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  .split.reverse .split-media { order: 0; }
}

/* ---------------------------------------------
   CASE STUDIES (PowerOcean projects) — reusable cards.
   Matches .val-grid breakpoints; card hover mirrors .val-card.
--------------------------------------------- */
.case-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px;
}
.case-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 14px;
  overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.case-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.07); transform: translateY(-3px); }
.case-media { background: var(--gray-bg); }
.case-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.case-body { padding: 22px; display: flex; flex-direction: column; }
.case-tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--green);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.case-title { font-size: 16px; font-weight: 700; color: var(--black); line-height: 1.35; margin-bottom: 9px; }
.case-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.case-meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray-border);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.case-meta-item { font-size: 12.5px; font-weight: 500; color: #333; }
@media (max-width: 860px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .case-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------
   TIMELINE (about story)
--------------------------------------------- */
.timeline { position: relative; margin-top: 8px; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gray-border); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green);
}
.tl-year { font-size: 13px; font-weight: 700; color: var(--green); }
.tl-text { font-size: 14px; color: #333; margin-top: 4px; line-height: 1.6; }

/* ---------------------------------------------
   FAQ ACCORDION (support, warranty)
--------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; text-align: left;
  font-size: 16px; font-weight: 600; color: var(--black); font-family: inherit;
}
.faq-q svg { flex-shrink: 0; transition: transform .25s var(--ease); color: var(--text-muted); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a-inner { padding: 0 4px 22px; font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.faq-item.open .faq-a { max-height: 420px; }

/* ---------------------------------------------
   DOC / LINK CARDS (support hub)
--------------------------------------------- */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.doc-card {
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 14px;
  padding: 28px 24px; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.doc-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.07); transform: translateY(-3px); border-color: #d4d4d4; }
.doc-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; }
.doc-title { font-size: 16px; font-weight: 700; color: var(--black); }
.doc-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.doc-link { font-size: 13px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 800px) { .doc-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------
   STEPS (warranty claim)
--------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; margin-bottom: 16px;
}
.step-title { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 7px; }
.step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------
   LOCATION / DEALER CARDS (dealer, contact)
--------------------------------------------- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loc-card {
  background: #fff; border: 1px solid var(--gray-border); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: row; transition: box-shadow .2s, transform .2s;
}
.loc-card:hover { box-shadow: 0 16px 44px rgba(0,0,0,.08); transform: translateY(-3px); }
.loc-map { width: 200px; min-width: 200px; background: #f0f3f0 center/cover; position: relative; overflow: hidden; border-radius: 0; flex-shrink: 0; }
.loc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 600px) { .loc-card { flex-direction: column; } .loc-map { width: 100%; min-width: unset; height: 180px; border-radius: 0; } }
.loc-map-pin {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  color: var(--green);
}
.loc-map.no-photo .loc-map-pin { display: flex; }
.loc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.loc-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.loc-name { font-size: 17px; font-weight: 700; color: var(--black); }
.loc-row { display: flex; gap: 9px; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.loc-row svg { color: #999; flex-shrink: 0; margin-top: 2px; }
.loc-actions { margin-top: auto; display: flex; gap: 10px; padding-top: 8px; }
@media (max-width: 860px) { .loc-grid { grid-template-columns: 1fr; } }

/* single office — kartu lebar: info + peta embed */
.office-feature {
  display: grid; grid-template-columns: 1fr 1.25fr;
  background: #fff; border: 1px solid var(--gray-border);
  border-radius: 18px; overflow: hidden; max-width: 940px; margin: 0 auto;
  box-shadow: 0 2px 12px rgba(16,24,40,.05);
}
.office-info { padding: clamp(26px, 4vw, 42px); display: flex; flex-direction: column; gap: 12px; }
.office-info .loc-tag { margin-bottom: 2px; }
.office-name { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--black); }
.office-info .loc-actions { margin-top: auto; padding-top: 16px; }
.office-map { min-height: 340px; background: #f0f3f0; }
.office-map iframe,
.office-map img { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; object-fit: cover; }
@media (max-width: 760px) {
  .office-feature { grid-template-columns: 1fr; }
  .office-map, .office-map iframe, .office-map img { min-height: 260px; }
}

/* ---------------------------------------------
   NEAR DEALER — search, filter, geo, dynamic grid
   Builds on .loc-* card styles above. Scoped to #dealer-app.
--------------------------------------------- */
/* hero badge */
.dealer-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 7px 15px; border-radius: 999px; background: rgba(26,140,78,.1);
  color: var(--green); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.dealer-badge svg { flex-shrink: 0; }

/* search + filter bar */
.dealer-tools { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.dealer-search-row { display: flex; gap: 12px; flex-wrap: wrap; }
.dealer-search {
  flex: 1; min-width: 220px; position: relative; display: flex; align-items: center;
}
.dealer-search svg { position: absolute; left: 15px; color: #999; pointer-events: none; }
.dealer-search input {
  width: 100%; padding: 13px 15px 13px 44px; border: 1.5px solid var(--gray-border);
  border-radius: 10px; font: inherit; font-size: 14px; color: var(--black); background: #fff;
  transition: border-color .2s var(--ease);
}
.dealer-search input:focus { outline: none; border-color: var(--green); }
.dealer-search input::placeholder { color: #aaa; }
.dealer-geo {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; flex-shrink: 0;
  border: 1.5px solid var(--green); border-radius: 10px; background: var(--green); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.dealer-geo:hover { background: #157a43; transform: translateY(-1px); }
.dealer-geo:disabled { opacity: .6; cursor: progress; transform: none; }
.dealer-geo svg { flex-shrink: 0; }

/* region filter chips */
.dealer-filters { display: flex; gap: 9px; flex-wrap: wrap; }
.dealer-chip {
  padding: 8px 16px; border: 1px solid var(--gray-border); border-radius: 999px;
  background: #fff; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
}
.dealer-chip:hover { border-color: var(--black); color: var(--black); }
.dealer-chip.active { background: var(--green); border-color: var(--green); color: #fff; }

/* result count + status line */
.dealer-status { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; min-height: 20px; }
.dealer-status b { color: var(--black); font-weight: 700; }

/* 2-column dealer grid */
.dealer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .dealer-grid { grid-template-columns: 1fr; } }

/* type badge (overrides single-color loc-tag) */
.loc-tag.t-head_office { color: var(--green); }
.loc-tag.t-branch { color: #0d6ab5; }
.loc-tag.t-mitra { color: #b5710d; }

/* distance label */
.loc-dist {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--green); background: rgba(26,140,78,.09); padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.loc-dist svg { flex-shrink: 0; }

/* placeholder map pin background when no photo */
.loc-map.no-photo { background: linear-gradient(135deg,#eef3ee,#e2ebe4); }

/* empty state */
.dealer-empty {
  grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--text-muted);
  font-size: 14.5px; line-height: 1.7;
}

/* ---------------------------------------------
   CONTACT FORM
--------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,64px); align-items: start; }
.cform { display: flex; flex-direction: column; gap: 16px; }
.cfield label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 7px; }
.cfield input, .cfield textarea, .cfield select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--gray-border); border-radius: 10px;
  font-family: inherit; font-size: 14px; color: var(--black); background: #fff; transition: border-color .18s;
}
.cfield input:focus, .cfield textarea:focus, .cfield select:focus { outline: none; border-color: var(--green); }
.cfield textarea { resize: vertical; min-height: 120px; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-side-card { background: var(--gray-bg); border-radius: 14px; padding: 22px; }
.contact-side-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.contact-side-val { font-size: 14px; color: var(--black); line-height: 1.6; }
.contact-side-val a { color: var(--green); font-weight: 600; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------
   small buttons used across pages
--------------------------------------------- */
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #157a43; transform: translateY(-1px); }
.btn-outline-d { background: transparent; color: var(--black); border: 1.5px solid var(--gray-border); }
.btn-outline-d:hover { border-color: var(--black); }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ---------------------------------------------
   HOMEPAGE V2 — BENTO product showcase
--------------------------------------------- */
.bento-sec { padding: var(--section-pad) 0; background: #fff; }
.bento-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; gap: 14px; margin-top: 36px;
}
.bento-cell {
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--gray-bg); display: flex; flex-direction: column;
  min-height: 230px; cursor: pointer; isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,.1); }
.bento-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1; transition: transform .5s var(--ease);
}
.bento-cell:hover img { transform: scale(1.05); }
.bento-cell.feature { grid-column: span 2; grid-row: span 2; min-height: 480px; }
.bento-cell.tall { grid-row: span 2; min-height: 480px; }
.bento-cell.dark { background: var(--black); color: #fff; }
.bento-body {
  margin-top: auto; padding: 22px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 70%, transparent 100%);
  color: #fff;
}
.bento-cell.product .bento-body { background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.7) 60%, transparent); color: var(--black); }
.bento-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--green); color: #fff; padding: 4px 11px; border-radius: 999px;
}
.bento-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.bento-name { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; line-height: 1.2; }
.bento-cell.feature .bento-name { font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.bento-spec { font-size: 12.5px; opacity: .8; margin-top: 6px; }
.bento-rating { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 9px; }
.bento-rating svg { color: #f5a623; }
.bento-rating b { font-weight: 700; }
.bento-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12.5px; font-weight: 600;
}
.bento-cell.product .bento-cta { color: var(--green); }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-cell.feature { grid-column: span 2; grid-row: span 1; min-height: 320px; }
  .bento-cell.tall { grid-row: span 1; min-height: 230px; }
}
@media (max-width: 520px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-cell.feature { grid-column: span 1; }
}

/* ---------------------------------------------
   HOMEPAGE V2 — strengthened trust heading
--------------------------------------------- */
.sec-trust.v2 { background: #fff; padding: clamp(64px,8vw,120px) 0; }
.sec-trust.v2 .trust-grid { box-shadow: 0 18px 50px rgba(0,0,0,.05); border: none; gap: 1px; }
.trust-intro { max-width: 640px; margin: 0 auto; text-align: center; }
.trust-intro .page-lead { margin-top: 16px; }
.trust-cta { text-align: center; margin-top: 44px; }

/* ---- Testimonials: star rating ---- */
.t-stars { display: flex; gap: 2px; color: #f5a623; margin-bottom: 12px; }

/* ---- Marketplace official-store trust strip ---- */
.mk-strip { background: #fff; border-bottom: 1px solid var(--gray-border); padding: 16px 0; }
.mk-strip .container { display: flex; align-items: center; justify-content: center; gap: 14px 28px; flex-wrap: wrap; }
.mk-strip-lead { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.mk-strip-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid var(--gray-border); border-radius: 999px;
  background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mk-store:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.mk-store-name { font-size: 13.5px; font-weight: 700; color: var(--black); }
.mk-store-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #265c05;
  background: #eaf3de; padding: 2px 9px; border-radius: 999px;
}
.mk-store-badge svg { color: var(--green); }
.mk-store-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: #1a1a1a; }
.mk-store-rating svg { color: #ef9f27; }
@media (max-width: 560px) {
  .mk-strip-lead { width: 100%; text-align: center; }
  .mk-store { padding: 7px 12px; gap: 7px; }
  .mk-store-name { font-size: 12.5px; }
}

/* ---- Testimonials v2: Indonesian, initials-avatar cards ---- */
.testimonials-grid.tg-id { grid-template-columns: repeat(3, 1fr); }
.t-card2 {
  background: #fff; border: 1px solid var(--gray-border); border-radius: 14px;
  padding: 26px 26px 24px; display: flex; flex-direction: column;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.t-card2:hover { box-shadow: 0 16px 44px rgba(0,0,0,.07); transform: translateY(-3px); }
.t-stars2 { display: flex; gap: 2px; color: #ef9f27; margin-bottom: 14px; }
.t-quote2 { font-size: 13.5px; font-style: italic; color: #5a5a5a; line-height: 1.65; margin-bottom: 20px; flex: 1; }
.t-person { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: #e8f5e0; color: #265c05; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.t-meta { display: flex; flex-direction: column; gap: 2px; }
.t-name2 { font-size: 14px; font-weight: 700; color: var(--black); }
.t-sub { font-size: 12px; color: var(--text-muted); }
@media (max-width: 860px) { .testimonials-grid.tg-id { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* ---- Endorsed By: enterprise partner showcase ---- */
.sec-endorsed { padding: clamp(56px, 7vw, 88px) 0; }
.endorsed-logos { gap: clamp(36px, 5vw, 72px); margin-top: 38px; }
.e-logo img { height: 64px !important; opacity: .5; transition: opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease); }
.e-logo:hover img { opacity: 1; transform: translateY(-2px); }
@media (max-width: 600px) { .e-logo img { height: 46px !important; } }

/* =============================================
   HOMEPAGE V3 — PREMIUM PASS
   Overrides homepage.css to lift the editorial
   product rows into elevated soft cards, add a
   cinematic hero, alternating dark sections, and
   a more generous typographic rhythm.
============================================= */

/* ---- Cinematic hero ---- */
.hero { min-height: 640px; max-height: 880px; }
@media (max-width: 768px) { .hero { min-height: 480px; max-height: 620px; } }
.hero-slide::after {
  background: linear-gradient(95deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.12) 100%),
              linear-gradient(0deg, rgba(0,0,0,.45) 0%, transparent 32%);
}
.hero-text { max-width: 640px; }
.hero-eyebrow { color: var(--wa-green); letter-spacing: .16em; font-size: 12px; margin-bottom: 18px; }
.hero-title { font-size: clamp(38px, 6vw, 82px); letter-spacing: -.035em; line-height: 1.02; margin-bottom: 20px; }
.hero-sub { font-size: clamp(15px, 1.5vw, 18px); max-width: 460px; color: rgba(255,255,255,.78); margin-bottom: 34px; }
.btn { border-radius: 999px; letter-spacing: .04em; padding: 14px 30px; }
.hero-trust { margin-top: 26px; gap: 24px; }
/* hero WhatsApp secondary CTA */
.btn-hero-wa {
  background: var(--wa-green); color: #fff; border: none;
}
.btn-hero-wa:hover { background: #1fb959; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,211,102,.34); }
.btn-hero-wa svg { flex-shrink: 0; }
/* lift hero image: warmer, less crushed bottom */
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 28%);
  pointer-events: none;
}

/* =============================================
   WA CONSULTATION BAND (lead-gen, repeated)
============================================= */
.wa-band {
  background: linear-gradient(100deg, #0e1f16 0%, #123322 100%);
  color: #fff; padding: clamp(40px, 5vw, 64px) 0;
}
.wa-band.light { background: var(--gray-bg); color: var(--black); }
.wa-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.wa-band-text { flex: 1; }
.wa-band-text h3 { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.wa-band-text p { font-size: 14.5px; margin-top: 8px; opacity: .8; max-width: 520px; line-height: 1.6; }
.wa-band.light .wa-band-text p { color: var(--text-muted); opacity: 1; }
.wa-band .btn-wa { flex-shrink: 0; }

/* ---- Stats: bolder, clearer (sourced global figures) ---- */
.sec-stats .stat-num { font-size: clamp(34px, 4.8vw, 58px); font-weight: 800; letter-spacing: -.035em; color: #1a1a1a; }
.sec-stats .stat-sup { font-size: 11.5px; color: #b08d4a; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.sec-stats .stat-label { font-size: 13px; color: #6b6258; font-weight: 600; margin-top: 4px; }
.sec-stats .stats-row { gap: clamp(28px, 7vw, 110px); }
.sec-stats .stats-foot { font-size: 11px; font-weight: 400; color: #8c8c8c; line-height: 1.5; margin-top: 28px; text-align: right; max-width: 640px; margin-left: auto; }
@media (max-width: 600px) { .sec-stats .stats-foot { text-align: center; margin-top: 22px; } }

/* ---- Section typographic rhythm ---- */
.editorial-v2 { padding: 0 0 clamp(56px, 7vw, 104px); background: #fff; }
.ed2-label {
  border-top: none; padding: clamp(56px, 7vw, 104px) 0 6px;
  font-size: clamp(27px, 3.6vw, 44px) !important;
  font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.08 !important;
}
.ed2-label::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
  background: var(--green); margin-top: 18px;
}

/* ---- Premium banner ---- */
.ed2-banner { border-radius: 22px; margin-bottom: 22px; }
.ed2-banner-img { height: clamp(300px, 32vw, 480px); }
.ed2-banner-content { padding: 40px 44px; background: linear-gradient(100deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.28) 55%, transparent 100%); }
@media (max-width: 480px) { .ed2-banner-content { padding: 22px 20px; } }
.ed2-banner-title { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; max-width: 440px; margin-bottom: 10px; }
.ed2-banner-sub { font-size: 14.5px; max-width: 400px; margin-bottom: 20px; }
.btn-pill { padding: 11px 26px; font-size: 13px; font-weight: 600; border-radius: 999px; }

/* ---- Elevated soft product cards ---- */
.ed2-products {
  grid-template-columns: repeat(4, 1fr);
  border: none !important; border-radius: 0; overflow: visible;
  gap: 20px; margin-top: 4px;
}
.ed2-card {
  border: none !important; border-radius: 20px;
  background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
  padding: 22px 22px 24px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.ed2-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0,0,0,.13); }
.ed2-card-img { border-radius: 14px; margin-bottom: 18px; }
.ed2-card-img img { max-width: 90%; max-height: 90%; }
.ed2-badge {
  display: inline-block; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green); background: rgba(26,140,78,.1);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.ed2-cat {
  align-self: flex-start; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: rgba(0,0,0,.05); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.editorial-v2.ed2-dark .ed2-cat { color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.ed2-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
/* structured spec: labelled key/value rows */
.ed2-spec { font-size: 12.5px; margin-bottom: 11px; display: flex; flex-direction: column; gap: 4px; }
.ed2-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ed2-k { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ed2-v { font-size: 12.5px; color: #1a1a1a; font-weight: 700; text-align: right; }
.editorial-v2.ed2-dark .ed2-v { color: #fff; }
.editorial-v2.ed2-dark .ed2-k { color: rgba(255,255,255,.55); }
.ed2-rating { font-size: 12px; margin-bottom: 16px; }
/* CTA always visible, premium dark pill */
.ed2-cta {
  opacity: 1; transform: none; align-self: flex-start;
  background: var(--black); color: #fff;
  padding: 9px 20px; font-size: 12.5px; font-weight: 600;
}
.ed2-card:hover .ed2-cta { opacity: 1; transform: none; }
.ed2-cta:hover { background: #2a2a2a; }
/* see-more decorative column hidden in premium layout */
.ed2-see-more { display: none !important; }

/* ---- Alternating dark section ---- */
.editorial-v2.ed2-dark { background: #0e0f11; }
.editorial-v2.ed2-dark .ed2-label { color: #fff; }
.editorial-v2.ed2-dark .ed2-card {
  background: linear-gradient(180deg, #1b1d21 0%, #141518 100%);
}
.editorial-v2.ed2-dark .ed2-name { color: #fff; }
.editorial-v2.ed2-dark .ed2-spec { color: rgba(255,255,255,.62); }
.editorial-v2.ed2-dark .ed2-rating { color: rgba(255,255,255,.6); }
.editorial-v2.ed2-dark .ed2-rating b { color: #fff; }
.editorial-v2.ed2-dark .ed2-cta { background: #fff; color: var(--black); }
.editorial-v2.ed2-dark .ed2-cta:hover { background: #e6e6e6; }

@media (max-width: 960px) {
  .ed2-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ed2-products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ed2-card { padding: 16px 16px 18px; border-radius: 16px; }
}

/* ---- Power All Scenarios → storytelling cards ---- */
.sec-scenarios .sc-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.05) 78%, transparent 100%);
  padding: 26px 22px; justify-content: flex-end;
}
.sc-tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(26,140,78,.92); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.sec-scenarios .sc-label { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.sc-desc {
  font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.82); margin-bottom: 14px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s var(--ease), opacity .35s var(--ease), margin .35s var(--ease);
}
.sc-card:hover .sc-desc { max-height: 90px; opacity: 1; }
.sec-scenarios .sc-cta {
  color: var(--wa-green); opacity: 1; transform: none; font-size: 12px; letter-spacing: .04em;
}
.sec-scenarios .sc-card { aspect-ratio: 4/5; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sec-scenarios .sc-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(0,0,0,.18); }

/* ---- Scenario B2B/B2G corner badges ---- */
.sec-scenarios .sc-card { position: relative; }
.sc-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
}
.sc-badge-b2b { background: #faeeda; color: #633806; }
.sc-badge-b2g { background: #e6f1fb; color: #0c447c; }

/* ---- Bento polish (premium) ---- */
.bento-sec { padding: clamp(64px,8vw,120px) 0; }
.bento-sec .section-title { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.03em; }

/* =============================================
   COMPANY BAND — premium credibility
============================================= */
.company-band {
  background: radial-gradient(120% 140% at 0% 0%, #14241b 0%, #0c0d0f 55%);
  color: #fff; padding: clamp(64px, 8vw, 116px) 0;
}
.cb-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.cb-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 14px 0 18px; }
.cb-desc { font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.75; color: rgba(255,255,255,.72); max-width: 520px; }
.cb-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 28px; }
.cb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  padding: 9px 16px; border-radius: 999px;
}
.cb-badge svg { color: var(--wa-green); flex-shrink: 0; }
.cb-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,.1); border-radius: 16px; overflow: hidden;
}
.cb-stat { background: #0e0f11; padding: 34px 24px; text-align: center; }
.cb-num { font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.cb-lbl { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 10px; }
.cb-cta { color: #fff; }
@media (max-width: 860px) {
  .cb-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* =============================================
   BECOME A MEMBER — flip to light (break dark run)
   member(light) → company-band(dark) → dealer(light)
============================================= */
.sec-member { background: var(--gray-bg) !important; }
.sec-member .section-eyebrow { color: var(--green) !important; }
.sec-member .section-title { color: var(--black) !important; }
.sec-member .member-desc { color: var(--text-muted) !important; }

/* =============================================
   BECOME OUR DEALER — B2B lead capture (light card on tinted bg)
============================================= */
.dealer-cta { background: linear-gradient(180deg, #f2f6f1 0%, #e9efe9 100%); color: var(--black); padding: clamp(48px, 7vw, 80px) 0; }
.dealer-form-wrap { box-shadow: 0 18px 50px rgba(0,0,0,.08); border: 1px solid var(--gray-border); }
.dealer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.dealer-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wa-green); margin-bottom: 12px; }
.dealer-title { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 16px; }
.dealer-body { font-size: clamp(15px, 1.5vw, 16px); color: var(--text-muted); line-height: 1.7; margin-bottom: 26px; max-width: 480px; }
.dealer-benefits { display: flex; flex-direction: column; gap: 12px; }
.dealer-benefit { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #2a2a2a; line-height: 1.5; }
.dealer-benefit svg { color: var(--wa-green); flex-shrink: 0; margin-top: 1px; }
.dealer-form-wrap { background: #fff; border-radius: 14px; padding: clamp(24px, 3vw, 32px); }
.dealer-form-title { font-size: 18px; font-weight: 700; color: var(--black); margin-bottom: 18px; }
.dealer-form .cfield { margin-bottom: 14px; }
.dealer-form .opt { font-weight: 400; color: var(--text-muted); }
.dealer-submit {
  width: 100%; height: 48px; margin-top: 6px; border: none; border-radius: 8px;
  background: var(--green); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .2s;
}
.dealer-submit:hover { background: #157a43; }
.dealer-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.dealer-success { text-align: center; padding: 20px 8px; }
.dealer-success-ico {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(26,140,78,.12); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.dealer-success-txt { font-size: 15px; font-weight: 500; color: var(--black); line-height: 1.6; max-width: 320px; margin: 0 auto; }
@media (max-width: 860px) { .dealer-grid { grid-template-columns: 1fr; } }

/* =============================================
   FOOTER — marketplace + trust strip
============================================= */
.footer-mk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1);
}
.footer-mk-trust { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8);
}
.footer-trust-item svg { color: var(--wa-green); flex-shrink: 0; }
.footer-mk-shops { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-mk-label { font-size: 12px; color: rgba(255,255,255,.5); }
.footer-mk-link {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85);
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  transition: border-color .2s, color .2s, background .2s;
}
.footer-mk-link:hover { color: #fff; border-color: var(--wa-green); background: rgba(37,211,102,.12); }
@media (max-width: 600px) { .footer-mk { flex-direction: column; align-items: flex-start; } }

/* =============================================
   ARTICLES — listing + detail
============================================= */
.art-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.art-filter {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 8px 18px; border: 1.5px solid var(--gray-border); border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit; transition: all .18s var(--ease);
}
.art-filter:hover { border-color: #bbb; color: var(--black); }
.art-filter.active { background: var(--black); color: #fff; border-color: var(--black); }

.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.art-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--gray-border); border-radius: 16px; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); cursor: pointer;
}
.art-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,0,0,.1); }
.art-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--gray-bg); }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.art-card:hover .art-thumb img { transform: scale(1.06); }
.art-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.art-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.art-title { font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.3; letter-spacing: -.01em; }
.art-excerpt { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.art-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.art-meta .art-dot { opacity: .5; }
.art-featured {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,48px);
  align-items: center; margin-bottom: 48px;
  background: #fff; border: 1px solid var(--gray-border); border-radius: 20px; overflow: hidden;
}
.art-featured .art-thumb { aspect-ratio: 16/11; height: 100%; }
.art-featured .art-body { padding: clamp(28px,3vw,44px); gap: 14px; }
.art-featured .art-title { font-size: clamp(22px, 2.6vw, 32px); }
.art-featured .art-excerpt { font-size: 15px; }
@media (max-width: 900px) { .art-grid { grid-template-columns: repeat(2, 1fr); } .art-featured { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .art-grid { grid-template-columns: 1fr; } }

/* article detail */
.article { max-width: 760px; margin: 0 auto; }
.article-hero-img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 18px; margin-bottom: 32px; }
.article-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; margin: 28px 0; }
.article h2 { font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -.02em; margin: 34px 0 14px; color: var(--black); }
.article p { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 18px; }
.article ul { margin: 0 0 18px 22px; }
.article li { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 8px; }
.article-note {
  background: var(--gray-bg); border-left: 3px solid var(--green); border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin: 24px 0; font-size: 15px; color: #444; line-height: 1.7;
}

/* =============================================
   SHOP — catalog grid + filter
============================================= */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.shop-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
  border-radius: 20px; padding: 22px 22px 24px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.shop-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0,0,0,.13); }
.shop-badge {
  position: absolute; top: 16px; left: 16px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--green);
  background: rgba(26,140,78,.1); padding: 3px 10px; border-radius: 999px;
}
.shop-img { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.shop-img img { max-width: 86%; max-height: 86%; object-fit: contain; transition: transform .35s var(--ease); }
.shop-card:hover .shop-img img { transform: scale(1.06); }

/* ---------------------------------------------
   POWEROCEAN PAGE — scroll-storytelling sections
   Light theme, reuses homepage.css tokens to stay
   consistent with the rest of the site.
--------------------------------------------- */
.po-sticky-nav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-border);
}
.po-sticky-nav ul {
  display: flex; gap: 0; list-style: none; margin: 0 auto; padding: 0;
  overflow-x: auto; max-width: var(--container);
}
.po-sticky-nav ul li a {
  display: block; padding: 14px 20px; color: var(--text-muted); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color .2s; border-bottom: 2px solid transparent;
}
.po-sticky-nav ul li a:hover,
.po-sticky-nav ul li a.active { color: var(--green); border-bottom-color: var(--green); }

.po-section { padding: var(--section-pad) 5%; }
.po-section-mid  { background: var(--gray-bg); }
.po-section-card { background: var(--gray-light); }

.po-label {
  display: inline-block; color: var(--green); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
}
.po-h2 { color: var(--black); font-size: clamp(26px,4vw,44px); font-weight: 700; line-height: 1.2; margin-bottom: 16px; letter-spacing: -.02em; }
.po-body { color: var(--text-muted); font-size: 16px; line-height: 1.7; max-width: 540px; }
.po-sub { color: var(--text-muted); }

.po-video-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  max-width: var(--container); margin: 0 auto;
}
.po-video-section.reverse { direction: rtl; }
.po-video-section.reverse > * { direction: ltr; }

.po-video-wrap {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--gray-light); aspect-ratio: 16/10;
}
.po-video-wrap video,
.po-video-wrap img { width: 100%; height: 100%; object-fit: cover; }

.po-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1px; max-width: var(--container); margin: 48px auto 0;
  background: var(--gray-border); border: 1px solid var(--gray-border); border-radius: 16px; overflow: hidden;
}
.po-feature-item { background: #fff; padding: 32px 28px; transition: background .2s; }
.po-feature-item:hover { background: var(--gray-bg); }
.po-feature-item .icon { margin-bottom: 16px; color: var(--green); }
.po-feature-item h4 { color: var(--black); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.po-feature-item p { color: var(--text-muted); font-size: 13px; line-height: 1.6; }

.po-appliance-item {
  background: #fff; border-radius: 10px; padding: 16px 8px; text-align: center;
  border: 1px solid var(--gray-border); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.po-appliance-item .app-icon { color: var(--green); }
.po-appliance-item .app-name { color: var(--text-muted); font-size: 11px; }

.po-info-card {
  padding: 24px; background: #fff; border-radius: 12px;
  border: 1px solid var(--gray-border); border-left: 3px solid var(--green);
}
.po-info-card h4 { color: var(--black); font-weight: 600; margin-bottom: 8px; }
.po-info-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; }

.po-variant-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 24px; max-width: var(--container); margin: 48px auto 0;
}
.po-variant-card {
  background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-border);
  display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.po-variant-card:hover { box-shadow: 0 14px 38px rgba(0,0,0,.08); transform: translateY(-4px); }
.po-variant-card.featured { border-color: var(--green); box-shadow: 0 8px 30px rgba(26,140,78,.1); }
.po-variant-card .card-badge {
  background: var(--green); color: #fff; text-align: center; padding: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.po-variant-card .card-img { aspect-ratio: 1/1; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 28px; }
.po-variant-card .card-img img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; transition: transform .4s; }
.po-variant-card:hover .card-img img { transform: scale(1.04); }
.po-variant-card .card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.po-spec-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--gray-light); padding-bottom: 10px; }
.po-spec-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.po-spec-row .k { color: var(--text-muted); font-size: 13px; }
.po-spec-row .v { color: var(--black); font-size: 13px; font-weight: 600; }

.po-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 1000px; margin: 0 auto; }
.po-spec-table th { padding: 14px 16px; text-align: center; font-weight: 700; border-bottom: 2px solid var(--gray-border); color: var(--black); }
.po-spec-table td { padding: 13px 16px; border-bottom: 1px solid var(--gray-light); color: #333; }
.po-spec-table td:first-child { color: var(--text-muted); }
.po-spec-table td:not(:first-child) { text-align: center; color: var(--black); }
.po-spec-table tr:hover td { background: var(--gray-bg); }
.po-spec-table .col-feat { background: rgba(26,140,78,.06); }

.po-related-link {
  background: #fff; color: var(--black); padding: 12px 20px; border-radius: 8px;
  text-decoration: none; font-size: 14px; border: 1px solid var(--gray-border);
  transition: border-color .2s, box-shadow .2s;
}
.po-related-link:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.06); }

@media (max-width: 768px) {
  .po-video-section { grid-template-columns: 1fr; gap: 32px; }
  .po-video-section.reverse { direction: ltr; }
  .po-section { padding: clamp(48px,7vw,72px) 4%; }
}
.shop-cat { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.shop-name { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.shop-spec { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.shop-cta { display: inline-flex; align-self: flex-start; background: var(--black); color: #fff; padding: 9px 20px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.shop-cta:hover { background: #2a2a2a; }
.shop-card.hide { display: none; }
@media (max-width: 1040px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .shop-grid { grid-template-columns: 1fr; } }

/* =============================================
   SMALL-SCREEN POLISH (phones ≤ 400px / ≤ 360px)
   Stop forcing multi-column layouts that overflow.
============================================= */
@media (max-width: 400px) {
  /* never let any section push horizontal scroll */
  .container { padding: 0 16px; }

  /* Stats: tidy 2×2 grid instead of random flex-wrap, labels no longer clip */
  .sec-stats .stats-row {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 26px 14px; justify-items: center;
  }
  .sec-stats .stat-item { text-align: center; }
  .sec-stats .stat-num { font-size: clamp(30px, 11vw, 42px); }
  .sec-stats .stat-sup,
  .sec-stats .stat-label { white-space: normal; line-height: 1.25; }
  .stats-headline { font-size: 15px; gap: 6px; padding: 0 4px; }
  .no1-badge { font-size: 19px; }

  /* Section headings wrap cleanly, never clipped off-screen */
  .section-title { font-size: clamp(22px, 7vw, 30px); }
  .ed2-label { font-size: 24px !important; }

  /* Scenarios: single column — 2-up is too cramped on small phones */
  .sec-scenarios .scenarios-grid { grid-template-columns: 1fr; gap: 16px; }
  .sec-scenarios .sc-card { aspect-ratio: 16/11; }
  /* show scenario blurb by default (no hover on touch) */
  .sc-card .sc-desc { max-height: 90px; opacity: 1; }

  /* Product card grid: single column so specs/cta have room */
  .ed2-products { grid-template-columns: 1fr !important; gap: 14px; }

  /* Trust grid: one column, comfortable padding */
  .sec-trust .trust-grid { grid-template-columns: 1fr; }

  /* Company band stat cells stack to 2 cols already; tighten text */
  .cb-stats { grid-template-columns: repeat(2, 1fr); }

  /* WA bands stack text above button */
  .wa-band-inner { flex-direction: column; align-items: flex-start; }

  /* Bento (if shown) single column */
  .bento-grid { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .sec-stats .stats-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 12px; }
  .hero-trust-item { font-size: 11.5px; }
}


/* =============================================
   FAQ PAGE — two-column hierarchical sidebar
============================================= */
.faq-page-sec { padding-top: 40px; }

.faq-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Sidebar ---- */
.faq-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--ann-h) + 20px);
  max-height: calc(100vh - var(--nav-h) - var(--ann-h) - 40px);
  overflow-y: auto;
}
.faq-search-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--gray-bg); border: 1px solid var(--gray-border);
  border-radius: 8px; padding: 9px 14px; margin-bottom: 16px;
}
.faq-search-wrap svg { flex-shrink: 0; color: var(--text-muted); }
.faq-search {
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 13.5px; color: var(--black); width: 100%;
}
.faq-search::placeholder { color: var(--text-muted); }

/* Nav tree */
.faq-nav { display: flex; flex-direction: column; }
.faq-nav-group { display: flex; flex-direction: column; }

/* L1 parent button */
.faq-nav-parent {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--black); text-align: left;
  padding: 10px 6px; border-bottom: 1px solid var(--gray-border);
  transition: color .15s;
}
.faq-nav-parent:hover { color: var(--green); }
.faq-nav-parent.open { color: var(--green); }
.faq-nav-parent .faq-nav-chev { transition: transform .2s var(--ease); flex-shrink: 0; }
.faq-nav-parent.open .faq-nav-chev { transform: rotate(90deg); }

/* L2 mid button */
.faq-nav-mid {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--black); text-align: left;
  padding: 8px 6px 8px 16px;
  transition: color .15s;
}
.faq-nav-mid:hover { color: var(--green); }
.faq-nav-mid.open { color: var(--green); }
.faq-nav-mid .faq-nav-chev { transition: transform .2s var(--ease); flex-shrink: 0; }
.faq-nav-mid.open .faq-nav-chev { transform: rotate(90deg); }

/* Leaf button */
.faq-nav-leaf {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 400;
  color: var(--text-muted); text-align: left;
  padding: 6px 6px 6px 28px;
  border-left: 2px solid transparent; margin-left: 14px;
  width: calc(100% - 14px);
  transition: color .15s, border-color .15s;
}
.faq-nav-leaf:hover { color: var(--green); }
.faq-nav-leaf.active { color: var(--green); border-left-color: var(--green); font-weight: 600; }

/* L1 leaves (Solar, Smart, Accessories — no toggle) */
.faq-nav-parent.faq-nav-leaf {
  color: var(--black); font-size: 14.5px; font-weight: 500;
  padding: 10px 6px; margin-left: 0; width: 100%;
  border-left: none; border-bottom: 1px solid var(--gray-border);
}
.faq-nav-parent.faq-nav-leaf:hover { color: var(--green); }
.faq-nav-parent.faq-nav-leaf.active { color: var(--green); font-weight: 600; border-left: none; }
.faq-nav-parent.faq-nav-leaf .faq-nav-chev { display: none; }

/* Children collapse */
.faq-nav-children {
  display: none; flex-direction: column;
  padding: 4px 0 8px 0;
}
.faq-nav-children.open { display: flex; }

/* L2 group inside children */
.faq-nav-l2 { margin-left: 0; }

/* ---- Content panels ---- */
.faq-content { min-height: 400px; }
.faq-panel { display: none; }
.faq-panel-default { display: block; }

.faq-hint {
  font-size: 14px; color: var(--text-muted); padding: 40px 0;
}

.faq-entry {
  border-bottom: 1px solid var(--gray-border);
  padding: 26px 0;
}
.faq-entry:first-child { padding-top: 0; }
.faq-entry:last-child { border-bottom: none; }

.faq-entry-q {
  font-size: 15px; font-weight: 700; color: var(--black);
  margin-bottom: 10px; line-height: 1.45;
}
.faq-entry-a p {
  font-size: 14px; line-height: 1.75; color: #555; margin: 0;
}
.faq-entry-a a { color: var(--green); font-weight: 600; }
.faq-entry-a a:hover { text-decoration: underline; }

/* ---- CTA strip ---- */
.faq-cta-strip {
  margin-top: 56px; padding: 40px; background: var(--gray-bg);
  border-radius: 16px; text-align: center;
}
.faq-cta-strip p { font-size: 17px; font-weight: 600; margin-bottom: 20px; }
.faq-cta-strip .btn { display: inline-flex; align-items: center; gap: 8px; }
.faq-cta-strip .btn + .btn { margin-left: 12px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 8px; font-size: 14px; font-weight: 600;
  border: 2px solid var(--green); color: var(--green);
  transition: background .15s, color .15s;
}
.btn-outline:hover { background: var(--green); color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 240px 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-sidebar { position: static; max-height: none; border-bottom: 1px solid var(--gray-border); margin-bottom: 24px; padding-bottom: 8px; }
  .faq-content { margin-top: 16px; }
}