/* =========================================================================
   APOGEE — style.css
   Tampilan mengikuti referensi "Quantum": gelap ungu kosmik, kaca melayang,
   logotype besar berjarak lebar, tombol pil bercahaya.
   Semua visual (planet, batu, nyala) digambar CSS. Nol file gambar.
   ========================================================================= */

/* ---- 1. Warna dan ukuran dasar ---------------------------------------- */
:root{
  /* Palet sengaja dipersempit. Sebelumnya ada ungu, hijau terang, merah
     terang, dan kuning — empat warna sinyal yang saling berebut perhatian
     dan membuat halaman terlihat seperti dasbor bawaan. Sekarang hanya:
     satu hitam, satu putih pudar, satu ungu, dan sinyal yang diredam. */
  --void:#050409;
  --text:#f1eff8;
  --muted:#8d86a6;          /* teks pendukung */
  --faint:#615b7a;          /* keterangan paling kecil */
  --violet:#8b6dff;
  --violet-soft:#b9a4ff;

  /* Warna sinyal sengaja diturunkan kejenuhannya. Tetap terbaca artinya,
     tapi tidak berteriak seperti lampu lalu lintas. */
  --sig-dead:#c2808f;
  --sig-alive:#86b8a0;
  --sig-fresh:#a2996f;

  --line:rgba(255,255,255,.07);
  --line-lit:rgba(255,255,255,.13);
  --surface:rgba(255,255,255,.032);

  --maxw:1180px;
  --font-display:'Sora','Space Grotesk',system-ui,sans-serif;
  --font-body:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* Ikon SVG: ukurannya ikut ukuran huruf induknya dan warnanya ikut warna
   teks, jadi selalu selaras di mana pun dipakai. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;display:block;flex:none;color:inherit}

*{box-sizing:border-box;margin:0;padding:0}
/* PENTING: atribut hidden di HTML kalah oleh display:flex/grid di CSS.
   Tanpa baris ini, kotak alamat kontrak tetap muncul walau token belum ada. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  font-weight:400;
  background:var(--void);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.68;
  letter-spacing:.005em;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* =========================================================================
   2. LATAR KOSMIK
   ========================================================================= */
.cosmos{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--void);
}

/* Kanvas WebGL dan SVG cadangan sama-sama mengisi penuh layar. */
.scene3d{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Kalau WebGL tidak tersedia, gambar yang sama dipasang lewat CSS biasa.
   Tidak ada gerak kedalaman maupun pusaran — dua hal itu memang butuh kartu
   grafis — tapi halamannya tetap utuh dan tetap punya identitas. */
.tanpa-webgl .cosmos{
  /* Sengaja BUKAN 'cover'. Gambar diperbesar dan digeser ke bawah supaya
     kepala naik ke sepertiga atas dan bahu yang gelap jadi alas teks —
     sama seperti yang dilakukan jalur WebGL. */
  background:
    url('../assets/hero.webp') center 12% / auto 106% no-repeat,
    var(--void);
}
@media (orientation:portrait){
  .tanpa-webgl .cosmos{
    background:
      url('../assets/hero-mobile.webp') center top / cover no-repeat,
      var(--void);
  }
}

.grain{
  position:absolute;inset:-50%;pointer-events:none;
  opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
.tanpa-webgl .grain{opacity:.055}
@keyframes grainShift{
  0%  {transform:translate(0,0)}
  20% {transform:translate(-3%,2%)}
  40% {transform:translate(2%,-3%)}
  60% {transform:translate(-2%,-2%)}
  80% {transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}

/* =========================================================================
   3. NAVIGASI
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  height:56px;padding:0 24px;
  /* Blur dikecilkan dari 16px jadi 5px. Blur tebal menarik cincin planet
     yang terang ikut terseret ke atas dan meninggalkan noda buram di pita
     navigasi. Gradasinya juga dipendekkan supaya bagian atas terasa lega. */
  background:linear-gradient(to bottom,
    rgba(6,4,13,.72), rgba(6,4,13,.22) 55%, transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}

/* Logo di pojok kiri — tulisan APOGEE yang dipotong dari logo buatan user. */
.nav-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.nav-logo img{
  height:26px;width:26px;display:block;
  filter:drop-shadow(0 0 12px rgba(150,110,255,.45));
}

/* Tab gelap di tengah navigasi, berisi tulisan APOGEE dari logo user.
   Alas gelapnya bukan hiasan: tanpa itu tulisannya berdiri langsung di atas
   cincin planet yang terang dan tidak terbaca. */
.nav-notch{
  position:absolute;left:50%;transform:translateX(-50%);top:0;
  display:flex;align-items:center;justify-content:center;
  padding:13px 30px 12px;
  background:rgba(8,5,18,.88);
  border:1px solid var(--line);border-top:none;
  border-radius:0 0 18px 18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.nav-notch img{
  height:14px;width:auto;display:block;
  filter:drop-shadow(0 0 10px rgba(160,120,255,.5));
}

.nav-links{display:flex;gap:22px;font-size:13px}
.nav-links a{position:relative;color:var(--muted);text-decoration:none;
             transition:color .25s;padding-bottom:3px}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--violet-soft);transition:width .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:#fff}
.nav-links a.active::after{width:100%;background:rgba(255,255,255,.28)}

/* margin-left:auto inilah yang mendorong seluruh kelompok kanan ke tepi.
   Tanpa aturan ini, kolom peluncuran menempel ke logo di kiri. */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:13px}

/* Kolom alamat kontrak / waktu peluncuran. Satu kolom, dua keadaan. */
.nav-ca{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-family:var(--font-mono);font-size:11px;white-space:nowrap;
}
.nav-ca.live{border-color:rgba(185,164,255,.34);background:rgba(139,109,255,.10)}
.nav-ca-label{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.nav-ca-value{color:#fff;letter-spacing:.02em}
.nav-ca-copy{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  padding:3px 8px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid var(--line);color:#fff;
}
.nav-ca-copy:hover{background:rgba(255,255,255,.18)}

.nav-clock{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--sig-alive);
     box-shadow:0 0 9px var(--sig-alive);flex:none}
.dot.off{background:var(--sig-dead);box-shadow:0 0 9px var(--sig-dead)}

.btn-pill{
  display:flex;align-items:center;gap:9px;
  padding:8px 8px 8px 17px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:#fff;text-decoration:none;font-size:12.5px;white-space:nowrap;
  cursor:pointer;font-family:var(--font-body);
  transition:background .2s,border-color .2s;
}
.btn-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(190,160,255,.4)}
.btn-arrow{
  width:26px;height:26px;border-radius:50%;background:#fff;color:#12081f;
  display:grid;place-items:center;font-size:12px;flex:none;
}
.btn-arrow .ico{width:13px;height:13px}

/* =========================================================================
   4. HERO
   ========================================================================= */
main{position:relative;z-index:2}

.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  /* Teks TIDAK di tengah. Bagian tengah gambar diisi kepala dan galaksinya,
     dan di situ kecerahannya tinggi serta ramai — tulisan apa pun akan hilang.
     Sepertiga bawah gambar justru gelap, jadi teksnya diturunkan ke sana dan
     bagian terbaik gambarnya dibiarkan terlihat utuh di atas. */
  justify-content:flex-end;
  text-align:center;padding:110px 24px 5vh;position:relative;
}
/* Penggelap bertahap. Paling pekat tepat di bawah tempat teks berdiri, lalu
   memudar ke atas supaya kepala dan galaksinya tidak ikut tertutup. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(5,4,9,.34) 0%,      /* sedikit gelap di bawah navigasi */
      rgba(5,4,9,.04) 12%,
      rgba(5,4,9,0)   30%,     /* kepala dan lubang hitam dibiarkan bersih */
      rgba(5,4,9,.08) 42%,
      rgba(5,4,9,.34) 54%,     /* pita gelap mulai di sini: alas teks */
      rgba(5,4,9,.72) 68%,
      rgba(5,4,9,.93) 82%,
      #050409          95%);
}
.hero > *{position:relative;z-index:1}
.eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(230,222,255,.78);text-shadow:0 1px 12px rgba(0,0,0,.9);display:flex;align-items:center;gap:11px;
  margin-bottom:30px;font-weight:400;
}
/* Tautan sosial di hero, di bawah baris pembuka. Sengaja kecil dan redam:
   ini bukan ajakan utama — tombol besar di bawah yang memegang peran itu. */
