/* ===================================================
   ANSEMG — tokens
=================================================== */
:root{
  --bg:            #0A0806;
  --bg-raised:     #120E0A;
  --gold:          #C9A227;
  --gold-bright:   #F0C75E;
  --crimson:       #5C0F0F;
  --green:         #38D66B;
  --red:           #E5484D;
  --bone:          #EDE6D6;
  --bone-dim:      #8C8270;
  --line:          rgba(201,162,39,0.25);

  --font-display:  'Anton', sans-serif;
  --font-label:    'Barlow Condensed', sans-serif;
  --font-body:     'Barlow', sans-serif;
  --font-mono:     'Space Mono', monospace;

  --radius: 2px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--bone);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}

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

.gold{ color:var(--gold-bright); }
.crown{ color:var(--gold-bright); margin-right:0.15em; }

/* film grain / vignette texture — kills the flat "template" look */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--green); margin-right:0.5em; vertical-align:middle;
  box-shadow:0 0 8px var(--green);
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.eyebrow{
  font-family:var(--font-label);
  font-size:0.85rem; letter-spacing:0.35em;
  color:var(--gold); font-weight:600; text-transform:uppercase;
}
.eyebrow--center{ text-align:center; }

.section-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  text-transform:uppercase; letter-spacing:0.01em;
  margin:0.4rem 0 2.5rem; color:var(--bone); line-height:1;
}
.section-title--center{ text-align:center; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===================================================
   Buttons
=================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-label); font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; font-size:0.95rem;
  padding:0.9rem 1.8rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; background:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
}
.btn--gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#1a1305; box-shadow:0 6px 24px rgba(201,162,39,0.28);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(240,199,94,0.45); }
.btn--outline{ border-color:var(--gold); color:var(--gold-bright); }
.btn--outline:hover{ transform:translateY(-2px); background:rgba(201,162,39,0.1); }
.btn--ghost{ border-color:var(--line); color:var(--bone); font-size:0.85rem; padding:0.6rem 1.3rem; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn--sm{ padding:0.55rem 1.1rem; font-size:0.8rem; }
.btn--lg{ padding:1.2rem 2.6rem; font-size:1.05rem; }
.btn--copy.copied{ background:rgba(56,214,107,0.12); border-color:var(--green); color:var(--green); }
.btn--disabled,
.social--disabled{ opacity:0.4; pointer-events:none; cursor:not-allowed; filter:grayscale(0.4); }
.btn--disabled:hover,
.social--disabled:hover{ transform:none; box-shadow:none; }
/* non-clickable copy button with a "TBA" tooltip on hover */
.btn--tba{ cursor:not-allowed; opacity:0.55; position:relative; }
.btn--tba:hover{ transform:none; box-shadow:none; }
.btn--tba::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#000; color:var(--gold-bright); border:1px solid var(--gold);
  font-family:var(--font-label); font-size:0.75rem; letter-spacing:0.18em;
  padding:0.35rem 0.65rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.btn--tba:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================================================
   Live ticker strip
=================================================== */
.tickerbar{
  position:relative; z-index:120;
  background:#070503; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem;
  overflow:hidden;
}
.tickerbar__inner{
  max-width:var(--maxw); margin:0 auto; padding:0.45rem 1.5rem;
  display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap;
  letter-spacing:0.04em; color:var(--bone-dim); text-transform:uppercase;
}
.tickerbar__item--live{ color:var(--gold-bright); font-weight:700; }
.tickerbar__item b{ color:var(--bone); font-weight:700; }
.tickerbar__item .up{ color:var(--green); }
.tickerbar__item .down{ color:var(--red); }
.tickerbar__item--muted{ margin-left:auto; opacity:0.5; }
@media (max-width:680px){ .tickerbar__item--muted{ display:none; } }

/* ===================================================
   Nav
=================================================== */
.nav{
  position:sticky; top:0; z-index:110;
  background:linear-gradient(180deg, rgba(7,5,3,0.96), rgba(7,5,3,0.55) 70%, transparent);
  backdrop-filter:blur(6px);
  transition:background .25s, box-shadow .25s;
}
.nav.scrolled{ background:rgba(7,5,3,0.97); box-shadow:0 1px 0 var(--line); }
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:0.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ font-family:var(--font-display); font-size:1.35rem; letter-spacing:0.03em; }
.nav__links{
  display:flex; gap:2rem; margin-left:auto; margin-right:1.5rem;
  font-family:var(--font-label); font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
}
.nav__links a{ opacity:0.8; transition:opacity .15s, color .15s; }
.nav__links a:hover{ opacity:1; color:var(--gold-bright); }
.nav__burger{
  display:none; font-size:1.4rem; color:var(--gold-bright);
  background:none; border:none; cursor:pointer;
}
@media (max-width:860px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:#0b0805; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav__links.open{ max-height:320px; }
  .nav__links a{ padding:1rem 1.5rem; border-top:1px solid var(--line); }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
}

