/* =========================
   Design tokens (neon palette)
   ========================= */
:root{
  /* Background */
  --bg:#0b1a28;
  --bg-2:#0d2336;

  /* Text */
  --text:#DDE7F7;
  --muted:#91A8C4;

  /* Neon colors (match the reference look) */
  --neon-cyan:#18E6FF;
  --neon-cyan-soft:#00C6E8;
  --neon-pink:#FF53BF;
  --neon-green:#B6FF6C;
  --neon-amber:#FFC447;
  --neon-purple:#9F7BFF;
  --neon-teal:#3DE6C4;

  /* Surfaces */
  --surface:rgba(255,255,255,0.06);
  --surface-strong:rgba(10,20,30,0.55);
  --stroke:rgba(255,255,255,0.22);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.22) 100%),
    url("images/bg.png") center/cover no-repeat,
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

/* ===== Hero layout ===== */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 3.5vw, 40px);
  backdrop-filter: saturate(120%) blur(0.2px); /* subtle richness */
}

/* === 1) Add inner left offset so the copy isn't hugging the edge === */
.hero .left{
  /* push the content inward only on desktop */
  padding-left: clamp(16px, 6vw, 120px);
}

/* Keep things tight on mobile */
@media (max-width: 980px){
  .hero .left{ padding-left: 0; }
}


