/* ACC 2026 gradient visual refresh. Styling only: content and product features remain intact. */
:root{--acc-forest:#13382e;--acc-pine:#205542;--acc-sage:#628c70;--acc-mint:#d8eee0;--acc-cream:#f7faf6;--acc-border:#dbe9df}
body{background:#f7faf7;color:#19352b}
.site-header{background:linear-gradient(105deg,#0f2c24 0%,#194b3b 57%,#235944 100%);box-shadow:0 8px 25px #0d2c201a}
.header-cta{background:linear-gradient(125deg,#e3f6db,#acd6ac);color:#153b2c;border:1px solid #ffffff40;box-shadow:0 4px 14px #061e1424}
.header-cta:hover{background:linear-gradient(130deg,#effbe8,#c1e5bc)}
.hero{background:radial-gradient(ellipse at 91% 16%,#d0e9d6 0%,transparent 45%),radial-gradient(ellipse at 5% 100%,#e1efe6 0%,transparent 45%),linear-gradient(145deg,#fbfdfb 0%,#eef6ef 55%,#e7f2e9 100%);position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;right:0;bottom:0;width:42%;height:60%;background:radial-gradient(ellipse,#acd9c339,transparent 70%);pointer-events:none;z-index:-1}
.hero h1{color:#163a2c;letter-spacing:-2.4px;text-wrap:balance}
.hero .eyebrow,.section-kicker{color:#367751}
.hero h1::selection{background:#b4dbbd}
.hero-information{border:1px solid #ffffff;background:linear-gradient(165deg,#ffffff,#f3faf4);border-radius:17px;overflow:hidden;box-shadow:0 24px 60px #173f2e1a,0 2px 8px #173f2e0d;transition:transform .25s ease,box-shadow .25s ease}
.hero-information:hover{transform:translateY(-5px);box-shadow:0 32px 70px #173f2e26}
.hero-photo{background-image:linear-gradient(135deg,#123e2955,#103a4112),url('/assets/industrial-process.svg')}
.btn,.header-cta{border-radius:9px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-dark{background:linear-gradient(120deg,#143a2c,#277455);box-shadow:0 8px 24px #123b2c23;color:#fff}
.btn-primary:hover,.btn-dark:hover{background:linear-gradient(120deg,#1b4b37,#318a60);box-shadow:0 12px 27px #123b2c33}
.btn-outline,.btn-instagram{background:#ffffffd9;border:1px solid #c5d9c9}
.section{position:relative}
.about-section,.faq-section{background:linear-gradient(150deg,#ffffff,#f5faf6)}
.daur.ulang-section,#produk{background:linear-gradient(155deg,#eff7f0 0%,#f8fbf8 50%,#eaf4ed 100%)}
.material-card{border:1px solid #d8e8dd;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 9px 26px #214d3010;transition:transform .25s ease,box-shadow .25s ease}
.material-card:hover{transform:translateY(-6px);box-shadow:0 19px 42px #214d3026}
.material-art{background:linear-gradient(135deg,#edf5ed,#dcece1)}
#produk .material-art{background:linear-gradient(145deg,#edf6ef,#dcefe3)}
.operations-section{background:linear-gradient(125deg,#e5f1e8,#f6faf6 48%,#eaf4ed)}
.operations-steps article{border-radius:14px;background:linear-gradient(155deg,#ffffff,#f7fbf8);box-shadow:0 7px 20px #1a4c3110;transition:transform .2s}
.operations-steps article:hover{transform:translateY(-4px)}
.location-section{background:linear-gradient(125deg,#f8fbf7,#e8f2e9)}
.location-map{border-radius:16px;overflow:hidden;box-shadow:0 18px 42px #1c462020}
.comparison-section{background:linear-gradient(160deg,#fbfdfb,#ecf5ee)}
.comparison-scroll{border-radius:14px;overflow:auto;border:1px solid #d7e6da;box-shadow:0 10px 35px #1b4e3112}
.comparison-table thead th{background:linear-gradient(125deg,#173a2e,#285a43)}
.advantage-section{background:linear-gradient(140deg,#fff,#f2f8f3)}
.advantage-item{transition:background .2s,padding .2s}
.advantage-item:hover{background:#eaf5ed90}
.quality-section{background:linear-gradient(115deg,#102e27ee,#1d5344dc),url('/assets/industrial-process.svg') center/cover}
.contact-section{background:radial-gradient(ellipse at 95% 8%,#3b826546,transparent 55%),linear-gradient(130deg,#102e25 0%,#194a39 60%,#113629 100%)}
.inquiry-form{background:linear-gradient(155deg,#245543,#183b30);border:1px solid #527b64;border-radius:16px;box-shadow:0 25px 65px #051a1530}
.inquiry-form input,.inquiry-form textarea,.inquiry-form select{border-radius:8px}
.faq-list details{transition:background .2s,padding .2s;border-color:#d5e7d9}
.faq-list details[open]{background:linear-gradient(100deg,#eaf5ed9c,#ffffff);border-radius:10px;padding-inline:16px}
.footer{background:linear-gradient(100deg,#0a231b,#143b2c)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #78b996;outline-offset:3px}
@media(max-width:800px){.hero h1{letter-spacing:-1.6px}.hero-information{border-radius:13px}.material-card,.inquiry-form{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.material-card,.hero-information,.operations-steps article,.btn{transition:none!important}}

/* Why ACC: full-bleed section background, contained two-column content. */
.advantage-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 92px 0 100px;
  background: linear-gradient(118deg, #ffffff 0%, #f5faf6 52%, #eaf4ee 100%);
  overflow: hidden;
}
.advantage-section::before { content: none; }
.advantage-inner { position: relative; z-index: 1; }
.advantage-section .section-kicker { margin: 0 0 25px; }
.advantage-section .advantage-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(35px, 5vw, 96px);
  align-items: start;
}
.advantage-section .advantage-layout > div { min-width: 0; }
.advantage-section h2 { margin: 0 0 26px; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.15; }
.advantage-section .advantage-layout > div > p { margin: 0 0 20px; max-width: 520px; font-size: 15px; line-height: 1.85; }
.advantage-section .btn-dark { margin-top: 10px; }
.advantage-section .advantage-list { border-top: 1px solid #d2e2d8; }
.advantage-section .advantage-item { padding: 25px 10px; border-top: 0; border-bottom: 1px solid #d2e2d8; }
@media (max-width: 800px) {
  .advantage-section { padding: 68px 0 75px; }
  .advantage-section .advantage-layout { grid-template-columns: minmax(0,1fr); gap: 38px; }
  .advantage-section h2 { font-size: clamp(32px, 7vw, 44px); }
}

/* FAQ -> Material Guide: close the oversized inter-section whitespace.
   Both blocks share one soft gradient; no empty decorative spacer. */
.faq-section {
  padding-top: clamp(64px, 6vw, 88px);
  padding-bottom: 34px;
  background: linear-gradient(160deg, #ffffff 0%, #f8fcf9 62%, #f1f8f3 100%);
}
.faq-section .section-kicker { margin-bottom: 20px; }
.faq-section h2 { margin-bottom: 35px; }
.faq-section .faq-list details { padding-top: 16px; padding-bottom: 16px; }
.faq-section + .comparison-section {
  padding-top: 32px;
  padding-bottom: 80px;
  background: linear-gradient(155deg, #f1f8f3 0%, #eff8f1 48%, #e7f2ea 100%);
}
.faq-section + .comparison-section .section-kicker { margin-bottom: 22px; }
.faq-section + .comparison-section .comparison-intro { margin-bottom: 26px; }
@media (max-width: 800px) {
  .faq-section { padding-top: 60px; padding-bottom: 22px; }
  .faq-section h2 { margin-bottom: 22px; }
  .faq-section + .comparison-section { padding-top: 28px; padding-bottom: 60px; }
}
@media (max-width: 540px) {
  .faq-section { padding-top: 48px; padding-bottom: 18px; }
  .faq-section + .comparison-section { padding-top: 22px; padding-bottom: 52px; }
}