/* ===================================================
   Hero
=================================================== */
.hero{
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:6rem 6vw 5rem; overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center 20%;
  filter:saturate(1.08) contrast(1.06); transform:scale(1.05);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.97) 12%, rgba(10,8,6,0.5) 55%, rgba(10,8,6,0.88) 100%),
    linear-gradient(0deg, rgba(10,8,6,1) 0%, rgba(10,8,6,0.15) 40%, rgba(10,8,6,0.6) 100%);
}
.hero__content{ position:relative; z-index:2; max-width:680px; }
.hero .eyebrow{ display:inline-flex; align-items:center; }
.hero__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(3.2rem, 9.5vw, 7rem); line-height:0.9;
  text-transform:uppercase; margin:0.7rem 0 1.3rem;
  color:var(--bone); position:relative;
  text-shadow:0 4px 40px rgba(0,0,0,0.6);
}
.hero__sub{ font-size:1.08rem; color:var(--bone-dim); max-width:490px; margin-bottom:2rem; }
.hero__ctas{ display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero__chips{ display:flex; gap:0.7rem; flex-wrap:wrap; }
.chip{
  font-family:var(--font-label); font-size:0.82rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--bone-dim);
  border:1px solid var(--line); background:rgba(10,8,6,0.55);
  padding:0.45rem 0.85rem; border-radius:var(--radius);
}
.chip b{ color:var(--gold-bright); font-weight:700; margin-right:0.35em; }
.hero__scrolldown{
  position:absolute; bottom:1.6rem; right:1.6rem; z-index:2;
  font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.3em;
  color:var(--bone-dim); writing-mode:vertical-rl; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* ===================================================
   Marquee
=================================================== */
.marquee{
  background:var(--gold); color:#1a1305; overflow:hidden; white-space:nowrap;
  padding:0.85rem 0; border-top:1px solid #7a611a; border-bottom:1px solid #7a611a;
}
.marquee__track{ display:inline-flex; animation:scroll-left 28s linear infinite; }
.marquee__track span{
  font-family:var(--font-label); font-weight:700; letter-spacing:0.12em; font-size:0.95rem;
}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===================================================
   Live chart
=================================================== */
.chart{ max-width:var(--maxw); margin:0 auto; padding:5.5rem 1.5rem 4rem; }
.chart__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.chart__head .section-title{ margin-bottom:0; }
.chart__frame{
  position:relative; border:1px solid var(--gold); background:var(--bg-raised);
  min-height:440px; overflow:hidden;
}
.chart__frame iframe{ display:block; width:100%; height:520px; border:0; }
.chart__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem; text-align:center; padding:2rem;
}
.chart__placeholder b{ font-family:var(--font-label); font-size:1.3rem; letter-spacing:0.04em; color:var(--bone); }
.chart__muted{ color:var(--bone-dim); font-size:0.9rem; max-width:380px; }
.chart__pulse{
  width:60px; height:60px; border-radius:50%; margin-bottom:0.8rem;
  background:radial-gradient(circle, var(--gold-bright), transparent 70%);
  animation:pulse-dot 1.8s ease-in-out infinite;
}

