:root{
  /* === TUKAR DI SINI JIKA PERLU === */
  --accent: #1f6fff;           /* ganti kpd biru logo anda */
  --accent-rgb: 31,111,255;    /* versi RGB utk efek rgba() */
  --muted: #9aa3b2;            /* kelabu tulisan seperti logo */
  /* ================================= */
  --bg: #090c12;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:#e8edf7;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(var(--accent-rgb), .08), transparent 60%),
    radial-gradient(900px 600px at -20% 120%, rgba(var(--accent-rgb), .05), transparent 60%),
    var(--bg);
  display:grid; place-items:center; overflow:hidden;
}

/* Scan overlay */
.scan{
  position:fixed; inset:0;
  background:
    linear-gradient(transparent 97%, rgba(255,255,255,.09) 98%, transparent 100%),
    radial-gradient(ellipse at center, rgba(var(--accent-rgb), .03), transparent 60%);
  background-size:100% 3px, 100% 100%;
  mix-blend-mode:overlay;
  animation:sweep 6s linear infinite;
  pointer-events:none;
}
@keyframes sweep{0%{transform:translateY(-3px)}100%{transform:translateY(3px)}}

/* Subtle grid */
.grid{
  position:fixed; inset:-200px; opacity:.15;
  background:
    repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,#fff1 0 1px,transparent 1px 40px);
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb), .15));
  animation:drift 40s linear infinite;
  pointer-events:none;
}
@keyframes drift{
  from{transform:perspective(800px) rotateX(55deg) translateY(0)}
  to{transform:perspective(800px) rotateX(55deg) translateY(-200px)}
}

/* Layout */
.wrap{width:min(1150px,92vw); display:grid; gap:28px; grid-template-columns:1.05fr 1fr; align-items:center; z-index:1}
@media (max-width:860px){.wrap{grid-template-columns:1fr}}

.title{font-weight:700; font-size:clamp(26px,3.2vw,46px); line-height:1.15; margin:0}
.title .accent{color:var(--accent); text-shadow:0 0 20px rgba(var(--accent-rgb), .35)}
.title .muted{display:block; color:#fff; font-weight:500}


.tag{
  display:inline-flex; align-items:center; gap:10px;
  color:#0b0f14; background:var(--accent);
  border-radius:999px; padding:6px 12px; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.8px;
  box-shadow:0 0 24px rgba(var(--accent-rgb), .45);
  animation:glow 2.6s ease-in-out infinite;
  margin-bottom:10px;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 16px rgba(var(--accent-rgb), .35)}
  50%{box-shadow:0 0 34px rgba(var(--accent-rgb), .65)}
}

.card{
  background:linear-gradient(180deg,#0f141c,#0b1017);
  border:1px solid #1c2533;
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--accent-rgb), .06) inset;
  border-radius:18px; padding:16px 18px;
}

/* Contact list: icon + value (no labels) */
.list{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.item{display:flex; align-items:flex-start; gap:10px; color:#e8edf7; font-size:15px; line-height:1.45}
.item svg{flex:0 0 20px; opacity:.9; width:20px; height:20px}
.item a{color:#fff; text-decoration:none; border-bottom:1px dotted rgba(var(--accent-rgb), .4)}
.item a:hover{color:var(--accent)}

.mini{font-size:12px; color:var(--muted); text-align:left; margin-top:8px}

/* Hero + orb */
.hero{position:relative; aspect-ratio:1.2/1; width:100%; display:grid; place-items:center}

.orb{
  width:min(600px, 82vw);
  aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(35% 35% at 30% 30%, rgba(var(--accent-rgb), .35), transparent 60%),
    radial-gradient(55% 55% at 70% 70%, rgba(var(--accent-rgb), .18), transparent 70%),
    radial-gradient(closest-side, #0b0f14 20%, #111826 70%, #0b0f14 100%);
  border:1px solid rgba(var(--accent-rgb), .15);
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), .08), 0 0 120px rgba(var(--accent-rgb), .10);
  position:relative; overflow:hidden;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-2px)}50%{transform:translateY(6px)}}
.ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(var(--accent-rgb), .28);
  animation:spin 12s linear infinite;
  mask:radial-gradient(circle at center, black 62%, transparent 64%);
}
.ring.r2{inset:12%; animation-duration:16s; opacity:.65}
.ring.r3{inset:24%; animation-duration:22s; opacity:.45}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOGO PETAK BESAR — dibesarkan & sentiasa center */
.logo-square{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(460px, 78%);
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:12px;
  background:#0000;
  filter:drop-shadow(0 0 14px rgba(var(--accent-rgb), .35));
  animation:logoFloat 4.8s ease-in-out infinite;
}
@keyframes logoFloat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.02)}
}

/* Fallback SVG jika logo tiada */
.fallback{position:absolute; inset:0; margin:auto; display:block}