:root{--navy:#063369;--blue:#0553b5;--vivid:#004fd3;--lime:#b9ee46;--text:#111926}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin}
body{padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:transparent;line-height:1.28}
button{font:inherit}img{max-width:100%} .page{max-width:1536px;margin:0 auto;background:#fff;overflow:hidden}
.topbar{height:78px;background:linear-gradient(111deg,#f7fbff 0%,#fff 13%,#1580e7 16%,#42b4fc 27%,#e8f6ff 46%,#fbebe5 60%,#268deb 84%,#fff 87%);display:grid;grid-template-columns:22% 56% 22%;align-items:center;text-align:center;position:relative;overflow:hidden}
.topbar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(148deg,transparent 0 126px,#ffffff3a 127px 129px,transparent 130px 205px)}
.logo-block{z-index:1;background:#fff;height:100%;display:flex;align-items:center;padding:4px 15px;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}.logo-block.right{justify-content:flex-end;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}.logo-block img{width:min(100%,182px);height:auto;max-height:65px;object-fit:contain}.organization{z-index:1;display:flex;flex-direction:column;font-size:clamp(11px,1.13vw,18px);line-height:1.16;font-weight:900;color:#0b0b0b;letter-spacing:-.4px}
.hero{height:328px;background:#073364;overflow:hidden;position:relative;isolation:isolate}.hero-photo{position:absolute;inset:0;background-position:center;background-size:cover;z-index:-2}.hero-left{right:auto;width:40%;background-image:url('assets/hero-pipeline.webp')}.hero-right{left:auto;width:39%;background-image:url('assets/hero-rig.webp')}.hero-ribbon{z-index:-1;position:absolute;top:0;bottom:0;left:14%;right:23%;background:linear-gradient(115deg,#0085e7 0 9%,#003a76 9% 14%,#012957 25%,#073e80 80%,#0b4076 91%,#ffffff55 100%);clip-path:polygon(28% 0,100% 0,78% 100%,0 100%)}.hero-content{position:relative;color:white;margin-left:27%;width:37%;padding:20px 0 12px 10px;text-shadow:0 1px 2px #081b39}.hero h1{font-weight:950;font-style:italic;letter-spacing:-2px;font-size:clamp(38px,4.6vw,73px);line-height:.80;white-space:nowrap;margin:0}.hero h1 span{display:inline-block;color:#bbf14c;font-size:.82em;line-height:1.15}.hero-subtitle{font-weight:900;font-size:clamp(18px,1.8vw,29px);font-style:italic;white-space:nowrap;line-height:1.1;margin:8px 0}.hero-description{font-size:clamp(13px,1.15vw,19px);border-top:2px solid #f0faff;padding-top:9px;line-height:1.2;margin:0;max-width:545px}.hero-label{color:#081026;position:absolute;right:8%;bottom:2px;font-size:11px;text-shadow:0 0 4px white}
main{padding:6px 18px 0}.upper-grid{display:grid;grid-template-columns:31.6fr 68.4fr;gap:8px}.upper-right{display:grid;grid-template-rows:auto auto;gap:6px;min-width:0}.panel{position:relative;min-width:0;border-radius:10px;overflow:hidden}.section-heading{display:flex;align-items:center;gap:16px;min-height:64px}.section-heading h2{margin:0;color:#003fbe;font-style:italic;font-weight:900;line-height:1.06;font-size:clamp(15px,1.4vw,23px)}.number{color:white;border-radius:50%;flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;font-weight:900;font-size:41px;line-height:1;background:linear-gradient(145deg,#002340,#0755aa)}.number.green{background:linear-gradient(140deg,#002a0a,#005517)}.number.vivid{background:linear-gradient(125deg,#00317e,#0064f5)}
.challenge-panel{background:linear-gradient(130deg,#e1f3fd,#ecf9ff 66%,#d9f0ff);padding:0 9px 8px 0}.challenge-panel .section-heading{margin-bottom:1px}.challenge-list{padding:2px 6px 10px 20px;display:flex;flex-direction:column;gap:12px}.challenge-item{display:grid;grid-template-columns:106px minmax(0,1fr);align-items:center;gap:16px}.challenge-item img{width:92px;height:86px;object-fit:contain}.challenge-item p{margin:0;font-size:clamp(13px,1.1vw,18px);line-height:1.24}
.solution-panel{display:grid;grid-template-columns:57% 43%;background:linear-gradient(112deg,#eaf8fc,#dff7f4 48%,#eff9f3);padding:0 15px 8px 0;min-height:142px}.solution-text>p{font-size:clamp(13px,1.05vw,18px);line-height:1.2;margin:0;padding:0 10px 0 80px}.solution-checks{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:7px;border-left:1px solid #83c7ff;margin:11px 0 0;padding:0 0 0 27px}.solution-checks li{display:flex;align-items:center;gap:14px;font-size:clamp(12px,1.04vw,17px);line-height:1.17}.check{flex:0 0 39px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;color:white;font-size:27px;font-weight:900;background:linear-gradient(135deg,#5f8d30,#82ab39)}
.concept-panel{background:linear-gradient(111deg,#e3f6ff,#dceffc 65%,#e4f4ff);padding:0 9px 6px 0}.concept-panel .section-heading{min-height:41px}.concept-panel .number{margin-top:4px;align-self:flex-start}.concept-panel .section-heading h2{font-size:clamp(15px,1.36vw,21px)}.concept-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(205px,1fr);gap:9px;padding:0 0 0 10px;align-items:stretch}.diagram{background:#fff;min-width:0;border:0;border-radius:8px;cursor:zoom-in;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px;transition:transform .15s,box-shadow .15s}.diagram:hover,.diagram:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 3px #0f79d54a}.diagram img{width:100%;height:155px;object-fit:contain}.diagram span{font-size:13px;font-weight:700;white-space:nowrap}.diagram small{color:#1472d4}.specifications{min-width:0;padding:9px 12px;background:#e6f3ff;border-radius:9px;display:flex;flex-direction:column;gap:0;margin:0}.specifications>div{display:grid;grid-template-columns:55% 45%;gap:4px;align-items:baseline;border-bottom:1px solid #bedfff;padding:4px 0;font-size:clamp(11px,.93vw,14px);line-height:1.15}.specifications>div:last-child{border:0}.specifications dt{font-weight:800;color:#003bb0}.specifications dd{margin:0;color:#111}.concept-note{background:#c8e6fd;margin:3px 0 0 0;text-align:center;font-size:12px;border-radius:4px;padding:2px}
.bottom-grid{display:grid;grid-template-columns:1.26fr .98fr .58fr;gap:8px;margin:7px 0 0}.advantages-panel{background:linear-gradient(120deg,#f0fbeb,#e4f7e8 70%,#e8f6eb)}.value-panel{background:linear-gradient(125deg,#e3f6ff,#d6ecff)}.section-heading.compact{min-height:43px;gap:17px}.section-heading.compact .number{align-self:flex-start}.section-heading.compact h2{font-style:normal}.advantages-panel .section-heading h2{color:#003a15}.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 6px 12px}.benefit{padding:0 8px 0 10px;min-width:0;border-right:1px solid #9fd9f6}.benefit:last-child{border:0}.benefit img{height:54px;width:auto;max-width:95%;object-fit:contain;margin:0 auto 3px;display:block}.benefit h3{color:#003db8;font-size:clamp(11px,.93vw,15px);line-height:1.05;font-weight:900;margin:0 0 4px}.benefit p{font-size:clamp(11px,.88vw,14px);line-height:1.15;margin:0}.more-panel{background:linear-gradient(120deg,#fff1e2,#fff6e7);min-height:203px;overflow:hidden}.more-heading{display:flex;align-items:center;gap:9px}.more-heading img{height:58px;width:58px;object-fit:contain;flex:0 0 58px}.more-heading h2{font-size:clamp(14px,1.17vw,19px);color:#f41212;font-weight:900;line-height:1.1;margin:0}.more-panel p{font-size:clamp(11px,.95vw,15px);margin:1px 8px 64px 75px;line-height:1.25}.more-pipes{position:absolute;width:100%;bottom:0;left:0;height:70px;object-fit:cover;object-position:center bottom}
.collaboration{margin:4px 0 0;min-height:41px;display:flex;align-items:center;justify-content:center;text-align:center;color:#001477;font-size:clamp(16px,1.37vw,22px);font-weight:900;background:linear-gradient(95deg,#0479e9,#b5e3ff 33%,#fff 50%,#a7dcff 70%,#0879ec);border-top:2px solid #348cff}.collaboration span{background:#ffffff90;padding:1px 14px}
.lightbox{position:fixed;inset:0;margin:auto;padding:45px 18px 17px;border:0;border-radius:15px;background:#fff;box-shadow:0 15px 80px #0007;max-width:min(95vw,1150px);max-height:92dvh;text-align:center}.lightbox::backdrop{background:#001d42dc;backdrop-filter:blur(4px)}.lightbox img{max-width:100%;max-height:75dvh;object-fit:contain}.lightbox p{margin:8px 0 0;font-weight:bold}.close{position:absolute;top:3px;right:10px;color:#034c95;border:0;background:transparent;cursor:pointer;font-size:36px;line-height:1}
@media(max-width:1200px){.hero-content{margin-left:26%;width:43%}.hero h1{font-size:clamp(36px,4.3vw,57px)}.hero-ribbon{right:16%}.challenge-item{grid-template-columns:77px 1fr;gap:7px}.challenge-item img{width:73px;height:73px}.challenge-list{padding-left:12px;gap:17px}.number{width:54px;height:54px;flex-basis:54px;font-size:36px}.section-heading{gap:11px}.solution-text>p{padding-left:63px}.solution-checks{padding-left:15px}.solution-checks li{gap:8px}.check{width:30px;height:30px;flex-basis:30px;font-size:23px}.concept-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(175px,.9fr)}.specifications{padding:6px}.specifications>div{font-size:11px}.benefit{padding:0 5px}.more-panel p{margin-left:45px}.more-heading img{width:43px;height:43px;flex-basis:43px}}
@media(max-width:980px){.topbar{height:70px}.hero{height:316px}.hero-content{margin-left:26%;width:50%;padding-top:28px}.hero h1{font-size:clamp(37px,5.15vw,53px)}.hero-subtitle{white-space:normal}.hero-description{font-size:14px}.hero-ribbon{left:11%;right:12%}.upper-grid{grid-template-columns:1fr}.challenge-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:1px 15px 14px}.challenge-item{display:flex;flex-direction:column;gap:4px;text-align:center}.challenge-item p{font-size:14px}.solution-text>p{font-size:15px}.solution-checks li{font-size:14px}.concept-body{grid-template-columns:1fr 1fr minmax(180px,.92fr)}.specifications>div{font-size:12px}.bottom-grid{grid-template-columns:1fr 1fr}.more-panel{grid-column:1/-1;min-height:105px}.more-panel p{margin:0 25% 4px 60px}.more-pipes{width:27%;height:95%;left:auto;right:0;object-fit:cover}.more-heading img{margin-left:3px}}
@media(max-width:700px){.topbar{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:48px 58px;background:#deefff}.logo-block{clip-path:none;padding:2px 12px}.logo-block.right{clip-path:none}.logo-block img{width:auto;max-height:45px;max-width:75%}.organization{grid-column:1/-1;grid-row:2;font-size:clamp(10px,2.65vw,15px);line-height:1.17;background:linear-gradient(90deg,#5db3f8,#ebf7fe,#87cdff);align-self:stretch;justify-content:center}.hero{height:auto;min-height:333px;padding:0 0 24px;background:linear-gradient(115deg,#033c85,#002b5e)}.hero-left{width:49%;opacity:.50}.hero-right{width:48%;opacity:.43}.hero-ribbon{inset:0;clip-path:none;background:linear-gradient(90deg,#00234ca8,#002a63df 28%,#002f62ed 68%,#003d85ab)}.hero-content{margin:0 auto;width:92%;padding:35px 4px 10px;text-align:center}.hero h1{font-size:clamp(39px,9.1vw,62px);letter-spacing:-1.3px}.hero-subtitle{font-size:clamp(16px,4.2vw,25px);margin:12px 0}.hero-description{font-size:clamp(13px,3vw,17px);margin:0 auto;max-width:530px}.hero-label{color:#c9edfc;right:12px;bottom:5px}.upper-grid{gap:8px}.section-heading{min-height:57px;gap:11px}.section-heading h2{font-size:clamp(16px,3.5vw,22px)}.challenge-list{grid-template-columns:1fr;gap:9px;padding:0 12px 13px}.challenge-item{display:grid;grid-template-columns:67px minmax(0,1fr);text-align:left;gap:11px}.challenge-item img{height:64px;width:64px}.challenge-item p{font-size:14px}.solution-panel{grid-template-columns:1fr;padding:0 9px 13px 0}.solution-text>p{padding:2px 10px 6px 64px;font-size:14px}.solution-checks{border-left:0;border-top:1px solid #91ccf5;flex-direction:column;margin:7px 10px 0 64px;padding:10px 0 0;gap:8px}.solution-checks li{font-size:14px}.concept-body{grid-template-columns:1fr 1fr;gap:8px;padding-left:8px}.diagram img{height:135px}.diagram span{font-size:11px;white-space:normal}.specifications{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:9px 12px}.specifications>div{font-size:13px}.concept-note{font-size:11px}.bottom-grid{grid-template-columns:1fr}.benefits{padding:3px 7px 13px}.benefit h3{font-size:clamp(12px,2.55vw,15px)}.benefit p{font-size:clamp(11px,2.5vw,14px)}.benefit img{height:45px}.more-panel{grid-column:auto}.more-panel p{margin:2px 28% 45px 58px;font-size:13px}.more-pipes{width:100%;height:42px;right:0;bottom:0}.collaboration{min-height:40px;font-size:clamp(14px,3.1vw,20px)}}
@media(max-width:440px){main{padding:5px 8px 0}.hero h1{font-size:clamp(35px,9.4vw,43px)}.section-heading h2{font-size:16px}.number{width:48px;height:48px;flex-basis:48px;font-size:32px}.benefits{grid-template-columns:1fr 1fr;row-gap:12px}.benefit:nth-child(2){border-right:0}.benefit{padding:0 8px}.benefit img{height:47px}.solution-text>p{padding-left:58px}.solution-checks{margin-left:58px}.specifications>div{font-size:11px}.more-panel p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Distribute three challenges evenly to fill the poster panel without blank tail. */
.challenge-panel{display:flex;flex-direction:column}
.challenge-panel .challenge-list{flex:1;justify-content:space-evenly}

/* Geser judul Flow Loop ke kanan */
@media (min-width: 701px) {
  .hero h1 {
    transform: translateX(clamp(45px, 6vw, 90px));
  }
}