:root {
  --red: #d42020;
  --dark: #0a0a0a;
  --cream: #f5f0e8;
  --gold: #e8c547;
  --red-dark: #8b1515;
  --mono: 'Azeret Mono', monospace;
  --display: 'cofo-sans-pixel', sans-serif;
  --hand: 'Covered By Your Grace', cursive;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--cream); font-family: var(--mono); overflow-x: hidden; }

.grain {
  position: fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* TICKER */
.ticker { background: var(--red); padding: 10px 0; overflow: hidden; white-space: nowrap; }
.ticker-red { background: var(--dark); border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); }
.ticker-track { display: inline-block; animation: scroll 20s linear infinite; font-family: var(--display); font-size: .85rem; letter-spacing: .15em; color: var(--cream); }
.ticker-reverse .ticker-track, .ticker-red .ticker-track { animation-direction: reverse; color: var(--red); }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* NAV */
nav { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; position:sticky; top:0; z-index:100; background:rgba(10,10,10,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(212,32,32,.3); }
.nav-logo { font-family:var(--display); font-size:1.8rem; color:var(--red); text-decoration:none; letter-spacing:.05em; display:flex; align-items:center; gap:10px; }
.nav-logo-img { width:32px; height:32px; object-fit:contain; border-radius:50%; }
.nav-right { display:flex; gap:20px; align-items:center; }
.nav-right a { color:var(--cream); text-decoration:none; font-size:.75rem; letter-spacing:.12em; transition:color .2s; }
.nav-right a:hover { color:var(--red); }
.nav-social { border:1px solid rgba(255,255,255,.2)!important; padding:6px 14px!important; font-size:.65rem!important; letter-spacing:.08em!important; transition:all .25s!important; white-space:nowrap; }
.nav-social:hover { border-color:var(--gold)!important; color:var(--gold)!important; }
.nav-cta { background:var(--red)!important; color:var(--dark)!important; padding:8px 20px; font-weight:700; }
.nav-cta:hover { background:var(--gold)!important; }
@media (max-width:768px) { .nav-social span.social-label { display:none; } .nav-right { gap:12px; } }


/* HERO */
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:90vh; padding:60px 40px; gap:40px; align-items:center; position:relative; }
.hero::before { content:''; position:absolute; top:0; right:0; width:50%; height:100%; background:radial-gradient(ellipse at 80% 30%, rgba(212,32,32,.15) 0%, transparent 60%); pointer-events:none; }
.badge { display:inline-block; font-size:.65rem; letter-spacing:.2em; border:1px solid var(--red); color:var(--red); padding:6px 16px; margin-bottom:20px; animation:fadeUp .8s ease both; }
.hero h1 { font-family:var(--display); font-size:clamp(4rem,10vw,9rem); line-height:.9; color:var(--cream); animation:fadeUp .8s ease .1s both; }
.hero-tagline { font-family:var(--hand); font-size:clamp(1.5rem,3vw,2.5rem); color:var(--gold); margin:20px 0 16px; transform:rotate(-2deg); animation:fadeUp .8s ease .2s both; }
.hero-tagline em { color:var(--red); font-style:normal; text-decoration:underline; text-decoration-thickness:3px; }
.hero-desc { font-size:.85rem; line-height:1.7; max-width:480px; opacity:.8; animation:fadeUp .8s ease .3s both; }
.hero-btns { display:flex; gap:12px; margin-top:28px; animation:fadeUp .8s ease .4s both; flex-wrap:wrap; }
.btn-main { display:inline-block; background:var(--red); color:var(--cream); padding:14px 32px; font-family:var(--display); font-size:1rem; letter-spacing:.08em; text-decoration:none; transition:all .25s; border:2px solid var(--red); }
.btn-main:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 30px rgba(212,32,32,.4); }
.btn-ghost { display:inline-block; border:2px solid var(--cream); color:var(--cream); padding:14px 32px; font-family:var(--display); font-size:1rem; letter-spacing:.08em; text-decoration:none; transition:all .25s; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-center { display:block; width:fit-content; margin:40px auto 0; }

/* HERO CA BOX */
.hero-ca { width:100%; background:rgba(212,32,32,.06); border:1px solid rgba(212,32,32,.3); padding:18px 22px; display:flex; align-items:center; gap:12px; }
.hero-ca-label { font-size:.6rem; letter-spacing:.2em; color:var(--red); font-weight:700; flex-shrink:0; }
.hero-ca-addr { font-size:.8rem; color:var(--cream); letter-spacing:.02em; flex:1; user-select:all; word-break:break-all; }
.hero-ca-copy { background:var(--red); border:none; color:var(--cream); padding:10px 24px; font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.12em; cursor:pointer; transition:all .25s; flex-shrink:0; }
.hero-ca-copy:hover { background:var(--gold); color:var(--dark); }

/* HERO TITLE + COIN LOGO */
.hero-title-row { display:flex; align-items:center; gap:24px; }
.hero-coin-logo { width:160px; height:160px; object-fit:contain; animation:fadeUp .8s ease .3s both, coinSpin 8s linear infinite; filter:drop-shadow(0 0 20px rgba(212,32,32,.3)); }
@keyframes coinSpin { 0%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} }
@media (max-width:768px) { .hero-coin-logo { width:100px; height:100px; } .hero-title-row { gap:16px; } }

