@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;700;800;900&display=swap');

:root{
  --bg:#030201;
  --panel:#0b0703;
  --panel2:#130d05;
  --gold:#ffb31a;
  --gold2:#ffe28a;
  --gold3:#9b5f08;
  --text:#fff1d5;
  --muted:#c8b88e;
  --line:rgba(255,179,26,.36);
  --danger:#ff7373;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 72% 8%, rgba(255,179,26,.16), transparent 30%),
    radial-gradient(circle at 16% 25%, rgba(255,179,26,.10), transparent 28%),
    linear-gradient(180deg,#050301,#000);
  overflow-x:hidden;
}
.bg-noise{
  position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:4px 4px;
}
body>*:not(.bg-noise){position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.nav{
  position:sticky;top:0;z-index:50;
  min-height:82px;
  display:flex;align-items:center;gap:24px;justify-content:space-between;
  padding:12px clamp(18px,3.5vw,58px);
  background:rgba(3,2,1,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:12px;font-weight:1000;color:var(--gold);font-size:27px;letter-spacing:-.5px}
.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 24px rgba(255,179,26,.45)}
.brand small{display:block;color:#f7ddb2;font-size:10px;letter-spacing:1.8px;margin-top:-3px}
.navLinks{display:flex;gap:24px;font-size:13px;text-transform:uppercase;font-weight:900;color:#f2e6cb}
.navLinks a:hover{color:var(--gold)}
.menuBtn{display:none;background:none;border:1px solid var(--line);color:var(--gold);padding:10px;border-radius:8px}
.goldBtn,.darkBtn,.outlineBtn{
  border:1px solid rgba(255,179,26,.56);
  border-radius:10px;
  padding:14px 24px;
  font-weight:1000;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.18s ease;
}
.goldBtn{
  background:linear-gradient(180deg,#ffe99b,#ffb31a 65%,#9d5b00);
  color:#130b00;
  box-shadow:0 0 26px rgba(255,179,26,.22), inset 0 1px 0 rgba(255,255,255,.36);
}
.darkBtn,.outlineBtn{background:rgba(255,179,26,.06);color:var(--gold2)}
.goldBtn:hover,.darkBtn:hover,.outlineBtn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,179,26,.24)}
.full{width:100%;margin-top:12px}
.hero{
  display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:34px;
  padding:68px clamp(18px,3.5vw,58px) 36px;
  min-height:calc(100vh - 82px);
}
.pill,.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold2);background:rgba(255,179,26,.08);
  border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;
  text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.4px;
}
h1,h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;margin:0;line-height:.92;letter-spacing:.5px}
h1{font-size:clamp(58px,7.4vw,122px);margin:22px 0 20px;text-shadow:0 7px 0 rgba(0,0,0,.46)}
h2{font-size:clamp(42px,5.5vw,82px)}
h1 span,h2 span{
  display:block;color:transparent;
  background:linear-gradient(180deg,#fff6cc,#ffc12d 48%,#8f4c00);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(255,179,26,.20));
}
.heroText p{font-size:21px;line-height:1.55;color:#f5e5c1;max-width:630px}
.heroActions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.miniBadges{display:flex;gap:10px;flex-wrap:wrap}
.miniBadges span{
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:9px 12px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;background:rgba(255,255,255,.04)
}
.heroArt{position:relative;display:grid;place-items:center}
.heroArt img{
  width:min(760px,100%);
  border-radius:28px;
  object-fit:cover;
  box-shadow:0 0 80px rgba(255,179,26,.24);
  border:1px solid rgba(255,179,26,.22);
}
.goldRing{
  position:absolute;inset:5% 2% 5% 8%;
  border-left:8px solid rgba(255,179,26,.8);
  border-top:8px solid rgba(255,179,26,.8);
  border-bottom:8px solid rgba(255,179,26,.8);
  border-radius:50% 0 0 50%;
  pointer-events:none;z-index:2;filter:drop-shadow(0 0 30px rgba(255,179,26,.4))
}
.featureBar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:0 clamp(18px,3.5vw,58px) 34px;
}
.featureBar div,.steps div,.tokenCard,.faq details{
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,179,26,.08),rgba(255,255,255,.025));
  padding:22px;
}
.featureBar strong{display:block;color:var(--gold);font-size:18px;margin-bottom:7px}
.featureBar span,.lead,.sectionHead p,.generator p,.faq p{color:var(--muted);line-height:1.55}
.section{padding:72px clamp(18px,3.5vw,58px)}
.sectionHead{text-align:center;max-width:820px;margin:0 auto 30px}
.sectionHead h2{margin:14px 0}
.archetypeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.arch{
  cursor:pointer;overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:#070503;transition:.2s ease;box-shadow:0 14px 40px rgba(0,0,0,.38)
}
.arch:hover,.arch.active{transform:translateY(-6px);border-color:var(--gold2);box-shadow:0 0 34px rgba(255,179,26,.24)}
.arch img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.archBody{padding:16px;text-align:center}
.archBody h3{margin:0;color:#fff;font-size:20px;text-transform:uppercase}
.archBody p{margin:7px 0;color:var(--muted);font-weight:700}
.rarity{display:inline-block;margin-top:6px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--gold);font-size:11px;font-weight:1000}
.generator{
  display:grid;grid-template-columns:.75fr 1.25fr;gap:24px;
  border:1px solid var(--line);border-radius:22px;padding:28px;
  background:linear-gradient(135deg,rgba(255,179,26,.08),rgba(0,0,0,.25));
}
.generatorLeft h2{margin:14px 0}
.walletPanel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.walletPanel div{
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;background:rgba(255,255,255,.04)
}
.walletPanel strong{display:block;color:var(--gold)}
.walletPanel span{font-size:11px;text-transform:uppercase;color:var(--muted)}
.selectedCard{
  display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;margin-bottom:16px;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;background:rgba(255,255,255,.035)
}
.selectedCard img{width:180px;height:180px;border-radius:12px;object-fit:cover}
.selectedCard h3{font-size:31px;margin:0;color:var(--gold);text-transform:uppercase}
.selectedCard p{font-weight:900}
textarea{
  width:100%;min-height:430px;resize:vertical;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;
  background:#050403;color:var(--text);line-height:1.55;font-size:15px;
}
.smallMsg{font-size:13px}
.errorMsg{color:var(--danger)!important;font-weight:1000}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps b{color:var(--gold);font-size:34px}
.steps strong{display:block;font-size:23px;margin:10px 0}
.tokenSection{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.tokenCard{text-align:center;max-width:440px;margin-left:auto}
.tokenCard img{width:210px;height:210px;border-radius:50%;object-fit:cover;box-shadow:0 0 40px rgba(255,179,26,.25)}
.tokenCard h3{font-size:28px;color:var(--gold)}
.faq{max-width:980px;margin:auto}
.faq details{margin-bottom:14px}
.faq summary{cursor:pointer;color:var(--gold);font-weight:1000;font-size:18px}
.footer{
  margin:30px clamp(18px,3.5vw,58px);padding:24px;
  border:1px solid var(--line);border-radius:18px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,179,26,.05)
}
.footer strong{display:block;font-size:28px;color:var(--gold)}
.footer span{color:var(--muted)}
.footerLinks{display:flex;gap:18px;font-weight:900;text-transform:uppercase;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modalBox{
  width:min(980px,96vw);display:grid;grid-template-columns:1fr .75fr;gap:0;position:relative;
  background:#080502;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.8)
}
.modalBox img{width:100%;height:100%;max-height:82vh;object-fit:cover}
.modalText{padding:28px}
.modalText h3{font-size:44px;color:var(--gold);text-transform:uppercase;margin:18px 0 8px}
.closeBtn{position:absolute;right:14px;top:14px;border:1px solid var(--line);background:#000;color:#fff;border-radius:50%;width:38px;height:38px;font-size:26px;cursor:pointer}
code{color:var(--gold)}
@media(max-width:1100px){
  .navLinks{display:none;position:absolute;top:82px;left:18px;right:18px;padding:18px;background:#060402;border:1px solid var(--line);border-radius:14px;flex-direction:column}
  .navLinks.open{display:flex}
  .menuBtn{display:block}
  .hero,.generator,.tokenSection{grid-template-columns:1fr}
  .featureBar,.steps{grid-template-columns:1fr}
  .archetypeGrid{grid-template-columns:repeat(2,1fr)}
  .goldRing{display:none}
  .tokenCard{margin:0}
}
@media(max-width:640px){
  .brand{font-size:20px}
  .brand img{width:42px;height:42px}
  .outlineBtn{display:none}
  .hero{padding-top:42px}
  h1{font-size:58px}
  .archetypeGrid{grid-template-columns:1fr}
  .walletPanel,.selectedCard,.modalBox{grid-template-columns:1fr}
  .selectedCard img{width:100%;height:auto;aspect-ratio:1/1}
  .footer{flex-direction:column;text-align:center}
}


/* HERO UPGRADE */
.heroPremium{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 82px);
  padding-top:74px;
  padding-bottom:56px;
}
.heroPremium:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 42%,rgba(0,0,0,.86) 100%),
    url("./assets/brand/x-banner.png") center/cover no-repeat;
  opacity:.34;
  filter:saturate(.9) contrast(1.15);
}
.heroPremium:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 19% 32%,rgba(255,179,26,.22),transparent 24%),
    radial-gradient(circle at 73% 32%,rgba(255,179,26,.24),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.72));
}
.heroGlow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,179,26,.28),transparent 65%);
  filter:blur(22px);
  z-index:-1;
}
.heroGlowLeft{left:-120px;bottom:0}
.heroGlowRight{right:8%;top:10%}
.heroPremium .heroText{
  position:relative;
  z-index:3;
}
.heroPremium h1{
  max-width:820px;
  font-size:clamp(66px,8.7vw,142px);
  letter-spacing:.2px;
}
.heroPremium .heroLead{
  font-size:23px;
  color:#fff0c9;
  max-width:620px;
}
.brotherhoodStrip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.brotherhoodStrip span{
  border:1px solid rgba(255,179,26,.35);
  border-radius:999px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(255,179,26,.12),rgba(255,255,255,.035));
  color:#f7dfac;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.heroShowcase{
  position:relative;
  min-height:660px;
  display:grid;
  place-items:center;
}
.heroFrame{
  position:relative;
  width:min(690px,100%);
  aspect-ratio:1/1;
  border-radius:34px;
  padding:12px;
  background:
    linear-gradient(#090603,#090603) padding-box,
    linear-gradient(135deg,rgba(255,226,138,.96),rgba(255,179,26,.25),rgba(255,226,138,.75)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 0 70px rgba(255,179,26,.24),
    0 34px 100px rgba(0,0,0,.65);
}
.heroFrame:before{
  content:"";
  position:absolute;
  inset:-10%;
  border:7px solid rgba(255,179,26,.72);
  border-left-color:transparent;
  border-radius:50%;
  transform:rotate(-18deg);
  filter:drop-shadow(0 0 30px rgba(255,179,26,.42));
  pointer-events:none;
}
.heroFrame:after{
  content:"THE BROTHERHOOD OF SPUD";
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  white-space:nowrap;
  border:1px solid rgba(255,179,26,.5);
  border-radius:999px;
  padding:11px 22px;
  background:#050302;
  color:var(--gold2);
  font-size:12px;
  letter-spacing:2px;
  font-weight:1000;
  box-shadow:0 0 26px rgba(255,179,26,.25);
}
.mainHeroArt{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
  display:block;
}
.floatingCard{
  position:absolute;
  width:158px;
  border:1px solid rgba(255,179,26,.5);
  border-radius:16px;
  overflow:hidden;
  background:#050302;
  box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 22px rgba(255,179,26,.17);
}
.floatingCard img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.floatingCard span{
  display:block;
  text-align:center;
  padding:9px;
  color:var(--gold);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
}
.floatingKing{
  left:2%;
  top:12%;
  transform:rotate(-5deg);
}
.floatingDegen{
  right:1%;
  bottom:11%;
  transform:rotate(5deg);
}
.coinBadge{
  position:absolute;
  left:7%;
  bottom:8%;
  width:116px;
  height:116px;
  border-radius:50%;
  padding:5px;
  background:linear-gradient(135deg,#ffe28a,#ffb31a,#5a3100);
  box-shadow:0 0 34px rgba(255,179,26,.36);
}
.coinBadge img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.bannerPreview{
  margin:18px clamp(18px,3.5vw,58px) 0;
  border:1px solid rgba(255,179,26,.32);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  background:#050302;
}
.bannerPreview img{
  display:block;
  width:100%;
  aspect-ratio:3/1;
  object-fit:cover;
  object-position:center;
}

@media(max-width:1100px){
  .heroShowcase{min-height:auto}
  .heroFrame{width:min(620px,100%)}
  .floatingCard,.coinBadge{display:none}
  .heroFrame:after{font-size:10px;letter-spacing:1.2px}
}
@media(max-width:640px){
  .heroPremium h1{font-size:58px}
  .heroPremium .heroLead{font-size:18px}
  .heroFrame:before{display:none}
  .heroFrame:after{display:none}
  .bannerPreview{display:none}
}


/* OPEN ACCESS SHARE UPDATE */
.openPanel div:first-child strong{color:#60ff73}
#shareBtn{
  text-align:center;
}
#shareTop{
  white-space:nowrap;
}


/* UPDATED HOW IT WORKS + FAQ */
.howJourney{
  position:relative;
  overflow:hidden;
}
.howJourney:before{
  content:"";
  position:absolute;
  inset:7% 3%;
  border:1px solid rgba(255,179,26,.10);
  border-radius:28px;
  pointer-events:none;
}
.journeySteps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative;
}
.journeyCard{
  position:relative;
  min-height:245px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,179,26,.16),transparent 42%),
    linear-gradient(180deg,rgba(255,179,26,.08),rgba(255,255,255,.025));
  box-shadow:0 18px 55px rgba(0,0,0,.42);
  overflow:hidden;
}
.journeyCard:after{
  content:"";
  position:absolute;
  top:25px;
  right:-36px;
  width:72px;
  height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.55;
}
.journeyCard:last-child:after{display:none}
.journeyIcon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:32px;
  background:rgba(255,179,26,.09);
  border:1px solid rgba(255,179,26,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 26px rgba(255,179,26,.12);
  margin-bottom:18px;
}
.journeyCard b{
  position:absolute;
  right:20px;
  top:16px;
  font-family:Anton,Impact,sans-serif;
  font-size:52px;
  line-height:1;
  color:rgba(255,179,26,.42);
}
.journeyCard strong{
  display:block;
  font-size:22px;
  color:#fff2d7;
  margin-bottom:10px;
}
.journeyCard p{
  color:var(--muted);
  line-height:1.5;
  margin:0;
}
.howCta{
  margin-top:28px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.faq .sectionHead{
  margin-bottom:34px;
}
.faq details{
  transition:.18s ease;
}
.faq details:hover{
  border-color:rgba(255,226,138,.7);
  box-shadow:0 0 26px rgba(255,179,26,.10);
}
.faq summary{
  list-style:none;
  position:relative;
  padding-right:34px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold2);
  font-size:26px;
}
.faq details[open] summary:after{
  content:"–";
}
.faq details[open]{
  background:
    radial-gradient(circle at 10% 0%,rgba(255,179,26,.12),transparent 40%),
    rgba(255,255,255,.04);
}
@media(max-width:1100px){
  .journeySteps{
    grid-template-columns:repeat(2,1fr);
  }
  .journeyCard:after{
    display:none;
  }
}
@media(max-width:640px){
  .journeySteps{
    grid-template-columns:1fr;
  }
  .journeyCard{
    min-height:auto;
  }
}


