*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",sans-serif;color:#082b59;background:#fff}.wrap{width:min(1240px,92%);margin:auto}a{text-decoration:none;color:inherit}.header{height:78px;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 4px 22px #09254b10}.nav{height:100%;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:9px;font:700 21px "Space Grotesk";line-height:1;color:#0866c8;white-space:nowrap}.brand>span:last-child>span{color:#079b5c}.brand small{display:block;color:#24476d;font:500 8px "DM Sans";margin-top:5px}.brand-icon{width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,#12bd70 0 34%,#087be8 35% 100%);display:grid;place-items:center;color:#fff;position:relative;box-shadow:0 8px 20px #087be82b}.brand-icon b{font:700 23px "Space Grotesk";transform:skew(-7deg)}.brand-icon i{position:absolute;width:9px;height:9px;border:2px solid #fff;border-left:0;border-bottom:0;border-radius:50%;right:-2px;top:2px}.nav nav{display:flex;gap:22px;justify-content:center;flex:1;font-size:12px;color:#172e4d}.nav nav a{padding:31px 0 27px;border-bottom:3px solid transparent}.nav nav a:hover,.nav nav .active{color:#087ff0;border-bottom-color:#087ff0}.support{display:flex;gap:8px;align-items:center;min-width:155px}.support>span{font-size:25px;color:#0a7ff1}.support small,.support b,.support em{display:block}.support small{font-size:9px;color:#60738c}.support b{font-size:12px}.support em{font:400 8px "DM Sans";color:#657990;font-style:normal}.wa{background:#08b95d;color:#fff;padding:13px 20px;border-radius:25px;font-size:12px;font-weight:700;box-shadow:0 8px 20px #08b95d30}.hero{height:565px;background:#05254a;color:#fff;position:relative;overflow:hidden}.hero-photo{position:absolute;inset:0;background:radial-gradient(circle at 73% 45%,#148ef355,transparent 32%),linear-gradient(100deg,#041a37 0%,#06366a 52%,#062c51 100%)}.hero-photo:after{content:"";position:absolute;right:8%;top:5%;width:47%;height:90%;background:radial-gradient(ellipse at 50% 55%,#5e3d2b55 0 13%,transparent 14%),radial-gradient(ellipse at 60% 60%,#e0a37a55 0 5%,transparent 6%),radial-gradient(ellipse at 45% 70%,#1689b655 0 16%,transparent 17%);filter:blur(3px)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#031b39f5 0%,#062c54e6 48%,#062c5400 78%)}.fiber{position:absolute;border:3px solid #18a8ff88;border-left:0;border-bottom:0;border-radius:50%;width:600px;height:180px;right:-90px;top:90px;transform:rotate(-16deg);box-shadow:0 0 22px #159dfb55}.fiber-b{width:500px;height:120px;right:-30px;top:125px;border-color:#24c7ff55}.hero-grid{height:100%;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;position:relative;z-index:2}.hero-copy{padding-top:8px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#0788f2;font-weight:800}.eyebrow.white{color:#a9dfff}.hero h1{font:700 clamp(45px,5.2vw,68px)/.98 "Space Grotesk";letter-spacing:-2.5px;margin:17px 0}.hero h1 strong{color:#43e394}.hero-copy>p{font-size:16px;line-height:1.55;color:#d4e4f3;max-width:600px}.benefits{display:flex;gap:22px;margin:25px 0}.benefits span{display:flex;align-items:center;gap:7px}.benefits i{width:39px;height:39px;border:2px solid #18a8ff;border-radius:50%;display:grid;place-items:center;color:#18a8ff;font-style:normal;font-size:19px}.benefits b{font-size:10px;line-height:1.25}.actions{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:14px 19px;font:700 12px "DM Sans";cursor:pointer}.green{background:#0fc66b;color:#fff;box-shadow:0 10px 25px #0fc66b40}.outline{border:1px solid #d5e8f955;color:#fff;background:#ffffff08}.hero-right{height:100%;position:relative}.hero-family{position:absolute;bottom:55px;right:75px;width:440px;height:340px}.person,.child{position:absolute;border-radius:50% 50% 17% 17%;background:linear-gradient(145deg,#176f9f,#102d57);box-shadow:0 20px 40px #0007}.person:before,.child:before{content:"";position:absolute;background:#c88e6f;border-radius:50%;left:50%;transform:translateX(-50%);top:-36px;width:76px;height:76px}.dad{width:155px;height:235px;left:80px;bottom:0}.mom{width:145px;height:220px;left:215px;bottom:10px;background:linear-gradient(145deg,#a84d5e,#2c315c)}.mom:before{background:#bd805f}.child{width:88px;height:150px;bottom:0;left:150px}.c2{left:260px;background:#c26d40}.child:before{width:49px;height:49px;top:-25px}.tablet{position:absolute;left:150px;bottom:40px;width:180px;height:105px;border-radius:8px;background:#d4edf7;color:#1d5d86;display:grid;place-items:center;font-size:70px;transform:perspective(500px) rotateX(10deg);box-shadow:0 16px 25px #0009}.neon-copy{position:absolute;right:0;top:92px;color:#b9eaff;text-align:center;font:italic 20px "DM Sans";line-height:1.25;text-shadow:0 0 22px #15aaff}.neon-copy i{color:#fff}.usecases{position:absolute;right:0;bottom:15px;display:flex;gap:25px;background:#082d56cc;padding:17px 20px;border-radius:15px 0 0 15px}.usecases span{text-align:center;font-size:25px;color:#fff}.usecases small{display:block;font-size:9px;line-height:1.2;color:#e4f0f9}
.plans-section{background:#f3f9ff;padding:18px 0 16px}.package-layout{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start}.package-intro{padding:10px 0 0}.package-intro h2{font:700 27px/1.02 "Space Grotesk";margin:8px 0 12px;letter-spacing:-1px}.package-intro p{font-size:11px;color:#637994;line-height:1.55}.more{display:inline-block;color:#087ff0;font-size:11px;font-weight:700;margin-top:7px}.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.card{background:#fff;border:1px solid #dce7f1;border-radius:12px;min-height:190px;padding:15px;position:relative;box-shadow:0 7px 22px #092b4d0b}.card.popular{border:1.5px solid #159af5}.tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#078cf0;color:#fff;border-radius:14px;padding:4px 11px;font-size:8px;white-space:nowrap}.round{position:absolute;right:13px;top:13px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px}.home,.rocket{background:#dff9ed;color:#12a95f}.crown{background:#e8f4ff;color:#087ff0}.office{background:#fff0e3;color:#f47618}.card h3{font:700 18px "Space Grotesk";margin:0 0 2px}.speed{font:700 20px "Space Grotesk";color:#12a95f}.orange{color:#f47618}.card p{font-size:10px;color:#62758c;line-height:1.35;min-height:43px;margin:7px 0}.price{display:block;font:700 19px "Space Grotesk";margin-top:5px}.card>small{font-size:9px;color:#657890}.from{display:block;font-size:9px;font-weight:500;margin-top:4px}.plan-btn{display:block;text-align:center;background:#0fc66b;color:#fff;padding:8px;border-radius:7px;font-size:9px;font-weight:700;margin-top:8px}.bluebtn{background:#078cf0}.orangebtn{background:#f77a16}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.coverage{background:linear-gradient(135deg,#078cf0,#35bdf0);color:#fff;border-radius:13px;padding:18px 21px;box-shadow:0 10px 25px #087ff025}.coverage-head{display:flex;gap:10px;align-items:flex-start}.pin{font-size:30px;color:#fff}.coverage h3{margin:0;font:700 18px "Space Grotesk"}.coverage p{font-size:10px;margin:3px 0 13px;color:#dff4ff}.coverage form{display:grid;grid-template-columns:1fr 1fr;gap:7px}.coverage input{border:1px solid #dce8f1;border-radius:7px;padding:10px 11px;outline:0;font:10px "DM Sans"}.coverage input:nth-of-type(3){grid-column:1/2}.coverage button{grid-column:2;grid-row:2/3}.why-card{background:#eef8ff;border:1px solid #d9e9f5;border-radius:13px;padding:17px 18px}.why-head{display:flex;justify-content:space-between;gap:10px}.why-head h3{font:700 19px "Space Grotesk";margin:4px 0}.why-head p{font-size:10px;color:#617691;margin:0;line-height:1.4}.why-head>a{font-size:9px;color:#08a75e;font-weight:700;white-space:nowrap}.why-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:13px}.why-grid>div{text-align:center;border-right:1px solid #d8e8f4;padding:0 6px}.why-grid>div:last-child{border:0}.why-grid i{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#0fc66b;color:#fff;font-style:normal;margin:0 auto 7px}.why-grid>div:nth-child(even) i{background:#078cf0}.why-grid b{display:block;font:700 9px/1.2 "Space Grotesk"}.why-grid small{display:block;color:#62758c;font-size:8px;line-height:1.25;margin-top:5px}
.impact{background:linear-gradient(90deg,#062d56,#0a5c90);color:#fff;padding:30px 0;position:relative;overflow:hidden}.impact:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000,#001c3322),radial-gradient(circle at 18% 60%,#1b91d633,transparent 28%)}.impact-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1.7fr .5fr;gap:30px;align-items:center}.impact h2{font:700 19px/1.15 "Space Grotesk";margin:0}.impact p{font-size:9px;line-height:1.45;color:#c5dced;max-width:470px}.stats{display:flex;justify-content:space-between;gap:20px}.stats b{font:700 19px "Space Grotesk"}.stats small{display:block;font:400 8px/1.25 "DM Sans";color:#c7dced;margin-top:4px}.slogan{text-align:right;font:italic 17px "DM Sans";color:#d3f0ff}.slogan i{font-size:13px}
.faq{padding:55px 0}.faq h2{font:700 31px "Space Grotesk";margin:8px 0 20px}.faq details{max-width:900px;margin-left:auto;border-bottom:1px solid #dfe7ef;padding:16px 0}.faq summary{font-weight:700;font-size:12px;cursor:pointer}.faq p{font-size:10px;color:#657890;line-height:1.6}.foot{padding:36px 0;display:grid;grid-template-columns:1.4fr .6fr .7fr 1fr;gap:40px;font-size:10px;color:#a7b9ca}.foot .brand{color:#fff}.foot b{color:#fff;font-size:10px}.footlinks{display:grid;gap:8px}.foot p{line-height:1.6}.social{color:#fff}.copyright{text-align:center;border-top:1px solid #ffffff12;padding:13px;color:#6e849a;font-size:8px}footer{background:#051a32}.floating-wa{position:fixed;right:22px;bottom:22px;width:55px;height:55px;border-radius:50%;background:#0bc86a;color:#fff;display:grid;place-items:center;font-size:25px;box-shadow:0 12px 35px #0004;z-index:60}
@media(max-width:1100px){.nav nav{gap:12px}.support{display:none}.package-layout{grid-template-columns:1fr}.package-intro{padding-bottom:0}.lower-grid{grid-template-columns:1fr}.hero-right{opacity:.65}.hero h1{font-size:53px}}
@media(max-width:760px){.header{height:65px}.nav nav{display:none}.top{margin-left:auto;padding:10px 13px}.brand{font-size:17px}.brand-icon{width:34px;height:34px}.hero{height:auto;min-height:650px}.hero-grid{display:block;padding:70px 0}.hero-right{display:none}.hero h1{font-size:44px}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{flex-wrap:wrap}.plans{grid-template-columns:1fr 1fr}.lower-grid{grid-template-columns:1fr}.coverage form{grid-template-columns:1fr}.coverage input:nth-of-type(3),.coverage button{grid-column:auto;grid-row:auto}.why-grid{grid-template-columns:repeat(3,1fr);gap:10px}.why-grid>div{border:0}.impact-inner{grid-template-columns:1fr}.stats{flex-wrap:wrap}.slogan{text-align:left}.foot{grid-template-columns:1fr 1fr}.support{display:none}}
@media(max-width:480px){.plans{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr}.hero h1{font-size:40px}.package-intro h2{font-size:25px}}

/* DATA CABANG & RESELLER */
.branches{padding:72px 0;background:#fff}.branches h2{font:700 36px/1.05 "Space Grotesk";letter-spacing:-1.3px;margin:8px 0}.branches-intro{font-size:12px;line-height:1.6;color:#657890;max-width:650px}.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:28px}.branch-card{position:relative;background:#f7fbff;border:1px solid #dce9f4;border-radius:15px;padding:20px;min-height:170px;overflow:hidden;transition:.2s}.branch-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #092b4d12}.branch-card.head-office{background:linear-gradient(135deg,#eefaff,#effff6);border-color:#bce9d4}.branch-number{position:absolute;right:16px;top:13px;font:700 24px "Space Grotesk";color:#dce8f2}.branch-icon{width:39px;height:39px;border-radius:11px;background:#e3f3ff;color:#078cf0;display:grid;place-items:center;font-size:20px;margin-bottom:12px}.head-office .branch-icon{background:#ddf8eb;color:#08aa5d}.branch-type{font-size:8px;font-weight:800;letter-spacing:1.2px;color:#078cf0}.head-office .branch-type{color:#08a75e}.branch-card h3{font:700 18px "Space Grotesk";margin:4px 0 7px}.branch-card p{font-size:10px;line-height:1.5;color:#647991;margin:0}.reseller{padding:0 0 60px;background:#fff}.reseller-box{background:linear-gradient(110deg,#062e59,#078cf0);color:#fff;border-radius:18px;padding:34px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}.reseller-box:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-90px;top:-130px;border:1px solid #ffffff25;box-shadow:0 0 0 40px #ffffff09,0 0 0 80px #ffffff06}.reseller-box h2{font:700 30px/1.05 "Space Grotesk";margin:8px 0}.reseller-box p{font-size:11px;line-height:1.6;color:#d2e5f3;max-width:650px;margin:0}.reseller-btn{position:relative;z-index:2;white-space:nowrap}
@media(max-width:900px){.branch-grid{grid-template-columns:1fr 1fr}.reseller-box{display:block}.reseller-btn{margin-top:20px}}
@media(max-width:600px){.branch-grid{grid-template-columns:1fr}.branches{padding:55px 0}.branches h2{font-size:30px}.reseller-box{padding:28px}.reseller-box h2{font-size:27px}}

/* FINAL PREMIUM PHOTO HEADER */
.hero-banner{height:min(620px,calc(100vh - 78px));min-height:500px;background:#041b36;position:relative;overflow:hidden}
.hero-picture{position:absolute;inset:0;display:block}
.hero-picture img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center}
.hero-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,22,48,.10),rgba(3,22,48,0) 55%,rgba(3,22,48,.18))}
.hero-banner-actions{position:absolute;left:clamp(24px,6vw,90px);bottom:34px;display:flex;gap:10px;z-index:3}
.hero-banner-actions .btn{backdrop-filter:blur(6px)}
@media(max-width:700px){
  .hero-banner{height:560px;min-height:0}
  .hero-picture img{object-position:center center}
  .hero-banner-overlay{background:linear-gradient(180deg,rgba(3,22,48,.02) 35%,rgba(3,22,48,.55) 100%)}
  .hero-banner-actions{left:18px;right:18px;bottom:20px;display:grid;grid-template-columns:1fr 1fr}
  .hero-banner-actions .btn{padding:13px 8px;font-size:11px}
}