/* SOCIAL BUTTONS */
.hero-socials { display:flex; gap:10px; margin-top:14px; animation:fadeUp .8s ease .45s both; flex-wrap:wrap; }
.btn-social { display:inline-block; border:1px solid rgba(255,255,255,.2); color:var(--cream); padding:10px 20px; font-family:var(--display); font-size:.75rem; letter-spacing:.08em; text-decoration:none; transition:all .25s; background:rgba(255,255,255,.04); }
.btn-social:hover { border-color:var(--gold); color:var(--gold); background:rgba(232,197,71,.06); transform:translateY(-1px); }

/* CA BOX */
.ca-box { display:flex; align-items:center; gap:8px; margin-top:24px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:10px 16px; font-size:.7rem; animation:fadeUp .8s ease .5s both; flex-wrap:wrap; }
.ca-label { background:var(--red); color:var(--cream); padding:2px 8px; font-weight:700; font-size:.65rem; }
.ca-addr { color:var(--gold); word-break:break-all; flex:1; min-width:200px; }
.ca-copy { background:none; border:1px solid var(--cream); color:var(--cream); padding:4px 12px; cursor:pointer; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; transition:all .2s; }
.ca-copy:hover { background:var(--cream); color:var(--dark); }
.ca-copy.copied { background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* HERO RIGHT */
.hero-right { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; animation:fadeUp .8s ease .3s both; }
.hero-img { width:100%; max-width:500px; border:3px solid var(--red); box-shadow:12px 12px 0 var(--red-dark); transition:transform .4s, box-shadow .4s; }
.hero-img:hover { transform:translate(-4px,-4px); box-shadow:16px 16px 0 var(--red); }
.hero-stat { text-align:center; }
.stat-big { font-family:var(--display); font-size:clamp(2rem,5vw,3.5rem); color:var(--red); display:block; }
.stat-sub { font-size:.7rem; letter-spacing:.2em; opacity:.6; }

/* STATS STRIP */
.stats-strip { display:flex; justify-content:center; align-items:center; gap:30px; padding:30px 20px; background:var(--red); flex-wrap:wrap; }
.strip-item { text-align:center; }
.strip-num { font-family:var(--display); font-size:1.6rem; color:var(--dark); display:block; }
.strip-label { font-size:.6rem; letter-spacing:.15em; color:rgba(10,10,10,.7); }
.strip-div { font-family:var(--display); font-size:1.2rem; color:var(--dark); opacity:.5; }

/* MISSION */
.mission { padding:100px 40px; }
.sec-title { font-family:var(--display); font-size:clamp(2.5rem,5vw,4rem); line-height:1; margin-bottom:50px; text-align:center; }
.sec-title span { color:var(--red); }
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.m-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:40px 30px; transition:all .3s; position:relative; overflow:hidden; }
.m-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--red); transform:scaleY(0); transition:transform .3s; }
.m-card:hover::before { transform:scaleY(1); }
.m-card:hover { border-color:var(--red); transform:translateY(-4px); }
.m-card-accent { background:var(--red); color:var(--dark); }
.m-card-accent::before { background:var(--gold); }
.m-card-accent h3, .m-card-accent p { color:var(--dark); }
.m-num { font-family:var(--display); font-size:3rem; opacity:.15; position:absolute; top:10px; right:20px; }
.m-card h3 { font-family:var(--display); font-size:1.1rem; letter-spacing:.05em; margin-bottom:12px; }
.m-card p { font-size:.78rem; line-height:1.7; opacity:.8; }
.mission-img-wrap { max-width:800px; margin:60px auto 0; position:relative; }
.mission-img { width:100%; border:3px solid var(--red); }
.mission-img-caption { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); background:var(--dark); border:1px solid var(--red); padding:6px 20px; font-size:.65rem; letter-spacing:.15em; white-space:nowrap; }

/* HOW TO VOTE */
.howto { padding:100px 40px; background:rgba(212,32,32,.03); }
.steps { display:flex; justify-content:center; align-items:flex-start; gap:20px; max-width:900px; margin:0 auto; flex-wrap:wrap; }
.step { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:36px 28px; flex:1; min-width:200px; text-align:center; transition:all .3s; }
.step:hover { border-color:var(--red); transform:translateY(-4px); }
.step-n { font-family:var(--display); font-size:2.5rem; color:var(--red); }
.step h4 { font-family:var(--display); font-size:1rem; letter-spacing:.08em; margin:10px 0 8px; }
.step p { font-size:.75rem; line-height:1.6; opacity:.7; }
.step-arrow { font-family:var(--display); font-size:2rem; color:var(--red); margin-top:40px; }