/* POLISHED HOW IT WORKS SECTION */
.howJourneyV2{
  padding-top:92px;
  padding-bottom:92px;
}
.howInner{
  position:relative;
  display:grid;
  grid-template-columns:.82fr 1.05fr .62fr;
  gap:24px;
  align-items:stretch;
  border:1px solid rgba(255,179,26,.28);
  border-radius:28px;
  padding:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,179,26,.18),transparent 28%),
    radial-gradient(circle at 84% 72%,rgba(255,179,26,.13),transparent 26%),
    linear-gradient(180deg,rgba(255,179,26,.055),rgba(0,0,0,.28));
  box-shadow:0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.howInner:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:url("./assets/brand/x-banner.png") center/cover no-repeat;
  filter:grayscale(.2) contrast(1.1);
}
.howInner>*{position:relative;z-index:1}
.howIntro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 8px;
}
.howIntro h2{
  margin:18px 0 16px;
  font-size:clamp(50px,5.6vw,86px);
}
.howIntro p{
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
  max-width:520px;
}
.howIntro .howCta{
  justify-content:flex-start;
  margin-top:22px;
}
.journeyRail{
  position:relative;
  display:grid;
  gap:14px;
}
.railLine{
  position:absolute;
  left:38px;
  top:38px;
  bottom:38px;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),rgba(255,179,26,.22),transparent);
  box-shadow:0 0 18px rgba(255,179,26,.45);
}
.journeyStep{
  position:relative;
  display:grid;
  grid-template-columns:76px 64px 1fr;
  gap:16px;
  align-items:center;
  min-height:118px;
  border:1px solid rgba(255,179,26,.24);
  border-radius:18px;
  padding:18px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 40px rgba(0,0,0,.26);
  transition:.18s ease;
}
.journeyStep:hover{
  transform:translateX(4px);
  border-color:rgba(255,226,138,.75);
  box-shadow:0 0 34px rgba(255,179,26,.14);
}
.stepNum{
  font-family:Anton,Impact,sans-serif;
  font-size:38px;
  color:rgba(255,179,26,.72);
  letter-spacing:1px;
}
.stepIcon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:28px;
  background:linear-gradient(180deg,rgba(255,179,26,.18),rgba(255,255,255,.04));
  border:1px solid rgba(255,179,26,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.journeyStep h3{
  margin:0 0 6px;
  color:#fff3da;
  font-size:22px;
}
.journeyStep p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.howArtPanel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,179,26,.28);
  border-radius:22px;
  padding:24px;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,179,26,.2),transparent 48%),
    rgba(0,0,0,.5);
}
.howArtPanel img{
  width:min(220px,80%);
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 48px rgba(255,179,26,.25);
  margin-bottom:20px;
}
.howArtPanel h3{
  margin:0;
  color:var(--gold);
  text-transform:uppercase;
  font-size:25px;
  line-height:1.05;
}
.howArtPanel p{
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}
@media(max-width:1200px){
  .howInner{
    grid-template-columns:1fr;
  }
  .howArtPanel{
    display:none;
  }
}
@media(max-width:640px){
  .howJourneyV2{
    padding-top:58px;
    padding-bottom:58px;
  }
  .howInner{
    padding:18px;
    border-radius:20px;
  }
  .journeyStep{
    grid-template-columns:1fr;
    gap:10px;
  }
  .railLine{
    display:none;
  }
  .stepNum{
    position:absolute;
    right:18px;
    top:14px;
    font-size:34px;
  }
}