.hero-social{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:-16px 0 26px;
}
.hero-social a{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:var(--faint);text-decoration:none;
  border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s;
}
.hero-social a:hover{color:#fff;background:rgba(255,255,255,.07);
                     border-color:var(--line)}
.hero-social .ico{width:15px;height:15px}

.spark{width:.72em;height:.72em;color:var(--violet-soft);
       filter:drop-shadow(0 0 8px rgba(139,109,255,.9))}

.tagline{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(13px,2.2vw,25px);
  letter-spacing:.13em;color:rgba(255,255,255,.92);
  text-shadow:0 2px 16px rgba(0,0,0,.8);
  margin-bottom:24px;text-wrap:balance;
}
.subline{
  max-width:500px;font-size:14.5px;font-weight:300;color:var(--muted);
  line-height:1.72;margin-bottom:40px;text-wrap:balance;
}

/* Tombol utama bercahaya */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 11px 11px 26px;border-radius:999px;
  background:linear-gradient(180deg,#8f74ff,#6b47ec);
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:500;
  border:1px solid rgba(200,180,255,.45);
  box-shadow:0 10px 40px rgba(124,92,255,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s,box-shadow .2s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 54px rgba(124,92,255,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.cta-arrow{
  width:32px;height:32px;border-radius:50%;background:#fff;color:#2b1160;display:grid;place-items:center;font-style:normal;font-size:14px;
}
.scroll-cue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.45);font-size:22px;text-decoration:none;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* =========================================================================
   5. PANEL ISI
   ========================================================================= */
.panel{
  position:relative;padding:118px 0 104px;
  background:rgba(5,4,9,.955);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* Pemisah antar bagian: garis rambut yang paling terang di tengah lalu
   memudar ke tepi — gema halus dari busur di hero. */
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent,rgba(167,139,250,.05) 18%,
    rgba(200,180,255,.30) 50%,
    rgba(167,139,250,.05) 82%,transparent);
}
#index{background:linear-gradient(to bottom,rgba(5,4,9,.72),rgba(5,4,9,.955) 18%)}

.section-head{margin-bottom:56px;max-width:660px}
/* Label bernomor di atas tiap judul — memberi struktur seperti terbitan
   cetak, dan mengisi kekosongan yang bikin halaman terasa generik. */
.sec-num{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--muted);
}
.sec-num span{color:var(--violet-soft)}
.sec-num i{
  width:52px;height:1px;flex:none;
  background:linear-gradient(90deg,rgba(167,139,250,.7),rgba(167,139,250,0));
}
.section-head.row{display:flex;align-items:flex-end;justify-content:space-between;
                  gap:20px;max-width:none}
.section-head h3{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(28px,4.2vw,48px);letter-spacing:-.005em;
  line-height:1.12;color:#fff;margin-bottom:16px;
}
.section-head h3 em{font-style:normal;font-weight:500;color:#fff}
.section-head p{color:var(--muted);font-size:14.5px;font-weight:300;
                line-height:1.72;max-width:560px}

.live-pill{
  display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--muted);padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--sig-alive);
       animation:beat 2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(134,184,160,.45)}
                50%{opacity:.45;box-shadow:0 0 0 7px rgba(134,184,160,0)}}

