:root {
  /* Dark Tech Palette */
  --bg: #050505;             /* Pitch Black */
  --panel: rgba(20, 20, 20, 0.7); /* Translucent Black */
  --text: #e0e0e0;           /* Silver Steel */
  --muted: #888888;          /* Dim Gray */
  --accent: #00ff9d;         /* Matrix/Neon Green */
  --secondary: #00d4ff;      /* Electric Blue */
  --transition: all 0.75s cubic-bezier(0.6, 0, 0.2, 1); /* Kekalkan original speed */
}
/* CSS */
#qr-container {
  position: fixed;       /* QR kekal di sudut walaupun scroll */
  bottom: 10px;          /* jarak dari bawah */
  right: 10px;           /* jarak dari kanan */
  width: 50px;           /* saiz QR kecil */
  height: 50px;
  z-index: 9999;         /* pastikan berada atas elemen lain */
}

#qr-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* elak stretch */
  border: 1px solid #ccc; /* optional, bagi nampak sikit border */
  border-radius: 5px;     /* optional, bulat sikit sudut */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* optional, effect timbul */
}
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Inter", sans-serif;
  /* Background dengan aura "energy core" di tengah */
  background: radial-gradient(circle at center, #0a1a14 0%, var(--bg) 80%);
  color: var(--text);
  overflow-x: hidden;
}

/* Garisan grid halus untuk vibe blueprint/cyber */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
}

.section { min-height: 100vh; padding: 90px 9vw; display: flex; flex-direction: column; justify-content: center; }

/* Image dengan efek Glow */
img { 
  max-width: 100%; 
  border-radius: 20px; 
  margin-top: 24px; 
  border: 1px solid rgba(0, 255, 157, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 157, 0.15); 
}

h1, h2 { font-weight: 800; letter-spacing: -1px; }
h1 { 
  font-size: clamp(3rem, 6vw, 6rem); 
  background: linear-gradient(to bottom, #fff, var(--muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#logo img {
  width: 30px;
  height: 30px;
  }

.badge { 
  color: var(--accent); 
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3em; 
  font-size: 0.75rem; 
  margin-bottom: 20px;
  text-shadow: 0 0 10px var(--accent);
}

/* Card dengan Glassmorphism & Neon Border */
.card, .future-card { 
  padding: 36px; 
  border-radius: 28px; 
  background: var(--panel); 
  backdrop-filter: blur(20px); 
  border: 1px solid rgba(255, 255, 255, 0.05); 
  transition: var(--transition); 
}

.card:hover { 
  transform: scale(1.03) translateY(-10px) !important; /* Force override but keep transition */
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 255, 157, 0.1);
}

.hero-stats strong { 
  color: var(--accent); 
  font-size: 2rem; 
  text-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
}

/* SEMUA ANIMASI ASAL KAU (REVEAL, SLIDE, DLL) */
.reveal,.slide-up,.zoom { 
  opacity: 0; 
  transform: translateY(30px) scale(0.97); 
  transition: var(--transition); 
}
.slide-left { transform: translateX(-60px) scale(0.97); }
.zoom { transform: scale(0.95); }
.motion { transform: translateY(30px); }

.reveal.active, .slide-up.active, .slide-left.active, .motion.active { 
  opacity: 1; 
  transform: none; 
}

/* Delays */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }