/* =========================================
   STUPID KID TOP BANNER
   Keeps the supplied 1500x500 banner ratio
   on desktop and mobile without cropping.
========================================= */
.top-banner{
  width:100%;
  background:#080808;
  border-bottom:1px solid #272727;
  overflow:hidden;
  line-height:0;
}
.top-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 1;
  object-fit:cover;
  object-position:center;
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080808;color:#f4f4f4;font-family:Inter,Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.nav{height:76px;border-bottom:1px solid #272727;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;background:rgba(8,8,8,.9);backdrop-filter:blur(16px);z-index:15}.brand{display:flex;align-items:center;gap:10px;color:#ffd600;text-decoration:none;font-weight:900;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 42px;transform:rotate(-8deg)}.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}nav{display:flex;gap:30px}nav a{color:#aaa;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase}nav a:hover,nav a.active{color:#ffd600}.nav-actions{display:flex;gap:8px}.outline-btn,.dark-btn{border:1px solid #eee;border-radius:999px;padding:11px 16px;color:#fff;text-decoration:none;font-size:11px;font-weight:800}.menu{display:none;background:none;color:#fff;border:0;font-size:25px}.hero{min-height:690px;display:grid;grid-template-columns:47% 53%;border-bottom:1px solid #272727;position:relative;overflow:hidden}.hero-copy{padding:105px 5vw 70px 7vw;position:relative;z-index:2}.eyebrow,.label{color:#ffd600;font-size:11px;font-weight:900;letter-spacing:2px}.hero h1{font-family:Bangers,Impact,sans-serif;font-size:clamp(58px,7vw,108px);line-height:.88;letter-spacing:2px;margin:20px 0 28px}.hero h1 span,h2 span{color:#ffd600}.hero p{max-width:600px;color:#bdbdbd;font-size:15px;line-height:1.8}.hero p b{color:#fff}.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.yellow-btn{background:#ffd600;color:#080808;text-decoration:none;border-radius:999px;padding:13px 20px;font-size:11px;font-weight:900}.dark-btn{background:#111;border-color:#777}.contract-note{font-size:10px;color:#666;margin-top:20px}.contract-note strong{color:#ffd600}.hero-art{position:relative;background:radial-gradient(circle at 55% 42%,#24200b 0,#111 37%,#080808 70%);min-height:690px;overflow:hidden}.photo-card{position:absolute;width:55%;height:78%;right:13%;top:12%;border:4px solid #ffd600;transform:rotate(-5deg);box-shadow:20px 20px 0 #171717}.photo-placeholder{height:100%;background:linear-gradient(135deg,#333,#111 55%,#555);display:grid;place-items:center;position:relative;filter:grayscale(1)}.portrait{font-family:Bangers;font-size:80px;line-height:.8;text-align:center;color:#fff;transform:rotate(-4deg);text-shadow:6px 6px 0 #000}.caption{position:absolute;top:8%;left:-25px;background:#ffd600;color:#080808;padding:8px 12px;font-size:11px;font-weight:900;transform:rotate(-9deg)}.btc-coin{position:absolute;right:5%;top:10%;width:105px;height:105px;border-radius:50%;background:#f4a900;color:#fff;display:grid;place-items:center;font-size:65px;font-weight:900;border:6px solid #ffd600;transform:rotate(8deg);box-shadow:0 0 0 10px #111}.crash{position:absolute;right:7%;bottom:29%;font-family:Bangers;font-size:70px;color:#ff2b2b;transform:rotate(8deg)}.burst{position:absolute;top:6%;left:4%;font-family:Bangers;font-size:38px;color:#ffd600;transform:rotate(-12deg);z-index:4}.mascot{position:absolute;right:5%;bottom:-5%;width:260px;height:290px;z-index:5}.cap{position:absolute;top:0;left:20px;width:210px;height:78px;background:#111;border:6px solid #ffd600;border-radius:90px 90px 30px 30px;color:#ffd600;text-align:center;font-weight:900;padding-top:15px;line-height:.8;transform:rotate(-5deg)}.face{position:absolute;top:55px;left:35px;width:190px;height:160px;border:6px solid #111;background:#eee;border-radius:45% 45% 40% 40%;box-shadow:0 0 0 4px #ffd600}.eye{position:absolute;width:20px;height:28px;background:#111;border-radius:50%;top:65px}.e1{left:48px}.e2{right:48px}.mouth{position:absolute;width:55px;height:10px;border-bottom:5px solid #111;border-radius:50%;left:65px;top:105px}.hoodie{position:absolute;bottom:0;left:5px;width:245px;height:125px;background:#141414;border:6px solid #111;border-radius:55px 55px 0 0}.scribble{position:absolute;color:#ffd600;font-family:Bangers;font-size:25px;line-height:.9;z-index:3}.s1{right:42%;top:140px;transform:rotate(9deg)}section{border-bottom:1px solid #272727}.split-section{display:grid;grid-template-columns:1fr 1fr;min-height:500px}.story-copy{padding:75px 7vw}.story-copy h2,.buy-section h2,.facts-section h2,.community h2,.faq-section h2{font-family:Bangers,Impact;font-size:clamp(50px,5vw,76px);line-height:.9;margin:15px 0 25px;letter-spacing:1px}.story-copy p{max-width:560px;color:#aaa;line-height:1.8}.timeline{margin-top:35px;border-left:2px solid #ffd600}.timeline div{display:grid;grid-template-columns:80px 1fr;gap:20px;padding:13px 0 13px 18px;border-bottom:1px solid #242424}.timeline b{color:#ffd600;font-size:11px}.timeline span{color:#ccc;font-size:12px}.story-art{position:relative;background:#111;display:grid;place-items:center;overflow:hidden}.fake-photo{width:65%;height:65%;display:grid;place-items:center;text-align:center;font-family:Bangers;font-size:70px;line-height:.8;background:linear-gradient(145deg,#292929,#090909);border:5px solid #ffd600;transform:rotate(6deg)}.fake-photo small{font-family:Inter;font-size:11px;letter-spacing:4px}.big-sticker{position:absolute;left:7%;top:10%;font-family:Bangers;color:#ffd600;font-size:38px;transform:rotate(-8deg);z-index:2}.arrow{position:absolute;right:9%;bottom:12%;font-size:80px;color:#ffd600}.chain-section{display:flex;align-items:center;gap:28px;padding:40px 7vw;background:linear-gradient(110deg,#101010,#141200)}.chain-icon{font-size:58px;color:#ffd600}.chain-section h2{margin:5px 0;font-size:38px}.chain-section p{color:#888;margin:0}.chain-badge{margin-left:auto;border:2px solid #ffd600;border-radius:50%;width:100px;height:100px;display:grid;place-items:center;font-weight:900;color:#ffd600;transform:rotate(-12deg)}.buy-section{padding:80px 7vw}.section-heading{display:flex;justify-content:space-between;align-items:end}.section-heading h2{margin-bottom:0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#292929;margin-top:45px}.steps article{background:#080808;padding:28px;min-height:260px;position:relative}.step-no{color:#555;font-size:11px;font-weight:900}.step-icon{font-size:40px;color:#ffd600;margin:25px 0}.steps h3{margin:0 0 10px;font-size:15px}.steps p{color:#888;font-size:12px;line-height:1.7}.launch-box{border:1px dashed #5d5200;background:#121100;padding:18px 20px;margin-top:22px;display:flex;gap:20px;align-items:center}.launch-box strong{color:#ffd600;font-size:11px}.launch-box span{color:#888;font-size:11px}.facts-section{display:grid;grid-template-columns:40% 60%;padding:80px 7vw;background:#0c0c0c}.facts-table{border-top:1px solid #333}.facts-table div{display:flex;justify-content:space-between;padding:17px 0;border-bottom:1px solid #282828;font-size:12px}.facts-table span{color:#777}.facts-table b{color:#eee}.community{display:grid;grid-template-columns:55% 45%;min-height:440px}.community-copy{padding:75px 7vw}.community-copy p{color:#888}.community-art{position:relative;background:#131313;overflow:hidden}.hand{font-family:Bangers;font-size:47px;line-height:.82;color:#ffd600;position:absolute;left:15%;top:16%;transform:rotate(-9deg)}.hand span{font-size:1.25em}.mini-mascot{position:absolute;right:10%;bottom:-20px;width:180px;height:180px;display:grid;place-items:center;overflow:hidden;border-radius:50%}.mini-mascot img{width:100%;height:100%;display:block;object-fit:cover}.faq-section{padding:80px 7vw}.faq-section h2{margin-bottom:35px}.faq-list{max-width:850px}.faq{width:100%;text-align:left;background:none;color:#eee;border:0;border-top:1px solid #333;padding:20px 0;display:grid;grid-template-columns:1fr 30px;cursor:pointer;font-weight:800}.faq b{color:#ffd600;font-size:20px}.faq p{display:none;grid-column:1/-1;color:#888;font-weight:400;font-size:12px;line-height:1.7;margin:14px 0 0}.faq.open p{display:block}.faq.open b{transform:rotate(45deg)}footer{display:flex;justify-content:space-between;align-items:center;padding:28px 7vw;color:#666;font-size:10px}footer .brand{font-size:15px}@media(max-width:1000px){nav,.nav-actions{display:none}.menu{display:block}.hero{grid-template-columns:1fr}.hero-art{min-height:520px}.hero-copy{padding-top:75px}.s1{display:none}.split-section,.facts-section,.community{grid-template-columns:1fr}.story-art{min-height:430px}.steps{grid-template-columns:1fr 1fr}.facts-section{gap:40px}.community-art{min-height:350px}}@media(max-width:600px){.nav{padding:0 5vw}.hero-copy{padding:65px 6vw 40px}.hero h1{font-size:65px}.hero p{font-size:13px}.hero-art{min-height:460px}.photo-card{width:65%;height:76%;right:14%}.mascot{transform:scale(.75);transform-origin:bottom right}.split-section,.facts-section,.community,.buy-section,.faq-section{padding-left:6vw;padding-right:6vw}.story-copy{padding:60px 6vw}.steps{grid-template-columns:1fr}.section-heading{display:block}.section-heading h2{margin-top:15px}.chain-section{padding:30px 6vw}.chain-badge{width:70px;height:70px}.launch-box{display:block}.launch-box span{display:block;margin-top:8px}footer{padding:25px 6vw;display:block;line-height:2}footer>div{margin:5px 0}.fake-photo{width:72%;height:65%;font-size:55px}}


