/* BLAST VPN — efek animasi & logo 3D */
.visual:before,.visual:after{display:none}
.visual{perspective:1100px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab}
.visual:active{cursor:grabbing}
.scene{--s:300px;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
@media(max-width:850px){.scene{--s:250px}}
@media(max-width:560px){.scene{--s:200px}}

.halo{position:absolute;left:50%;top:44%;width:calc(var(--s)*1.9);height:calc(var(--s)*1.9);margin:calc(var(--s)*-.95) 0 0 calc(var(--s)*-.95);border-radius:50%;background:radial-gradient(closest-side,rgba(34,160,255,.36) 0%,rgba(110,80,255,.16) 45%,transparent 100%);transform:translateZ(-90px);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75;transform:translateZ(-90px) scale(.94)}50%{opacity:1;transform:translateZ(-90px) scale(1.06)}}

.ring{position:absolute;left:50%;top:44%;width:calc(var(--s)*1.55);height:calc(var(--s)*1.55);margin:calc(var(--s)*-.775) 0 0 calc(var(--s)*-.775);border-radius:50%;border:2px solid rgba(34,230,255,.85);transform-style:preserve-3d}
.ring i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#bff6ff;box-shadow:0 0 18px 4px #22e6ff}
.ring.r1{animation:spin1 13s linear infinite}
.ring.r2{width:calc(var(--s)*1.25);height:calc(var(--s)*1.25);margin:calc(var(--s)*-.625) 0 0 calc(var(--s)*-.625);border-color:rgba(170,120,255,.9);animation:spin2 17s linear infinite reverse}
.ring.r2 i{background:#e3d2ff;box-shadow:0 0 18px 4px #9b65ff}
.ring.r3{width:calc(var(--s)*1.72);height:calc(var(--s)*1.72);margin:calc(var(--s)*-.86) 0 0 calc(var(--s)*-.86);border-width:1px;border-color:rgba(90,150,255,.6);animation:spin3 24s linear infinite}
.ring.r3 i{background:#a9c8ff;box-shadow:0 0 14px 3px #4487ff;width:7px;height:7px}
@keyframes spin1{to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes spin2{to{transform:rotateY(68deg) rotateX(22deg) rotateZ(360deg)}}
@keyframes spin3{to{transform:rotateX(62deg) rotateY(-18deg) rotateZ(360deg)}}
.ring.r1{transform:rotateX(74deg)}
.ring.r2{transform:rotateY(68deg) rotateX(22deg)}
.ring.r3{transform:rotateX(62deg) rotateY(-18deg)}

.logo3d{position:absolute;left:50%;top:44%;width:var(--s);height:var(--s);margin:calc(var(--s)*-.5) 0 0 calc(var(--s)*-.5);transform-style:preserve-3d;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 -8px}50%{translate:0 10px}}
.logo3d img,.logo3d .glare{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;-webkit-user-drag:none;user-select:none;pointer-events:none}
.logo3d .layer{opacity:.95}
.logo3d .front{transform:translateZ(2px);filter:drop-shadow(0 22px 34px rgba(0,120,255,.35))}
.logo3d .glare{transform:translateZ(3px);mix-blend-mode:screen;-webkit-mask:url(assets/blast-vpn-logo.png) center/contain no-repeat;mask:url(assets/blast-vpn-logo.png) center/contain no-repeat;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.85),rgba(120,220,255,.25) 28%,transparent 52%);opacity:.7}

.visual .stat{z-index:5}
.shadow3d{position:absolute;left:50%;top:calc(44% + var(--s)*.62);width:calc(var(--s)*.9);height:calc(var(--s)*.14);margin-left:calc(var(--s)*-.45);border-radius:50%;background:radial-gradient(ellipse,rgba(34,160,255,.4),transparent 70%);transform:translateZ(-60px);animation:shadow 6s ease-in-out infinite}
@keyframes shadow{0%,100%{opacity:.9;scale:1}50%{opacity:.55;scale:.86}}

/* Latar jaringan */
#net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}

/* Teks gradien bergerak */
h1 em{background-size:220% 100%;animation:shift 7s ease-in-out infinite alternate}
@keyframes shift{to{background-position:100% 0}}

/* Tombol berkilat */
.btn.primary{position:relative;overflow:hidden}
.btn.primary:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn.primary:hover:after{left:130%}