/* ---- Angka index besar ------------------------------------------------ */
.index-hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;gap:46px;align-items:center;
  padding:40px;border-radius:24px;
  border:1px solid var(--line);border-top-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  margin-bottom:26px;
}
/* Cahaya lembut di belakang angka besar, gema dari titik puncak di hero */
.index-hero::after{
  content:'';position:absolute;left:-60px;top:-120px;
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,92,255,.20),transparent 68%);
}
.index-big,.index-side{position:relative;z-index:1}
.index-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.index-value{
  /* Sengaja BUKAN Orbitron: angka nol di Orbitron bergaris silang dan
     terbaca seperti ikon error. Untuk situs data itu fatal. */
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(56px,10vw,116px);line-height:.9;color:#fff;
  text-shadow:0 0 44px rgba(167,139,250,.65);
}
.index-unit{font-family:var(--font-body);font-weight:600;font-size:30px;color:var(--violet-soft)}
.index-label{font-size:13px;color:var(--muted);letter-spacing:.14em;
             text-transform:uppercase;width:100%}
.index-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.07);
           overflow:hidden;margin-bottom:14px}
.index-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--violet-soft),var(--violet-soft));
  box-shadow:0 0 20px rgba(139,102,255,.8);transition:width 1s ease}
.index-note{font-size:13px;color:var(--muted)}
/* Statistik yang langsung terisi tanpa perlu menunggu */
.instant-stat{
  margin-top:18px;padding:16px 18px;border-radius:14px;
  border:1px solid rgba(167,139,250,.26);
  background:linear-gradient(180deg,rgba(124,92,255,.13),rgba(124,92,255,.04));
  display:grid;gap:5px;
}
.instant-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-soft)}
.instant-value{font-size:15px;color:#fff}
.instant-value b{font-family:var(--font-body);font-weight:600;font-size:26px;color:#fff;
                 text-shadow:0 0 22px rgba(167,139,250,.7);margin-right:6px}
.instant-sub{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.index-note b{color:#fff}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stat{padding:22px 22px 24px;border-radius:18px;
      border:none;border-top:1px solid var(--line-lit);border-radius:0;
      background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 82%);
      transition:border-color .3s}
.stat:hover{border-top-color:rgba(185,164,255,.55)}
.stat-num{display:block;font-family:var(--font-body);font-weight:500;
          font-size:36px;letter-spacing:-.025em;color:#fff;margin-bottom:9px}
.stat-num.dead{color:var(--sig-dead)}
.stat-num.orbit{color:var(--sig-alive)}
.stat-cap{font-size:11px;color:var(--muted);letter-spacing:.10em;
          text-transform:uppercase;line-height:1.5}
.stat-hint{font-style:normal;font-size:10.5px;color:var(--faint);
           letter-spacing:0;text-transform:none;line-height:1.4;
           display:block;margin-top:4px}

/* ---- Kartu mint baru --------------------------------------------------- */
.mint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:12px}
.mint-card{
  padding:18px 18px 16px;border-radius:14px;
  border:1px solid var(--line);border-top-color:var(--line-lit);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.010));
  position:relative;overflow:hidden;
  transition:border-color .3s cubic-bezier(.2,.7,.3,1),
             transform .3s cubic-bezier(.2,.7,.3,1);
}
.mint-card:hover{border-color:rgba(185,164,255,.34);transform:translateY(-2px)}
.mint-card.is-new{animation:pop .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.mint-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.mint-icon{
  width:30px;height:30px;border-radius:9px;object-fit:cover;flex:none;
  background:linear-gradient(150deg,#6d4fd6,#241547);
  display:grid;place-items:center;font-size:10.5px;color:rgba(255,255,255,.85);
  font-family:var(--font-display);font-weight:500;letter-spacing:.02em;
}
.mint-id{min-width:0;flex:1}
.mint-sym{font-weight:500;font-size:13.5px;color:#fff;line-height:1.25;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mint-age{font-family:var(--font-mono);font-size:10px;color:var(--faint);
          letter-spacing:.02em}

/* Status jadi titik kecil + huruf mungil, bukan pil berwarna mencolok.
   Empat pil warna-warni di tiap kartu membuat halaman terlihat ramai. */
.mint-state{
  display:flex;align-items:center;gap:6px;flex:none;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--faint);
}
.mint-state i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.s-fresh{color:var(--sig-fresh)}
.s-alive{color:var(--sig-alive)}
.s-dead {color:var(--sig-dead)}
.s-orbit{color:var(--violet-soft)}

/* Satu angka yang jelas dominan — inilah yang mata cari lebih dulu. */
.mint-figure{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.mint-figure b{
  font-family:var(--font-body);font-weight:500;font-size:26px;
  letter-spacing:-.02em;color:#fff;line-height:1;
}
.mint-delta{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.mint-delta.bad{color:var(--sig-dead)}
.mint-delta.flat{color:var(--faint)}
.mint-cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--faint);margin:7px 0 14px}
.mint-meta{
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  padding-top:12px;border-top:1px solid rgba(255,255,255,.05);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.empty{grid-column:1/-1;padding:52px;text-align:center;color:var(--muted);
       font-size:13.5px;font-weight:300;
       border:1px dashed var(--line);border-radius:16px}

/* ---- Daftar jatuh terdalam --------------------------------------------- */
.fall-list{display:grid;border-top:1px solid var(--line-lit)}
.fall-row{
  display:grid;grid-template-columns:34px 1fr auto auto;gap:16px;align-items:center;
  padding:17px 6px;border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .25s;
}
.fall-row:hover{background:rgba(255,255,255,.022)}
.fall-rank{font-family:var(--font-mono);color:var(--muted);font-size:13px}
.fall-sym{font-weight:600;color:#fff;font-size:14px}
.fall-meta{font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.fall-pct{font-family:var(--font-body);font-weight:600;font-size:20px;
          color:var(--sig-dead);text-align:right}
.fall-bar{width:120px;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fall-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--sig-dead))}

/* ---- Tabel developer ---------------------------------------------------- */
.dev-table{border:none;border-top:1px solid var(--line-lit)}
.dev-row{
  display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:14px;
  padding:17px 6px;align-items:center;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .25s;
}
.dev-row:not(.head):hover{background:rgba(255,255,255,.022)}
.dev-row:last-child{border-bottom:none}
.dev-row.head{background:none;font-size:9.5px;font-family:var(--font-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  padding-top:16px;padding-bottom:16px}
.dev-addr{font-family:var(--font-mono);font-size:12px;color:#dcd6f5}
.dev-tags{font-size:10.5px;color:var(--muted);margin-top:3px}
.dev-num{font-family:var(--font-mono);color:#fff}
.dev-rate{display:flex;align-items:center;gap:10px}
.dev-rate-bar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.dev-rate-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--sig-alive))}
.dev-rate b{font-family:var(--font-mono);font-size:12px;min-width:44px;text-align:right}

/* ---- Terminal ----------------------------------------------------------- */
.terminal{border:1px solid var(--line);border-top-color:var(--line-lit);
          border-radius:16px;overflow:hidden;background:rgba(3,2,7,.85)}
.term-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;
          background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}
.term-dots{display:flex;gap:6px}
.term-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.term-title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.20em;color:var(--faint)}
.term-meta{margin-left:auto;font-family:var(--font-mono);font-size:10px;
            letter-spacing:.08em;color:var(--muted)}