/* Supplied hero artwork */
.supplied-art{position:relative;background:#080808;min-height:690px;overflow:hidden}
.supplied-art img{width:100%;height:100%;min-height:690px;object-fit:cover;object-position:center;display:block;filter:saturate(.9) contrast(1.05)}
.image-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.2),transparent 42%,rgba(8,8,8,.08))}
.art-tag{position:absolute;right:5%;top:7%;font-family:Bangers,Impact,sans-serif;color:#ffd600;font-size:38px;line-height:.78;transform:rotate(8deg);text-shadow:3px 3px #080808}
@media(max-width:1000px){
  .supplied-art{min-height:520px}
  .supplied-art img{min-height:520px}
}
@media(max-width:600px){
  .supplied-art{min-height:390px}
  .supplied-art img{min-height:390px;object-position:center}
  .art-tag{font-size:28px}
}
/* =========================================
   STUPID KID LIVE PRICE STRIP
========================================= */

.live-price-strip {
    width: 100%;
    max-width: 1100px;
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);

    background: rgba(255,255,255,0.025);
}

.price-item {
    padding: 24px 20px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,0.10);
}

.price-item:last-child {
    border-right: none;
}

.price-item span {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    letter-spacing: 2px;

    opacity: 0.55;
}

.price-item strong {
    display: block;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.5px;
}


