@font-face {
  font-family:'Suisse Intl';
  src:url('/firelight-site/fonts/suisse-light.woff2') format('woff2');
  font-weight:300;
  font-display:swap}
@font-face {
  font-family:'Suisse Intl';
  src:url('/firelight-site/fonts/suisse-regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap}
@font-face {
  font-family:'Suisse Intl';
  src:url('/firelight-site/fonts/suisse-medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap}
@font-face {
  font-family:'Suisse Intl';
  src:url('/firelight-site/fonts/suisse-bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap}

:root {
  --ink:#0e111a;
  --orange:#f15025;
  --lime:#dfff00;
  --cream:#f3f0e8;
  --muted:#a8a69f}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'DM Sans',sans-serif}
a {
  color:inherit;
  text-decoration:none}
nav {
  height:86px;
  display:flex;
  align-items:center;
  padding:0 4vw;
  border-bottom:1px solid #ffffff17;
  position:absolute;
  z-index:5;
  width:100%;
  gap:44px}
.logo {
  display:flex;
  align-items:center;
  gap:11px;
  font:600 25px 'Space Grotesk'}
.mark {
  width:28px;
  height:25px;
  display:flex;
  gap:3px;
  align-items:end}
.mark i {
  width:7px;
  background:var(--orange);
  border-radius:8px 8px 2px 2px;
  transform:skew(-9deg)}
.mark i:nth-child(1) {
  height:14px}
.mark i:nth-child(2) {
  height:24px}
.mark i:nth-child(3) {
  height:19px}
.navlinks {
  display:flex;
  gap:34px;
  margin:auto;
  font-size:14px}
.navlinks a:hover {
  color:var(--lime)}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:14px 19px;
  border-radius:5px;
  background:var(--orange);
  color:white;
  font-weight:600;
  font-size:14px;
  transition:.25s}
.button:hover {
  background:#ff6840;
  transform:translateY(-2px)}
.button.secondary {
  background:transparent;
  border:1px solid #ffffff40}
.menu {
  display:none;
  background:0;
  border:0;
  color:white}
.hero {
  min-height:850px;
  padding:170px 5vw 90px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:#080a10}
.noise {
  position:absolute;
  inset:0;
  background:url('/firelight-site/firelight-hero.png') center/cover;
  opacity:.48;
  mix-blend-mode:screen}
.hero:after {
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  background:var(--orange);
  filter:blur(180px);
  opacity:.13;
  right:-120px;
  top:160px}
.heroCopy,.nftWrap {
  position:relative;
  z-index:2}
.eyebrow {
  font:600 12px 'Space Grotesk';
  letter-spacing:2px;
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:26px}
.eyebrow span {
  width:32px;
  height:2px;
  background:var(--orange)}
h1,h2 {
  font-family:'Space Grotesk';
  margin:0;
  line-height:.94;
  letter-spacing:-.055em}
h1 {
  font-size:clamp(62px,7vw,112px);
  font-weight:500}
h1 em {
  font-style:normal;
  color:var(--orange)}
.heroCopy>p {
  font-size:18px;
  line-height:1.65;
  color:#c1c0bc;
  max-width:610px;
  margin:32px 0}
.actions {
  display:flex;
  gap:12px}
.actions .button {
  padding:17px 22px}
.trust {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:44px;
  color:#aaa;
  font-size:13px}
.avatars {
  display:flex}
.avatars b {
  height:30px;
  width:30px;
  border-radius:50%;
  background:#232632;
  border:2px solid #0b0d13;
  display:grid;
  place-items:center;
  margin-left:-7px;
  font-size:11px}
.nftWrap {
  height:620px;
  display:grid;
  place-items:center}
.nftCard {
  width:min(390px,75vw);
  aspect-ratio:.72;
  border:1px solid #ffffff26;
  border-radius:22px;
  background:linear-gradient(150deg,#2a2a2a,#101116 64%);
  box-shadow:0 50px 100px #000;
  transform:rotate(5deg);
  position:relative;
  overflow:hidden;
  padding:24px}
.nftCard:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 38%,#f1502565,transparent 42%),url('/firelight-site/firelight-hero.png') center/cover;
  opacity:.85}
.serial,.cardMeta,.cap {
  position:relative;
  z-index:2}
.serial {
  font:10px 'Space Grotesk';
  letter-spacing:2px;
  color:#ddd}
.cap {
  height:390px;
  display:grid;
  place-items:center;
  transform:rotate(-4deg)}
.crown {
  width:240px;
  height:175px;
  border-radius:120px 120px 36px 36px;
  background:linear-gradient(135deg,#f4f0e8,#8c8a84);
  box-shadow:inset -18px -20px 35px #373634,0 20px 40px #000;
  position:absolute;
  top:95px;
  display:grid;
  place-items:center}
.crown:after {
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:100%;
  background:#ffffff40}
.capLogo {
  color:var(--orange);
  filter:drop-shadow(0 3px 3px #333)}
.brim {
  width:270px;
  height:90px;
  border-radius:20% 80% 48% 52%;
  background:linear-gradient(160deg,#b8b4aa,#3d3d3b);
  position:absolute;
  top:235px;
  right:30px;
  box-shadow:0 20px 30px #000}
.cardMeta {
  border-top:1px solid #ffffff28;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  font:10px 'Space Grotesk';
  letter-spacing:2px}
.cardMeta b {
  color:var(--orange)}
.orbit {
  position:absolute;
  border:1px solid #ffffff17;
  border-radius:50%}
.o1 {
  width:570px;
  height:570px}
.o2 {
  width:440px;
  height:440px}
.livePill {
  position:absolute;
  right:2%;
  bottom:20%;
  background:var(--lime);
  color:#111;
  padding:10px 14px;
  border-radius:99px;
  font:bold 10px 'Space Grotesk';
  letter-spacing:1px;
  z-index:3;
  transform:rotate(-4deg)}
.livePill i {
  display:inline-block;
  width:6px;
  height:6px;
  background:#111;
  border-radius:50%;
  margin-right:7px}
.marquee {
  overflow:hidden;
  background:var(--orange);
  color:#090b10;
  padding:16px 0;
  white-space:nowrap;
  font:700 13px 'Space Grotesk';
  letter-spacing:2px}
.marquee div {
  width:max-content;
  animation:move 24s linear infinite}
.marquee b {
  margin:0 24px}
@keyframes move {
  to {
  transform:translateX(-50%)}
}
.eligibility,.faq {
  background:var(--cream);
  color:var(--ink);
  padding:130px 7vw;
  display:grid;
  grid-template-columns:.5fr 1fr;
  gap:6vw}
.sectionLabel {
  font:600 11px 'Space Grotesk';
  letter-spacing:2px;
  color:#73736f}
.eligibility h2,.faq h2,.claim h2,.cta h2 {
  font-size:clamp(48px,6vw,86px);
  font-weight:500}
.eligibility h2 span {
  color:var(--orange)}
.lead {
  font-size:20px;
  line-height:1.65;
  max-width:800px;
  margin:42px 0}
.checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}
.checks span {
  padding:17px;
  border-top:1px solid #cbc8c0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px}
.checks svg {
  width:18px;
  color:var(--orange)}
.claim {
  padding:120px 6vw;
  background:#11141e}
.claimTop {
  display:grid;
  grid-template-columns:.5fr 1fr;
  margin-bottom:75px}
.claimTop h2 {
  color:var(--cream)}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #ffffff24}
.steps article {
  padding:30px 30px 55px;
  border-right:1px solid #ffffff24;
  min-height:310px}
.steps article>span {
  font:11px 'Space Grotesk';
  color:#888}
.stepIcon {
  font-size:32px;
  color:var(--orange);
  margin:44px 0}
.steps h3 {
  font:500 30px 'Space Grotesk';
  margin:0 0 14px}
.steps p {
  color:#aaa;
  line-height:1.6;
  max-width:270px}
.center {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:50px}
.cta {
  background:var(--orange);
  color:#0d1018;
  padding:100px 8vw;
  display:grid;
  grid-template-columns:1fr .55fr;
  align-items:center;
  overflow:hidden}
.cta p {
  font-size:18px;
  max-width:530px;
  margin:28px 0}
.cta .button {
  background:#0e111a}
.eyebrow.light span {
  background:var(--ink)}
.rings {
  width:350px;
  height:350px;
  justify-self:end;
  border:1px solid #0e111a55;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 0 0 55px #0e111a12,0 0 0 110px #0e111a0a}
.rings svg {
  width:130px;
  height:130px;
  stroke-width:1}
.faq {
  padding-top:130px}
.accordion article {
  border-top:1px solid #c9c6be;
  overflow:hidden}
.accordion article:last-child {
  border-bottom:1px solid #c9c6be}
.accordion button {
  width:100%;
  background:0;
  border:0;
  padding:24px 0;
  color:var(--ink);
  font:500 17px 'Space Grotesk';
  display:flex;
  justify-content:space-between;
  text-align:left}
.accordion svg {
  transition:.25s}
.accordion p {
  margin:0;
  max-height:0;
  opacity:0;
  line-height:1.6;
  color:#555;
  transition:.3s;
  padding-right:40px}
.accordion .open p {
  max-height:130px;
  opacity:1;
  padding-bottom:25px}
.accordion .open svg {
  transform:rotate(180deg)}
footer {
  padding:60px 5vw 30px;
  background:#090b11}
.footerTop {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:center;
  padding-bottom:60px}
.footerTop p {
  color:#777}
.social {
  display:flex;
  gap:8px}
.social a {
  height:38px;
  width:38px;
  border:1px solid #ffffff30;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:bold}
.social a:hover {
  background:var(--orange);
  border-color:var(--orange)}
.footerBottom {
  border-top:1px solid #ffffff1d;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#777}
.footerBottom div {
  display:flex;
  gap:24px}
.footerBottom a:hover {
  color:white}

@media(max-width:850px) {
  nav {
  height:72px;
  padding:0 20px}
.navlinks {
  display:none;
  position:absolute;
  top:72px;
  left:0;
  right:0;
  background:#0e111a;
  padding:30px;
  flex-direction:column}
.navlinks.show {
  display:flex}
nav>.button {
  display:none}
.menu {
  display:block;
  margin-left:auto}
.hero {
  grid-template-columns:1fr;
  padding:130px 24px 40px;
  text-align:center}
.eyebrow,.actions,.trust {
  justify-content:center}
.heroCopy>p {
  margin:26px auto}
.nftWrap {
  height:560px}
.nftCard {
  width:330px}
.o1 {
  width:420px;
  height:420px}
.o2 {
  width:350px;
  height:350px}
.eligibility,.faq {
  grid-template-columns:1fr;
  padding:85px 25px}
.eligibility h2,.faq h2 {
  margin-top:30px}
.checks {
  grid-template-columns:1fr}
.claim {
  padding:85px 25px}
.claimTop {
  grid-template-columns:1fr;
  gap:28px}
.steps {
  grid-template-columns:1fr}
.steps article {
  min-height:auto;
  border-right:0;
  border-bottom:1px solid #ffffff24}
.cta {
  grid-template-columns:1fr;
  padding:80px 25px}
.rings {
  display:none}
.footerTop {
  grid-template-columns:1fr;
  gap:22px}
.footerBottom {
  flex-direction:column;
  gap:18px}
.footerBottom div {
  flex-wrap:wrap}
}
@media(max-width:520px) {
  h1 {
  font-size:54px}
.actions,.center {
  flex-direction:column}
.nftWrap {
  height:500px}
.nftCard {
  width:280px}
.cap {
  height:330px}
.crown {
  width:200px;
  height:145px}
.brim {
  width:220px;
  top:210px}
.footerBottom div {
  flex-direction:column;
  gap:12px}
}

.logo {
  width:138px;
  height:auto}
.logo svg {
  display:block;
  width:100%;
  height:auto;
  fill:#fff}
.logo .mark,.logo>span {
  display:none}
.avatars svg {
  width:13px;
  height:13px}
.spark {
  width:14px;
  height:14px;
  fill:currentColor;
  display:inline-block}
.marquee b {
  display:inline-flex;
  vertical-align:middle}
.stepIcon svg {
  width:32px;
  height:32px}
.social svg {
  width:19px;
  height:19px;
  fill:currentColor}
.footerBottom a:last-child {
  display:inline-flex;
  align-items:center;
  gap:4px}

body {
  font-family:'Suisse Intl',Arial,sans-serif;
  font-size:16px}
h1,h2,.logo,.eyebrow,.button,.sectionLabel,.marquee,.cardMeta,.serial,.livePill,.steps h3,.accordion button {
  font-family:'Suisse Intl',Arial,sans-serif}
h1 {
  font-size:clamp(54px,5.7vw,72px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.03em}
.eligibility h2,.faq h2,.claim h2,.cta h2 {
  font-size:clamp(38px,4vw,56px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.04em}
.heroCopy>p,.lead {
  font-size:16px;
  line-height:24px}
.navlinks {
  font-size:16px}
.steps h3 {
  font-size:28px;
  font-weight:500}
.accordion button {
  font-size:16px}

.button>svg {
  width:17px;
  height:17px}
.checks svg {
  width:18px;
  height:18px}
.capLogo svg {
  width:42px;
  height:42px}
.rings>svg {
  width:130px;
  height:130px}
.accordion button>svg {
  width:22px;
  height:22px}
.menu {
  width:32px;
  height:32px;
  padding:5px}
.menu span {
  display:block;
  height:1px;
  background:#fff;
  margin:6px 0}
.menu.active span:first-child {
  transform:translateY(3.5px) rotate(45deg)}
.menu.active span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)}

.wallet-button {
  white-space:nowrap}
.wallet-button.secondary {
  border-color:#ffffff42}

@media(max-width:850px) {
  nav {
  gap:10px}
.logo {
  width:112px}
nav>.wallet-button {
  display:inline-flex;
  margin-left:auto;
  padding:10px 12px;
  font-size:12px}
.wallet-button svg {
  display:none}
.stake-button {
  display:none}
.menu {
  margin-left:0}
}

:root {
  --orange:#e25631}
.button {
  background:#e25631;
  border-radius:48px;
  padding:16px 24px;
  color:#f5f5f5;
  font-family:'Suisse Intl',Arial,sans-serif;
  font-size:16px;
  font-weight:450;
  line-height:24px}
.button:hover {
  background:#c94727;
  color:#fff}
.button.secondary {
  background:transparent;
  border:1px solid rgba(245,245,245,.38);
  color:#f5f5f5}
.button.secondary:hover {
  background:rgba(245,245,245,.1);
  border-color:rgba(245,245,245,.62)}
.cta .button {
  background:#0e111a;
  color:#f5f5f5}
.cta .button:hover {
  background:#252936}

@media(max-width:850px) {
  nav>.wallet-button {
  padding:10px 16px;
  font-size:13px;
  line-height:18px;
  border-radius:48px}
}

@media (prefers-reduced-motion: reduce)  {
  
  *,
  *::before,
  *::after  {
  
    scroll-behavior: auto !important;
  
    transition-duration: .01ms !important;
  
    animation-duration: .01ms !important;
  
  }

}

/* Keep Reown/AppKit and custom wallet UI above the site sections. */
#dev  {
  
  position: relative;
  
  z-index: 2147483000 !important;
  
}


w3m-modal,
appkit-modal  {
  
  z-index: 2147483000 !important;
  
}


#dev .uni-overlay  {
  
  z-index: 2147483001 !important;
  
}


#dev .uni-modal  {
  
  position: relative;
  
  z-index: 1;
  
}