.page-demo .premium-hero,
.page-demo .premium-hero .hero-inner{min-height:clamp(240px,18vw,280px)}
.page-demo .hero-inner{padding:26px 40px 34px}
.page-demo .hero-copy{width:44%;max-width:560px}
.page-demo .hero-copy .eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:40px;background:#e2f4ea;color:var(--deep);font-size:13px;letter-spacing:.06em}
.page-demo .hero-copy .eyebrow-pill .icon{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--green);color:#fff;stroke-width:2.2}
.page-demo .hero-copy h1{margin:14px 0 12px;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.045em}
.page-demo .hero-copy p{max-width:470px;font-size:clamp(14px,1.25vw,18px);line-height:1.45;color:var(--ink)}
.page-demo .hero-copy:after{content:"";display:block;width:min(170px,50%);height:18px;margin-top:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 18'%3E%3Cpath d='M0 9h70M100 9h70' stroke='%23d39b30' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M85 2l7 7-7 7-7-7z' fill='%23fff' stroke='%23d39b30' stroke-width='2.2'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.premium.page-demo .premium-hero .hero-art.hero-art{inset:auto 0 0 auto;width:min(38%,540px);height:auto;aspect-ratio:679/308;border-radius:0;transform:none;mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 14%);mask-composite:intersect;-webkit-mask-composite:source-in}
.page-demo .hero-art>img{left:0;top:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 30%}
.page-demo .hero-light{background:linear-gradient(90deg,var(--cream) 0,var(--cream) 38%,color-mix(in srgb,var(--cream) 70%,transparent) 46%,transparent 58%)}