/* LIVE SOURCE */

.live-source {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 12px;

    font-size: 10px;

    letter-spacing: 0.8px;

    opacity: 0.5;
}

.live-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #39ff88;

    box-shadow:
        0 0 10px rgba(57,255,136,0.8);
}


/* PRICE MOVEMENT */

.price-positive {
    color: #39ff88;
}

.price-negative {
    color: #ff5555;
}


/* MOBILE */

@media (max-width: 700px) {

    .live-price-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .price-item:nth-child(2) {
        border-right: none;
    }

    .price-item:nth-child(1),
    .price-item:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

}


@media (max-width: 420px) {

    .price-item {
        padding: 18px 10px;
    }

    .price-item strong {
        font-size: 15px;
    }

}

/* =========================================
   STUPID KID LIVE STATUS BADGE
========================================= */

.stupid-kid-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin: 25px auto;
    padding: 10px 16px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 6px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.02),
        0 8px 30px rgba(0,0,0,0.25);

    backdrop-filter: blur(8px);

    font-family: inherit;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


/* HOVER */

.stupid-kid-status:hover {

    transform: translateY(-2px);

    border-color: rgba(255,255,255,0.22);

    background: rgba(255,255,255,0.055);

}


/* =========================================
   STATUS DOT
========================================= */

.status-pulse {

    width: 9px;
    height: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #39ff88;

    box-shadow:
        0 0 6px rgba(57,255,136,0.8),
        0 0 14px rgba(57,255,136,0.45);

    animation: stupidKidPulse 1.8s infinite;
}


/* PULSING EFFECT */

@keyframes stupidKidPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(57,255,136,0.6),
            0 0 8px rgba(57,255,136,0.8);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(57,255,136,0),
            0 0 12px rgba(57,255,136,0.4);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(57,255,136,0),
            0 0 8px rgba(57,255,136,0.8);
    }

}


/* =========================================
   STATUS CONTENT
========================================= */

.status-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

    line-height: 1;
}


.status-top {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;

    letter-spacing: 1.5px;

}


.status-top strong {

    font-weight: 800;

    letter-spacing: 1.3px;

    color: #ffffff;

}


.status-label {

    font-size: 10px;

    font-weight: 800;

    color: #39ff88;

    letter-spacing: 1.5px;

}


.status-divider {

    opacity: 0.3;

}


/* =========================================
   NETWORK
========================================= */

.status-network {

    font-size: 8px;

    letter-spacing: 1.8px;

    opacity: 0.45;

}


/* =========================================
   CHECK MARK
========================================= */

.status-check {

    width: 19px;
    height: 19px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(57,255,136,0.35);

    color: #39ff88;

    font-size: 10px;

    font-weight: 900;

}


/* =========================================
   OFFLINE STATE
========================================= */

.stupid-kid-status.offline {

    border-color: rgba(255,80,80,0.25);

}


.stupid-kid-status.offline .status-dot {

    background: #ff5555;

    box-shadow:
        0 0 6px rgba(255,85,85,0.8),
        0 0 14px rgba(255,85,85,0.45);

    animation: none;

}


.stupid-kid-status.offline .status-label {

    color: #ff5555;

}


.stupid-kid-status.offline .status-check {

    color: #ff5555;

    border-color: rgba(255,85,85,0.35);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 500px) {

    .stupid-kid-status {

        padding: 9px 13px;

        gap: 10px;

    }

    .status-top {

        font-size: 9px;

        letter-spacing: 1.2px;

    }

    .status-label {

        font-size: 9px;

    }

    .status-network {

        font-size: 7px;

        letter-spacing: 1.4px;

    }

    .status-check {

        width: 17px;
        height: 17px;

        font-size: 9px;

    }

}

/* =========================================
   CONTRACT ADDRESS - CLICK TO COPY
========================================= */

.contract-copy {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    cursor: pointer;

    transition: all 0.25s ease;
}


/* CLICK TO COPY TEXT */

.contract-copy small {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;

    color: #ffffff;

    opacity: 0.55;

    white-space: nowrap;

    transition: all 0.25s ease;
}


/* HOVER */

.contract-copy:hover {
    opacity: 0.85;
}


.contract-copy:hover small {
    opacity: 1;
}


/* COPIED STATE */

.contract-copy.copied small {
    color: #39ff88;

    opacity: 1;
}


/* MOBILE */

@media (max-width: 600px) {

    .contract-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

}

