/* ===============
   ASTER – Minimal dark landing
   =============== */
:root{
  --bg: #0b0b0d;
  --bg-elev: #0f1014;
  --panel: #121317;
  --text: #eaeaf0;
  --muted: #a1a1b3;
  --brand: #e7c49a; /* sand */
  --accent: #bfa07a;
  --ring: #7c73ff;
  --glow: 120, 110, 255;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(120,110,255,.06), transparent 60%) , var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
}
/* subtle film grain */
.noise{
  pointer-events:none;
  position:fixed; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%221%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.03%22/></svg>');
  opacity:.3;
  mix-blend-mode: soft-light;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(16px, 4vw, 32px);
  background: linear-gradient(to bottom, rgba(10,10,12,.8), rgba(10,10,12,.2) 70%, transparent);
  backdrop-filter: blur(6px);
}
.brand{ display:inline-flex; gap:10px; align-items:center; font-weight:700; text-decoration:none; color:var(--text) }
.brand-mark{ display:inline-flex; color:var(--brand) }
.brand-text{ letter-spacing:.5px }
.nav{ display:flex; gap:18px; align-items:center }
.nav a{ color:var(--muted); text-decoration:none; font-weight:500; font-size:.95rem }
.nav a:hover{ color:var(--text) }
.menu-more{ position:relative }
.more{ background:none; border:0; color:var(--muted); font:inherit; cursor:pointer }
.menu-more:hover .dropdown{ opacity:1; transform: translateY(4px); pointer-events:auto }
.dropdown{
  position:absolute; right:0; top: 140%;
  background: var(--panel); border:1px solid #1e2030; border-radius:12px;
  padding:8px; display:flex; flex-direction:column; gap:6px;
  min-width:180px; box-shadow: var(--shadow);
  opacity:0; pointer-events:none; transition: .2s ease;
}
.dropdown a{ padding:8px 10px; border-radius:8px }
.dropdown a:hover{ background:#171923 }

.pill{ padding:8px 12px; border-radius:999px; font-weight:600; text-decoration:none }
.pill-airdrop{ background: #1a1b23; color:#e3d9c9; border:1px solid #27283a }
.pill-airdrop .dot{ width:8px; height:8px; background: var(--brand); border-radius:50%; display:inline-block; margin-right:8px; box-shadow:0 0 12px rgba(255,219,164,.6) }

.menu-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0 }
.menu-toggle span{ width:22px; height:2px; background:#d6d6e2 }

/* Hero */
.hero{
  position:relative;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 4vw, 40px) 40px;
  max-width: 1200px; margin: 0 auto;
}
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.15;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(800px 400px at 70% 10%, black, transparent 70%);
}
.rings{ position:absolute; right: max(40px, 6vw); top: 10%; width: 520px; height:520px; pointer-events:none }
.ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(125,120,255,.25);
  box-shadow: 0 0 40px rgba(var(--glow), .15), inset 0 0 60px rgba(var(--glow), .08);
  animation: pulse 6s ease-in-out infinite;
}
.ring-2{ transform: scale(.75); animation-delay: .6s; }
.ring-3{ transform: scale(.5); animation-delay: 1.2s; }
@keyframes pulse{
  0%,100%{ opacity:.7; filter: hue-rotate(0deg) }
  50%{ opacity:1; filter: hue-rotate(20deg) }
}
h1{
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing:-.02em;
  margin: 0 0 16px 0;
  max-width: 820px;
}
.sub{ font-weight: 700 }
h1 em{ color: var(--brand); font-style: normal }
.lede{
  color: var(--muted);
  max-width: 840px;
  margin: 0 0 28px 0;
  font-size: clamp(16px, 1.4vw, 18px);
}
.cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 16px; border-radius: 10px; text-decoration:none;
  font-weight: 700; letter-spacing:.2px;
}
.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--accent));
  color:#14110c; box-shadow: 0 10px 30px rgba(235,204,157,.2);
}
.btn-ghost{
  background: #15151c; color: var(--text);
  border:1px solid #2a2b3d;
}
.arrow{ transition: transform .2s ease }
.btn-primary:hover .arrow{ transform: translateX(4px) }
.qr{ display:inline-flex }

.stats{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin-top: 48px; max-width: 760px;
}
.stat{ background: #0f1118; border:1px solid #1e2030; border-radius: 14px; padding:16px 18px }
.big{ font-size: clamp(28px, 3.2vw, 40px); font-weight: 800 }
.label{ color: var(--muted); margin-top: 4px }

/* Features */
.features{
  max-width: 1200px; margin: 40px auto 80px; padding: 0 clamp(18px, 4vw, 40px);
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.feature-card{
  background: linear-gradient(180deg, #12131a, #0f1016);
  border:1px solid #1e2030; border-radius: 16px; padding:20px;
  box-shadow: var(--shadow);
}
.feature-card h3{ margin:4px 0 8px 0 }
.feature-card p{ color: var(--muted); margin:0 }

/* CTA */
.cta-wide{ padding: 10px clamp(18px, 4vw, 40px) 80px }
.cta-card{
  max-width: 1200px; margin: 0 auto;
  background: radial-gradient(600px 200px at 85% 10%, rgba(120,110,255,.15), transparent 60%), #0e0f14;
  border:1px solid #1f2132; border-radius: 18px; padding: 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.cta-card h2{ margin:0 }
.cta-card p{ color: var(--muted); margin:0 }

/* Footer */
.site-footer{
  border-top:1px solid #1b1c2a;
  padding: 28px clamp(18px, 4vw, 40px);
  color: var(--muted);
}
.footer-inner{
  max-width: 1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
}
.site-footer nav a{ color: var(--muted); text-decoration:none; margin-left:16px }
.site-footer nav a:hover{ color: var(--text) }

/* Responsive */
@media (max-width: 960px){
  .rings{ right: -120px; top: 2%; width: 420px; height:420px; opacity:.6 }
  .features{ grid-template-columns: 1fr }
  .stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav{ display:none }
  .menu-toggle{ display:flex }
  .stats{ grid-template-columns: 1fr; }
}

/* Titster tweaks */
.brand-mark img{ display:block }
.meta-links{
  display:flex; gap:16px; align-items:center; margin: 8px 0 6px;
  color: var(--muted);
}
.meta-links .ca{ background:#12121a; border:1px solid #23243a; padding:6px 10px; border-radius:10px; }
.meta-links .copy{ margin-left:8px; padding:4px 8px; border-radius:8px; background:#1b1b25; color:#ddd; border:1px solid #2b2c40; cursor:pointer }
.meta-links .copy:hover{ filter:brightness(1.15) }
.meta-links .x-link{ color:#d7c5a7; text-decoration:none; border-bottom:1px dashed #4a3; border-bottom-color:#5b5648 }
.meta-links .x-link:hover{ color: var(--text) }