/* SPUDBRO PRO TIP */
.spudProTip{
  border:1px solid rgba(255,179,26,.38);
  border-radius:16px;
  padding:18px 20px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,179,26,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,179,26,.08), rgba(255,255,255,.03));
  box-shadow:0 14px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.spudProTipTitle{
  color:#ffb31a;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:8px;
  font-size:15px;
}
.spudProTip p{
  margin:6px 0;
  color:#d8c8a3;
  line-height:1.45;
  font-size:14px;
}
.spudProTip p:first-of-type{
  color:#fff2d4;
  font-weight:900;
}


/* ULTRA PREMIUM HERO UPDATE */
.heroUltra{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:48px;
  padding:82px clamp(18px,3.5vw,58px) 138px;
}
.heroUltra:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 44%,rgba(0,0,0,.9) 100%),
    url("./assets/brand/x-banner.png") center/cover no-repeat;
  opacity:.42;
  filter:saturate(.85) contrast(1.18);
}
.heroUltra:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 16% 46%,rgba(255,179,26,.28),transparent 28%),
    radial-gradient(circle at 72% 43%,rgba(255,179,26,.32),transparent 32%),
    linear-gradient(180deg,rgba(5,3,1,.16),rgba(0,0,0,.84));
}
.heroBackdropWord{
  position:absolute;
  top:7%;
  left:34%;
  z-index:-2;
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(150px,22vw,390px);
  color:rgba(255,255,255,.045);
  line-height:.8;
  letter-spacing:4px;
  white-space:nowrap;
  pointer-events:none;
}
.heroUltra .heroText{
  position:relative;
  z-index:4;
}
.heroUltra .heroText:before{
  content:"";
  position:absolute;
  width:580px;
  height:580px;
  left:-220px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,26,.22),transparent 64%);
  filter:blur(25px);
  z-index:-1;
}
.heroUltra h1{
  max-width:880px;
  margin:24px 0 22px;
  font-size:clamp(68px,8.7vw,146px);
  text-shadow:0 8px 0 rgba(0,0,0,.55),0 0 52px rgba(255,179,26,.12);
}
.heroUltra .heroLead{
  max-width:650px;
  color:#fff0c9;
  font-size:22px;
  line-height:1.55;
  font-weight:700;
}
.heroUltra .heroActions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:30px 0 24px;
}
.heroProof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.heroProof span{
  border:1px solid rgba(255,179,26,.38);
  border-radius:999px;
  padding:10px 14px;
  color:#ffe8b0;
  background:linear-gradient(180deg,rgba(255,179,26,.12),rgba(255,255,255,.035));
  text-transform:uppercase;
  font-size:12px;
  font-weight:1000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.heroFocusPremium{
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
}
.premiumPfp{
  position:relative;
  width:min(720px,100%);
  aspect-ratio:1/1;
  border-radius:36px;
  padding:12px;
  background:
    linear-gradient(#080502,#080502) padding-box,
    linear-gradient(135deg,#ffe28a,rgba(255,179,26,.35),#ffe28a) border-box;
  border:1px solid transparent;
  box-shadow:
    0 0 92px rgba(255,179,26,.32),
    0 42px 125px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(20px);
}
.premiumPfp:before{
  content:"";
  position:absolute;
  inset:-12%;
  border:8px solid rgba(255,179,26,.72);
  border-left-color:transparent;
  border-bottom-color:rgba(255,179,26,.25);
  border-radius:50%;
  transform:rotate(-15deg);
  filter:drop-shadow(0 0 38px rgba(255,179,26,.48));
  pointer-events:none;
}
.premiumPfp:after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:38px;
  pointer-events:none;
  box-shadow:inset 0 0 50px rgba(255,179,26,.12);
}
.premiumPfp img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:24px;
}
.pfpTag{
  position:absolute;
  left:50%;
  bottom:-21px;
  transform:translateX(-50%);
  border:1px solid rgba(255,179,26,.55);
  border-radius:999px;
  padding:12px 24px;
  background:#050302;
  color:var(--gold2);
  text-transform:uppercase;
  font-size:12px;
  font-weight:1000;
  letter-spacing:1.8px;
  white-space:nowrap;
  box-shadow:0 0 28px rgba(255,179,26,.24);
}
.heroArchetypeStrip{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 36px));
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  z-index:8;
  border:1px solid rgba(255,179,26,.32);
  border-radius:18px;
  padding:10px;
  background:rgba(4,3,2,.76);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
}
.heroArchetypeStrip a{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:12px;
  padding:8px 10px;
  color:#f8e9c3;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  transition:.16s ease;
}
.heroArchetypeStrip a:hover{
  background:rgba(255,179,26,.11);
  color:var(--gold2);
  transform:translateY(-2px);
}
.heroArchetypeStrip img{
  width:42px;
  height:42px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(255,179,26,.32);
}