/* =========================================
   MOBILE CONTRACT / TOKEN FACTS FIXES
   ========================================= */

/* Keep the contract area clean and readable at every width. */
.launch-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
}

.contract-copy {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contract-copy small {
    flex: 0 0 auto;
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: #111;
}

.launch-box > .yellow-btn {
    white-space: nowrap;
}

.fact-contract {
    align-items: flex-start !important;
    gap: 10px;
}

.fact-contract b {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
}

.faq-contract-address {
    display: inline-block;
    max-width: 100%;
    font-size: 0.9em;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    /* Contract address gets its own full-width line. */
    .launch-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 18px 16px;
    }

    .launch-box > strong {
        display: block;
        width: 100%;
        font-size: 10px;
        line-height: 1.4;
    }

    .contract-copy {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        gap: 9px;
        padding: 0;
        font-size: 10px;
        line-height: 1.5;
    }

    .contract-copy small {
        align-self: flex-start;
        width: auto;
        font-size: 8px;
        letter-spacing: 1px;
        line-height: 1;
    }

    .launch-box > .yellow-btn {
        display: block;
        width: 100%;
        text-align: center;
        white-space: normal;
        padding: 13px 16px;
    }

    /* Token information / facts: label stays separate from the address. */
    .facts-table div {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 15px 0;
    }

    .facts-table span {
        line-height: 1.5;
    }

    .fact-contract b {
        text-align: left;
        font-size: 9px;
        line-height: 1.55;
        font-weight: 700;
    }

    /* FAQ copy is easier to read; long contract stays compact. */
    .faq p {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 12px;
    }

    .faq-contract-address {
        font-size: 9px;
        line-height: 1.55;
        font-weight: 700;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* =========================================
   STORY TITLE + LEARN MORE
   ========================================= */
.story-title {
  font-weight: 900;
  text-transform: uppercase;
  max-width: 720px;
  line-height: .92 !important;
}

.learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 11px 18px;
  border: 1px solid #ffd600;
  border-radius: 999px;
  background: #ffd600;
  color: #080808;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  transition: transform .2s ease, opacity .2s ease;
}

.learn-more-btn:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* With the removed community artwork, keep the community content balanced. */
.community {
  grid-template-columns: 1fr;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(48px, 15vw, 65px);
    line-height: .9;
    letter-spacing: 1px;
    overflow-wrap: normal;
  }

  .story-title {
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: .5px;
  }

  .story-copy p {
    font-size: 14px;
    line-height: 1.8;
  }

  .learn-more-btn {
    margin-top: 20px;
  }

  .community {
    min-height: auto;
  }
}


