/* ============================================================
   MIBBLIN — TAMPILAN SITUS
   Tema: malam nila gelap + cahaya emas hangat
   ============================================================ */

:root{
  /* warna dasar */
  --bg:        #0B0A14;   /* latar paling gelap */
  --bg-2:      #12111F;   /* latar selang-seling */
  --panel:     #191828;   /* kotak/kartu */
  --line:      #2A2840;   /* garis pembatas */

  /* teks */
  --ink:       #EFEBF7;   /* teks utama */
  --ink-dim:   #A49DC0;   /* teks redup */

  /* aksen */
  --gold:      #F3C46B;
  --mint:      #8FE3C0;
  --violet:    #A78BFA;

  --radius: 14px;
  --wrap: 1120px;
  --font-pixel: "Press Start 2P", monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

/* semua sprite pixel art harus tajam, jangan diburamkan browser */
.sprite, .spirit-card img, .hero-parade img, .story-card img, .brand-mark{
  image-rendering: pixelated;
}

a{ color: inherit; text-decoration: none; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: 20px; }

/* --- partikel melayang di latar --- */
#motes{
  position: fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ============ NAVIGASI ============ */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,10,20,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: var(--wrap); margin-inline:auto;
  padding: 12px 20px;
  display:flex; align-items:center; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:30px; height:30px; }
.brand-name{
  font-family: var(--font-pixel); font-size: 16px;
  letter-spacing:1px; color: var(--ink);
  text-transform: uppercase;
}
.nav-links{ display:flex; gap:22px; margin-left:auto; }
.nav-links a{
  font-size:14px; color: var(--ink-dim);
  transition: color .18s;
}
.nav-links a:hover{ color: var(--gold); }

.nav-ca{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-pixel); font-size:10px;
  padding: 8px 12px; border-radius: 999px;
  border:1px solid var(--line); background: var(--panel);
  color: var(--ink-dim);
  white-space: nowrap;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding: 70px 0 90px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 0%, rgba(11,10,20,.75) 70%, var(--bg) 100%),
    linear-gradient(180deg, rgba(11,10,20,.55) 0%, transparent 30%, var(--bg) 97%);
}
.hero-inner{
  position:relative; z-index:2;
  text-align:center;
  max-width: 780px; padding-inline: 20px;
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--font-pixel); font-size:10px;
  color: var(--mint);
  border:1px solid rgba(143,227,192,.3);
  background: rgba(143,227,192,.07);
  padding: 7px 14px; border-radius:999px;
}

.wordmark{
  font-family: var(--font-pixel); font-weight:400;
  font-size: clamp(41px, 10vw, 88px);
  margin: 22px 0 0;
  line-height:1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #fff;
  text-shadow:
    0 0 24px rgba(243,196,107,.45),
    0 0 60px rgba(167,139,250,.3);
}
.tagline{
  color: var(--ink-dim);
  font-size: clamp(15px, 2.2vw, 19px);
  margin: 18px auto 0; max-width: 520px;
}

/* --- hitung mundur --- */
.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap: clamp(6px, 2vw, 16px);
  margin-top: 40px;
}
.cd-cell{
  display:flex; flex-direction:column; align-items:center;
  min-width: clamp(62px, 15vw, 92px);
  padding: 14px 8px 10px;
  background: rgba(25,24,40,.78);
  border:1px solid var(--line);
  border-radius: var(--radius);
}
.cd-cell b{
  font-family: var(--font-pixel);
  font-size: clamp(20px, 7vw, 34px);
  line-height:1; color: var(--gold);
  font-weight:400;
}
.cd-cell span{
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  color: var(--ink-dim); margin-top:9px;
}
.cd-sep{
  font-family: var(--font-pixel);
  font-size: clamp(17px, 7vw, 27px);
  color: var(--line); padding-top: 16px;
}
.cd-when{
  margin-top:16px; font-size:13px; color: var(--ink-dim);
}