/* ===================================================
   Creed
=================================================== */
.creed{ max-width:var(--maxw); margin:0 auto; padding:5rem 1.5rem; text-align:center; }
.creed__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; text-align:left; }
.creed-card{
  position:relative; background:var(--bg-raised); border:1px solid var(--line);
  padding:2.4rem 1.8rem 2rem; overflow:hidden; transition:border-color .2s, transform .2s;
}
.creed-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.creed-card__no{
  font-family:var(--font-display); font-size:2.6rem; color:rgba(240,199,94,0.16);
  position:absolute; top:0.6rem; right:1rem; line-height:1;
}
.creed-card h3{
  font-family:var(--font-display); font-weight:400; font-size:1.5rem;
  text-transform:uppercase; color:var(--gold-bright); margin-bottom:0.7rem;
}
.creed-card p{ color:var(--bone-dim); font-size:0.95rem; }
@media (max-width:900px){ .creed__grid{ grid-template-columns:1fr; } }

/* ===================================================
   Lore
=================================================== */
.lore{
  max-width:var(--maxw); margin:0 auto; padding:4rem 1.5rem 6rem;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem; align-items:center;
}
.lore__image{ position:relative; border:1px solid var(--line); }
.lore__image img{ width:100%; height:100%; object-fit:cover; }
.lore__tag{
  position:absolute; bottom:0; left:0;
  background:var(--gold); color:#1a1305; font-family:var(--font-label); font-weight:700;
  font-size:0.72rem; letter-spacing:0.2em; padding:0.4rem 0.8rem;
}
.lore__smoke{ position:absolute; top:-40px; right:22%; width:60px; height:120px; pointer-events:none; }
.lore__smoke span{
  position:absolute; bottom:0; left:50%; width:10px; height:10px;
  background:rgba(237,230,214,0.35); border-radius:50%; filter:blur(4px);
  animation:smoke-rise 5s ease-in infinite;
}
.lore__smoke span:nth-child(2){ animation-delay:1.6s; left:40%; }
.lore__smoke span:nth-child(3){ animation-delay:3.2s; left:60%; }
@keyframes smoke-rise{
  0%{ transform:translate(-50%,0) scale(1); opacity:0.5; }
  100%{ transform:translate(-50%,-110px) scale(3.2); opacity:0; }
}
.lore__body{ color:var(--bone-dim); margin-bottom:1.2rem; max-width:520px; }
.lore__stats{ display:flex; gap:2.5rem; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--line); }
.lore__stats strong{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--gold-bright); }
.lore__stats span{ font-family:var(--font-label); font-size:0.75rem; letter-spacing:0.1em; color:var(--bone-dim); text-transform:uppercase; }
@media (max-width:900px){ .lore{ grid-template-columns:1fr; gap:2.5rem; } }

/* ===================================================
   The Code / CA plaque
=================================================== */
.code{ max-width:var(--maxw); margin:0 auto; padding:5rem 1.5rem; }
.ca-plaque{
  position:relative; max-width:660px; margin:0 auto 2.5rem;
  background:var(--bg-raised); border:1px solid var(--gold); padding:2rem 2.2rem; text-align:center;
  box-shadow:0 0 40px rgba(201,162,39,0.08) inset;
}
.ca-plaque__label{ font-family:var(--font-label); font-size:0.75rem; letter-spacing:0.3em; color:var(--gold); }
.ca-plaque__row{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:0.9rem; flex-wrap:wrap; }
.ca-plaque__row code{
  font-family:var(--font-mono); font-size:0.9rem; color:var(--bone);
  background:rgba(0,0,0,0.4); padding:0.6rem 1rem; border:1px solid var(--line); word-break:break-all;
}
.ca-plaque__note{ display:block; margin-top:0.7rem; font-family:var(--font-label); font-size:0.8rem; color:var(--green); letter-spacing:0.1em; height:1em; }
.ca-plaque__smoke{ position:absolute; top:-30px; left:50%; width:6px; height:100px; pointer-events:none; }
.ca-plaque__smoke span{
  position:absolute; bottom:0; left:0; width:8px; height:8px;
  background:rgba(240,199,94,0.3); border-radius:50%; filter:blur(3px);
  animation:smoke-rise 4.5s ease-in infinite;
}
.ca-plaque__smoke span:nth-child(2){ animation-delay:1.5s; left:14px; }
.ca-plaque__smoke span:nth-child(3){ animation-delay:3s; left:-10px; }