/* =========================================
   FINAL LAYOUT FIXES — HERO / STORY
========================================= */
.hero {
  min-height: 470px;
  grid-template-columns: 58% 42%;
  align-items: stretch;
}
.hero-copy {
  padding: 82px 5vw 65px 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero h1 {
  font-size: 92px;
  line-height: .86;
  letter-spacing: 2px;
  white-space: nowrap;
}
.hero-buttons { margin-top: 28px; }
.hero-chain {
  min-height: 470px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 50px 6vw 50px 4vw;
  background: linear-gradient(110deg,#101010,#141200);
  border-left: 1px solid #272727;
}
.hero-chain .chain-icon {
  font-size: 62px;
  color: #ffd600;
  flex: 0 0 auto;
}
.hero-chain-copy h2 {
  margin: 7px 0 8px;
  font-family: Bangers, Impact, sans-serif;
  font-size: 42px;
  line-height: .95;
  letter-spacing: 1px;
}
.hero-chain-copy p { color:#888; margin:0; line-height:1.6; font-size:13px; }
.hero-chain .chain-badge {
  margin-left: auto;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
}
.story-reordered { grid-template-columns: 1fr 1fr; min-height: 560px; }
.supplied-story-art {
  position: relative;
  min-height: 560px;
  background:#080808;
  overflow:hidden;
}
.supplied-story-art img {
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(.9) contrast(1.05);
}
.story-reordered .story-copy {
  padding: 75px 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.story-title { font-weight: 900; }
.learn-more-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:24px;
  padding:12px 20px;
  border:1px solid #ffd600;
  border-radius:999px;
  background:#ffd600;
  color:#080808;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:4px 4px 0 #080808;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.learn-more-btn:hover { background:#fff; color:#080808; transform:translateY(-3px); box-shadow:6px 6px 0 #080808; }

@media (max-width:1000px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-copy { padding:72px 6vw 55px; }
  .hero h1 { font-size:82px; white-space:normal; }
  .hero-chain {
    min-height:280px;
    border-left:0;
    border-top:1px solid #272727;
    padding:45px 6vw;
  }
  .story-reordered { grid-template-columns:1fr; }
  .supplied-story-art { order:1; min-height:460px; }
  .supplied-story-art img { min-height:460px; }
  .story-reordered .story-copy { order:2; padding:60px 6vw 70px; }
}

@media (max-width:600px) {
  .hero-copy { padding:58px 6vw 42px; }
  .hero h1 {
    font-size:65px;
    line-height:.88;
    letter-spacing:1px;
    white-space:normal;
    margin:18px 0 0;
  }
  .hero-buttons { margin-top:24px; }
  .hero-chain {
    min-height:250px;
    padding:36px 6vw;
    gap:16px;
  }
  .hero-chain .chain-icon { font-size:45px; }
  .hero-chain-copy h2 { font-size:31px; }
  .hero-chain-copy p { font-size:11px; }
  .hero-chain .chain-badge { width:64px; height:64px; font-size:12px; }
  .story-reordered .story-copy { padding:52px 6vw 60px; }
  .story-title { font-size:48px !important; line-height:.9 !important; }
  .story-reordered .story-copy p { font-size:13px; line-height:1.8; }
  .supplied-story-art { min-height:360px; }
  .supplied-story-art img { min-height:360px; }
}

@media (min-width:601px) and (max-width:1200px) {
  .hero h1 { font-size:76px; }
}

/* =========================================
   POLISH + MOTION SYSTEM
========================================= */
html { scroll-padding-top: 86px; }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  gap: 22px;
  align-content: center;
  background: #080808;
  pointer-events: none;
  animation: loader-out .7s cubic-bezier(.77,0,.18,1) 1.05s forwards;
}
.loader-mark {
  color: #ffd600;
  font-family: Bangers, Impact, sans-serif;
  font-size: 74px;
  letter-spacing: 3px;
  transform: rotate(-5deg) scale(.82);
  animation: loader-mark-in .7s cubic-bezier(.16,1,.3,1) forwards;
}
.loader-line {
  width: 150px;
  height: 2px;
  background: #2a2a2a;
  overflow: hidden;
}
.loader-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffd600;
  transform: translateX(-100%);
  animation: loader-line-in 1s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes loader-mark-in {
  to { transform: rotate(-5deg) scale(1); opacity: 1; }
}
@keyframes loader-line-in { to { transform: translateX(0); } }
@keyframes loader-out {
  to { opacity: 0; visibility: hidden; } 
}

/* Hero entrance */
.hero-copy > *, .hero-chain > * {
  animation: hero-enter .85s cubic-bezier(.16,1,.3,1) both;
}
.hero-copy > *:nth-child(1) { animation-delay: .25s; }
.hero-copy > *:nth-child(2) { animation-delay: .34s; }
.hero-copy > *:nth-child(3) { animation-delay: .44s; }
.hero-chain > *:nth-child(1) { animation-delay: .36s; }
.hero-chain > *:nth-child(2) { animation-delay: .44s; }
.hero-chain > *:nth-child(3) { animation-delay: .52s; }
.hero-social-links { animation: hero-enter .85s cubic-bezier(.16,1,.3,1) .58s both; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveals */
.motion-ready .reveal-section {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.16,1,.3,1);
}
.motion-ready .reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.steps .reveal-item:nth-child(1), .faq-list .reveal-item:nth-child(1) { transition-delay: .04s; }
.steps .reveal-item:nth-child(2), .faq-list .reveal-item:nth-child(2) { transition-delay: .10s; }
.steps .reveal-item:nth-child(3), .faq-list .reveal-item:nth-child(3) { transition-delay: .16s; }
.steps .reveal-item:nth-child(4), .faq-list .reveal-item:nth-child(4) { transition-delay: .22s; }
.steps .reveal-item:nth-child(5), .faq-list .reveal-item:nth-child(5) { transition-delay: .28s; }

/* Keep the Story section visible on first load so its CTA never waits on the scroll-reveal observer. */
.motion-ready .story-reordered {
  opacity: 1 !important;
  transform: none !important;
}

.motion-ready .story-reordered .story-copy > * {
  animation: story-content-enter .7s cubic-bezier(.16,1,.3,1) both;
}
.motion-ready .story-reordered .story-copy > *:nth-child(1) { animation-delay: .08s; }
.motion-ready .story-reordered .story-copy > *:nth-child(2) { animation-delay: .16s; }
.motion-ready .story-reordered .story-copy > *:nth-child(3) { animation-delay: .24s; }
.motion-ready .story-reordered .story-copy > *:nth-child(4) { animation-delay: .32s; }

@keyframes story-content-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Conviction card */
.community-art {
  min-height: 440px;
  display: grid;
  place-items: center;
  padding: 42px 7vw 42px 3vw;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,214,0,.08), transparent 42%),
    #111;
}
.conviction-card {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 4 / 5;
  padding: 10px;
  background: #080808;
  border: 3px solid #ffd600;
  box-shadow: 18px 18px 0 #050505, 0 18px 45px rgba(0,0,0,.45);
  transform: rotate(-5deg);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
  overflow: visible;
}
.conviction-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255,214,0,.22);
  transform: rotate(3deg);
  pointer-events: none;
}
.conviction-card:hover {
  transform: rotate(-1.5deg) translateY(-8px) scale(1.015);
  box-shadow: 22px 24px 0 #050505, 0 28px 55px rgba(0,0,0,.55);
}
.conviction-image-wrap {
  position: absolute;
  inset: 10px 10px 76px;
  overflow: hidden;
  background: #000;
}
.conviction-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
}
.conviction-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.conviction-card:hover .conviction-image-wrap img { transform: scale(1.035); }
.conviction-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: .9;
  z-index: 2;
}
.conviction-copy span {
  color: #ffd600;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
}
.conviction-copy strong {
  color: #fff;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: 1px;
}
.conviction-stamp {
  position: absolute;
  top: -22px;
  right: -26px;
  z-index: 3;
  padding: 8px 11px;
  background: #ffd600;
  color: #080808;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  transform: rotate(9deg);
  box-shadow: 5px 5px 0 #080808;
}