.term-body{padding:18px;height:268px;overflow-y:auto;font-family:var(--font-mono);
           font-size:11.5px;line-height:2}
.term-line{white-space:pre-wrap;word-break:break-word;animation:pop .3s ease both}
.term-line.muted{color:var(--muted)}
.term-line .t{color:#5f5780}
.term-line.mint  .k{color:var(--violet-soft)}
.term-line.dead  .k{color:var(--sig-dead)}
.term-line.orbit .k{color:var(--sig-alive)}
.term-body::-webkit-scrollbar{width:8px}
.term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}

/* ---- Kenapa Apogee ------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.why-card{padding:26px;border-radius:18px;
          border:1px solid var(--line);border-top-color:rgba(255,255,255,.13);
          background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.why-card h4{font-size:15px;color:#fff;margin-bottom:9px;font-weight:600}
.why-card p{font-size:13.5px;color:var(--muted)}
.why-card em{color:var(--violet-soft);font-style:normal}
.disclaimer{margin-top:26px;font-size:12px;color:#847bab;max-width:760px}

/* ---- Kotak token --------------------------------------------------------- */
.token-panel{padding:80px 0 96px}
.token-box{
  text-align:center;padding:52px 32px;border-radius:26px;
  border:1px solid rgba(167,139,250,.28);
  background:radial-gradient(700px 300px at 50% 0%,rgba(124,92,255,.20),transparent 70%),
             rgba(16,11,32,.6);
}
.token-ticker{
  display:inline-block;font-family:var(--font-display);font-size:13px;
  letter-spacing:.2em;color:var(--violet-soft);margin-bottom:18px;
  padding:6px 16px;border-radius:99px;border:1px solid rgba(167,139,250,.34);
}
.token-box h3{font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,3vw,30px);color:#fff;margin-bottom:12px;letter-spacing:.04em}
.token-box p{color:var(--muted);font-size:14.5px;max-width:520px;margin:0 auto 26px}
.token-actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.ca-row{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:22px;flex-wrap:wrap}
.ca-row code{font-family:var(--font-mono);font-size:12px;color:#cfc6ef;
  background:rgba(0,0,0,.4);padding:9px 14px;border-radius:10px;
  border:1px solid var(--line);word-break:break-all}
