/* Homepage extra sections ported from design/index update.html
   (e-invoice/tax, enterprise-chain, multi-language, FAQ). Scoped to .sg. */

/* ===== TAX / E-INVOICE (.tx) ===== */
.sg .tx{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.sg .tx__sub{margin-top:16px;color:var(--slate);font-size:1.04rem;line-height:1.65;max-width:520px}
.sg .tx__list{list-style:none;margin-top:22px;display:grid;gap:13px;padding:0}
.sg .tx__list li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:#2B3350;line-height:1.5}
.sg .tx__list li b{color:var(--navy);font-weight:800}
.sg .tx__list li .ck{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:#E6F6EE;display:grid;place-items:center;margin-top:2px}
.sg .tx__list li .ck svg{width:14px;height:14px;color:#0F7E4D}
.sg .tx__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.sg .tx-shot{width:100%;max-width:460px;border-radius:var(--r-lg);box-shadow:var(--sh-lift);display:block;margin-inline:auto}

/* ===== ENTERPRISE / CHAIN (.ent, navy) ===== */
.sg .ent{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.sg .entlist{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 28px}
.sg .eitem{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px 16px}
.sg .eitem .ec{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--grad-flame);display:grid;place-items:center}
.sg .eitem .ec svg{width:18px;height:18px;color:#fff}
.sg .eitem b{font-size:.94rem;color:#fff;font-weight:700;display:block}
.sg .eitem span{font-size:.8rem;color:#AFC0E2}
.sg .ent-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-2xl);padding:30px;box-shadow:var(--sh-lift)}
.sg .ent-card .lab{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9EB2D6;text-align:center;margin-bottom:20px}
.sg .ent-logos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.sg .ent-logos .lc{background:#fff;border-radius:12px;height:64px;display:grid;place-items:center;padding:12px}
.sg .ent-logos .lc img{max-height:34px;width:auto;object-fit:contain}
.sg .ent-logos .lc .fb{font-weight:800;font-size:.78rem;color:var(--navy);text-align:center;line-height:1.2}
.sg .ent-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.sg .ent-metrics div{background:rgba(255,255,255,.07);border-radius:12px;padding:16px;text-align:center}
.sg .ent-metrics b{display:block;font-size:1.6rem;font-weight:900;color:var(--gold);line-height:1}
.sg .ent-metrics span{font-size:.76rem;color:#AFC0E2}
.sg .zaklogo{background:#000 url('/images/sp-bida/zakdang-logo.jpg') center/contain no-repeat}

/* ===== MULTI-LANGUAGE (.langs5, .ml-*) ===== */
.sg .langs5{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 auto 46px;max-width:840px}
.sg .lang5{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:15px 24px;box-shadow:var(--sh-s);font-weight:800;color:var(--navy);font-size:1.04rem;transition:transform .2s,box-shadow .2s}
.sg .lang5:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.sg .lang5 .fl{font-size:1.55rem;line-height:1}
.sg .ml-why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px}
.sg .mlcard{background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);padding:28px 22px;text-align:center;box-shadow:var(--sh-s);transition:transform .2s,box-shadow .2s}
.sg .mlcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.sg .mlcard h3{font-size:1.08rem;font-weight:800;color:var(--navy);line-height:1.25}
.sg .mlcard p{font-size:.9rem;color:var(--slate);margin-top:9px;line-height:1.5}
.sg .mlcard__ic{width:60px;height:60px;border-radius:50%;background:#EAF0FB;display:grid;place-items:center;margin:0 auto 16px}
.sg .mlcard__ic svg{width:28px;height:28px;color:var(--navy)}
.sg .ml-band{background:var(--grad-navy);border-radius:var(--r-xl);padding:30px 36px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;box-shadow:var(--sh-lift);margin-bottom:44px}
.sg .ml-pt{display:flex;gap:13px;align-items:flex-start;color:#fff}
.sg .ml-pt svg{flex:0 0 auto;width:26px;height:26px;color:var(--flame2);margin-top:2px}
.sg .ml-pt b{display:block;font-size:.98rem;font-weight:800}
.sg .ml-pt span{font-size:.82rem;color:#c0cee8}
.sg .ml-inds-h{text-align:center;font-weight:900;color:var(--navy);font-size:1.16rem;margin-bottom:26px}
.sg .ml-inds{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px;max-width:920px;margin:0 auto}
.sg .ml-ind{display:flex;flex-direction:column;align-items:center;gap:9px;width:98px;text-align:center}
.sg .ml-ind span{font-size:.8rem;color:var(--slate);font-weight:600;line-height:1.2}
.sg .ml-ind__ic{width:54px;height:54px;border-radius:15px;background:var(--flame-tint);display:grid;place-items:center}
.sg .ml-ind__ic svg{width:26px;height:26px;color:var(--flame)}

/* ===== FAQ (.faq, .qa) ===== */
.sg .faq{max-width:820px;margin:48px auto 0}
.sg .qa{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden;box-shadow:var(--sh-s)}
.sg .qa summary{cursor:pointer;padding:20px 24px;font-weight:800;color:var(--navy);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.sg .qa summary::-webkit-details-marker{display:none}
.sg .qa summary .pl{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--flame-soft);display:grid;place-items:center;transition:transform .2s}
.sg .qa summary .pl svg{width:16px;height:16px;color:var(--flame-700)}
.sg .qa[open] summary .pl{transform:rotate(45deg)}
.sg .qa__a{padding:0 24px 20px;color:var(--slate);font-size:.96rem;line-height:1.6}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .sg .ent{grid-template-columns:1fr;gap:44px}
}
@media (max-width:960px){
  .sg .tx{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sg .ml-why,.sg .ml-band{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sg .entlist,.sg .ent-metrics{grid-template-columns:1fr}
  .sg .ent-logos{grid-template-columns:1fr 1fr}
  .sg .tx__cta .btn{flex:1 1 auto}
}
@media (max-width:560px){
  .sg .ml-why{grid-template-columns:1fr}
  .sg .ml-band{grid-template-columns:1fr;gap:18px}
}