/* AUXPROD visual refresh — layered blue studio */
:root{
  --navy:#071a38;--blue:#1469ee;--cyan:#28b8f5;--violet:#7257e8;
  --ink:#08162c;--muted:#607088;--line:#d9e4f2;--paper:#f5f8fd;--white:#fff;
}
html{background:#fff}
body{background:linear-gradient(180deg,#fff 0,#f8fbff 20%,#fff 45%);overflow-x:hidden}
header{border-bottom:1px solid rgba(205,220,240,.72);background:rgba(255,255,255,.82);box-shadow:0 1px 18px rgba(12,42,86,.05)}
.nav .cta,.primary{background:linear-gradient(135deg,#176ff2,#0c57d5);box-shadow:0 10px 28px rgba(20,105,238,.22)}
.secondary{background:rgba(255,255,255,.8);border-color:#cfdaea}
.hero{position:relative}
.hero:before{content:"";position:absolute;z-index:-2;width:720px;height:720px;left:-440px;top:-280px;border-radius:50%;background:radial-gradient(circle,rgba(40,184,245,.16),transparent 68%);pointer-events:none}
.hero:after{content:"";position:absolute;z-index:-2;width:660px;height:660px;right:-420px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(114,87,232,.14),transparent 67%);pointer-events:none}
.hero h1{color:#07172f;text-wrap:balance}
.hero h1 span{background:linear-gradient(100deg,#1266eb 0%,#18a9e9 54%,#7558e8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#53657d}
.eyebrow{color:#0961e4}
.stage{overflow:hidden;box-shadow:0 30px 80px rgba(13,42,84,.15),inset 0 1px 0 #fff}
.stage:after{content:"";position:absolute;width:210px;height:210px;right:-70px;top:-72px;border-radius:50%;background:linear-gradient(145deg,rgba(65,195,255,.5),rgba(114,87,232,.22));filter:blur(6px);z-index:-1}
.phone{transition:transform .28s ease,box-shadow .28s ease}
.stage:hover .phone.pos{transform:rotate(-3deg) translateY(-4px)}
.stage:hover .phone.dashboard{transform:rotate(3deg) translateY(-7px)}
.signal{border-color:rgba(205,220,240,.9);box-shadow:0 16px 44px rgba(6,31,72,.16)}
#tentang{position:relative;background:linear-gradient(180deg,#f5f9ff,#f9fbff)}
.principles article{transition:background .2s ease,transform .2s ease}
.principles article:hover{background:rgba(255,255,255,.7);transform:translateY(-3px)}
#produk{position:relative;background:#fff}
.product-panel{overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 70px rgba(7,26,56,.2)}
.product-panel:before{content:"";position:absolute;width:260px;height:260px;right:-110px;top:-120px;border-radius:50%;background:rgba(58,157,255,.2);filter:blur(8px);pointer-events:none}
.product-panel>*{position:relative}
.metrics div{transition:transform .2s ease,background .2s ease}
.metrics div:hover{transform:translateY(-3px);background:rgba(255,255,255,.11)}
.product-switch a{background:#f7faff;box-shadow:0 6px 20px rgba(15,57,112,.06);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.product-switch a:hover{transform:translateY(-2px);background:#fff;border-color:#8cb8f5}
.varikasir-product{position:relative}
.varikasir-product:after{content:"";position:absolute;z-index:-1;inset:30px -60px -20px;border-radius:40px;background:radial-gradient(circle at 15% 55%,rgba(114,87,232,.08),transparent 33%);pointer-events:none}
.pricing{position:relative;background:linear-gradient(180deg,#f5f9ff 0%,#eef5ff 100%);overflow:hidden}
.pricing:before{content:"";position:absolute;width:460px;height:460px;right:-230px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(39,178,244,.16),transparent 68%)}
.pricing-heading{position:relative}
.pricing-grid{position:relative;align-items:stretch}
.price-card{border-color:#d5e1f0;box-shadow:0 14px 38px rgba(14,48,91,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.price-card:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(14,48,91,.13);border-color:#a8c7f0}
.price-plus{position:relative;border-color:#176ff2;box-shadow:0 22px 56px rgba(20,105,238,.16)}
.price-plus:before{content:"PALING POPULER";position:absolute;right:20px;top:20px;padding:6px 9px;border-radius:99px;background:#e8f1ff;color:#0d5fdc;font-size:.66rem;font-weight:900;letter-spacing:.08em}
.price-plus h3{padding-right:110px}
.price-card li::marker{color:#1770ee}
.pricing-account{border-color:#c5daf7;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff}
.install-section{position:relative;background:linear-gradient(145deg,#071a38 0%,#0b3265 70%,#173b77 100%);color:#fff;overflow:hidden}
.install-section:before{content:"";position:absolute;width:520px;height:520px;left:-240px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,rgba(37,185,247,.3),transparent 66%)}
.install-section:after{content:"";position:absolute;width:390px;height:390px;right:-160px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(122,94,237,.36),transparent 68%)}
.install-layout{position:relative;z-index:1}
.install-copy .eyebrow{color:#70ccff}
.install-copy .eyebrow:before{background:#70ccff}
.install-copy h2{color:#fff}
.install-copy>p,.install-copy .install-note{color:#c5d7eb}
.install-copy>.primary{background:#fff;color:#082047;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.install-steps{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08);box-shadow:0 18px 52px rgba(0,0,0,.16);backdrop-filter:blur(12px)}
.install-steps>div{border-color:rgba(255,255,255,.12)}
.install-steps span{color:#70ccff}
.install-steps h3,.install-steps strong{color:#fff}
.install-steps p{color:#c5d7eb}
#cerita{background:linear-gradient(180deg,#f8fbff,#fff)}
.quote{box-shadow:0 18px 50px rgba(17,68,130,.09);background:linear-gradient(145deg,#e6f1ff,#f0ecff)}
.position{background:linear-gradient(135deg,#071a38,#113d76);box-shadow:0 14px 32px rgba(7,26,56,.14)}
.contact-card{position:relative;overflow:hidden;box-shadow:0 26px 64px rgba(7,26,56,.2)}
.contact-card:after{content:"";position:absolute;width:300px;height:300px;right:-90px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(64,184,255,.3),transparent 67%)}
.contact-card>*{position:relative;z-index:1}
.contact-card a{transition:transform .2s ease,box-shadow .2s ease}
.contact-card a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
footer{background:#f8fbff}
@media(min-width:881px){
  section.block{padding-block:108px}
  .hero{min-height:720px;padding-block:72px 84px}
  .stage{border-radius:36px}
  .product-panel,.price-card,.quote,.contact-card{border-radius:28px}
}
@media(max-width:880px){
  header{background:rgba(255,255,255,.94)}
  .hero{padding-top:46px}
  .hero h1{font-size:clamp(3rem,13vw,4rem)}
  .stage{border-radius:26px}
  .pricing-grid{gap:16px}
  .price-card:hover{transform:none}
  .install-section{padding-block:82px!important}
}
@media(max-width:540px){
  .hero h1{font-size:3rem;line-height:.98}
  .hero p{font-size:1rem}
  .trust{display:grid;gap:8px}
  .price-plus:before{right:16px;top:16px}
  .price-card{border-radius:20px}
  .contact-card{border-radius:22px}
}
@media(prefers-reduced-motion:reduce){.phone,.price-card,.metrics div,.product-switch a{transition:none!important}}

html,body{max-width:100%;overflow-x:clip}