.copy-btn{padding:9px 16px;border-radius:10px;cursor:pointer;font-size:12px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;
  font-family:var(--font-body)}
.copy-btn:hover{background:rgba(255,255,255,.16)}

/* ---- Kaki halaman -------------------------------------------------------- */
.foot{position:relative;z-index:2;padding:44px 0 52px;background:rgba(3,2,7,.94);
      border-top:1px solid var(--line)}
.foot-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
         font-size:11.5px;font-weight:300;color:var(--faint)}
.foot-brand{font-family:var(--font-display);font-weight:200;letter-spacing:.28em;
            color:#fff;font-size:13px}
.foot-calls{margin-left:auto;font-family:var(--font-mono)}
.foot-calls b{color:var(--violet-soft)}

/* =========================================================================
   6. LAYAR KECIL
   ========================================================================= */
/* Antara 900px dan 1200px, navigasi lengkap masih muat tapi mepet. Jam
   adalah elemen paling tidak penting di sana, jadi ia yang pertama pergi. */
@media (max-width:1200px){
  .nav-clock{display:none}
}

@media (max-width:900px){
  .nav-links{display:none}
  /* Tab merek berada di TENGAH secara absolut, jadi begitu ruangnya menyempit
     ia bertabrakan dengan apa pun di kanan. Jam dan tombol dibuang lebih
     awal, dan tab-nya sendiri dikecilkan. Kolom peluncuran tetap tampil —
     itu yang paling dicari pengunjung. */
  .nav-clock{display:none}
  .nav-right .btn-pill{display:none}
  .nav-ca{padding:5px 9px;font-size:9.5px;gap:5px}
  .nav-ca-label{display:none}
  .nav-notch{padding:11px 16px 10px}
  .nav-notch img{height:11px}
  .nav{gap:10px;padding:0 14px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  /* Di kolom sempit, huruf besar berjarak lebar pecah jadi tiga baris.
     Jaraknya dirapatkan supaya tiap label muat satu-dua baris saja. */
  .stat-cap{font-size:9.5px;letter-spacing:.06em;line-height:1.45}
  .stat-hint{font-size:9px}
  .stat-num{font-size:30px}
  .index-hero{grid-template-columns:1fr;gap:26px;padding:28px}
  .dev-row{grid-template-columns:1fr auto;gap:8px}
  .dev-row .dev-hide{display:none}
  .section-head.row{flex-direction:column;align-items:flex-start}
  .fall-row{grid-template-columns:26px 1fr auto;gap:12px}
  .fall-bar{display:none}
}
/* iPhone SE lama (320px). Tab merek dikecilkan lagi supaya tetap muat
   di antara lambang kiri dan kolom peluncuran kanan. */
@media (max-width:400px){
  .nav{gap:6px;padding:0 10px}
  .nav-notch{padding:10px 12px 9px}
  .nav-notch img{height:9px}
  .nav-ca{padding:4px 8px;font-size:9px}
}

@media (max-width:560px){
  .panel{padding:64px 0}
  /* Teks hero dinaikkan sedikit supaya celah ke gambar tidak menganga. */
  .hero{padding-bottom:11vh}
  .stat-grid{grid-template-columns:1fr 1fr}
}

/* Hormati pengguna yang mematikan animasi di setelan sistemnya */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* =========================================================================
   7. DETAIL KECIL YANG MEMBEDAKAN
   ========================================================================= */

/* Warna seleksi teks. Kalau dibiarkan bawaan, warnanya biru terang dan
   langsung merusak seluruh palet begitu pengunjung menyorot tulisan. */
::selection{background:rgba(139,109,255,.32);color:#fff}

/* Keadaan fokus untuk pengguna keyboard. Wajib ada, dan bentuknya harus
   sengaja dirancang — bukan garis biru bawaan browser. */
:focus-visible{
  outline:1px solid var(--violet-soft);
  outline-offset:3px;border-radius:4px;
}
a,button{-webkit-tap-highlight-color:transparent}

/* Batang gulir halaman disamakan dengan tema */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#070510}
::-webkit-scrollbar-thumb{background:#241a44;border-radius:99px;
                          border:3px solid #070510}
::-webkit-scrollbar-thumb:hover{background:#3a2a66}


/* =========================================================================
   8. PANEL LIVE DATA
   ========================================================================= */
.live-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(3,2,7,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s;
}
.live-backdrop.show{opacity:1}
.live-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(420px,100vw);display:flex;flex-direction:column;
  background:rgba(8,5,16,.96);border-left:1px solid var(--line-lit);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  transform:translateX(104%);transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.live-panel.show{transform:none}
.live-head{
  display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.live-title{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.18em;color:#fff}
.live-meta{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.live-close{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;
}
.live-close:hover{background:rgba(255,255,255,.14)}
.live-close .ico{width:14px;height:14px}

.live-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:16px 20px;border-bottom:1px solid var(--line);gap:8px;
}
.live-stats div{display:grid;gap:3px;text-align:center}
.live-stats b{font-family:var(--font-body);font-weight:500;font-size:20px;
  letter-spacing:-.02em;color:#fff}
.live-stats span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.live-section{padding:16px 20px 6px;overflow:auto;min-height:0}
.live-section:nth-of-type(2){flex:1 1 55%}
.live-section:nth-of-type(3){flex:1 1 45%;border-top:1px solid var(--line)}
.live-section h4{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;font-weight:500}
.live-list{list-style:none;display:grid;gap:6px}
.live-list li{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);
  font-size:12px;animation:pop .35s ease both;
}
.live-list .mint-icon{width:26px;height:26px;border-radius:7px;font-size:9px}
.live-list .lv-sym{color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-list .lv-sub{font-family:var(--font-mono);font-size:10px;color:var(--faint)}
.live-list .lv-val{font-family:var(--font-mono);font-size:11px;color:#dcd6f5;text-align:right}
.live-list .mint-state{justify-self:end}
.live-empty{grid-template-columns:1fr!important;color:var(--muted);font-weight:300;
  padding:18px 10px!important;text-align:center}
.live-events li{grid-template-columns:auto 1fr auto}
.live-events .t{font-family:var(--font-mono);font-size:10px;color:var(--faint)}
.live-events .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em}
.live-events .mint .k{color:var(--violet-soft)}
.live-events .dead .k{color:var(--sig-dead)}
.live-events .orbit .k{color:var(--sig-alive)}

.live-foot{padding:14px 20px;border-top:1px solid var(--line)}
.live-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#fff;
  text-decoration:none}
.live-link .ico{width:12px;height:12px;color:var(--violet-soft)}
.live-link:hover{color:var(--violet-soft)}

body.live-open{overflow:hidden}

/* =========================================================================
   9. KONSOL TERMINAL & ALAT PERIKSA
   ========================================================================= */

/* ---- Kendali terminal --------------------------------------------------- */
.term-filters{display:flex;gap:4px}
.term-chip{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  padding:4px 9px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--faint);
  transition:color .2s,border-color .2s,background .2s;
}
.term-chip:hover{color:#fff;border-color:var(--line-lit)}
.term-chip.on{color:#fff;border-color:rgba(185,164,255,.45);background:rgba(139,109,255,.14)}
.term-btn{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  padding:5px 11px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);
  transition:color .2s,background .2s;
}
.term-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.term-btn.on{color:#fff;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.12)}

.term-line[data-mint]{cursor:pointer;border-radius:5px;padding:0 5px;margin:0 -5px}
.term-line[data-mint]:hover{background:rgba(255,255,255,.06)}
.term-line[hidden]{display:none!important}

.term-foot{
  display:flex;align-items:center;gap:14px;padding:10px 18px;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02);
}
.term-hint{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);
           transition:color .2s}
.term-hint.ok{color:var(--sig-alive)}
.term-foot .term-btn{margin-left:auto}

/* ---- Alat periksa token ------------------------------------------------- */
.lookup{margin-bottom:26px}
.lookup-label{
  display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;
}
.lookup-row{display:flex;gap:9px;max-width:620px}
.lookup-input{
  flex:1;min-width:0;padding:12px 15px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:#fff;font-family:var(--font-mono);font-size:12px;
  transition:border-color .25s,background .25s;
}
.lookup-input::placeholder{color:var(--faint)}
.lookup-input:focus{outline:none;border-color:rgba(185,164,255,.5);background:rgba(255,255,255,.07)}
.lookup-go{
  padding:12px 22px;border-radius:12px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#8f74ff,#6b47ec);
  border:1px solid rgba(200,180,255,.4);color:#fff;
  font-family:var(--font-body);font-size:13px;font-weight:500;
  transition:transform .2s,box-shadow .2s;
}
.lookup-go:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,92,255,.42)}
.lookup-note{font-size:11.5px;color:var(--faint);margin-top:8px;font-weight:300}

.lookup-result{
  margin-top:16px;padding:20px;border-radius:16px;max-width:620px;
  border:1px solid var(--line);border-top-color:var(--line-lit);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  font-size:13px;color:var(--muted);animation:pop .35s ease both;
}
.lookup-result.bad{border-color:rgba(194,128,143,.32);color:var(--sig-dead)}
.lookup-result.bad b{color:#fff}
.lookup-result.wait{color:var(--faint)}
.lk-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lk-sym{font-size:17px;font-weight:600;color:#fff}
.lk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.lk-grid div{display:grid;gap:3px}
.lk-grid b{font-family:var(--font-body);font-weight:500;font-size:17px;
           letter-spacing:-.02em;color:#fff}
.lk-grid span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.lk-dev{font-size:13px;line-height:1.65;color:var(--muted);
        padding-top:13px;border-top:1px solid rgba(255,255,255,.06)}
.lk-dev b{color:#fff}
.lk-links{display:flex;gap:9px;margin-top:14px}
.lk-links a{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  padding:6px 12px;border-radius:99px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;
}
.lk-links a:hover{background:rgba(255,255,255,.14);border-color:rgba(185,164,255,.4)}

@media (max-width:640px){
  .term-filters{display:none}
  .lookup-row{flex-direction:column}
  .lk-grid{grid-template-columns:repeat(2,1fr)}
}