/* ===== Neon brand title ===== */
.brand-neon{
  /* Big title */
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: .9;

  /* Gradient fill similar to reference HOLO */
  background: radial-gradient(120% 120% at 0% 50%, var(--neon-green) 0%, #8BFFDA 35%, #BFFFD4 50%, #dfffe5 60%) text, 
              radial-gradient(120% 120% at 100% 50%, #7FC1FF 0%, #5CE0FF 38%, #55B4FF 60%) text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Multi-color outer glow rings (neon tube effect) */
  text-shadow:
    0 0 6px rgba(255,255,255,.75),
    0 0 14px rgba(255,255,255,.65),
    0 0 28px rgba(152, 255, 126, .55),
    0 0 48px rgba(24, 230, 255, .45),
    0 0 72px rgba(159, 123, 255, .35);
}

/* Copy under title */
.tagline{
  margin: 10px 0 24px;
  color: var(--muted);
  max-width: 54ch;
  font-size: clamp(14px, 2.2vw, 18px);
}

/* ===== Buttons (neon borders + glass body) ===== */
.cta{display:flex; flex-direction:column; gap:14px; width:min(520px,100%)}

/* =============== Neon buttons: transparent + glow text =============== */

/* Base glass look */
.btn.neon{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  padding:16px 20px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:2px solid transparent;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#E7F8FF;
  /* Subtle inner bevel so it's not flat */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease, border-image .18s ease;
  backdrop-filter: blur(6px) saturate(120%);
}

/* Set per-variant color variable (used for outline + glow) */
.btn.neon[data-variant="cyan"]   { --c: #18E6FF; --c2:#66E0FF; }
.btn.neon[data-variant="amber"]  { --c: #FFC447; --c2:#F2A900; }
.btn.neon[data-variant="purple"] { --c: #9F7BFF; --c2:#7F6CFF; }
.chip.neon-chip[data-variant="teal"] { --c:#3DE6C4; --c2:#7AFFE6; }
.chip.neon-chip[data-variant="pink"] { --c:#FF53BF; --c2:#FF88D7; }

/* Neon outline using border-image and soft outer bloom */
.btn.neon{
  border-image: linear-gradient(90deg, var(--c), var(--c2)) 1;
  /* Text has faint glow even at rest */
  text-shadow:
    0 0 6px rgba(255,255,255,.65),
    0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
}

/* Hover = brighter glow + subtle lift */
.btn.neon:hover,
.btn.neon:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 24px color-mix(in srgb, var(--c) 55%, transparent),
    0 10px 26px rgba(0,0,0,.35);
  text-shadow:
    0 0 8px rgba(255,255,255,.75),
    0 0 20px color-mix(in srgb, var(--c) 70%, transparent);
}

/* Active/click = strongest flash (also used by .flash class from JS) */
.btn.neon:active,
.btn.neon.flash{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 32px color-mix(in srgb, var(--c) 80%, transparent),
    0 0 64px color-mix(in srgb, var(--c) 55%, transparent);
  text-shadow:
    0 0 10px #fff,
    0 0 26px color-mix(in srgb, var(--c) 85%, transparent),
    0 0 60px color-mix(in srgb, var(--c) 55%, transparent);
}

/* Social chips get the same treatment, just a bit softer */
.chip.neon-chip{
  background: rgba(255,255,255,.06);
  border:2px solid transparent;
  border-image: linear-gradient(90deg, var(--c), var(--c2)) 1;
  color:#E7F8FF;
  text-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
  transition: box-shadow .18s ease, transform .15s ease, filter .18s ease;
}
.chip.neon-chip:hover,
.chip.neon-chip:focus-visible{
  transform: translateY(-1px);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
}
.chip.neon-chip:active,
.chip.neon-chip.flash{
  box-shadow:
    0 0 28px color-mix(in srgb, var(--c) 70%, transparent),
    0 0 56px color-mix(in srgb, var(--c) 50%, transparent);
}

/* Optional: slightly rounder corners like the reference */
.btn.neon, .chip.neon-chip { border-radius: 18px; }

/* Social chips (smaller neon pills) */
.social-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.chip{
  display:flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800; letter-spacing:.02em;
  background: rgba(255,255,255,.06);
  border: 2px solid transparent;
}
.neon-chip[data-variant="teal"]{
  border-image: linear-gradient(90deg, var(--neon-teal), #7AFFE6) 1;
  box-shadow: 0 0 16px rgba(61,230,196,.35);
}
.neon-chip[data-variant="pink"]{
  border-image: linear-gradient(90deg, var(--neon-pink), #FF88D7) 1;
  box-shadow: 0 0 16px rgba(255,83,191,.35);
}

/* Contract address pill */
.ca{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--stroke);
  color: #CDE0FF;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.ca-label{font-weight:900}
.ca-code{font-variant-numeric: tabular-nums}
.ca-copy{opacity:.9}

/* ===== Right side (character) ===== */
.right{
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center; /* center horizontally */
}

/* === 2) Flip Bren so it faces the CTAs (to the left) === */
.bren{
  /* previously: translateY(10%); now also mirror horizontally */
  transform: translateY(10%) scaleX(-1);
  transform-origin: center;
  
}

.bren-stage{
  transform: translateX(-80px); 
}



@media (max-width: 980px){
  .bren-stage{ transform: none; } 
}


/* Keep it centered on smaller screens */
@media (max-width: 980px){
  .bren-stage{ transform: none; }
}

/* Ensure the flip persists on mobile where we removed translateY */
@media (max-width: 980px){
  .bren{
    transform: scaleX(-1); /* keep mirroring on small screens */
  }
}


/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; padding-bottom: 24svh}
  .right{place-items:center}
  .bren{width:min(60vw, 420px)}
}
@media (max-width: 560px){
  .cta{gap:12px}
  .btn.neon{padding:14px 16px}
  .social-row{grid-template-columns:1fr}
}

/* ===== Bren animation wrapper (forward/back bob + breathing glow) ===== */
.bren-wrap{
  position: relative;
  width: min(38vw, 380px);
  max-width: 380px;
  transform-origin: 50% 85%;
  animation: brain-bob 3.2s ease-in-out infinite,
             brain-glow 2.4s ease-in-out infinite;

  /* new: shift character closer to the door */
  margin-right: clamp(-40px, -6vw, -80px);
}

/* Keep the image responsive and mirrored to face the CTAs */
.bren{
  width: 100%;
  display: block;
  /* keep the mirror from your CSS */
  transform: scaleX(-1);
  transform-origin: center;
  /* base shadow for depth (glow animation adds on top) */
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.55));
}



.bren-wrap::after{
  content:"";
  position: absolute;
  inset: -12% -10% -8% -10%; /* aura around Bren */
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 80, 170, .45) 0%,
    rgba(255, 80, 170, .25) 30%,
    rgba(255, 80, 170, .08) 60%,
    transparent 85%);
  z-index: -1; /* behind Bren */
  filter: blur(18px);
  animation: aura-pulse 3s ease-in-out infinite;
}

@keyframes aura-pulse{
  0%,100%{ opacity: .55; transform: scale(1); }
  50%    { opacity: .85; transform: scale(1.06); }
}


/* Elliptical floor glow under Bren */
.bren-floor{
  position: absolute;
  left: 50%; bottom: -4%;
  width: 70%; height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      rgba(0, 210, 190, .45),
      rgba(0, 210, 190, .22) 60%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(6px);
  animation: floor-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* --- Keyframes --- */
/* Gentle forward/backward bob with tiny squash for life-like motion */
@keyframes brain-bob{
  0%   { transform: translateY(0) translateX(0) scale(1); }
  25%  { transform: translateY(-6px) translateX(4px)  scale(1.01); }
  50%  { transform: translateY(0)  translateX(0)     scale(1); }
  75%  { transform: translateY(6px) translateX(-4px) scale(0.995); }
  100% { transform: translateY(0)  translateX(0)     scale(1); }
}

/* Breathing edge glow in Bren's pink hue */
@keyframes brain-glow{
  0%,100%{
    filter:
      drop-shadow(0 0 10px rgba(255, 90, 180, .25))
      drop-shadow(0 0 22px rgba(255, 90, 180, .18))
      drop-shadow(0 14px 40px rgba(0,0,0,.55)); /* keep base shadow */
  }
  50%{
    filter:
      drop-shadow(0 0 16px rgba(255, 90, 180, .38))
      drop-shadow(0 0 36px rgba(255, 90, 180, .28))
      drop-shadow(0 14px 40px rgba(0,0,0,.55));
  }
}

/* Floor glow pulse synced with brain glow */
@keyframes floor-pulse{
  0%,100% { transform: translateX(-50%) scaleX(1) scaleY(1); opacity:.9; }
  50%     { transform: translateX(-50%) scaleX(1.08) scaleY(1.06); opacity:1; }
}

/* Faster, brighter when hovering (optional) */
.bren-wrap:hover{
  animation-duration: 2.6s, 2s;
}

/* --- Responsive adjustments --- */
@media (max-width: 980px){
  .bren-wrap{ width: min(60vw, 420px); }
  .bren{ transform: scaleX(-1); } /* keep mirroring on small screens */
}

/* ===== Contract address pill (same size as big buttons) ===== */
.ca{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  /* Match button sizing */
  width: 100%;
  max-width: 520px;
  padding:16px 20px;
  border-radius:16px;

  /* Glass background */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(6px) saturate(120%);

  /* Border + glow */
  border:2px solid transparent;
  border-image: linear-gradient(90deg, var(--neon-teal), #7AFFE6) 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 18px rgba(61,230,196,.35);

  /* Text */
  font-size:16px;
  font-weight:700;
  color:#E7F8FF;
  letter-spacing:.03em;

  transition: transform .15s ease, box-shadow .18s ease;
}

/* Text parts inside */
.ca-label{ font-weight:900; }
.ca-code { font-variant-numeric: tabular-nums; opacity:.95; }
.ca-copy { opacity:.9; font-weight:600; }

/* Hover = brighter glow */
.ca:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 24px rgba(61,230,196,.55),
    0 0 42px rgba(61,230,196,.35);
}

/* Active/click flash */
.ca:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 28px rgba(61,230,196,.75),
    0 0 60px rgba(61,230,196,.45);
}


/* ===== SECTION 2 — LORE ===== */
/* Soft, playful backdrop like the reference screenshot */
.lore-section{
  background: linear-gradient(180deg, #e8f0ff 0%, #eaf2ff 100%);
  padding: clamp(40px, 6vw, 80px) 0;
}

/* Center layout: mascot + one floating burst button */
.lore-wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: clamp(340px, 48vw, 560px);
  display: grid;
  place-items: center;
}

/* Bren in the middle, with a subtle bounce so it feels alive */
.lore-logo{
  width: clamp(220px, 32vw, 420px);
  filter:
    drop-shadow(0 8px 24px rgba(0,0,0,.15))
    drop-shadow(0 2px 0 #00000020);
  animation: lore-bob 3.6s ease-in-out infinite;
}

/* --- SAFE SPACING VARS (di .lore-wrap & .lore-logo) --- */
.lore-wrap{
  position: relative; /* sudah ada, penting utk absolute child */
  --logo-w: clamp(220px, 32vw, 420px);  
  --safe-gap: clamp(18px, 3.2vw, 48px); 
}
.lore-logo{ width: var(--logo-w); }

.burst-btn{
  position: absolute;


  left: calc(50% + (var(--logo-w) / 2) + var(--safe-gap));
  top: clamp(10vh, 16vh, 120px);

  /* sisanya style kamu */
  display:flex; align-items:center; justify-content:center;
  width: min(420px, 48vw);
  min-height: 68px;
  padding: 16px 28px;
  border-radius: 14px;
  transform: rotate(-4deg);
  transform-origin: center;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(6px) saturate(120%);
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, #18E6FF, #66E0FF) 1;
  color:#EAF7FF; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  white-space: nowrap;
  text-shadow:0 0 5px rgba(255,255,255,.85), 0 0 14px rgba(24,230,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.35);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height:1;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
}

/* MOBILE: taruh ke tengah biar aman */
@media (max-width: 780px){
  .burst-btn{
    left: 50%;
    top: 10%;
    transform: translateX(-50%) rotate(0deg);
    width: min(90vw, 460px);
  }
}
/* hapus dobel border */
.burst-btn::after{ display:none; }

.burst-btn:hover{
  transform: rotate(-3deg) translateY(-2px) scale(1.03);
  filter: brightness(1.06);
}
.burst-btn:active{
  transform: rotate(-3deg) translateY(0) scale(.98);
}

/* ===== Modal styling (neon-glass window) ===== */
.modal[aria-hidden="true"]{ display:none; }
.modal{
  position: fixed; inset: 0;
  z-index: 80;
}

/* Backdrop blur with a soft vignette */
.modal-backdrop{
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(0,10,20,.55), rgba(0,6,12,.85));
  backdrop-filter: blur(2px) saturate(120%);
}

/* Dialog card */
.modal-dialog{
  position: relative;
  z-index: 1;
  width: min(920px, 92vw);
  max-height: min(82vh, 820px);
  margin: min(10vh, 80px) auto 0;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 16px;

  background: linear-gradient(180deg, rgba(18,28,42,.78), rgba(12,22,34,.78));
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, #18E6FF, #9F7BFF) 1;

  box-shadow:
    0 10px 40px rgba(0,0,0,.55),
    0 0 40px rgba(24,230,255,.25),
    0 0 80px rgba(159,123,255,.2);
  color: #e7f1ff;

  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Close button */
.modal-close{
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color:#fff; font-size: 22px; line-height:1;
  cursor:pointer;
  transition: filter .15s ease, transform .12s ease;
}
.modal-close:hover{ filter: brightness(1.15); transform: translateY(-1px); }

/* Header */
.modal-header{
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.modal-header h3{
  margin: 0;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #18E6FF, #9F7BFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 16px rgba(24,230,255,.35);
}
.modal-sub{
  margin: 6px 0 0;
  color:#9fb3d6;
  font-size: clamp(13px, 2.2vw, 15px);
}

/* Body – scrollable content */
.modal-body{
  padding: clamp(10px, 2vw, 14px) 6px 6px;
  overflow: auto;
  line-height: 1.65;
  color:#d7e6ff;
}
.modal-body h4{
  margin: 18px 0 6px;
  color:#bfe2ff;
  font-size: clamp(16px, 2.4vw, 20px);
  text-shadow: 0 0 12px rgba(24,230,255,.25);
}

/* Mobile adjust for the star button */
@media (max-width: 780px){
  .burst-btn{
    right: 50%;
    top: 12%;
    transform: translateX(50%);
  }
}

/* ===== SECTION 2 — dotted background + floating mascot ===== */
.lore-section{
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0;
  background: #0f2a3a; /* deep teal base */
  overflow: hidden;
}

/* Dotted grid using two offset radial-gradients (white + pink) */
.lore-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(#e9f3ff 1.2px, transparent 1.2px),
    radial-gradient(#ff53bf 1.2px, transparent 1.2px);
  background-size: 88px 88px, 88px 88px;    /* spacing of dots */
  background-position: 0 0, 44px 44px;      /* offset the pink layer */
  opacity:.6;                               /* soften */
  pointer-events:none;
}

/* Center stage */
/* .lore-wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: clamp(360px, 50vw, 580px);
  display: grid;
  place-items: center;
} */

/* Bren floats (slightly stronger than bob) */
.lore-logo{
  width: clamp(220px, 32vw, 420px);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.18));
  animation:
    lore-float 4.2s ease-in-out infinite,
    lore-breathe 3.6s ease-in-out infinite;
}

@keyframes lore-float{
  0%,100%{ transform: translateY(0) rotate(.2deg); }
  50%    { transform: translateY(-12px) rotate(-.2deg); }
}
@keyframes lore-breathe{
  0%,100%{ filter: drop-shadow(0 8px 24px rgba(0,0,0,.18)) brightness(1); }
  50%    { filter: drop-shadow(0 8px 24px rgba(0,0,0,.18)) brightness(1.06); }
}

/* Keep burst button as before; no change needed */

/* ===== MEME SECTION ===== */
.meme-section{
  padding: clamp(36px, 5vw, 72px) 0;
  background: #0f2a3a; /* bisa diganti gradient / pattern */
  color: var(--text, #DDE7F7);
}

.meme-wrap{
  width: min(1200px, 94vw);
  margin: 0 auto;
}

.meme-head h2{
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(90deg, var(--neon-cyan, #18E6FF), var(--neon-purple, #9F7BFF));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 16px rgba(24,230,255,.25);
}
.meme-head p{
  margin: 8px 0 20px;
  color: var(--muted, #91A8C4);
  font-size: clamp(14px, 2.2vw, 16px);
}

/* Grid */
.meme-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
}

.meme-grid a{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0; /* no extra gap */
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.meme-grid a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  filter: brightness(1.05);
}

.meme-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}