/* BLAST VPN — globe 3D & terminal. Tampilan tenang. */
main{position:relative}
.worldwrap{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;overflow:hidden}
.worldwrap canvas{display:block}
.tip{position:absolute;left:0;top:0;z-index:2;padding:6px 11px;border:1px solid rgba(120,230,255,.5);border-radius:9px;background:rgba(6,14,28,.92);color:#f4f8ff;font:600 13px 'Sora',sans-serif;white-space:nowrap;pointer-events:none}
.tip[hidden]{display:none}
#home{position:relative;z-index:1}
.visual{background:none!important;border-color:transparent!important;box-shadow:none!important;cursor:grab;overflow:visible}
.visual .stat{background:rgba(6,14,28,.78)}
body.grabbing,body.grabbing .visual{cursor:grabbing;user-select:none}

/* logo di depan globe: lebih kecil, tanpa cincin & bayangan */
.scene{--s:150px}
@media(min-width:1200px){.scene{--s:170px}}
@media(max-width:560px){.scene{--s:120px}}
.logo3d{top:15%}
.ring,.halo,.shadow3d{display:none}

/* terminal ilustrasi */
.term{margin-top:26px;max-width:520px;border:1px solid rgba(120,200,255,.22);border-radius:14px;background:rgba(6,14,28,.72);backdrop-filter:blur(8px);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;border-bottom:1px solid rgba(120,200,255,.14);font-size:11.5px;color:#9db4d1}
.term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(150,200,255,.3)}
.term-bar span{margin-left:auto}
.term pre{margin:0;padding:14px 16px;min-height:104px;font:500 13px/1.7 ui-monospace,'Cascadia Mono',Consolas,monospace;color:#9be7ff;white-space:pre-wrap}
@media(max-width:850px){.term{max-width:none}}

/* cahaya latar bergerak sangat pelan */
body:before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(40% 36% at 22% 30%,rgba(34,160,255,.10),transparent 70%),radial-gradient(36% 34% at 80% 68%,rgba(130,90,255,.10),transparent 70%),radial-gradient(30% 30% at 55% 95%,rgba(34,230,200,.07),transparent 70%);animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
.btn.primary{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 22px rgba(34,200,255,.22)}50%{box-shadow:0 0 38px rgba(34,200,255,.42)}}
@media(prefers-reduced-motion:reduce){body:before,.btn.primary{animation:none}}

/* ============ Tipografi modern (Sora + Plus Jakarta Sans) ============ */
body{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:.005em}
h1{font-size:clamp(42px,5.4vw,68px);letter-spacing:-2.4px;line-height:1.02;font-weight:700}
.head h2,.cta h2,.faq h2{letter-spacing:-1.4px;line-height:1.12;font-weight:700}
.head h2{font-size:clamp(28px,3.7vw,44px)}
.cta h2{font-size:clamp(26px,3.4vw,40px)}
.faq h2{font-size:clamp(28px,3.2vw,38px)}
.card h3,.step h3,.mode h3{letter-spacing:-.3px}
.eyebrow{letter-spacing:2.4px;font-weight:700}
@media(max-width:560px){.hero h1{font-size:38px;letter-spacing:-1.4px}}

/* ============ Neon lembut ============ */
:root{--neon:rgba(34,230,255,.55)}
h1{text-shadow:0 0 28px rgba(110,190,255,.22)}
h1 em{filter:drop-shadow(0 0 16px rgba(67,237,255,.38))}
.head h2{text-shadow:0 0 30px rgba(90,170,255,.2)}
.eyebrow{text-shadow:0 0 12px var(--neon)}
.brand b{text-shadow:0 0 14px var(--neon)}
.navlinks>a:not(.btn):hover{text-shadow:0 0 12px var(--neon)}
.btn{box-shadow:0 0 22px rgba(34,230,255,.1),inset 0 0 14px rgba(34,230,255,.05)}
.btn:hover{box-shadow:0 0 30px rgba(34,230,255,.28),inset 0 0 16px rgba(34,230,255,.1)}
.btn.primary{box-shadow:0 0 30px rgba(39,168,255,.34),0 12px 35px rgba(39,168,255,.2)}
.card:hover,.step:hover{border-color:rgba(34,230,255,.5);box-shadow:0 0 34px rgba(34,230,255,.14)}
.card .icon{box-shadow:0 0 18px rgba(34,230,255,.18);text-shadow:0 0 10px var(--neon)}
.step{border-top-color:rgba(34,230,255,.6);box-shadow:0 -6px 18px -10px rgba(34,230,255,.5)}
.step:before{text-shadow:0 0 10px var(--neon)}
.pill{box-shadow:0 0 16px rgba(145,255,207,.14)}
.dot{box-shadow:0 0 14px var(--green),0 0 4px var(--green)}
.trustrow strong{text-shadow:0 0 14px rgba(120,200,255,.28)}
.tip{box-shadow:0 0 22px rgba(34,230,255,.25)}
.term{box-shadow:0 0 36px rgba(34,160,255,.1)}

/* ============ Paket Silver / Gold / Platinum ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:8px}
.tier{--c1:#cfd8e6;--c2:#7f8da3;--glow:130,170,230;position:relative;display:flex;flex-direction:column;padding:36px 28px 30px;border-radius:26px;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,rgba(24,34,54,.96),rgba(9,14,26,.98));
  border:1px solid rgba(var(--glow),.32);box-shadow:0 0 44px rgba(var(--glow),.10),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s}
.tier:before{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--glow),.95),transparent);box-shadow:0 0 18px rgba(var(--glow),.8)}
.tier:after{content:"";position:absolute;top:-30%;left:-60%;width:40%;height:160%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-18deg);transition:left .9s ease,opacity .3s;opacity:0;pointer-events:none}
.tier:hover{transform:translateY(-8px);border-color:rgba(var(--glow),.7);box-shadow:0 0 70px rgba(var(--glow),.22),inset 0 1px 0 rgba(255,255,255,.1)}
.tier:hover:after{left:130%;opacity:1}
.tier.gold{--c1:#ffe9a6;--c2:#b8791a;--glow:236,178,58;transform:translateY(-10px)}
.tier.gold:hover{transform:translateY(-18px)}
.tier.platinum{--c1:#bdeaff;--c2:#a58bff;--glow:130,200,255}
.tier.silver{--glow:170,190,225}
.tier-emblem{width:92px;height:92px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(var(--glow),.22),rgba(var(--glow),.04) 70%);border:1px solid rgba(var(--glow),.4);
  box-shadow:0 0 34px rgba(var(--glow),.28),inset 0 0 22px rgba(var(--glow),.12)}
.tier-emblem svg{width:54px;height:54px;filter:drop-shadow(0 0 8px rgba(var(--glow),.55))}
.tier-name{font-family:'Sora',sans-serif;font-weight:700;font-size:26px;letter-spacing:.5px;background:linear-gradient(180deg,#fff,var(--c1) 55%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(var(--glow),.35))}
.tier-dev{margin:12px 0 22px;display:flex;flex-direction:column;align-items:center;line-height:1}
.tier-dev strong{font-family:'Sora',sans-serif;font-weight:800;font-size:68px;letter-spacing:-2px;background:linear-gradient(180deg,#fff 0%,var(--c1) 45%,var(--c2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(var(--glow),.4))}
.tier-dev span{margin-top:8px;font-size:13px;color:var(--muted);letter-spacing:.4px}
.tier ul{list-style:none;margin:0 0 22px;padding:20px 0 0;border-top:1px solid rgba(var(--glow),.2);display:grid;gap:11px;text-align:left;color:#d8e2f1;font-size:13.5px}
.tier li{padding-left:24px;position:relative}
.tier li:before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 10px rgba(var(--glow),.7);border-radius:2px}
.tier-price{margin-top:auto;padding:11px 14px;border-radius:12px;border:1px dashed rgba(var(--glow),.4);color:#e9f0fb;font-size:13px;font-weight:600;background:rgba(var(--glow),.06)}
.tier .btn{margin-top:14px;border-color:rgba(var(--glow),.6);background:linear-gradient(120deg,rgba(var(--glow),.18),rgba(var(--glow),.06))}
.tier .btn:hover{box-shadow:0 0 30px rgba(var(--glow),.4)}
#paket .notice{margin-top:30px;text-align:center;max-width:820px;margin-inline:auto}
@media(max-width:850px){.tiers{grid-template-columns:1fr;max-width:440px;margin-inline:auto}.tier.gold{transform:none}.tier.gold:hover{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.tier,.tier:after{transition:none}.tier:hover{transform:none}}

/* ===== v11: efek logo + teks header ===== */
.brandfx{gap:14px}
.brandfx .lg{position:relative;width:52px;height:52px;display:grid;place-items:center;flex:none;animation:lgfloat 5s ease-in-out infinite}
.brandfx .lg img{position:relative;z-index:2;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(34,230,255,.55)) drop-shadow(0 0 18px rgba(120,90,255,.35));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.brandfx .lg-glow{position:absolute;inset:-6px;border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(34,230,255,.40),rgba(120,90,255,.18) 50%,transparent 70%);animation:lgpulse 3.2s ease-in-out infinite}
.brandfx .lg-ring{position:absolute;inset:-3px;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,transparent 0 62%,rgba(34,230,255,.95) 80%,rgba(155,101,255,.9) 92%,transparent 100%);-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 62%,#000 64%,#000 70%,transparent 72%);animation:lgspin 4.5s linear infinite;opacity:.85}
.brandfx:hover .lg img{transform:scale(1.1) rotate(-4deg);filter:drop-shadow(0 0 12px rgba(34,230,255,.9)) drop-shadow(0 0 28px rgba(155,101,255,.6))}
.brandfx:hover .lg-ring{animation-duration:1.6s}
.brandfx .bt{display:flex;align-items:baseline;gap:.32em;font-size:22px;font-weight:800;letter-spacing:2.2px}
.brandfx .b1{font-style:normal;background:linear-gradient(100deg,#bfefff 0%,#ffffff 22%,#6fd8ff 42%,#ffffff 58%,#9fb6ff 78%,#bfefff 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 7px rgba(34,230,255,.55));animation:txsheen 4.8s ease-in-out infinite}
.brandfx .bt b{color:#22e6ff;text-shadow:0 0 6px rgba(34,230,255,.9),0 0 16px rgba(34,230,255,.55),0 0 34px rgba(68,135,255,.45);animation:neonbreath 3.4s ease-in-out infinite}
.brandfx:hover .b1{animation-duration:1.4s}
@keyframes lgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes lgpulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes lgspin{to{transform:rotate(360deg)}}
@keyframes txsheen{0%{background-position:130% 0}55%,100%{background-position:-130% 0}}
@keyframes neonbreath{0%,100%{text-shadow:0 0 6px rgba(34,230,255,.8),0 0 14px rgba(34,230,255,.45),0 0 28px rgba(68,135,255,.35)}50%{text-shadow:0 0 8px rgba(34,230,255,1),0 0 22px rgba(34,230,255,.75),0 0 46px rgba(120,90,255,.55)}}
@media(max-width:560px){.brandfx .lg{width:44px;height:44px}.brandfx .lg img{width:40px;height:40px}.brandfx .bt{font-size:17px;letter-spacing:1.4px}}
@media(prefers-reduced-motion:reduce){.brandfx .lg,.brandfx .lg-glow,.brandfx .lg-ring,.brandfx .b1,.brandfx .bt b{animation:none}}

/* ===== v12: kartu bendera 3D di tooltip globe ===== */
.tip{display:flex;align-items:center;gap:12px;padding:9px 14px 9px 10px;border-radius:14px;background:linear-gradient(145deg,rgba(10,22,42,.95),rgba(6,12,24,.95));backdrop-filter:blur(8px);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 24px rgba(34,230,255,.28)}
.tip[hidden]{display:none}
.tip .tt{display:flex;flex-direction:column;line-height:1.25}
.tip .tt b{font:700 14px 'Sora',sans-serif;letter-spacing:.2px}
.tip .tt small{font:500 11px 'Plus Jakarta Sans',sans-serif;color:#91ffcf}
.flag3d{position:relative;width:84px;height:56px;flex:none;perspective:420px}
.flag3d img{display:block;width:84px;height:56px;object-fit:cover;border-radius:5px;transform-origin:left center;box-shadow:0 8px 18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.18);animation:flagwave 2.8s ease-in-out infinite;animation-fill-mode:both}
.flag3d .fshine{position:absolute;inset:0;border-radius:5px;pointer-events:none;background:linear-gradient(100deg,rgba(0,0,0,.28) 0%,rgba(255,255,255,.30) 28%,rgba(0,0,0,.22) 52%,rgba(255,255,255,.26) 76%,rgba(0,0,0,.25) 100%);background-size:220% 100%;mix-blend-mode:soft-light;transform-origin:left center;animation:flagwave 2.8s ease-in-out infinite,flagshade 2.8s linear infinite}
.tip:not([hidden]) .flag3d{animation:flagpop .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes flagwave{0%,100%{transform:rotateY(-24deg) rotateX(5deg) skewY(-2deg)}50%{transform:rotateY(-8deg) rotateX(-4deg) skewY(2.2deg)}}
@keyframes flagshade{to{background-position:-220% 0}}
@keyframes flagpop{from{opacity:0;transform:scale(.6) rotateY(-70deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.flag3d img,.flag3d .fshine,.tip:not([hidden]) .flag3d{animation:none}.flag3d img{transform:rotateY(-14deg)}}

/* ===== v13: konten lebih ke kiri di layar lebar ===== */
@media(min-width:1500px){.wrap{width:min(1700px,calc(100% - 130px))}.hero-copy{max-width:640px}h1{max-width:760px}}
@media(min-width:1100px) and (max-width:1499px){.wrap{width:min(1320px,calc(100% - 80px))}}

/* ===== v14: teks brand polos + label versi ===== */
.brandfx .bt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1;letter-spacing:.4px}
.brandfx .bn{font-size:22px;font-weight:800;letter-spacing:1.2px;display:block}
.brandfx .b1{font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#f4f8ff;filter:none;animation:none}
.brandfx .bt b{color:#22e6ff;text-shadow:none;animation:none}
.brandfx .ver{font:500 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.8px;color:#9fb0c8}
@media(max-width:560px){.brandfx .bn{font-size:17px;letter-spacing:.8px}.brandfx .ver{font-size:9.5px}}