/* ROADMAP */
.roadmapSection{
  position:relative;
  overflow:hidden;
}
.roadmapSection:before{
  content:"";
  position:absolute;
  inset:5% 4%;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,179,26,.12),transparent 34%),
    radial-gradient(circle at 80% 70%,rgba(255,179,26,.10),transparent 30%);
  pointer-events:none;
}
.roadmapGrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.roadCard{
  position:relative;
  overflow:hidden;
  min-height:220px;
  border:1px solid rgba(255,179,26,.35);
  border-radius:20px;
  padding:24px;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,179,26,.16),transparent 44%),
    linear-gradient(180deg,rgba(255,179,26,.08),rgba(255,255,255,.025));
  box-shadow:0 20px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.roadCard:after{
  content:"";
  position:absolute;
  right:-55px;
  bottom:-55px;
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid rgba(255,179,26,.16);
}
.roadStatus{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,179,26,.42);
  border-radius:999px;
  padding:8px 12px;
  color:var(--gold2);
  background:rgba(255,179,26,.08);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  margin-bottom:22px;
}
.roadCard.complete .roadStatus{
  color:#73ff83;
  border-color:rgba(115,255,131,.35);
  background:rgba(115,255,131,.08);
}
.roadCard.milestone .roadStatus{
  color:#ff70df;
  border-color:rgba(255,112,223,.35);
  background:rgba(255,112,223,.08);
}
.roadCard h3{
  margin:0 0 12px;
  color:#fff3d8;
  font-size:28px;
  text-transform:uppercase;
}
.roadCard p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.roadCard b{
  color:var(--gold);
}
@media(max-width:1180px){
  .heroUltra{
    grid-template-columns:1fr;
    padding-bottom:150px;
  }
  .premiumPfp{
    width:min(620px,100%);
    transform:none;
  }
  .heroArchetypeStrip{
    grid-template-columns:repeat(4,1fr);
  }
  .roadmapGrid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .heroUltra{
    padding-top:54px;
    padding-bottom:136px;
    gap:26px;
  }
  .heroUltra h1{
    font-size:58px;
  }
  .heroUltra .heroLead{
    font-size:17px;
  }
  .premiumPfp:before{
    display:none;
  }
  .pfpTag{
    display:none;
  }
  .heroArchetypeStrip{
    grid-template-columns:repeat(2,1fr);
    bottom:18px;
  }
  .heroArchetypeStrip a{
    justify-content:flex-start;
  }
  .roadmapGrid{
    grid-template-columns:1fr;
  }
}


.tokenomicsGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.tokenCard{
border:1px solid rgba(255,179,26,.35);
border-radius:20px;
padding:28px;
background:linear-gradient(180deg,rgba(255,179,26,.08),rgba(255,255,255,.02));
text-align:center;
}
.tokenCard h3{
margin:0 0 10px;
color:#ffcf63;
text-transform:uppercase;
}
.tokenCard span{
font-size:34px;
font-weight:900;
color:#fff;
}
@media(max-width:900px){
.tokenomicsGrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
.tokenomicsGrid{grid-template-columns:1fr;}
}


/* TOKENOMICS VISIBLE FIX */
.tokenomicsVisible{
  position:relative;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  padding-top:86px;
  padding-bottom:86px;
  overflow:hidden;
}
.tokenomicsVisible:before{
  content:"";
  position:absolute;
  inset:8% 4%;
  border:1px solid rgba(255,179,26,.10);
  border-radius:30px;
  pointer-events:none;
}
.tokenomicsGridVisible{
  position:relative;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:1180px;
  margin:0 auto;
}
.tokenMetric{
  min-height:230px;
  border:1px solid rgba(255,179,26,.38);
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,179,26,.18),transparent 44%),
    linear-gradient(180deg,rgba(255,179,26,.09),rgba(255,255,255,.025));
  box-shadow:0 18px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.tokenIcon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:30px;
  background:rgba(255,179,26,.10);
  border:1px solid rgba(255,179,26,.35);
  margin-bottom:14px;
}
.tokenMetric h3{
  margin:0 0 10px;
  color:#ffcf63;
  text-transform:uppercase;
  font-size:17px;
  letter-spacing:.8px;
}
.tokenMetric strong{
  display:block;
  color:#fff2d5;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  font-weight:1000;
  word-break:break-word;
}
.tokenMetric p{
  color:#c8b88e;
  margin:12px 0 0;
  line-height:1.45;
}
.tokenomicsNote{
  max-width:980px;
  margin:24px auto 0;
  border:1px solid rgba(255,179,26,.28);
  border-radius:18px;
  padding:20px 24px;
  background:rgba(255,179,26,.06);
  text-align:center;
}
.tokenomicsNote strong{
  display:block;
  color:#ffb31a;
  text-transform:uppercase;
  margin-bottom:6px;
}
.tokenomicsNote span{
  color:#d8c8a3;
}
@media(max-width:980px){
  .tokenomicsGridVisible{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .tokenomicsGridVisible{
    grid-template-columns:1fr;
  }
  .tokenMetric{
    min-height:190px;
  }
}


/* CLEAN FIXED TOP HERO */
.cleanLaunchHero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  align-items:center;
  gap:54px;
  padding:78px clamp(22px,4vw,76px) 82px;
  background:#030201;
}
.cleanHeroBg{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.93) 100%),
    url("./assets/brand/x-banner.png") center/cover no-repeat;
  opacity:.38;
  filter:saturate(.85) contrast(1.12);
}
.cleanLaunchHero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 18% 40%,rgba(255,179,26,.22),transparent 30%),
    radial-gradient(circle at 74% 42%,rgba(255,179,26,.30),transparent 32%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.88));
}
.cleanLaunchHero:after{
  content:"$SPUDBROS";
  position:absolute;
  right:-6vw;
  top:8%;
  z-index:-2;
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(160px,22vw,360px);
  line-height:.8;
  letter-spacing:3px;
  color:rgba(255,255,255,.04);
  pointer-events:none;
}
.cleanHeroCopy{
  position:relative;
  z-index:4;
  max-width:760px;
}
.cleanHeroCopy:before{
  content:"";
  position:absolute;
  left:-240px;
  top:-150px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,26,.24),transparent 66%);
  filter:blur(24px);
  z-index:-1;
}
.cleanBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,179,26,.48);
  border-radius:999px;
  padding:10px 15px;
  background:rgba(255,179,26,.09);
  color:#ffe2a0;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.cleanHeroTitle{
  display:flex;
  flex-direction:column;
  margin:24px 0 22px;
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  line-height:.84;
  letter-spacing:.6px;
  font-size:clamp(72px,8.4vw,142px);
  text-shadow:0 9px 0 rgba(0,0,0,.55),0 0 44px rgba(255,179,26,.10);
}
.cleanHeroTitle .cream{
  display:block;
  color:#fff2d7;
}
.cleanHeroTitle .gold{
  display:block;
  color:transparent;
  background:linear-gradient(180deg,#fff0b8 0%,#ffbd29 48%,#854600 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 20px rgba(255,179,26,.20));
}
.cleanHeroSub{
  max-width:620px;
  color:#fff0c9;
  font-size:21px;
  line-height:1.55;
  font-weight:700;
}
.cleanHeroActions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:30px 0 24px;
}
.cleanHeroBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cleanHeroBadges span{
  border:1px solid rgba(255,179,26,.34);
  border-radius:999px;
  padding:10px 13px;
  background:rgba(255,179,26,.07);
  color:#ffe4aa;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
}
.cleanHeroArt{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
}
.cleanHeroFrame{
  position:relative;
  width:min(690px,100%);
  aspect-ratio:1/1;
  border-radius:34px;
  padding:12px;
  background:
    linear-gradient(#070402,#070402) padding-box,
    linear-gradient(135deg,#ffe28a,rgba(255,179,26,.28),#ffe28a) border-box;
  border:1px solid transparent;
  box-shadow:0 0 86px rgba(255,179,26,.28),0 42px 120px rgba(0,0,0,.76);
}
.cleanHeroFrame:before{
  content:"";
  position:absolute;
  inset:-10%;
  border:8px solid rgba(255,179,26,.70);
  border-left-color:transparent;
  border-bottom-color:rgba(255,179,26,.20);
  border-radius:50%;
  transform:rotate(-15deg);
  filter:drop-shadow(0 0 36px rgba(255,179,26,.43));
  pointer-events:none;
}
.cleanHeroFrame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
}
.cleanHeroTag{
  position:absolute;
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  min-width:280px;
  border:1px solid rgba(255,179,26,.52);
  border-radius:999px;
  padding:13px 26px;
  background:#050302;
  text-align:center;
  box-shadow:0 0 30px rgba(255,179,26,.22);
}
.cleanHeroTag strong{
  display:block;
  color:#ffb31a;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:1px;
}
.cleanHeroTag span{
  display:block;
  color:#d8c28d;
  font-size:12px;
  font-weight:900;
}

/* prevent older hero CSS/components from showing if present */
.heroArchetypeStrip,
.heroBrotherhoodStrip,
.topArchetypePreview{
  display:none!important;
}

@media(max-width:1180px){
  .cleanLaunchHero{
    grid-template-columns:1fr;
    gap:42px;
  }
  .cleanHeroFrame{
    width:min(620px,100%);
  }
}
@media(max-width:700px){
  .cleanLaunchHero{
    padding-top:52px;
    gap:34px;
  }
  .cleanHeroTitle{
    font-size:58px;
  }
  .cleanHeroSub{
    font-size:17px;
  }
  .cleanHeroFrame:before,
  .cleanHeroTag{
    display:none;
  }
}


/* LAUNCH READY TOP HERO */
.launchReadyHero{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:58px;
  overflow:hidden;
  padding:78px clamp(22px,4vw,76px) 86px;
  background:#030201;
}
.launchReadyBg{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 44%,rgba(0,0,0,.94) 100%),
    url("./assets/brand/x-banner.png") center/cover no-repeat;
  opacity:.34;
  filter:saturate(.85) contrast(1.16);
}
.launchReadyHero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 17% 42%,rgba(255,179,26,.24),transparent 29%),
    radial-gradient(circle at 76% 46%,rgba(255,179,26,.30),transparent 35%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.88));
}
.launchReadyHero:after{
  content:"$SPUDBROS";
  position:absolute;
  right:-7vw;
  top:9%;
  z-index:-2;
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(150px,22vw,360px);
  line-height:.8;
  letter-spacing:4px;
  color:rgba(255,255,255,.04);
  pointer-events:none;
}
.launchReadyCopy{
  position:relative;
  z-index:3;
  max-width:760px;
}
.launchReadyCopy:before{
  content:"";
  position:absolute;
  left:-230px;
  top:-150px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,26,.25),transparent 66%);
  filter:blur(24px);
  z-index:-1;
}
.launchReadyBadge{
  display:inline-flex;
  border:1px solid rgba(255,179,26,.50);
  border-radius:999px;
  padding:10px 16px;
  background:rgba(255,179,26,.09);
  color:#ffe2a0;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.launchReadyTitle{
  display:flex;
  flex-direction:column;
  margin:24px 0 20px;
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  line-height:.82;
  letter-spacing:.5px;
  font-size:clamp(70px,8.4vw,142px);
  text-shadow:0 9px 0 rgba(0,0,0,.58),0 0 44px rgba(255,179,26,.13);
}
.launchReadyTitle .cream{
  color:#fff2d7;
}
.launchReadyTitle .gold{
  color:transparent;
  background:linear-gradient(180deg,#fff2a8 0%,#ffc83d 36%,#ffaa00 65%,#834700 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 22px rgba(255,179,26,.22));
}
.launchReadyTitle .small{
  font-size:.58em;
  letter-spacing:4px;
  margin-top:8px;
}
.launchReadySub{
  max-width:650px;
  color:#fff0c9;
  font-size:21px;
  line-height:1.55;
  font-weight:700;
}
.launchReadyActions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:30px 0 14px;
}
.launchReadyNote{
  color:#bfae86!important;
  font-size:13px!important;
  margin:0!important;
}
.launchReadyArt{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
}
.launchReadyArt img{
  width:min(720px,100%);
  border-radius:34px;
  border:1px solid rgba(255,179,26,.44);
  box-shadow:0 0 90px rgba(255,179,26,.28),0 42px 120px rgba(0,0,0,.76);
  display:block;
}
.heroArchetypeStrip,
.heroBrotherhoodStrip,
.topArchetypePreview{
  display:none!important;
}
@media(max-width:1120px){
  .launchReadyHero{
    grid-template-columns:1fr;
    gap:42px;
  }
  .launchReadyArt img{
    width:min(640px,100%);
  }
}
@media(max-width:700px){
  .launchReadyHero{
    padding-top:52px;
  }
  .launchReadyTitle{
    font-size:56px;
  }
  .launchReadySub{
    font-size:17px;
  }
}