/* --- kotak CA --- */
.ca-box{
  display:inline-flex; align-items:center; gap:11px;
  margin-top: 30px;
  padding: 10px 10px 10px 14px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 999px;
  max-width:100%;
}
.ca-label{
  font-family: var(--font-pixel); font-size:8px;
  color: var(--gold); letter-spacing:1px;
}
.ca-box code{
  font-family: ui-monospace, monospace; font-size:13px;
  color: var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-copy{
  font-family: var(--font-body); font-size:12px; font-weight:600;
  color: var(--bg); background: var(--gold);
  border:0; border-radius:999px; padding:6px 13px; cursor:pointer;
  transition: transform .12s;
}
.ca-copy:hover{ transform: translateY(-1px); }

/* --- tombol --- */
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.btn{
  font-family: var(--font-pixel); font-size:11px;
  padding: 15px 30px; border-radius: 12px;
  border:1px solid transparent;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  display:inline-block;
}
.btn-primary{
  background: linear-gradient(180deg, var(--gold), #E0A945);
  color: #241A05;
  box-shadow: 0 8px 26px rgba(243,196,107,.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(243,196,107,.4); }
.btn-primary.locked{
  background: var(--panel); color: var(--ink-dim);
  border-color: var(--line); box-shadow:none; cursor: default;
}
.btn-primary.locked:hover{ transform:none; box-shadow:none; }
.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: var(--line); color: var(--ink);
}
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--ink-dim); }

/* --- barisan sprite di bawah hero --- */
.hero-parade{
  display:flex; justify-content:center; align-items:flex-end;
  gap: clamp(2px, 2vw, 22px);
  margin-top: 50px;
}
.hero-parade img{
  width: clamp(46px, 12vw, 108px);
  animation: bob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .28s);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-11px) } }

/* ============ SECTION UMUM ============ */
/* scroll-margin-top biar judul nggak ketutup navigasi yang menempel di atas */
.section{ position:relative; z-index:1; padding: 96px 0; scroll-margin-top: 72px; }
.section.alt{ background: var(--bg-2); border-block:1px solid var(--line); }

.eyebrow{
  font-family: var(--font-pixel); font-size:10px;
  letter-spacing:1.6px; color: var(--gold); text-transform:uppercase;
}
.section h2{
  font-family: var(--font-pixel); font-weight:400;
  font-size: clamp(22px, 7vw, 35px);
  margin: 14px 0 0; line-height:1.25;
}
.section-sub{
  color: var(--ink-dim); max-width: 620px; margin-top:16px;
}

/* ============ STORY ============ */
.story-grid{
  display:grid; grid-template-columns: 1.35fr 1fr;
  gap: 44px; align-items:center; margin-top: 40px;
}
.lead{ font-size:19px; color: var(--ink); }
.story-copy p{ color: var(--ink-dim); }
.story-copy p.lead{ color: var(--ink); }
.story-card{
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 30px; text-align:center;
}
.story-card img{
  width: 148px; margin: 0 auto 14px;
  animation: bob 4s ease-in-out infinite;
}
.story-card h3{ font-family: var(--font-pixel); font-size:13px; font-weight:400; margin:0 0 8px; }
.story-card p{ color: var(--ink-dim); font-size:14px; margin:0; }

/* ============ SPIRITS ============ */
/* 7 kartu: di layar lebar jadi 4 + 3, lebih seimbang daripada 5 + 2 */
.spirit-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 18px; margin-top: 40px;
}
.spirit-card{
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px;
  text-align:center;
  transition: transform .2s, border-color .2s;
}
.spirit-card:hover{ transform: translateY(-5px); border-color: var(--elem); }
.spirit-card img{ width: 118px; margin: 0 auto 14px; }
.spirit-el{
  font-family: var(--font-pixel); font-size:8px;
  letter-spacing:1.2px; text-transform:uppercase; color: var(--elem);
}
.spirit-card h3{
  font-family: var(--font-pixel); font-weight:400;
  font-size:14px; margin: 9px 0 8px;
}
.spirit-card p{ font-size:13px; color: var(--ink-dim); margin:0; }

/* ============ WORLD ============ */
.world-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 18px; margin-top: 40px;
}
.world-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius: var(--radius);
  min-height: 300px;
  display:flex; align-items:flex-end;
}
.world-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s;
}
.world-card:hover img{ transform: scale(1.06); }
/* gelapkan bagian bawah kartu supaya teksnya kebaca di atas gambar */
.world-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
    transparent 18%,
    rgba(11,10,20,.55) 42%,
    rgba(11,10,20,.9) 66%,
    rgba(11,10,20,.98) 100%);
}
.world-text{ position:relative; z-index:2; padding: 22px; }
.world-text span{
  font-family: var(--font-pixel); font-size:8px;
  letter-spacing:1.2px; color: var(--gold); text-transform:uppercase;
}
.world-text h3{ font-family: var(--font-pixel); font-weight:400; font-size:14px; margin:8px 0 6px; }
.world-text p{ font-size:13px; color: var(--ink-dim); margin:0; }