/* Kartu miring 3D saat disentuh */
.tilt{transform-style:preserve-3d;transition:transform .25s ease,border-color .22s,box-shadow .25s;will-change:transform}
.tilt.is-tilting{transition:transform .06s linear,border-color .22s}
.tilt:hover{box-shadow:0 18px 50px rgba(20,120,255,.16)}
.tilt:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(34,230,255,.14),transparent 60%)}
.tilt:hover:before{opacity:1}
.card.tilt{position:relative}

/* Muncul saat digulir (sekali) */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv.tilt.in{transition:transform .25s ease,border-color .22s,box-shadow .25s,opacity .7s ease}

/* Pengguna yang mengurangi gerakan */
@media(prefers-reduced-motion:reduce){
  .halo,.ring,.logo3d,.shadow3d,h1 em{animation:none!important}
  html.js .rv{opacity:1;transform:none;transition:none}
  .btn.primary:after{display:none}
  #net{opacity:.35}
}

/* cahaya cincin tanpa blur: dua garis lembut di luar & di dalam */
.ring:before,.ring:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ring:before{inset:-7px;border:6px solid currentColor;opacity:.13}
.ring:after{inset:-14px;border:8px solid currentColor;opacity:.06}
.ring.r1{color:#22e6ff}.ring.r2{color:#a678ff}.ring.r3{color:#5a96ff}
.ring.r3:before,.ring.r3:after{display:none}

/* Tambahan konten layanan berlangganan */
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:850px){.steps.three{grid-template-columns:1fr}}
.step .pill{display:inline-block;margin-top:14px}
.pill.plan{border-color:rgba(168,181,201,.3);color:#a8b5c9;background:rgba(168,181,201,.07)}
.mode.soon li:before{content:"○";color:var(--muted)}
.mode h3 small{font-family:'DM Sans',sans-serif}

/* Layar lebar: tampilan lebih besar */
@media(min-width:1200px){
  :root{--max:1280px}
  body{font-size:17px}
  .topline{font-size:13px}
  .navlinks{font-size:14.5px}
  .btn{font-size:15px;padding:14px 26px}
  .brand img{width:56px;height:56px}
  .brand span{font-size:21px}
  .hero{min-height:720px;gap:56px}
  h1{font-size:clamp(60px,6vw,88px)}
  .hero-copy{font-size:19px;max-width:620px}
  .micro{font-size:13.5px}
  .eyebrow{font-size:12.5px}
  .visual{height:600px}
  .scene{--s:370px}
  .stat{padding:20px 24px}
  .stat strong{font-size:16px}
  .stat small{font-size:13px}
  .pill{font-size:11px}
  .trustrow{min-height:100px}
  .trustrow div{font-size:14px}
  .head{max-width:760px}
  .head h2{font-size:clamp(38px,4vw,58px)}
  .head p{font-size:18px}
  .card{padding:34px}
  .card h3{font-size:22px}
  .card p{font-size:16px}
  .icon{width:50px;height:50px;font-size:23px}
  .mode{padding:38px}
  .mode h3{font-size:28px}
  .mode p{font-size:16px}
  .mode ul{font-size:15px}
  .notice{font-size:13.5px}
  .step{padding:26px 22px}
  .step h3{font-size:19px}
  .step p{font-size:15px}
  .cta h2{font-size:clamp(34px,4vw,52px)}
  .faq h2{font-size:46px}
  summary{font-size:17px}
  details p{font-size:16px}
  .footer{font-size:13.5px}
}
@media(min-width:1700px){
  :root{--max:1400px}
  h1{font-size:96px}
  .visual{height:660px}
  .scene{--s:410px}
  .hero{min-height:780px}
}

/* Cincin menyesuaikan kartu di layar lebar agar tidak terpotong */
@media(min-width:1200px){
  .ring.r1{width:calc(var(--s)*1.38);height:calc(var(--s)*1.38);margin:calc(var(--s)*-.69) 0 0 calc(var(--s)*-.69)}
  .ring.r2{width:calc(var(--s)*1.12);height:calc(var(--s)*1.12);margin:calc(var(--s)*-.56) 0 0 calc(var(--s)*-.56)}
  .ring.r3{width:calc(var(--s)*1.5);height:calc(var(--s)*1.5);margin:calc(var(--s)*-.75) 0 0 calc(var(--s)*-.75)}
}