/* Micro-interactions */
a, button { -webkit-tap-highlight-color: transparent; }
.yellow-btn, .dark-btn, .outline-btn, .learn-more-btn {
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}
.yellow-btn:hover, .dark-btn:hover, .outline-btn:hover, .learn-more-btn:hover {
  transform: translateY(-3px);
}
.yellow-btn:active, .dark-btn:active, .outline-btn:active, .learn-more-btn:active {
  transform: translateY(0) scale(.98);
}
.steps article {
  transition: transform .3s ease, background-color .3s ease;
}
.steps article:hover {
  transform: translateY(-5px);
  background: #0d0d0d;
  z-index: 2;
}
.step-icon { transition: transform .35s ease; }
.steps article:hover .step-icon { transform: rotate(-8deg) scale(1.08); }

/* Live strip entrance / subtle pulse */
.live-source { transition: opacity .5s ease; }
.live-dot { animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* FAQ accordion feels smoother */
.faq p {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.faq.open p {
  max-height: 220px;
  opacity: 1;
  margin: 14px 0 0;
}
.faq b { transition: transform .25s ease; display: inline-block; }

/* Mobile */
@media (max-width: 1000px) {
  .community-art { min-height: 470px; padding: 48px 6vw; }
  .conviction-card { width: min(380px, 82vw); }
}
@media (max-width: 600px) {
  .community-art { min-height: 450px; padding: 45px 6vw 58px; }
  .conviction-card { width: min(330px, 82vw); }
  .conviction-copy strong { font-size: 37px; }
  .conviction-stamp { right: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .motion-ready .reveal-section,
  .motion-ready .reveal-item { opacity: 1; transform: none; }
}

/* =========================================
   HERO LINK PLACEMENT + RESPONSIVE SECTION TYPOGRAPHY
   ========================================= */
.hero-copy {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.hero-chain {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 5vw 0 0;
  padding: 28px 0 0 0;
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #272727;
}

.hero-social-links {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 22px 5vw 70px 0;
  padding: 0;
}

.hero-social-links .yellow-btn,
.hero-social-links .dark-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Larger, more readable desktop section headings */
.story-copy h2,
.buy-section h2,
.facts-section h2,
.community h2,
.faq-section h2 {
  font-size: clamp(64px, 6.2vw, 94px);
  line-height: .88;
  letter-spacing: 1.2px;
}

.section-heading h2 {
  font-size: clamp(64px, 6.2vw, 94px);
}

.label,
.eyebrow {
  font-size: 13px;
  letter-spacing: 2.4px;
}

.facts-table div {
  font-size: 15px;
  min-height: 58px;
  align-items: center;
  gap: 24px;
}

.facts-table span {
  font-size: 14px;
}

.facts-table b {
  font-size: 15px;
  text-align: right;
}

.facts-table .fact-contract b {
  max-width: 62%;
  overflow-wrap: anywhere;
}

.faq > span {
  font-size: 15px;
}

.faq p {
  font-size: 13px;
}

@media (max-width: 1000px) {
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-chain {
    grid-column: 1;
    grid-row: 2;
    margin: 0 7vw;
  }

  .hero-social-links {
    grid-column: 1;
    grid-row: 3;
    margin: 20px 7vw 55px;
  }

  .story-copy h2,
  .buy-section h2,
  .facts-section h2,
  .community h2,
  .faq-section h2,
  .section-heading h2 {
    font-size: clamp(58px, 8vw, 78px);
  }
}

@media (max-width: 600px) {
  .hero-copy {
    padding-bottom: 28px;
  }

  .hero-chain {
    margin: 0 6vw;
    padding: 24px 0 0;
    gap: 14px;
    align-items: flex-start;
  }

  .hero-chain .chain-icon {
    font-size: 42px;
    flex: 0 0 auto;
  }

  .hero-chain-copy {
    min-width: 0;
  }

  .hero-chain-copy h2 {
    font-size: 27px;
    line-height: 1;
    margin: 5px 0 7px;
  }

  .hero-chain-copy p {
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
  }

  .hero-chain .chain-badge {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    font-size: 12px;
    margin-left: auto;
  }

  .hero-social-links {
    margin: 18px 6vw 45px;
    gap: 8px;
  }

  .hero-social-links .yellow-btn,
  .hero-social-links .dark-btn {
    padding: 12px 14px;
    font-size: 10px;
  }

  .story-copy h2,
  .buy-section h2,
  .facts-section h2,
  .community h2,
  .faq-section h2,
  .section-heading h2 {
    font-size: clamp(48px, 14vw, 62px);
    line-height: .9;
    letter-spacing: .6px;
    overflow-wrap: normal;
  }

  .label,
  .eyebrow {
    font-size: 10px;
    letter-spacing: 1.8px;
  }

  .facts-table div {
    min-height: 52px;
    padding: 14px 0;
    font-size: 13px;
    gap: 12px;
  }

  .facts-table span,
  .facts-table b {
    font-size: 13px;
  }

  .facts-table b {
    max-width: 58%;
  }

  .facts-table .fact-contract b {
    max-width: 58%;
    font-size: 10px;
    line-height: 1.35;
  }

  .faq > span {
    font-size: 14px;
    line-height: 1.35;
  }

  .faq p {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .hero-social-links {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-social-links .yellow-btn,
  .hero-social-links .dark-btn {
    width: 100%;
  }

  .hero-chain-copy h2 {
    font-size: 23px;
  }

  .story-copy h2,
  .buy-section h2,
  .facts-section h2,
  .community h2,
  .faq-section h2,
  .section-heading h2 {
    font-size: 46px;
  }
}