@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #0b0d0a; --paper: #f7f4ec; --acid: #d7ff3c; --coral: #ff5a3c; --blue: #75d8ff; --purple: #a18cff; --line: rgba(247,244,236,.2); --muted: #b7b9b4; --display: 'Bebas Neue', Impact, sans-serif; --body: 'Space Grotesk', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--body); overflow-x: hidden; }
body:before { content: ''; position: fixed; inset: 0; z-index: -2; background:
    radial-gradient(circle at 20% 15%, rgba(161,140,255,.21), transparent 24%),
    radial-gradient(circle at 78% 8%, rgba(215,255,60,.18), transparent 20%),
    radial-gradient(circle at 70% 72%, rgba(255,90,60,.18), transparent 25%),
    linear-gradient(135deg, rgba(11,13,10,1) 0%, rgba(17,18,15,1) 50%, rgba(11,13,10,1) 100%);
    pointer-events: none; }
body:after { content: ''; position: fixed; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(247,244,236,.025) 15px, rgba(247,244,236,.025) 16px); pointer-events: none; }
.noise { position: fixed; inset: 0; z-index: 10; opacity: .045; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
.site-header { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--acid); font-family: var(--display); font-size: 23px; transform: rotate(-7deg); box-shadow: 5px 5px 0 rgba(255,90,60,.7); }
.site-nav { display: flex; align-items: center; gap: 25px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.site-nav > a:not(.button) { color: var(--muted); transition: color .2s; } .site-nav > a:not(.button):hover { color: var(--acid); }
.menu-toggle { display: none; background: none; border: 0; padding: 6px; } .menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: var(--paper); }
.section-wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.hero { min-height: 680px; padding: 110px 0 85px; position: relative; display: flex; align-items: center; }
.hero::before { content: ''; position: absolute; inset: 70px 7% auto auto; width: 220px; height: 220px; border-radius: 50%; background: rgba(161,140,255,.18); filter: blur(18px); }
.hero::after { content: ''; position: absolute; inset: auto auto 40px 10%; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,90,60,.12); filter: blur(16px); }
.eyebrow { margin: 0 0 20px; color: var(--acid); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .eyebrow span { color: var(--muted); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 15px var(--coral); animation: pulse 1.1s infinite; }
h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: var(--display); font-weight: 400; line-height: .82; letter-spacing: .01em; } h1 { margin: 0 0 32px; font-size: clamp(90px, 12vw, 177px); text-shadow: 0 0 18px rgba(215,255,60,.2); } h1 em, h2 em { color: var(--coral); font-style: normal; }
h2 { margin-bottom: 25px; font-size: clamp(68px, 8vw, 112px); } .hero-tagline, .lead { color: var(--muted); font-size: 16px; line-height: 1.7; } .hero-tagline strong { color: var(--paper); }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 21px; border: 1px solid transparent; color: var(--ink); font: 700 11px var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; } .button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); } .button-coral { background: var(--coral); } .button-acid { background: var(--acid); } .button-outline { border-color: var(--paper); color: var(--paper); background: transparent; } .button-small { min-height: 36px; padding: 0 14px; font-size: 10px; }
.hero-art { width: 420px; height: 420px; margin-left: auto; position: relative; display: grid; place-items: center; transform: rotate(6deg); animation: bob 6s ease-in-out infinite; } .eye { width: 360px; height: 230px; border: 14px solid var(--acid); background: var(--coral); border-radius: 100% 8% 100% 8%; transform: rotate(-12deg); overflow: hidden; box-shadow: 18px 18px 0 rgba(247,244,236,.12), 0 0 30px rgba(255,90,60,.35); } .pupil { width: 140px; height: 140px; margin: 31px auto; display: grid; place-items: center; border: 10px solid var(--ink); border-radius: 50%; background: var(--blue); animation: look 4s ease-in-out infinite; } .pupil span { font: 72px var(--display); color: var(--ink); } .burst { position: absolute; color: var(--acid); font: 52px var(--display); text-shadow: 4px 4px 0 rgba(255,90,60,.9); } .burst-one { top: 20px; left: 24px; transform: rotate(-20deg); } .burst-two { bottom: 26px; right: 2px; font-size: 29px; transform: rotate(12deg); } .art-caption { position: absolute; right: -6px; top: 142px; color: var(--ink); background: var(--acid); padding: 9px; font: 21px/1 var(--display); transform: rotate(12deg); box-shadow: 6px 6px 0 rgba(0,0,0,.3); }
.hero-scroll { position: absolute; bottom: 30px; left: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; } .hero-scroll span { color: var(--acid); font-size: 18px; margin-left: 8px; }
.ticker-strip { padding: 15px 0; overflow: hidden; color: var(--ink); background: var(--acid); font: 26px var(--display); white-space: nowrap; transform: rotate(-1.2deg) scale(1.03); box-shadow: 0 10px 30px rgba(215,255,60,.18); } .ticker-strip div { animation: marquee 24s linear infinite; } .ticker-strip span { margin: 0 25px; }
.section-label { padding-top: 105px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; } .section-label span { margin-right: 14px; color: var(--coral); }
.section-grid { display: grid; grid-template-columns: 1fr 1.7fr; column-gap: 12%; } .about-content { padding-top: 104px; } .statement { margin: 45px 0; font: 70px/.76 var(--display); text-shadow: 0 0 20px rgba(215,255,60,.12); } .statement span { color: var(--acid); } .fine-print { max-width: 430px; color: var(--muted); font-size: 12px; line-height: 1.7; } .about-notes { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 75px 0 120px; } .note { border-top: 1px solid var(--line); padding-top: 16px; transform: rotate(var(--tilt, 0deg)); } .note:nth-child(2) { --tilt: 1.4deg; } .note:nth-child(3) { --tilt: -1.2deg; } .note span { color: var(--coral); font-size: 11px; } .note strong { display: block; margin: 28px 0 10px; font-size: 14px; } .note p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.token { padding-bottom: 125px; } .token-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 11%; padding-top: 100px; } .token-stamp { display: inline-block; margin-top: 40px; padding: 12px 20px; border: 2px solid var(--coral); color: var(--coral); font: 24px/.9 var(--display); transform: rotate(-6deg); box-shadow: 8px 8px 0 rgba(255,90,60,.25); } .token-stamp small { font: 9px var(--body); letter-spacing: .1em; } .token-panel { border: 1px solid var(--line); background: rgba(247,244,236,.035); box-shadow: 0 20px 50px rgba(11,13,10,.45); } dl { margin: 0; } dl div { display: flex; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); } dt { color: var(--muted); font-size: 12px; } dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; } .contract { padding: 30px 24px; } code { display: block; overflow: hidden; margin: 0 0 20px; color: var(--acid); font: 14px monospace; white-space: nowrap; text-overflow: ellipsis; } .status-message { height: 17px; margin: 10px 0 0; color: var(--acid); font-size: 11px; }
.how { padding-bottom: 125px; } .how-heading { padding-top: 100px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 55px 0 35px; background: var(--line); } .steps article { min-height: 220px; padding: 22px; background: var(--ink); transform: rotate(var(--step-tilt, 0deg)); } .steps article:nth-child(2) { --step-tilt: 1.4deg; } .steps article:nth-child(3) { --step-tilt: -1.1deg; } .steps article:nth-child(4) { --step-tilt: 1.1deg; } .steps article > span { color: var(--coral); font-size: 12px; } .steps h3 { margin: 58px 0 13px; font-size: 16px; } .steps p { color: var(--muted); font-size: 12px; line-height: 1.55; } .buy-wide { width: 100%; }
.meter { padding-bottom: 130px; } .meter-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding-top: 95px; align-items: center; } .meter-card { padding: 42px; border: 1px solid var(--acid); background: var(--acid); color: var(--ink); transform: rotate(1.5deg); box-shadow: 12px 12px 0 rgba(161,140,255,.45); } .score-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .score { margin: 12px 0 2px; font: 145px/.8 var(--display); } .rank { color: #555f20; font-size: 13px; font-weight: 700; letter-spacing: .1em; } .meter-track { height: 9px; margin: 35px 0 26px; background: rgba(16,19,17,.18); } .meter-track span { display: block; width: 2%; height: 100%; background: var(--ink); transition: width .35s; } .meter-actions { display: flex; align-items: center; gap: 17px; } .reset-button { padding: 0; color: var(--ink); border: 0; background: none; font: 700 10px var(--body); text-transform: uppercase; cursor: pointer; text-decoration: underline; } .meter-hint { margin: 20px 0 0; font-size: 11px; } .rank-scale { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 12px; margin-top: 22px; } .rank-scale div { padding: 18px 16px; border: 1px solid var(--line); background: rgba(247,244,236,.02); } .rank-scale span { display: block; color: var(--coral); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .rank-scale strong { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .08em; }
.wisdom { display: grid; grid-template-columns: 1fr 3fr; gap: 10%; padding-top: 95px; padding-bottom: 125px; border-top: 1px solid var(--line); } .wisdom-mark { color: var(--coral); font: 190px/.6 var(--display); text-shadow: 0 0 18px rgba(255,90,60,.15); } .wisdom-content blockquote { max-width: 770px; margin: 30px 0 40px; font: clamp(40px, 5.5vw, 78px)/.95 var(--display); text-shadow: 0 0 12px rgba(161,140,255,.12); } .wisdom-content .button { margin-top: 0; } 
.wisdom-content blockquote { opacity: 1; transform: translateY(0); transition: opacity .18s, transform .18s; } .wisdom-content blockquote.quote-out { opacity: 0; transform: translateY(8px); }
.community { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding: 100px 0 140px; border-top: 1px solid var(--line); } .community-copy p:not(.eyebrow) { max-width: 380px; color: var(--muted); font-size: 15px; line-height: 1.7; } .social-grid { display: grid; gap: 11px; align-content: center; } .social-card { min-height: 105px; padding: 17px 22px; border: 1px solid var(--line); position: relative; transition: transform .2s, background .2s; } .social-card:hover { transform: translateX(8px); background: rgba(247,244,236,.08); } .social-card span { color: var(--muted); font-size: 10px; letter-spacing: .1em; } .social-card strong { display: block; margin-top: 18px; font: 32px var(--display); } .social-card b { position: absolute; top: 19px; right: 22px; color: var(--acid); font-size: 22px; } .social-card-accent { border-color: var(--coral); box-shadow: 0 0 25px rgba(255,90,60,.18); }
.goonverse { padding: 30px 0 90px; } .goonverse-header { padding-top: 40px; } .goonverse-grid { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 18px; margin-top: 42px; } .goon-card { padding: 24px 20px 18px; border: 1px solid var(--line); background: rgba(247,244,236,.02); transition: transform .2s, border-color .2s, box-shadow .2s; } .goon-card:hover { transform: translateY(-6px); border-color: var(--acid); box-shadow: 0 16px 30px rgba(215,255,60,.08); } .card-tag { display: inline-block; color: var(--coral); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } .goon-card h3 { margin: 18px 0 12px; font: 30px/1 var(--display); } .goon-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 18px; } .goon-card strong { display: inline-block; color: var(--acid); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.site-footer { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 7%; padding: 75px max(32px, calc((100% - 1240px) / 2)) 25px; background: var(--coral); color: var(--ink); } .footer-title { margin: 15px 0 0; font: 64px/.75 var(--display); } .footer-title em { color: var(--paper); font-style: normal; } .footer-copy { padding-top: 30px; font-size: 12px; line-height: 1.65; } .footer-copy strong { font-size: 18px; } .footer-links { display: flex; flex-direction: column; gap: 14px; padding-top: 30px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .footer-links a:hover { color: var(--paper); } .footer-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; margin-top: 65px; padding-top: 16px; border-top: 1px solid rgba(16,19,17,.3); font-size: 10px; }
.reveal { animation: rise .8s both; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes look { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(17px); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .8; } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-12px) rotate(8deg); } } @keyframes marquee { to { transform: translateX(-50%); } } .score-pop { animation: score-pop .3s ease; } @keyframes score-pop { 50% { transform: scale(1.13); color: var(--coral); } }
.score-spark { position: absolute; margin-left: 8px; color: var(--coral); font: 22px var(--display); animation: spark-up .7s ease-out both; pointer-events: none; } @keyframes spark-up { to { opacity: 0; transform: translateY(-28px) rotate(-8deg); } }
@media (max-width: 900px) { .site-header, .section-wrap { width: min(100% - 40px, 700px); } .site-nav { display: none; position: absolute; top: 74px; right: 0; left: 0; padding: 20px; border: 1px solid var(--line); background: var(--ink); flex-direction: column; align-items: stretch; gap: 19px; } .site-nav.open { display: flex; } .site-nav .button { width: 100%; } .menu-toggle { display: block; } .hero { display: block; min-height: 790px; padding-top: 75px; } .hero-art { width: min(100%, 410px); margin: 50px auto 0; } .section-grid, .token-layout, .meter-layout, .community { grid-template-columns: 1fr; gap: 0; } .about-content, .token-layout, .how-heading, .meter-layout { padding-top: 70px; } .about-notes { grid-column: auto; margin: 65px 0 90px; } .token-heading { margin-bottom: 50px; } .steps { grid-template-columns: repeat(2, 1fr); } .rank-scale { grid-template-columns: repeat(2, minmax(130px, 1fr)); } .goonverse-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .wisdom { grid-template-columns: 1fr; gap: 30px; } .wisdom-mark { height: 70px; font-size: 140px; } .community-copy { margin-bottom: 50px; } .site-footer { grid-template-columns: 1fr 1fr; gap: 30px; padding-left: 20px; padding-right: 20px; } .footer-copy { padding-top: 0; } }
@media (max-width: 560px) { .site-header, .section-wrap { width: calc(100% - 32px); } h1 { font-size: 22vw; } h2 { font-size: 23vw; } .hero { padding-top: 60px; min-height: 710px; } .hero-art { height: 300px; } .eye { width: 275px; height: 175px; border-width: 10px; } .pupil { width: 100px; height: 100px; margin: 23px auto; border-width: 7px; } .pupil span { font-size: 50px; } .art-caption { right: 0; top: 106px; font-size: 16px; } .burst { font-size: 37px; } .section-label { padding-top: 75px; } .about-content, .token-layout, .how-heading, .meter-layout { padding-top: 55px; } .about-notes, .steps { grid-template-columns: 1fr; } .about-notes { margin-top: 50px; } .statement { font-size: 20vw; } .meter-card { padding: 30px 22px; } .score { font-size: 120px; } .meter-actions { align-items: flex-start; flex-direction: column; } .goonverse-grid, .rank-scale { grid-template-columns: 1fr; } .wisdom { padding-top: 70px; } .wisdom-content blockquote { font-size: 47px; } .footer-title { font-size: 54px; } .site-footer { grid-template-columns: 1fr; } .footer-bottom { margin-top: 30px; gap: 10px; flex-direction: column; } }