/* ARCHETYPES-FIRST LAUNCH LAYOUT */
.archetypesLanding{
  position:relative;
  min-height:calc(100vh - 82px);
  padding-top:86px!important;
  padding-bottom:78px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 7%, rgba(255,179,26,.18), transparent 32%),
    radial-gradient(circle at 10% 30%, rgba(255,179,26,.10), transparent 25%),
    linear-gradient(180deg,#050301,#020100);
}
.archetypesLanding:before{
  content:"$SPUDBROS";
  position:absolute;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(130px,20vw,340px);
  line-height:.8;
  letter-spacing:4px;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  z-index:0;
}
.archetypesLanding > *{
  position:relative;
  z-index:1;
}
.archetypesLanding .sectionHead{
  max-width:980px;
  margin-bottom:26px!important;
}
.posterHeading{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  margin:18px auto 18px!important;
  font-family:Anton, Impact, sans-serif!important;
  text-transform:uppercase!important;
  text-align:center!important;
  line-height:.84!important;
  letter-spacing:1px!important;
  font-size:clamp(72px,8vw,134px)!important;
  text-shadow:
    0 8px 0 rgba(0,0,0,.55),
    0 0 34px rgba(255,179,26,.13)!important;
}
.posterHeading .cream{
  display:block!important;
  color:#fff3d7!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  filter:none!important;
}
.posterHeading .gold{
  display:block!important;
  color:transparent!important;
  background:linear-gradient(180deg,#fff2a8 0%,#ffc83d 35%,#ffaa00 65%,#8a4d00 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  filter:drop-shadow(0 0 20px rgba(255,179,26,.24))!important;
}
.archetypesLanding .sectionHead p:last-child{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  color:#d8c8a3!important;
  font-size:18px!important;
}
.landingCtas{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 auto 34px;
}
.archetypesLanding .archetypeGrid{
  max-width:1480px;
  margin:0 auto;
}
.archetypesLanding .arch{
  border-color:rgba(255,179,26,.42);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
.archetypesLanding .arch img{
  aspect-ratio:1/1.18;
  object-position:center top;
}
.nav a[href="#archetypes"]:first-child{
  color:var(--gold);
}

/* Hide obsolete hero systems permanently */
.launchReadyHero,
.cleanLaunchHero,
.posterHeroV3,
.heroLaunchFinal,
.heroUltra,
.heroPremium,
.heroClean{
  display:none!important;
}

@media(max-width:640px){
  .archetypesLanding{
    padding-top:54px!important;
  }
  .posterHeading{
    font-size:clamp(52px,15vw,78px)!important;
  }
}