.demo-page{width:min(1280px,calc(100% - 48px));padding-top:18px}
.demo-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
/* Jumlah produk dinamis: 1 penuh, ganjil ≥3 jadi 3 kolom dengan isi bertumpuk. */
.demo-products.is-single{grid-template-columns:1fr}
.demo-products.is-stack{grid-template-columns:repeat(3,minmax(0,1fr))}
.demo-products.is-stack .demo-product{grid-template-columns:1fr;grid-template-rows:auto auto auto}
.demo-product-art.art-custom>img{inset:0;width:100%;height:100%;transform:none;object-fit:var(--image-fit);object-position:var(--image-x) var(--image-y)}
@media(max-width:1100px){.demo-products.is-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-products.is-stack .demo-product:last-child:nth-child(odd){grid-column:1/-1}}
.demo-product{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:1fr auto;align-items:center;gap:12px 10px;padding:28px 26px 40px;border:4px solid #fff;border-radius:28px;box-shadow:0 14px 34px #163c3416}
.demo-product-green{background:linear-gradient(140deg,#eaf7ef,#f6fbf7 60%,#e6f4ec)}
.demo-product-gold{background:linear-gradient(140deg,#fdf6e3,#fffbf1 60%,#fbf0d6)}
.demo-product:after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:-1;pointer-events:none;background:var(--wave) 0 100%/100% 100% no-repeat}
.demo-product-green{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 56' preserveAspectRatio='none'%3E%3Cpath d='M0 10C120 20 200 56 330 56H0Z' fill='%238cc63f'/%3E%3Cpath d='M0 26C140 30 230 56 360 56H0Z' fill='%2329a35a'/%3E%3Cpath d='M380 56C470 50 540 36 600 20V56Z' fill='%23d3ecd9'/%3E%3C/svg%3E")}
.demo-product-gold{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 56' preserveAspectRatio='none'%3E%3Cpath d='M0 10C120 20 200 56 330 56H0Z' fill='%23f6d36b'/%3E%3Cpath d='M0 26C140 30 230 56 360 56H0Z' fill='%23e9b43a'/%3E%3Cpath d='M380 56C470 50 540 36 600 20V56Z' fill='%23f7dc8b'/%3E%3C/svg%3E")}
.demo-product-copy{min-width:0}
.demo-product-heading{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.demo-product-icon{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:18px;color:#fff;box-shadow:0 8px 18px #0b4a3424}
.demo-product-green .demo-product-icon{background:linear-gradient(140deg,#0b8c5c,#05664a)}
.demo-product-gold .demo-product-icon{background:linear-gradient(140deg,#0b8c5c,#05664a)}
.demo-product-icon .icon{width:38px;height:38px;stroke-width:1.9}
.demo-product-heading h2{margin:0;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.demo-product-copy p{margin:0;font-size:clamp(14px,1.2vw,16px);line-height:1.45;color:var(--ink)}
.demo-product-art{width:100%;border-radius:0;filter:drop-shadow(0 12px 16px #163c3420)}
.demo-product-btn{grid-column:1/-1;justify-self:center;gap:12px;padding:12px 30px;font-size:16px;box-shadow:0 8px 18px #0b4a3424}
.demo-product-btn .icon:first-child{width:24px;height:24px}
.premium .demo-products .demo-product-gold .btn-gold.demo-product-btn{border-color:#eab531;background:linear-gradient(115deg,#f6d25a,#eab531);color:#2d2306}

.demo-steps{position:relative;margin-top:44px;padding:44px 30px 26px;border:1px solid #eef0e8;border-radius:24px;background:#fff;box-shadow:0 10px 28px #163c3410}
.demo-steps-title{position:absolute;top:0;left:50%;display:inline-flex;align-items:center;gap:10px;margin:0;padding:9px 28px;border-radius:16px;background:linear-gradient(115deg,var(--green),var(--deep));color:#fff;font-size:clamp(18px,1.8vw,24px);white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 6px 16px #0b4a342e}
.demo-steps-title .icon{width:26px;height:26px}
.demo-steps ol{display:grid;grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}
.demo-steps li{position:relative;display:flex;align-items:center;gap:18px}
.demo-steps li+li:before{content:"";position:absolute;left:-28px;top:50%;width:12px;height:12px;border-top:3px solid var(--green);border-right:3px solid var(--green);transform:translateY(-50%) rotate(45deg)}
.demo-step-icon{display:grid;place-items:center;flex:none;width:76px;height:76px;border-radius:50%;background:#e6f5ec;color:var(--green)}
.demo-step-icon .icon{width:38px;height:38px}
.demo-steps b{display:block;font-size:clamp(16px,1.5vw,20px);color:var(--ink)}
.demo-steps small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:#2f5260}

.demo-benefits{margin-top:30px}
.demo-benefits-title{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 16px;font-size:clamp(20px,2vw,26px)}
.demo-benefits-title:before,.demo-benefits-title:after{content:"";width:min(90px,12vw);height:2px;background:var(--gold)}
.demo-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 12px;border:1px solid #eef0e8;border-radius:24px;background:#fff;box-shadow:0 10px 28px #163c3410}
.demo-benefit-grid article{display:flex;align-items:center;gap:14px;padding:4px 16px}
.demo-benefit-grid article+article{border-left:1px solid #e3e6dc}
.demo-benefit-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#e6f5ec;color:var(--green)}
.demo-benefit-icon .icon{width:30px;height:30px}
.demo-benefit-grid b{display:block;font-size:16px;color:var(--ink)}
.demo-benefit-grid small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#2f5260}

.demo-cta{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;width:min(1280px,calc(100% - 48px));margin:40px auto;padding:28px 34px 28px clamp(190px,22%,290px);border:3px solid #e9c66d;border-radius:30px;background:linear-gradient(105deg,#0a7a52,#005a45 60%,#0b6a4c);color:#fff;box-shadow:0 14px 34px #06483c26}
.demo-cta-art{position:absolute;left:0;bottom:0;width:clamp(170px,21%,280px);z-index:-1;border-radius:0;mask-image:linear-gradient(90deg,#000 65%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 65%,transparent)}
.demo-cta-copy{padding-right:30px;border-right:1px solid #ffffff4d}
.demo-cta-copy h2{margin:0 0 8px;font-size:clamp(24px,2.6vw,36px);line-height:1.1;color:#fff}
.demo-cta-copy h2 em{font-style:normal;color:#f6cd55}
.demo-cta-copy p{max-width:480px;margin:0;font-size:clamp(14px,1.2vw,17px);line-height:1.45;color:#e2f2ec}
.demo-cta .btn{gap:14px;padding:12px 26px;border-radius:40px;color:#063a33;text-align:left}
.demo-cta .btn b{display:block;font-size:15px}
.demo-cta .btn small{display:block;font-size:14px;font-weight:600}
.demo-footer{padding:20px 0;background:#073f3a;color:#e5f4ed;font-size:14px}
.demo-footer .wrap{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:center;gap:10px 30px}
.demo-footer .wrap>*+*{padding-left:30px;border-left:1px solid #ffffff40}
.demo-footer a{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.demo-footer .icon{width:22px;height:22px}

@media(max-width:1100px){
    .demo-product{grid-template-columns:1fr}
    .demo-product-art{max-width:420px;justify-self:center}
    .demo-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
    .demo-benefit-grid article:nth-child(3){border-left:0}
}
@media(max-width:900px){
    .page-demo .hero-inner{padding-inline:24px}
    .page-demo .hero-copy{width:50%}
    .demo-products{grid-template-columns:1fr}
    .demo-product{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
    .demo-steps ol{grid-template-columns:1fr;gap:18px}
    .demo-steps li+li:before{display:none}
    .demo-cta{grid-template-columns:1fr;padding:26px 24px}
    .demo-cta-art{opacity:.2;width:60%}
    .demo-cta-copy{padding-right:0;border-right:0}
    .demo-footer .wrap{grid-template-columns:1fr;justify-content:start}
    .demo-footer .wrap>*+*{padding-left:0;border-left:0}
}
@media(max-width:620px){
    .page-demo .premium-hero,.page-demo .premium-hero .hero-inner{min-height:0}
    .page-demo .premium-hero{display:flex;flex-direction:column-reverse}
    .page-demo .hero-inner{padding:26px 20px 10px}
    .page-demo .hero-copy{width:100%}
    .premium.page-demo .premium-hero .hero-art.hero-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:679/308;mask-image:linear-gradient(0deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(0deg,#000 85%,transparent);mask-composite:add;-webkit-mask-composite:source-over}
    .page-demo .hero-light{display:none}
    .demo-page,.demo-cta{width:calc(100% - 32px)}
    .demo-product{grid-template-columns:1fr;padding:22px 18px 40px}
    .demo-product-icon{width:56px;height:56px}
    .demo-product-icon .icon{width:30px;height:30px}
    .demo-product-btn{width:100%;justify-content:center}
    .demo-steps{padding:40px 18px 22px}
    .demo-step-icon{width:60px;height:60px}
    .demo-step-icon .icon{width:30px;height:30px}
    .demo-benefit-grid{grid-template-columns:1fr;padding:12px}
    .demo-benefit-grid article{padding:12px 6px}
    .demo-benefit-grid article+article{border-left:0;border-top:1px solid #e3e6dc}
}