*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;font-family:'Sora',Arial,Helvetica,sans-serif}
body{
  background:#03070B;
  color:#fff;
  overflow-x:hidden;
}
.site{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  min-height:100vh;
  margin:0 auto;
  padding:8px 19px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.logo{
  width:min(269px,54%);
  height:auto;
  aspect-ratio:580/110;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  font-style:italic;
  letter-spacing:-1px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.logo span{color:#718DA3;margin-left:2px}
.panel{
  width:100%;
  padding:18px;
  border:1px solid #718DA3;
  border-radius:21px;
  background:
    repeating-linear-gradient(45deg,rgba(120,147,168,.025) 0 2px,transparent 2px 12px),
    #101820;
  box-shadow:0 0 14px rgba(77,163,217,.22),0 0 42px rgba(77,163,217,.10);
}
.banner{
  width:100%;
  aspect-ratio:1/1;
  border:1px solid #667F91;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#31556B 0%,#132B3A 38%,#071017 72%);
}
.banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.banner-placeholder{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#70C7FF;
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:1px;
}
.banner-placeholder small{
  margin-top:8px;
  color:#8C9DA9;
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
}
.buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0 0;
}
.button{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#160700;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  border:1px solid #70C7FF;
  border-radius:10px;
  background:linear-gradient(#70C7FF,#718DA3 70%,#4C6F87);
  box-shadow:0 0 10px rgba(120,147,168,.20);
}
.info{
  margin-top:14px;
  border:1px solid #4C6F87;
  border-radius:10px;
  overflow:hidden;
  background:#081018;
}
.info-head{
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #304653;
  color:#DCE5EA;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
}
.mini-grid{
  padding:13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mini-card{
  min-height:88px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid rgba(120,147,168,.30);
  border-radius:9px;
  background:linear-gradient(145deg,#17232C,#111A21);
}
.icon{
  width:41px;
  height:41px;
  flex:0 0 41px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid #617D90;
  color:#70C7FF;
  background:#1C2B35;
}
.icon svg{
  width:22px;
  height:22px;
}
.mini-card b{
  display:block;
  color:#EAF4FA;
  font-size:14px;
  line-height:1.1;
  letter-spacing:.5px;
}
.mini-card small{
  display:block;
  margin-top:4px;
  color:#78909E;
  font-size:10px;
  font-weight:700;
}
.footer{
  padding:18px 4px 0;
  text-align:center;
  color:#78909E;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

/* ===== Crypto price card ===== */
.crypto{
  margin-top:14px;
}
.crypto-card{
  min-height:84px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(120,147,168,.30);
  border-radius:10px;
  background:linear-gradient(145deg,#17232C,#111A21);
}
.crypto-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  background:#1C2B35;
  border:1px solid #617D90;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#F7931A;
  font-weight:900;
  font-size:18px;
}
.crypto-info{
  flex:1;
  min-width:0;
}
.crypto-name{
  color:#EAF4FA;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
}
.crypto-price{
  color:#70C7FF;
  font-size:19px;
  font-weight:900;
  margin-top:2px;
}
.crypto-change{
  font-size:11px;
  font-weight:800;
  margin-top:2px;
}
.crypto-chart{
  flex:0 0 90px;
  display:none;
}

/* Skeleton loading state */
.skeleton{
  background:linear-gradient(90deg,#1C2B35 25%,#2A3B48 50%,#1C2B35 75%);
  background-size:200% 100%;
  animation:crptSkeleton 1.4s ease-in-out infinite;
  border-radius:4px;
}
.crypto-price.skeleton{
  height:19px;
  width:90px;
  display:inline-block;
}
.crypto-chart-skeleton{
  flex:0 0 90px;
  height:40px;
  border-radius:6px;
}
@keyframes crptSkeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(max-width:360px){
  .site{padding-left:10px;padding-right:10px}
  .panel{padding:11px}
}

@media(max-height:620px){
  .site{
    justify-content:flex-start;
  }
}

/* V6: +20% scale on larger screens, still fluid on phones */
@media (min-width:501px){
  .site{max-width:520px}
}
@media (max-width:500px){
  .site{width:100%;max-width:none;padding-left:12px;padding-right:12px}
}

/* Dark Dusty Blue + Electric Blue Glow */
.site{
  position:relative;
}

.site::before,
.site::after{
  content:"";
  position:fixed;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(77,163,217,.10);
  filter:blur(90px);
  pointer-events:none;
  z-index:-1;
}

.site::before{
  top:12%;
  left:calc(50% - 340px);
}

.site::after{
  bottom:12%;
  right:calc(50% - 340px);
}

.panel{
  border-color:#718DA3;
  box-shadow:
    0 0 12px rgba(112,199,255,.18),
    0 0 40px rgba(77,163,217,.10),
    inset 0 0 28px rgba(77,163,217,.035);
}

.button{
  color:#071017;
  border-color:#70C7FF;
  background:linear-gradient(180deg,#A8D9F2 0%,#70C7FF 48%,#4D8FB4 100%);
  box-shadow:
    0 0 8px rgba(112,199,255,.48),
    0 0 24px rgba(77,163,217,.24),
    inset 0 1px rgba(255,255,255,.55);
}

.info{
  border-color:#526F87;
  box-shadow:0 0 16px rgba(77,163,217,.08);
}

.mini-card{
  border-color:rgba(112,199,255,.30);
  box-shadow:
    inset 0 0 16px rgba(77,163,217,.035),
    0 0 8px rgba(77,163,217,.04);
}

.mini-card:hover{
  border-color:#70C7FF;
  box-shadow:
    0 0 8px rgba(112,199,255,.25),
    0 0 20px rgba(77,163,217,.12);
}

.icon{
  border-color:#718DA3;
  color:#70C7FF;
  box-shadow:0 0 10px rgba(77,163,217,.14);
}

.info-head{
  color:#DCEAF2;
}

.footer{
  color:#78909E;
}

/* ===== Ambient effects: subtle, premium, non-intrusive ===== */

body{
  position:relative;
  isolation:isolate;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%, rgba(77,163,217,.12), transparent 28%),
    radial-gradient(circle at 15% 70%, rgba(112,199,255,.055), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(77,163,217,.055), transparent 24%);
  animation:ambientShift 12s ease-in-out infinite alternate;
}

@keyframes ambientShift{
  0%{transform:scale(1) translate3d(-1%,0,0);opacity:.75}
  100%{transform:scale(1.08) translate3d(1%,1%,0);opacity:1}
}


/* Soft breathing glow around the main panel */
.panel{
  animation:panelGlow 4.5s ease-in-out infinite;
}

@keyframes panelGlow{
  0%,100%{
    box-shadow:
      0 0 12px rgba(112,199,255,.16),
      0 0 40px rgba(77,163,217,.08),
      inset 0 0 28px rgba(77,163,217,.03);
  }
  50%{
    box-shadow:
      0 0 18px rgba(112,199,255,.26),
      0 0 52px rgba(77,163,217,.13),
      inset 0 0 34px rgba(77,163,217,.045);
  }
}

/* Slow shimmer on the banner */
.banner{
  position:relative;
}

.banner::after{
  content:"";
  position:absolute;
  inset:-30% 0 -30% 0;
  width:40%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(220,242,255,.4),
    transparent
  );
  animation:bannerShine 2.4s ease-in-out infinite;
}

@keyframes bannerShine{
  0%{transform:translateX(-220%) skewX(-18deg);opacity:0}
  20%{opacity:1}
  70%{transform:translateX(320%) skewX(-18deg);opacity:1}
  85%{opacity:0}
  100%{transform:translateX(320%) skewX(-18deg);opacity:0}
}

/* Button hover lift + glow */
.button{
  position:relative;
  overflow:hidden;
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;
}

.button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 0 12px rgba(112,199,255,.58),
    0 0 30px rgba(77,163,217,.28),
    inset 0 1px rgba(255,255,255,.6);
}

/* Card lift + glow */
.mini-card{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.mini-card:hover{
  transform:translateY(-3px);
  border-color:rgba(112,199,255,.72);
  background:linear-gradient(145deg,#182C38,#0D1720);
  box-shadow:
    0 0 10px rgba(112,199,255,.20),
    0 0 24px rgba(77,163,217,.12),
    inset 0 0 18px rgba(112,199,255,.035);
}

.icon{
  transition:box-shadow .22s ease,transform .22s ease;
}

.mini-card:hover .icon{
  transform:scale(1.05);
  box-shadow:
    0 0 9px rgba(112,199,255,.35),
    0 0 18px rgba(77,163,217,.18);
}

/* Logo gets a very subtle breathing aura */
.logo{
  animation:logoGlow 5s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(112,199,255,.16))}
  50%{filter:drop-shadow(0 0 10px rgba(112,199,255,.34))}
}

/* Respect users who disable animation */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* Entrance: sections fade + slide up one by one on page load */
.ent{
  opacity:0;
  transform:translateY(16px);
  animation:entIn .6s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes entIn{
  to{opacity:1;transform:translateY(0)}
}

/* Fast flicker on LOGIN/DAFTAR buttons - lightning-strike style brightness flashes */
.button{
  animation:buttonFlicker 3.2s infinite;
}
.buttons a:nth-child(2){
  animation-delay:.5s;
}
@keyframes buttonFlicker{
  0%,100%{filter:brightness(1)}
  4%{filter:brightness(2.4)}
  6%{filter:brightness(1)}
  8%{filter:brightness(2)}
  10%{filter:brightness(1)}
  46%{filter:brightness(1)}
  48%{filter:brightness(2.2)}
  50%{filter:brightness(1)}
}

/* ===== Responsive particle distribution =====
   Desktop: mostly left/right.
   Mobile: balanced top + middle sides + bottom.
   Same lightweight 8-particle count; only positions/timing change.
*/
.particles{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.particles i{
  position:absolute;
  display:block;
  border-radius:50%;
  background:#70C7FF;
  box-shadow:
    0 0 6px rgba(112,199,255,.9),
    0 0 14px rgba(77,163,217,.55);
  opacity:0;
  will-change:transform,opacity;
  animation-name:floatParticle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

/* Desktop: keep the center clean and use the wide empty space */
.particles i:nth-child(1){left:7%;top:30%;width:3px;height:3px;animation-duration:9s;animation-delay:-2s}
.particles i:nth-child(2){left:15%;top:66%;width:2px;height:2px;animation-duration:12s;animation-delay:-7s}
.particles i:nth-child(3){left:24%;top:82%;width:3px;height:3px;animation-duration:10s;animation-delay:-4s}
.particles i:nth-child(4){left:76%;top:35%;width:3px;height:3px;animation-duration:11s;animation-delay:-8s}
.particles i:nth-child(5){left:85%;top:68%;width:2px;height:2px;animation-duration:13s;animation-delay:-5s}
.particles i:nth-child(6){left:93%;top:27%;width:4px;height:4px;animation-duration:14s;animation-delay:-11s}
.particles i:nth-child(7){left:72%;top:84%;width:2px;height:2px;animation-duration:10s;animation-delay:-6s}
.particles i:nth-child(8){left:29%;top:23%;width:2px;height:2px;animation-duration:15s;animation-delay:-12s}

@keyframes floatParticle{
  0%{
    transform:translate3d(0,30px,0) scale(.35);
    opacity:0;
  }
  12%{opacity:.82}
  35%{
    transform:translate3d(-10px,-38px,0) scale(.85);
    opacity:.58;
  }
  58%{
    transform:translate3d(8px,-90px,0) scale(1);
    opacity:.85;
  }
  82%{
    transform:translate3d(-7px,-145px,0) scale(.72);
    opacity:.35;
  }
  100%{
    transform:translate3d(10px,-195px,0) scale(.3);
    opacity:0;
  }
}

@keyframes floatParticleDown{
  0%{
    transform:translate3d(0,-30px,0) scale(.35);
    opacity:0;
  }
  12%{opacity:.82}
  35%{
    transform:translate3d(-10px,38px,0) scale(.85);
    opacity:.58;
  }
  58%{
    transform:translate3d(8px,90px,0) scale(1);
    opacity:.85;
  }
  82%{
    transform:translate3d(-7px,145px,0) scale(.72);
    opacity:.35;
  }
  100%{
    transform:translate3d(10px,195px,0) scale(.3);
    opacity:0;
  }
}

/* Mobile: equalized top/bottom presence, while keeping the logo area readable */
@media (max-width:500px){
  .particles i:nth-child(1){left:13%;top:10%;width:3px;height:3px;animation-duration:10s;animation-delay:-3s}
  .particles i:nth-child(2){left:82%;top:14%;width:2px;height:2px;animation-duration:12s;animation-delay:-7s}
  .particles i:nth-child(3){left:7%;top:35%;width:2px;height:2px;animation-duration:11s;animation-delay:-5s}
  .particles i:nth-child(4){left:91%;top:40%;width:3px;height:3px;animation-duration:13s;animation-delay:-9s}
  .particles i:nth-child(5){left:9%;top:79%;width:3px;height:3px;animation-duration:10s;animation-delay:-4s}
  .particles i:nth-child(6){left:88%;top:84%;width:4px;height:4px;animation-duration:14s;animation-delay:-11s}
  .particles i:nth-child(7){left:23%;top:93%;width:2px;height:2px;animation-duration:12s;animation-delay:-6s}
  .particles i:nth-child(8){left:76%;top:95%;width:2px;height:2px;animation-duration:15s;animation-delay:-12s}

  .particles i{
    box-shadow:
      0 0 5px rgba(112,199,255,.85),
      0 0 11px rgba(77,163,217,.42);
  }
}

@media (prefers-reduced-motion:reduce){
  .particles i{
    animation:none;
    opacity:.45;
  }
}

/* Mobile-only extra particles: desktop stays unchanged */
.particles i:nth-child(n+9){display:none;}

@media (max-width:500px){
  .particles i{display:block;}

  /* 6 particles at the TOP */
  .particles i:nth-child(1){left:7%;top:7%;width:3px;height:3px;animation-duration:10s;animation-delay:-2s}
  .particles i:nth-child(2){left:23%;top:13%;width:2px;height:2px;animation-duration:12s;animation-delay:-7s}
  .particles i:nth-child(3){left:40%;top:6%;width:3px;height:3px;animation-duration:11s;animation-delay:-4s}
  .particles i:nth-child(4){left:58%;top:13%;width:2px;height:2px;animation-duration:13s;animation-delay:-9s}
  .particles i:nth-child(5){left:76%;top:7%;width:3px;height:3px;animation-duration:10s;animation-delay:-5s}
  .particles i:nth-child(6){left:92%;top:15%;width:2px;height:2px;animation-duration:14s;animation-delay:-11s}

  /* 6 particles at the BOTTOM - float downward so they stay visible in the bottom zone */
  .particles i:nth-child(7){left:7%;top:82%;width:2px;height:2px;animation-duration:11s;animation-delay:-6s;animation-name:floatParticleDown}
  .particles i:nth-child(8){left:22%;top:91%;width:3px;height:3px;animation-duration:13s;animation-delay:-10s;animation-name:floatParticleDown}
  .particles i:nth-child(9){left:40%;top:84%;width:2px;height:2px;animation-duration:10s;animation-delay:-3s;animation-name:floatParticleDown}
  .particles i:nth-child(10){left:58%;top:92%;width:3px;height:3px;animation-duration:12s;animation-delay:-8s;animation-name:floatParticleDown}
  .particles i:nth-child(11){left:77%;top:85%;width:2px;height:2px;animation-duration:14s;animation-delay:-12s;animation-name:floatParticleDown}
  .particles i:nth-child(12){left:92%;top:93%;width:3px;height:3px;animation-duration:11s;animation-delay:-5s;animation-name:floatParticleDown}

  .particles i{
    box-shadow:
      0 0 5px rgba(112,199,255,.9),
      0 0 12px rgba(77,163,217,.48);
  }
}