.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.stat-card{
  background:var(--bg-raised); border:1px solid var(--line); padding:1.7rem 1.2rem; text-align:center;
  transition:border-color .2s, transform .2s;
}
.stat-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.stat-card__value{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--gold-bright); margin-bottom:0.3rem; }
.stat-card__label{ font-family:var(--font-label); font-size:0.75rem; letter-spacing:0.08em; color:var(--bone-dim); text-transform:uppercase; }
@media (max-width:820px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===================================================
   How to buy
=================================================== */
.buy{ max-width:var(--maxw); margin:0 auto; padding:5rem 1.5rem 6rem; text-align:center; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:left; margin-bottom:2.5rem; }
.step{ border-top:2px solid var(--gold); padding-top:1.2rem; }
.step__num{ font-family:var(--font-display); font-size:1.2rem; color:var(--gold); }
.step h3{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; text-transform:uppercase; margin:0.5rem 0; }
.step p{ color:var(--bone-dim); font-size:0.92rem; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.buy__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.buy__disclaimer{ max-width:660px; margin:2rem auto 0; font-size:0.78rem; color:var(--bone-dim); opacity:0.7; line-height:1.7; }

/* ===================================================
   Community
=================================================== */
.community{ max-width:var(--maxw); margin:0 auto; padding:4rem 1.5rem 6rem; text-align:center; }
.community__links{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.community__links--2{ grid-template-columns:repeat(2,1fr); max-width:660px; margin:0 auto; }
.social{
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  background:var(--bg-raised); border:1px solid var(--line); padding:2.2rem 1.5rem;
  transition:border-color .2s, transform .2s, background .2s;
}
.social:hover{ border-color:var(--gold); transform:translateY(-4px); background:#150f09; }
.social__icon{ font-size:2rem; color:var(--gold-bright); line-height:1; display:flex; align-items:center; justify-content:center; height:44px; }
.social__logo{ width:42px; height:42px; color:var(--bone); }
.social:hover .social__logo{ color:var(--gold-bright); }
.social__name{ font-family:var(--font-display); font-size:1.2rem; text-transform:uppercase; }
.social__sub{ font-family:var(--font-label); font-size:0.8rem; letter-spacing:0.08em; color:var(--bone-dim); text-transform:uppercase; }
@media (max-width:700px){ .community__links{ grid-template-columns:1fr; } }

/* ===================================================
   Footer
=================================================== */
.footer{ border-top:1px solid var(--line); padding:3rem 1.5rem; text-align:center; }
.footer__brand{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:0.5rem; }
.footer__tag{ font-family:var(--font-label); letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-size:0.85rem; margin-bottom:1.2rem; }
.footer__legal{ font-size:0.75rem; color:var(--bone-dim); opacity:0.6; }

/* ===================================================
   Sticky mobile buy bar
=================================================== */
.stickybuy{
  display:none; position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#1a1305;
  font-family:var(--font-label); font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  text-align:center; padding:1rem; border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
@media (max-width:860px){ .stickybuy{ display:block; } }

/* ===================================================
   Reduced motion
=================================================== */
@media (prefers-reduced-motion: reduce){
  .marquee__track, .lore__smoke span, .ca-plaque__smoke span,
  .hero__title::after, .dot, .chart__pulse, .hero__scrolldown{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}