:root{--deep:#073568;--navy:#00366f;--blue:#003eab;--bright:#0b58c8;--lime:#9bd624;--ink:#202428;--pale:#e3f3fd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eaf1f7;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.26}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.page{width:100%;max-width:1600px;margin:auto;background:#fff;box-shadow:0 7px 45px #12351a;overflow:clip}
.brandbar{height:80px;display:grid;grid-template-columns:22% 1fr 22%;align-items:center;position:relative;background:linear-gradient(110deg,#fff 0%,#fff 13%,#1d9de9 17%,#55baf5 29%,#e7f4fc 44%,#fff0e9 61%,#55b0e9 80%,#fff 88%);text-align:center;isolation:isolate}
.brandbar:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(152deg,transparent 0 90px,#ffffff34 92px 94px,transparent 96px 170px);z-index:-1}.brand-wrap{height:100%;display:flex;align-items:center;justify-content:flex-start;padding-left:17px;background:#fff;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}.brand-wrap.right{justify-content:flex-end;padding:0 19px 0 0;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}.brand-wrap img{display:block;max-width:82%;height:auto;object-fit:contain}.brand-heading{min-width:0}.brandheading{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;font-size:clamp(12px,1.21vw,19px);font-weight:900;line-height:1.11;letter-spacing:-.6px;color:#111;text-shadow:0 0 1px #777}
.hero{position:relative;min-height:322px;isolation:isolate;overflow:hidden;background:#002d63}.hero-oil,.hero-reservoir,.hero-panel{position:absolute;inset:0}.hero-oil{z-index:-2;right:auto;width:39%;background:url('assets/hero-left.webp') center center/cover no-repeat}.hero-reservoir{z-index:-2;left:auto;width:31%;background:url('assets/hero-right.webp') center center/cover no-repeat}.hero-panel{z-index:-1;left:18%;right:24%;background:linear-gradient(110deg,#03356c 4%,#004885 68%,#02437b 100%);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 45px #00192e}.hero-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#0082d8aa 0%,transparent 19%,#001e5e 65%,#009ad6aa);opacity:.4}.hero-copy{width:51%;margin-left:32.1%;padding:20px 0 10px;max-width:820px;color:white;text-shadow:0 2px 3px #001e4770}.hero h1{margin:0 0 7px;font-size:clamp(28px,3.96vw,61px);font-style:italic;font-weight:900;line-height:.86;letter-spacing:-1.6px;white-space:nowrap}.product-name{display:inline-block;margin-top:6px}.product-name>span{color:#a8d51c}.hero-subtitle{font-weight:800;font-style:italic;letter-spacing:-.1px;font-size:clamp(11px,1.52vw,23px);margin:11px 0 13px;white-space:nowrap}.hero-desc{max-width:635px;border-top:2px solid #e5f3fb;padding-top:12px;font-size:clamp(12px,1.18vw,18px);line-height:1.28;margin:0}
main{padding-bottom:8px}.main-grid{display:grid;grid-template-columns:32.1fr 66.9fr;gap:10px;margin:8px 19px 0}.right-top{display:grid;grid-template-rows:minmax(170px,auto) minmax(211px,auto);gap:7px;min-width:0}.info-card{min-width:0;position:relative;border-radius:12px;overflow:hidden}.section-heading{display:flex;align-items:center;gap:16px;min-height:61px;position:relative;z-index:1}.section-heading h2{font-size:clamp(15px,1.34vw,21px);font-weight:900;line-height:1.07;margin:0;color:#0641a2;font-style:italic;letter-spacing:-.45px}.section-number{flex:0 0 63px;width:63px;height:63px;border-radius:50%;display:grid;place-items:center;color:white;background:linear-gradient(145deg,#001d38,#095dc4 75%,#072a69);font-size:41px;font-weight:900;line-height:1}
.background-card{background:linear-gradient(110deg,#e2f2fc 0%,#f3f9fd 66%,#e2f1fa 100%);padding:0 13px 8px 0}.background-card .section-heading{margin-bottom:4px}.background-card .section-heading h2{font-size:clamp(15px,1.30vw,21px)}.challenge-items{display:grid;gap:17px;padding:1px 0 8px 22px}.challenge{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px}.challenge img{width:82px;height:82px;object-fit:contain}.challenge p{font-size:clamp(12px,1.095vw,16.8px);line-height:1.21;margin:0}
.solution-card{background:linear-gradient(115deg,#f1f8fd,#d9edf9 58%,#eef7f2);display:grid;grid-template-columns:59% 41%;padding:0 16px 9px 0}.solution-intro .section-heading{margin-bottom:4px}.solution-intro>p{padding-left:83px;padding-right:16px;font-size:clamp(12px,1.21vw,18px);line-height:1.2;margin:0}.solution-checks{border-left:1px solid #7dc0ec;list-style:none;margin:15px 0 3px;padding:0 10px 0 35px;display:flex;justify-content:center;flex-direction:column;gap:9px}.solution-checks li{display:flex;gap:18px;align-items:flex-start;font-size:clamp(12px,1.07vw,16.4px);line-height:1.24}.solution-checks small{display:block;font-size:inherit}.check{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:white;background:linear-gradient(125deg,#408521,#9aca31);font-size:28px;font-weight:900;line-height:1;box-shadow:0 2px 2px #125726}
.concept-card{background:linear-gradient(115deg,#f0f9ff,#ddecf8);padding:0 8px 9px 0}.concept-card .section-heading{min-height:39px;gap:19px}.concept-card .section-number{position:relative;top:5px}.concept-card .section-heading h2{font-style:normal;font-size:clamp(15px,1.38vw,21px)}.concept-grid{display:grid;grid-template-columns:minmax(0,2.19fr) minmax(0,.91fr) minmax(0,1.13fr);gap:9px;margin:0 0 0 5px;align-items:stretch;min-height:165px}.diagram{border:0;min-width:0;border-radius:9px;background:white;padding:3px 4px 2px;cursor:zoom-in;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:box-shadow .18s,transform .18s;font-family:inherit;color:#111}.diagram:hover,.diagram:focus-visible{box-shadow:0 0 0 3px #258ade70;transform:translateY(-1px)}.diagram img{width:100%;height:auto;object-fit:contain;display:block}.diagram-primary img{max-width:500px}.diagram>span{font-size:clamp(10px,.89vw,13.5px);font-weight:700;line-height:1.13;white-space:nowrap}.caption-normal{font-weight:400}.diagram-pair{min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:8px}.diagram-pair .diagram img{max-height:61px;flex:1;object-fit:contain}.specs{background:#e5f2ff;border-radius:10px;padding:14px 10px;margin:0;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}.specs>div{display:grid;grid-template-columns:51% 1fr;gap:5px;align-items:start;font-size:clamp(10px,.96vw,14.5px);line-height:1.22}.specs dt{font-weight:800;color:#073a87}.specs dd{margin:0}
.bottom-grid{margin:8px 19px 0;display:grid;grid-template-columns:1.28fr 1.04fr .51fr;gap:10px}.advantages-card{background:linear-gradient(110deg,#eef9ec,#e2f4e3 60%,#f3faee)}.value-card{background:linear-gradient(110deg,#e7f5ff,#d6e9fa 60%,#e2f3ff)}.advantages-card .section-heading,.value-card .section-heading{min-height:46px;gap:17px;background:#ffffff36}.advantages-card .section-heading h2{font-style:normal;color:#003d0d}.value-card .section-heading h2{font-style:normal;color:#0045be}.green-number{background:linear-gradient(145deg,#003a04,#006211 62%,#002a00)}.bright-number{background:linear-gradient(135deg,#10419c,#1266e8 72%,#05348c)}.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 7px 10px}.feature{min-width:0;padding:0 10px 0;border-right:1px solid #8ed5ee}.feature:last-child{border-right:0}.feature img{display:block;margin:0 auto 3px;object-fit:contain;height:47px;max-width:100%}.feature h3{color:#0043b3;font-size:clamp(10px,1vw,15.2px);line-height:1.02;margin:1px 0 3px;font-weight:900}.feature p{font-size:clamp(10px,.95vw,14.4px);line-height:1.17;margin:0}.value-card .feature{padding:0 7px}.value-card .feature img{height:47px}
.more-card{background:linear-gradient(140deg,#fff1e5,#fff7ee);display:flex;flex-direction:column;align-items:stretch}.more-heading{display:flex;align-items:center;gap:10px;min-height:47px}.more-heading h2{color:#fa180a;font-size:clamp(16px,1.46vw,22px);line-height:1;margin:0;text-align:center;flex:1}.people-icon{width:57px;height:57px;border-radius:50%;display:grid;place-items:center;color:white;background:linear-gradient(135deg,#ff3c04,#ff9d2d);flex:0 0 57px}.people-icon svg{height:31px;width:31px}.more-content{flex:1;display:grid;grid-template-columns:34% 66%;align-items:center;padding:0 7px}.scan-indicator{display:flex;align-items:center;flex-direction:column;color:#ff0b0b;font-size:clamp(17px,1.8vw,28px);line-height:.93;font-style:italic;font-weight:900;text-align:center;transform:rotate(-7deg)}.scan-indicator svg{width:90%;height:54px}.qr-link{display:block;background:white;margin:auto;max-width:100%;padding:4px;border-radius:3px;transition:transform .18s,box-shadow .18s}.qr-link:hover,.qr-link:focus-visible{transform:scale(1.035);box-shadow:0 0 0 3px #ff7b5b}.qr-link img{display:block;width:min(100%,160px);height:auto;image-rendering:auto}.more-link{font-size:12px;display:none;text-decoration:none;text-align:center;color:#ba2a0c;font-weight:700;padding:5px 8px}.more-link:hover{text-decoration:underline}
.footer{display:flex;justify-content:space-between;gap:10px;padding:15px 22px 18px;color:#66829a;font-size:11px}.footer a{color:#2854a0;text-decoration:none}.footer a:hover{text-decoration:underline}
.lightbox{position:fixed;border:0;border-radius:18px;max-width:min(94vw,1120px);max-height:92dvh;background:#fff;padding:48px 20px 18px;box-shadow:0 15px 85px #0007;text-align:center}.lightbox::backdrop{background:#001e44dc;backdrop-filter:blur(5px)}.lightbox img{max-width:100%;max-height:70dvh;object-fit:contain}.lightbox p{font-weight:700;margin:8px 0 0}.close-dialog{position:absolute;top:3px;right:10px;font-size:35px;border:0;line-height:1;background:transparent;color:#194f89;cursor:pointer}
@media(max-width:1220px){.brandheading{letter-spacing:-.3px}.hero-copy{margin-left:31%;width:56%;padding-top:28px}.hero h1{font-size:clamp(29px,4vw,52px)}.hero-subtitle{white-space:normal}.section-number{flex-basis:53px;width:53px;height:53px;font-size:35px}.section-heading{gap:12px;min-height:56px}.challenge{grid-template-columns:76px 1fr;gap:7px}.challenge img{width:74px;height:74px}.challenge-items{gap:14px;padding-left:13px}.solution-intro>p{padding-left:65px}.solution-checks{padding-left:16px}.solution-checks li{gap:8px}.check{flex-basis:31px;width:31px;height:31px;font-size:23px}.concept-grid{gap:5px}.specs{padding:8px 6px;gap:10px}.feature{padding:0 5px}.value-card .feature{padding:0 5px}.people-icon{width:45px;height:45px;flex-basis:45px}.more-content{grid-template-columns:30% 70%}}
@media(max-width:960px){.brandbar{height:72px}.brandheading{font-size:clamp(11px,1.6vw,15px)}.hero{min-height:335px}.hero-copy{margin-left:27%;width:59%;padding:40px 0 14px}.hero h1{font-size:clamp(28px,4.15vw,42px)}.hero-panel{left:15%;right:20%}.hero-reservoir{width:29%}.main-grid{grid-template-columns:1fr;gap:8px}.background-card{padding-bottom:10px}.challenge-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 14px 10px}.challenge{display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}.challenge img{height:72px;width:72px}.challenge p{font-size:14px}.right-top{grid-template-rows:auto auto}.solution-card{min-height:180px}.solution-intro>p{font-size:15px}.solution-checks li{font-size:14px}.concept-grid{min-height:180px}.specs>div{font-size:13px}.bottom-grid{grid-template-columns:1fr 1fr}.more-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr 1fr;min-height:120px;align-items:center}.more-content{max-width:390px;justify-self:center;display:flex;gap:20px;padding:4px}.scan-indicator{font-size:24px}.qr-link img{width:96px}.more-link{display:block}}
@media(max-width:720px){.brandbar{height:auto;min-height:102px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:48px 54px;background:#e3f4fb}.brand-wrap{clip-path:none;padding-left:12px;max-height:48px}.brand-wrap.right{clip-path:none;padding-right:12px}.brand-wrap img{max-height:38px;width:auto;max-width:80%}.brandheading{grid-column:1/-1;grid-row:2;font-size:clamp(11px,2.7vw,15px);line-height:1.13;background:linear-gradient(90deg,#ccecff,#ffffff,#d7ebff);height:54px;letter-spacing:0}.hero{min-height:552px;background:#00346e}.hero-oil{width:100%;height:50%;background-position:center 44%;opacity:.7}.hero-oil:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#002d63,transparent)}.hero-panel{inset:0;clip-path:none;background:linear-gradient(180deg,#00367044,#073b72dd 34%,#003366 64%,#003363 100%)}.hero-copy{width:auto;max-width:none;margin:0;padding:35px 22px 0;text-align:left}.hero h1{font-size:clamp(29px,7.45vw,53px);line-height:.93;letter-spacing:-1px}.hero-subtitle{font-size:clamp(13px,3.4vw,20px);line-height:1.13;margin:13px 0}.hero-desc{font-size:clamp(13px,3vw,17px);max-width:100%;padding-top:12px}.hero-reservoir{z-index:0;width:100%;height:185px;top:auto;bottom:0;background-size:cover;background-position:center 40%;mask-image:linear-gradient(180deg,transparent,#000 20%)}.main-grid,.bottom-grid{margin:9px 10px 0}.section-heading h2{font-size:18px}.section-heading{min-height:55px}.section-number{flex-basis:50px;width:50px;height:50px;font-size:34px}.background-card .section-heading{padding-right:8px}.challenge-items{grid-template-columns:1fr;gap:13px;padding:0 12px 14px}.challenge{flex-direction:row;text-align:left;gap:9px}.challenge img{width:70px;height:70px;flex:0 0 70px}.challenge p{font-size:14px}.solution-card{display:block;padding:0 0 15px}.solution-intro>p{padding:3px 16px 12px 62px;font-size:15px}.solution-checks{margin:0 12px 0 62px;border-left:0;border-top:1px solid #7dc0ec;padding:13px 0 0;gap:12px}.solution-checks li{font-size:15px;align-items:center}.concept-card{padding-bottom:12px}.concept-card .section-heading{min-height:56px}.concept-grid{grid-template-columns:1fr 1fr;margin:0 9px;gap:9px}.diagram-primary{grid-column:1/-1}.diagram-primary img{width:100%;height:auto;max-height:200px}.diagram-pair{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:9px}.diagram-pair .diagram{min-height:125px}.diagram-pair .diagram img{max-height:88px}.diagram>span{font-size:12px}.specs{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px}.specs>div{display:flex;flex-direction:column;gap:3px;font-size:13px}.bottom-grid{grid-template-columns:1fr}.advantages-card,.value-card{padding-bottom:10px}.features{padding:8px;gap:10px;grid-template-columns:1fr 1fr}.feature{border:0;border-right:0;border-bottom:1px solid #afe1e8;padding:3px 11px 11px}.feature:nth-last-child(-n+2){border-bottom:0}.feature h3{font-size:15px;line-height:1.08}.feature p{font-size:13px;line-height:1.25}.feature img,.value-card .feature img{height:48px}.more-card{grid-column:auto;display:flex;min-height:unset;padding-bottom:10px}.more-heading{justify-content:flex-start;padding:0 14px}.more-heading h2{flex:0 0 auto;font-size:23px}.more-content{display:flex;justify-content:center;gap:35px;max-width:none}.scan-indicator{font-size:29px}.qr-link img{width:155px}.more-link{font-size:14px;padding:9px}.footer{align-items:center;flex-direction:column;text-align:center;font-size:11px}}
@media(max-width:385px){.hero{min-height:570px}.hero h1{font-size:clamp(28px,7.35vw,34px)}.hero-copy{padding-left:14px;padding-right:14px}.section-heading h2{font-size:16px}.challenge p{font-size:13.5px}.solution-intro>p{padding-left:16px}.solution-checks{margin-left:16px}.feature{padding-left:6px;padding-right:6px}.specs{gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.diagram,.qr-link{transition:none}}

/* Mode sematan: tanpa latar atau bayangan ekstra dari halaman induk. */
html.iframe-mode,html.iframe-mode body{margin:0;padding:0;background:#fff}
html.iframe-mode .page{box-shadow:none;max-width:1600px}
html.iframe-mode .footer{display:none}