/* ============ TOKENOMICS ============ */
/* minmax dinaikkan supaya di tablet jadi 2 kolom — angka suplai
   yang panjang butuh ruang lebih di font pixel */
.token-top{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:16px; margin-top: 36px;
}
.stat{
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; text-align:center;
}
.stat b{
  display:block; font-family: var(--font-pixel); font-weight:400;
  font-size: clamp(9px, 2.1vw, 22px); color: var(--gold); letter-spacing:-1px;
}
.stat span{ font-size:13px; color: var(--ink-dim); display:block; margin-top:10px; }

.planned{
  margin-top: 26px; padding: 34px;
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius);
  position:relative;
}
.planned-tag{
  position:absolute; top:-11px; left:28px;
  font-family: var(--font-pixel); font-size:8px; letter-spacing:1.2px;
  background: var(--violet); color: #150F28;
  padding: 4px 12px; border-radius:999px; text-transform:uppercase;
}
.planned h3{ font-family: var(--font-pixel); font-weight:400; font-size:17px; margin: 6px 0 12px; }
.planned > p{ color: var(--ink-dim); max-width: 660px; }

.flow{
  display:grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items:center; margin: 30px 0 6px;
}
.flow-col{
  background: rgba(11,10,20,.55); border:1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.flow-head{
  font-family: var(--font-pixel); font-size:8px; letter-spacing:1.2px;
  color: var(--mint); text-transform:uppercase;
}
.flow-col ul{ list-style:none; margin: 14px 0 0; padding:0; }
.flow-col li{
  font-size:14px; color: var(--ink-dim);
  padding: 8px 0; border-bottom:1px solid var(--line);
}
.flow-col li:last-child{ border-bottom:0; }
.flow-col li b{ color: var(--gold); font-family: var(--font-pixel); font-weight:400; font-size:11px; }
.flow-arrow{ font-size: 26px; color: var(--line); text-align:center; }

.disclaimer{
  font-size:12.5px; color:#6E6890; margin: 22px 0 0;
  padding-top: 18px; border-top:1px solid var(--line);
  max-width: 720px;
}

/* ============ ROADMAP ============ */
.roadmap{ list-style:none; margin: 40px 0 0; padding:0; display:grid; gap:14px; }
.roadmap li{
  background: var(--panel); border:1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 22px 26px;
}
.roadmap li.done{ border-left-color: var(--mint); }
.rm-tag{
  font-family: var(--font-pixel); font-size:8px; letter-spacing:1.2px;
  color: var(--ink-dim); text-transform:uppercase;
}
.roadmap li.done .rm-tag{ color: var(--mint); }
.roadmap h3{ font-family: var(--font-pixel); font-weight:400; font-size:14px; margin: 9px 0 7px; }
.roadmap p{ color: var(--ink-dim); font-size:14px; margin:0; }

/* ============ FOOTER ============ */
.footer{
  position:relative; z-index:1;
  border-top:1px solid var(--line); padding: 56px 0 34px;
  background: var(--bg);
}
.footer-inner{
  display:flex; justify-content:space-between; gap:30px;
  flex-wrap:wrap; align-items:flex-start;
}
.footer-note{ color: var(--ink-dim); font-size:14px; margin: 12px 0 0; }
.social-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.social-row a{
  font-family: var(--font-pixel); font-size:10px;
  padding: 8px 14px; border-radius: 999px;
  border:1px solid var(--line); background: var(--panel);
  color: var(--ink-dim);
  transition: color .18s, border-color .18s;
}
.social-row a:hover{ color: var(--gold); border-color: var(--gold); }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ font-size:14px; color: var(--ink-dim); }
.footer-links a:hover{ color: var(--gold); }
.footer-fine{
  margin-top: 40px; padding-top: 22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-fine p{ font-size:12px; color:#5E5880; margin:0; max-width: 660px; }
.footer-fine .copy{ white-space:nowrap; }

/* ============ LAYAR KECIL ============ */
@media (max-width: 880px){
  .story-grid{ grid-template-columns: 1fr; }
  .flow{ grid-template-columns: 1fr; }
  .flow-arrow{ transform: rotate(90deg); }
  .nav-links{ display:none; }
}
@media (max-width: 560px){
  .section{ padding: 66px 0; }
  .cd-sep{ display:none; }
  .countdown{ gap:8px; }
  .ca-box{ width:100%; }
  .btn{ width:100%; text-align:center; }
  .cta-row{ width:100%; }
}

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