/* ABOUT */
.about-text { max-width:800px; margin:0 auto; }
.about-text p { font-size:.85rem; line-height:1.8; margin-bottom:20px; opacity:.8; }
.about-highlight { font-family:var(--hand); font-size:1.3rem; color:var(--gold); opacity:1!important; line-height:1.5; margin-top:24px; }
.goals-list { display:flex; flex-direction:column; gap:12px; margin:28px 0; padding-left:20px; border-left:3px solid var(--red); }
.goal { font-family:var(--display); font-size:.85rem; color:var(--cream); letter-spacing:.03em; padding:6px 0; }

/* HOW TO INTRO */
.howto-intro { max-width:700px; margin:0 auto 40px; text-align:center; font-size:.85rem; line-height:1.7; opacity:.7; }

/* TOKENOMICS / ORIGIN */
.tokenomics { padding:100px 40px; background:rgba(212,32,32,.03); }
.token-intro { max-width:750px; margin:0 auto 40px; text-align:center; font-size:.85rem; line-height:1.7; opacity:.8; }
.origin-timeline { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:0; position:relative; }
.origin-timeline::before { content:''; position:absolute; left:80px; top:0; bottom:0; width:2px; background:var(--red); opacity:.3; }
.origin-item { display:flex; gap:24px; align-items:flex-start; padding:20px 0; position:relative; }
.origin-date { font-family:var(--display); font-size:.85rem; color:var(--red); min-width:80px; text-align:right; }
.origin-event { font-size:.8rem; line-height:1.6; opacity:.8; padding-left:20px; border-left:2px solid transparent; }
.origin-item-now { background:rgba(212,32,32,.08); padding:20px; margin:0 -20px; border:1px solid var(--red); }
.origin-item-now .origin-date { color:var(--gold); }
.origin-item-now .origin-event { opacity:1; font-weight:700; }

/* LORE */
.lore { padding:100px 40px; }
.lore-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; margin:0 auto; align-items:center; }
.lore-text p { font-size:.85rem; line-height:1.8; margin-bottom:16px; opacity:.8; }
.lore-highlight { font-family:var(--hand); font-size:1.4rem; color:var(--gold); opacity:1!important; transform:rotate(-1deg); display:block; margin-top:20px; line-height:1.5; }
.lore-img { width:100%; border:3px solid var(--red); box-shadow:8px 8px 0 var(--red-dark); }

/* LINKS */
.links-section { padding:80px 40px; }
.links-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:900px; margin:0 auto; }
.link-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); text-decoration:none; color:var(--cream); transition:all .3s; text-align:center; }
.link-card:hover { border-color:var(--red); transform:translateY(-4px); background:rgba(212,32,32,.08); }
.lc-buy { border-color:var(--red); background:rgba(212,32,32,.1); }
.lc-icon { font-size:1.8rem; }
.lc-title { font-family:var(--display); font-size:.9rem; letter-spacing:.08em; }
.lc-sub { font-size:.65rem; opacity:.5; }

/* FOOTER */
footer { border-top:3px solid var(--red); padding:50px 40px; text-align:center; }
.footer-logo { font-family:var(--display); font-size:2rem; color:var(--red); }
footer p { font-family:var(--hand); font-size:1.2rem; color:var(--gold); margin:12px 0 8px; }
.footer-disc { font-size:.65rem; opacity:.4; font-family:var(--mono); }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.reveal { opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* GLITCH */
.img-glitch:hover { animation:glitch .3s ease; }
@keyframes glitch {
  0%{transform:translate(0)} 20%{transform:translate(-3px,3px)} 40%{transform:translate(3px,-3px)} 60%{transform:translate(-2px,-2px)} 80%{transform:translate(2px,2px)} 100%{transform:translate(0)}
}

/* RESPONSIVE */
@media(max-width:768px) {
  nav { padding:14px 20px; }
  .nav-right { gap:12px; }
  .nav-right a:not(.nav-cta) { display:none; }
  .hero { grid-template-columns:1fr; padding:40px 20px; min-height:auto; }
  .hero-right { order:-1; }
  .hero-img { max-width:100%; }
  .mission-grid { grid-template-columns:1fr; }
  .mission, .howto, .lore, .links-section, .tokenomics { padding:60px 20px; }
  .origin-timeline::before { left:60px; }
  .origin-date { min-width:60px; font-size:.75rem; }
  .steps { flex-direction:column; }
  .step-arrow { transform:rotate(90deg); margin:0 auto; }
  .lore-grid { grid-template-columns:1fr; }
  .links-grid { grid-template-columns:1fr 1fr; }
  .stats-strip { gap:15px; }
  .strip-num { font-size:1.2rem; }
}
@media(max-width:480px) {
  .hero h1 { font-size:3.5rem; }
  .links-grid { grid-template-columns:1fr; }
}