*, *::before, *::after { box-sizing: border-box; }
html { background: var(--beast-ink); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; color: var(--beast-white); background: var(--beast-ink); font-family: var(--beast-font-body); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--beast-cyan); outline-offset: 5px; }
main:focus { outline: none; }
.skip-link { position: absolute; z-index: 1100; top: -80px; left: 20px; background: var(--beast-cyan); color: var(--beast-ink); padding: 12px 18px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 104px; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--beast-space-page); gap: 20px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--beast-font-display); font-size: 20px; font-weight: 900; letter-spacing: -0.04em; }
.brand img { width: 62px; height: 62px; object-fit: contain; }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.nav-link { font-family: var(--beast-font-display); font-size: 11px; font-weight: 850; text-decoration: none; letter-spacing: 0.04em; }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; min-height: min(820px, calc(100svh - 104px)); padding: 20px var(--beast-space-page) 72px; overflow: hidden; }
.eyebrow { margin: 0 0 22px; color: var(--beast-cyan); font-family: var(--beast-font-display); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; }
h1, h2 { font-family: var(--beast-font-display); font-stretch: 88%; font-weight: 900; letter-spacing: -0.045em; }
h1 { margin: 0; font-size: clamp(60px, 8.8vw, 144px); line-height: 0.88; }
h1 span { color: var(--beast-cyan); }
.hero-description { margin: 32px 0; color: var(--beast-muted); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; }
.command { color: var(--beast-white); font-weight: 750; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 56px; padding: 18px 25px; border-radius: var(--beast-radius-button); border: 1px solid var(--beast-cyan); background: var(--beast-cyan); color: var(--beast-ink); text-decoration: none; font-family: var(--beast-font-display); font-size: 12px; font-weight: 850; line-height: 1; letter-spacing: -0.01em; transition: transform 180ms var(--beast-ease), background 180ms; }
.pill:hover { transform: translateY(-2px); background: #40c4f7; }
.pill-secondary { border-color: var(--beast-line); color: var(--beast-white); background: transparent; }
.pill-secondary:hover { background: var(--beast-navy); }
.hero-art { display: grid; place-items: center; align-self: center; min-width: 0; }
.hero-art img { width: min(100%, 660px); height: auto; mask-image: radial-gradient(circle closest-side, #000 0 90%, transparent 100%); }
.puzzle-section { padding: 100px var(--beast-space-page); background: var(--beast-navy); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 30px; margin-bottom: 48px; }
h2 { margin: 0; font-size: clamp(42px, 6vw, 88px); line-height: 0.9; }
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.art-grid figure { margin: 0; }
.art-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.art-grid figcaption { margin-top: 17px; font-family: var(--beast-font-display); font-size: 13px; font-weight: 850; letter-spacing: -0.01em; }
.text-link { margin-top: 44px; display: inline-flex; gap: 20px; text-decoration-thickness: 1px; text-underline-offset: 7px; font-weight: 650; font-size: 15px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 38px var(--beast-space-page); color: var(--beast-muted); font-family: var(--beast-font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.no-script-note { color: var(--beast-muted); padding: 20px; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr 0.9fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .pill { min-width: 230px; }
  .site-header nav { gap: 16px; }
}
@media (max-width: 700px) {
  .site-header { min-height: 86px; gap: 10px; padding-block: 16px; }
  .brand { font-size: 15px; gap: 1px; }
  .brand img { width: 43px; height: 43px; }
  .nav-link { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 60px; gap: 36px; }
  .hero-copy { order: 1; }
  .hero-art { order: 0; }
  .hero-art img { width: min(85vw, 350px); }
  h1 { font-size: clamp(56px, 12.8vw, 84px); }
  .eyebrow { margin-bottom: 18px; }
  .hero-description { margin: 25px 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .pill { width: 100%; }
  .puzzle-section { padding-block: 64px; }
  .section-heading { grid-template-columns: 1fr; gap: 6px; margin-bottom: 32px; }
  .art-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { font-size: 10px; }
}
@media (max-width: 370px) {
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill { transition: none; }
  .pill:hover { transform: none; }
}
.site-header{position:absolute;inset:0 0 auto;z-index:2;border-bottom:1px solid #ffffff18;min-height:94px;padding-inline:5%}.brand{font-style:italic;font-size:24px}.brand img{width:53px;height:53px}.hero{position:relative;display:flex;min-height:820px;height:94svh;max-height:1080px;padding:170px 6% 130px;isolation:isolate}.hero-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#02050cf5 0%,#02050cb0 36%,#02050c05 76%),linear-gradient(0deg,#02050c 0%,transparent 30%),url('assets/art/city-signal.webp') center/cover}.hero-copy{max-width:960px}.hero h1{font-size:clamp(70px,8.6vw,140px);font-style:italic;line-height:.91;letter-spacing:-.065em}.hero h1 span,h2 span{color:var(--beast-cyan)}.eyebrow{font-size:10px;letter-spacing:.16em}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00a8e8;margin-right:9px;box-shadow:0 0 18px #00a8e8}.hero-description{font-size:17px;color:#c1cbd3;line-height:1.7}.hero-actions{align-items:center;gap:30px}.pill{min-height:54px;padding:19px 28px;font-size:11px;letter-spacing:.03em}.explore{font-size:10px;font-weight:800;text-decoration:none;letter-spacing:.08em}.explore span{margin-left:16px}.hero-bottom{position:absolute;bottom:32px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#98a7b5}.ticker{display:flex;justify-content:space-around;align-items:center;gap:32px;overflow:hidden;white-space:nowrap;padding:21px;background:#00a8e8;color:#02050c;font-family:var(--beast-font-display);font-weight:900;font-style:italic;font-size:20px}.puzzle-section{background:#060d15;padding:110px 6%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.section-heading>p{max-width:340px;font-size:14px;line-height:1.8;color:#a8bac7}.section-heading h2,.how-section h2{font-size:clamp(40px,4.6vw,72px);font-style:italic}.art-grid{gap:20px}.scene{position:relative;min-height:410px;overflow:hidden;border-radius:9px;border:1px solid #ffffff15;text-decoration:none;isolation:isolate}.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#02050cf5,transparent 90%);z-index:-1}.scene img{z-index:-2}.scene:hover img{transform:scale(1.045)}.scene>div{position:absolute;bottom:26px;left:25px;right:25px}.card-number{font-size:9px;color:#00a8e8;font-weight:800;letter-spacing:.13em}.scene h3{font-family:var(--beast-font-display);font-size:28px;line-height:1.04;font-style:italic;letter-spacing:-.04em;margin:15px 0 0}.card-arrow{position:absolute;right:0;bottom:0;border:1px solid #ffffff55;border-radius:50%;padding:9px 13px}.how-section{padding:110px 6%;display:grid;grid-template-columns:1.2fr 1fr;gap:80px}.how-section>div>p:not(.eyebrow){color:#a8bac7;font-size:14px;margin:25px 0}.how-section ol{padding:0;list-style:none;margin:0}.how-section li{display:flex;gap:25px;border-bottom:1px solid #ffffff1a;padding:24px 0}.how-section li:first-child{padding-top:0}.how-section li>span{color:#00a8e8;font-size:12px;font-weight:800}.how-section h3{margin:0;font-size:17px;font-family:var(--beast-font-display);font-weight:900}.how-section li p{color:#a8bac7;font-size:13px;line-height:1.7;max-width:330px;margin-bottom:0}.community{text-align:center;padding:100px 20px 110px;background:linear-gradient(#061826b8,#02050cf0),url('assets/art/redline-portal.webp') center/cover}.community h2{font-style:italic;font-size:clamp(46px,7vw,100px);margin-bottom:35px}.site-footer{align-items:center;padding:35px 6%;gap:30px}.footer-brand{display:flex;align-items:center;font-size:20px;color:white;gap:8px;font-style:italic}.footer-brand img{object-fit:contain}.site-footer p{font-family:var(--beast-font-body);font-weight:400;max-width:360px;font-size:11px;line-height:1.7}.site-footer>div:last-child{display:flex;gap:25px}.site-footer a{text-decoration:none;font-size:10px}
@media(max-width:1000px){.hero-actions{flex-direction:row}.scene{min-height:350px}.scene h3{font-size:23px}.how-section{gap:35px}.site-header nav{gap:20px}}
@media(max-width:700px){.site-header{min-height:80px;padding-inline:5%}.brand{font-size:19px}.hero{height:auto;min-height:760px;padding:210px 6% 110px}.hero-backdrop{background:linear-gradient(0deg,#02050c 4%,#02050ca8 60%,#02050c44),url('assets/art/city-signal.webp') 65% center/cover}.hero h1{font-size:clamp(58px,12vw,85px)}.hero .eyebrow{font-size:8px}.hero-description{font-size:15px}.hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:25px}.hero-actions .pill{width:auto}.hero-bottom{font-size:8px}.hero-bottom span:last-child{display:none}.ticker{font-size:16px;justify-content:start;padding:17px;gap:24px}.puzzle-section{padding:65px 6%}.section-heading{display:block}.section-heading>p{margin-top:25px}.art-grid{grid-template-columns:1fr}.scene{min-height:370px}.scene h3{font-size:32px}.how-section{grid-template-columns:1fr;padding:65px 6%;gap:45px}.how-section .pill{width:auto}.community{padding:70px 6%}.community .pill{font-size:9px;min-width:0}.site-footer{flex-wrap:wrap}.site-footer p{order:3;max-width:none;margin:0}.site-footer>div:last-child{margin-left:auto}.site-header beast-audio-controls{max-width:190px}}
@media(prefers-reduced-motion:reduce){.scene img{transition:none}.scene:hover img{transform:none}}

/* Token tools and responsive landing-page refinements. */
.token-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.mint-copy { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 12px 16px; border: 1px solid #ffffff30; border-radius: 12px; background: #061826d9; color: var(--beast-white); cursor: pointer; }
.mint-label { color: var(--beast-muted); font: 750 9px var(--beast-font-body); letter-spacing: .1em; }
.mint-address { font: 600 13px ui-monospace, monospace; }
.mint-copy svg { flex-shrink: 0; color: var(--beast-cyan); }
.mint-copy:hover { border-color: var(--beast-cyan); background: #0a2538; }
.fomo-link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; font: 800 11px var(--beast-font-display); letter-spacing: .04em; text-decoration: none; }
.fomo-link:hover { color: var(--beast-cyan); }
.copy-toast { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; z-index: 1100; width: max-content; max-width: calc(100% - 32px); padding: 15px 22px; border: 1px solid var(--beast-cyan); border-radius: 14px; background: #061826; color: white; box-shadow: 0 12px 40px #0008; text-align: center; font-size: 14px; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity 180ms, transform 180ms; }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 701px) and (max-width: 1000px) {
  .hero { min-height: 740px; padding-top: 150px; }
  .art-grid { gap: 12px; }
  .scene > div { left: 16px; right: 16px; }
  .scene h3 { font-size: 21px; }
  .card-arrow { padding: 6px 9px; }
}
@media (max-width: 700px) {
  .site-header { min-height: 76px; gap: 8px; }
  .site-header nav { gap: 0; min-width: 0; }
  .brand { font-size: 17px; flex-shrink: 0; }
  .brand img { width: 40px; height: 40px; }
  .beast-audio__volume { display: none; }
  .beast-audio__toggle { padding-inline: 12px; }
  .hero { min-height: min(780px, 100svh); padding: 148px 6% 80px; align-items: center; }
  .hero-copy { width: 100%; min-width: 0; }
  .hero-backdrop { background: linear-gradient(0deg,#02050c 0%,#02050cba 45%,#02050c66 100%), url('assets/art/city-signal.webp') 62% center/cover; }
  .hero h1 { font-size: clamp(44px, 11.8vw, 82px); line-height: .96; }
  .hero .eyebrow { max-width: 32ch; font-size: 9px; line-height: 1.7; margin-bottom: 20px; }
  .hero-description { margin: 22px 0 26px; font-size: 15px; line-height: 1.65; }
  .hero-actions { gap: 8px; align-items: stretch; }
  .hero-actions .pill { width: 100%; min-width: 0; min-height: 54px; }
  .explore { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .token-actions { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 16px; }
  .mint-copy { width: 100%; }
  .fomo-link { min-height: 44px; }
  .hero-bottom { bottom: 22px; }
  .puzzle-section, .how-section { padding-block: 56px; }
  .section-heading h2, .how-section h2 { font-size: clamp(38px, 9.5vw, 62px); }
  .art-grid { gap: 18px; }
  .scene { min-height: 0; aspect-ratio: 1 / 1; }
  .scene > div { left: 22px; right: 22px; bottom: 24px; }
  .scene h3 { font-size: clamp(26px, 7.5vw, 40px); }
  .community h2 { font-size: clamp(36px, 9.5vw, 66px); }
  .community .pill { width: 100%; min-height: 52px; padding-inline: 16px; }
  .site-footer { gap: 20px; padding-block: 28px; }
  .site-footer > div:last-child { gap: 18px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-brand { font-size: 16px; gap: 4px; }
  .footer-brand img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .copy-toast { transition: none; } }

.token-pending { cursor: default; }
.token-pending:hover { border-color: #ffffff30; background: #061826d9; }
.fomo-link.token-pending:hover { color: inherit; background: transparent; }

.community-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 24px auto 0; }
.community-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font: 800 11px var(--beast-font-display); letter-spacing: .03em; text-decoration: none; text-underline-offset: 5px; }
.community-links a:hover { color: var(--beast-cyan); text-decoration: underline; }
.site-footer .footer-links { flex-wrap: wrap; justify-content: flex-end; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  .community-links { flex-direction: column; gap: 4px; }
  .site-footer .footer-links { width: 100%; justify-content: flex-start; gap: 4px 20px; }
}