/*==================================================
    NEON BEAST — LANDING PAGE + PRESALE
    (separate site: neon-beast-landing)
==================================================*/

html,body{ margin:0; background:#070B14; }

:root{
    --hp-void:#070B14;
    --hp-panel:#101830;
    --hp-panel-2:#16203D;
    --hp-violet:#8A5CFF;
    --hp-cyan:#00E5FF;
    --hp-gold:#FFC83D;
    --hp-soft:#B8C6E3;
    --hp-line:rgba(138,92,255,.28);
}

#homePage{

    --hp-void:#070B14;
    --hp-panel:#101830;
    --hp-panel-2:#16203D;
    --hp-violet:#8A5CFF;
    --hp-cyan:#00E5FF;
    --hp-gold:#FFC83D;
    --hp-text:#FFFFFF;
    --hp-soft:#B8C6E3;
    --hp-line:rgba(138,92,255,.28);

    min-height:100vh;
    overflow-x:hidden;
    background:var(--hp-void);
    color:var(--hp-text);
    font-family:"Rajdhani",sans-serif;
    font-weight:500;
    font-size:17px;
    line-height:1.5;

}

#homePage.hp-hidden{ display:none; }

#homePage *{ box-sizing:border-box; }

:where(#homePage) h1,
:where(#homePage) h2,
:where(#homePage) h3{
    font-family:"Orbitron",sans-serif;
    margin:0;
    color:#fff;
}

:where(#homePage) p{ margin:0; }

:where(#homePage) a{ color:inherit; }

:where(#homePage) button{ font-family:inherit; }

#homePage :focus-visible{
    outline:2px solid var(--hp-cyan);
    outline-offset:3px;
}

/*------------------ top bar ------------------*/

.hp-bar{
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    gap:24px;
    padding:14px clamp(16px,4vw,48px);
    background:rgba(7,11,20,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hp-line);
}

.hp-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:"Orbitron",sans-serif;
    font-weight:800;
    font-size:15px;
    letter-spacing:1px;
    white-space:nowrap;
}

.hp-brand img{ width:34px; height:34px; object-fit:contain; }

.hp-tabs{
    display:flex;
    gap:4px;
    flex:1;
    overflow-x:auto;
    scrollbar-width:none;
}

.hp-tabs::-webkit-scrollbar{ display:none; }

.hp-tab{
    background:none;
    border:none;
    color:var(--hp-soft);
    font-size:16px;
    font-weight:600;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    white-space:nowrap;
}

a.hp-tab{ text-decoration:none; display:inline-flex; align-items:center; }

.hp-tab:hover{ color:#fff; }

.hp-tab.active{
    color:#fff;
    background:rgba(138,92,255,.18);
    box-shadow:inset 0 -2px 0 var(--hp-violet);
}

.hp-tab-presale.active{ box-shadow:inset 0 -2px 0 var(--hp-gold); background:rgba(255,200,61,.12); }

.hp-play{
    padding:10px 20px;
    border:none;
    border-radius:10px;
    background:linear-gradient(100deg,#6B3BFF,#00C6FF);
    color:#fff;
    font-weight:700;
    font-size:16px;
    cursor:pointer;
    white-space:nowrap;
}

.hp-play:hover{ box-shadow:0 0 20px rgba(0,229,255,.4); }

.hp-play.hp-soon{
    background:var(--hp-panel-2);
    color:var(--hp-soft);
    border:1px solid var(--hp-line);
}

/*------------------ panels / sections ------------------*/

.hp-view{ display:none; }
.hp-view.active{ display:block; }

.hp-wrap{
    max-width:1180px;
    margin:0 auto;
    padding:56px clamp(16px,4vw,48px);
}

.hp-section-title{
    font-size:clamp(22px,3vw,30px);
    font-weight:700;
    margin-bottom:10px !important;
}

.hp-lead{
    color:var(--hp-soft);
    max-width:62ch;
    margin-bottom:32px !important;
}

.hp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 26px;
    border-radius:12px;
    border:1px solid transparent;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
}

.hp-btn-gold{
    background:var(--hp-gold);
    color:#1b1300;
}

.hp-btn-gold:hover{ box-shadow:0 0 22px rgba(255,200,61,.45); }

.hp-btn-ghost{
    background:rgba(255,255,255,.04);
    border-color:var(--hp-line);
    color:#fff;
}

.hp-btn-ghost:hover{ border-color:var(--hp-violet); }

.hp-btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }

/*------------------ hero ------------------*/

.hp-hero{
    position:relative;
    min-height:calc(100vh - 64px);
    display:flex;
    align-items:center;
    background:
        linear-gradient(90deg, rgba(7,11,20,.96) 0%, rgba(7,11,20,.78) 42%, rgba(7,11,20,.25) 100%),
        linear-gradient(0deg, var(--hp-void) 0%, rgba(7,11,20,0) 30%),
        url("../assets/hero.webp") center / cover no-repeat;
}

.hp-hero-inner{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:48px clamp(16px,4vw,48px);
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:48px;
    align-items:center;
}

.hp-hero h1{
    font-size:clamp(40px,6.2vw,78px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:1px;
    text-shadow:0 0 28px rgba(138,92,255,.55);
    margin-bottom:18px;
}

.hp-hero-sub{
    font-size:clamp(18px,1.8vw,21px);
    color:#d8e0f3;
    max-width:44ch;
    margin-bottom:30px !important;
}

.hp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* the HUD console — the one loud element on the page */

.hp-hud{
    position:relative;
    padding:26px 24px 22px;
    border-radius:18px;
    background:linear-gradient(170deg, rgba(40,22,90,.72), rgba(10,14,30,.94));
    border:1px solid rgba(138,92,255,.55);
    box-shadow:0 0 44px rgba(138,92,255,.28), inset 0 0 30px rgba(0,229,255,.06);
}

.hp-hud::before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:12px;
    border:1px dashed rgba(0,229,255,.18);
    pointer-events:none;
}

.hp-hud-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    color:var(--hp-soft);
    font-size:15px;
}

.hp-live{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--hp-cyan);
    font-weight:700;
}

.hp-live::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--hp-cyan);
    box-shadow:0 0 10px var(--hp-cyan);
    animation:hpPulse 1.8s ease-in-out infinite;
}

@keyframes hpPulse{ 50%{ opacity:.3; } }

.hp-hud-big{
    font-family:"Orbitron",sans-serif;
    font-size:clamp(30px,3.4vw,42px);
    font-weight:800;
    color:var(--hp-gold);
    line-height:1.1;
    text-shadow:0 0 18px rgba(255,200,61,.35);
}

.hp-hud-of{ color:var(--hp-soft); margin:4px 0 16px !important; }

.hp-gauge{
    display:grid;
    grid-template-columns:repeat(20,1fr);
    gap:4px;
    margin-bottom:8px;
}

.hp-gauge span{
    height:16px;
    border-radius:3px;
    background:rgba(255,255,255,.07);
}

.hp-gauge span.on{
    background:linear-gradient(180deg,#ffe08a,var(--hp-gold));
    box-shadow:0 0 8px rgba(255,200,61,.5);
}

.hp-gauge span.part{
    background:linear-gradient(90deg,var(--hp-gold) var(--fill,50%),rgba(255,255,255,.07) var(--fill,50%));
}

.hp-gauge-pct{
    display:flex;
    justify-content:space-between;
    color:var(--hp-soft);
    font-size:14px;
    margin-bottom:18px;
}

.hp-hud-rows{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
}

.hp-hud-rows div{ display:flex; flex-direction:column; }
.hp-hud-rows small{ color:var(--hp-soft); font-size:14px; }
.hp-hud-rows strong{ font-family:"Orbitron",sans-serif; font-size:17px; }

.hp-hud-cta{ width:100%; margin-top:20px; }

/*------------------ how it works ------------------*/

.hp-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.hp-step{
    padding-top:18px;
    border-top:2px solid var(--hp-violet);
}

.hp-step:nth-child(2){ border-top-color:var(--hp-cyan); }
.hp-step:nth-child(3){ border-top-color:var(--hp-gold); }

.hp-step h3{ font-size:19px; margin-bottom:8px; }
.hp-step p{ color:var(--hp-soft); }

/*------------------ rarity strip ------------------*/

.hp-rarities{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
}

.hp-rarity img{
    width:100%;
    aspect-ratio:1122/1402;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.hp-rarity p{
    text-align:center;
    margin-top:8px !important;
    font-weight:700;
}

.hp-rarity small{ display:block; color:var(--hp-soft); font-weight:500; }

/*------------------ presale ------------------*/

.hp-presale{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
    align-items:start;
}

.hp-card{
    padding:26px;
    border-radius:16px;
    background:var(--hp-panel);
    border:1px solid rgba(255,255,255,.07);
}

.hp-card-gold{ border-color:rgba(255,200,61,.35); }

.hp-card h3{ font-size:19px; margin-bottom:16px; }

.hp-wallet-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:10px;
    background:var(--hp-panel-2);
    margin-bottom:18px;
}

.hp-wallet-line strong{ font-family:"Orbitron",sans-serif; font-size:15px; }

.hp-field{ display:block; margin-bottom:14px; }

.hp-field span{ display:block; color:var(--hp-soft); font-size:15px; margin-bottom:6px; }

.hp-amount{
    display:flex;
    gap:8px;
}

.hp-amount input{
    flex:1;
    min-width:0;
    padding:13px 14px;
    border-radius:10px;
    border:1px solid var(--hp-line);
    background:#0a1122;
    color:#fff;
    font-family:"Orbitron",sans-serif;
    font-size:18px;
}

.hp-amount input:focus{ outline:none; border-color:var(--hp-gold); }

.hp-amount button{
    padding:0 16px;
    border-radius:10px;
    border:1px solid var(--hp-line);
    background:var(--hp-panel-2);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.hp-cost{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:18px;
}

.hp-cost span{ color:var(--hp-soft); }

.hp-cost strong{
    font-family:"Orbitron",sans-serif;
    font-size:24px;
    color:var(--hp-gold);
}

.hp-buy{ width:100%; }

.hp-note{
    margin-top:12px !important;
    color:var(--hp-soft);
    font-size:15px;
    min-height:22px;
}

.hp-facts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:22px;
}

.hp-facts div{ display:flex; flex-direction:column; }
.hp-facts small{ color:var(--hp-soft); font-size:14px; }
.hp-facts strong{ font-family:"Orbitron",sans-serif; font-size:18px; }

.hp-timeline-mini{
    list-style:none;
    padding:0;
    margin:0 0 20px;
}

.hp-timeline-mini li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.hp-timeline-mini li span:last-child{ color:var(--hp-soft); text-align:right; }

.hp-rules{
    margin:0;
    padding-left:18px;
    color:var(--hp-soft);
}

.hp-rules li{ margin-bottom:6px; }

.hp-history{ margin-top:18px; }

.hp-history table{ width:100%; border-collapse:collapse; font-size:15px; }
.hp-history th{ text-align:left; color:var(--hp-soft); font-weight:600; padding:6px 0; }
.hp-history td{ padding:8px 0; border-top:1px solid rgba(255,255,255,.06); }
.hp-history a{ color:var(--hp-cyan); }

/*------------------ tokenomics ------------------*/

.hp-alloc{
    width:100%;
    border-collapse:collapse;
    margin-bottom:36px;
}

.hp-alloc th,
.hp-alloc td{
    text-align:left;
    padding:14px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hp-alloc th{ color:var(--hp-soft); font-weight:600; }

.hp-alloc td:nth-child(2){ font-family:"Orbitron",sans-serif; white-space:nowrap; }

.hp-alloc td:last-child{ color:var(--hp-soft); }

.hp-live-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

/* how the project is funded: two cards with share lists */
.hp-fund-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:48px;
}
.hp-fund-note{ color:var(--hp-soft); font-size:15px; margin:0 0 12px; }
.hp-fund-list{ list-style:none; margin:0 0 12px; padding:0; }
.hp-fund-list li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.hp-fund-list li:last-child{ border-bottom:none; }
.hp-fund-list b{ font-family:"Orbitron",sans-serif; color:var(--hp-gold); white-space:nowrap; }
.hp-live-grid .hp-card{ padding:20px; }
.hp-live-grid small{ display:block; color:var(--hp-soft); font-size:14px; margin-bottom:4px; }
.hp-live-grid strong{ font-family:"Orbitron",sans-serif; font-size:22px; color:var(--hp-gold); }

/*------------------ roadmap ------------------*/

.hp-road{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
}

.hp-road::before{
    content:"";
    position:absolute;
    left:15px;
    top:6px;
    bottom:6px;
    width:2px;
    background:linear-gradient(180deg,var(--hp-violet),var(--hp-cyan),rgba(255,255,255,.08));
}

.hp-road li{
    position:relative;
    padding:0 0 30px 52px;
}

.hp-road li::before{
    content:attr(data-step);
    position:absolute;
    left:0;
    top:0;
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:"Orbitron",sans-serif;
    font-size:13px;
    font-weight:700;
    background:var(--hp-panel-2);
    border:2px solid rgba(255,255,255,.14);
}

.hp-road li.done::before{ background:var(--hp-violet); border-color:var(--hp-violet); }
.hp-road li.now::before{ background:var(--hp-gold); border-color:var(--hp-gold); color:#1b1300; }

.hp-road h3{ font-size:18px; margin-bottom:4px; }
.hp-road p{ color:var(--hp-soft); max-width:62ch; }
.hp-road .hp-status{ font-size:14px; color:var(--hp-cyan); font-weight:700; }

/*------------------ footer ------------------*/

.hp-foot{
    border-top:1px solid var(--hp-line);
    padding:28px clamp(16px,4vw,48px);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;
    color:var(--hp-soft);
    font-size:15px;
}

.hp-foot nav{ display:flex; gap:18px; flex-wrap:wrap; }
.hp-foot a{ text-decoration:none; }
.hp-foot a:hover{ color:#fff; }

.hp-disclaimer{ max-width:70ch; }

/*------------------ responsive ------------------*/

@media (max-width:960px){
    .hp-hero-inner,
    .hp-presale{ grid-template-columns:minmax(0,1fr); }
    .hp-live-grid{ grid-template-columns:1fr 1fr; }
    .hp-fund-grid{ grid-template-columns:minmax(0,1fr); }
    .hp-rarities{ grid-template-columns:repeat(4,1fr); }
    .hp-hero{ background-position:65% center; }
}

@media (max-width:640px){
    .hp-bar{ flex-wrap:wrap; gap:10px; }
    .hp-tabs{ order:3; flex-basis:100%; }
    .hp-brand{ flex:1; }
    .hp-steps{ grid-template-columns:1fr; }
    .hp-rarities{ grid-template-columns:repeat(3,1fr); }
    .hp-facts,
    .hp-hud-rows{ grid-template-columns:1fr 1fr; }
    .hp-live-grid{ grid-template-columns:1fr; }
    .hp-wrap{ padding-top:40px; padding-bottom:40px; }
    .hp-card{ padding:20px; }
    .hp-alloc thead{ display:none; }
    .hp-alloc tr{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
    .hp-alloc td{ padding:0; border:none; }
    .hp-alloc td:first-child{ font-weight:700; color:#fff; }
    .hp-alloc td:last-child{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce){
    .hp-live::before{ animation:none; }
}

.hp-wallet-line .hp-btn{ padding:10px 14px; font-size:15px; white-space:nowrap; }

/*------------------ popup (replaces browser alerts) ------------------*/

.hp-popup{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,6,14,.78);
    backdrop-filter:blur(4px);
}

.hp-popup[hidden]{ display:none; }

.hp-popup-box{
    width:100%;
    max-width:420px;
    padding:28px 26px 24px;
    border-radius:18px;
    background:linear-gradient(165deg, rgba(40,22,90,.95), rgba(12,16,32,.98));
    border:1px solid rgba(138,92,255,.5);
    box-shadow:0 0 40px rgba(138,92,255,.3);
    text-align:center;
    font-family:"Rajdhani",sans-serif;
    color:#fff;
}

.hp-popup-box h3{
    font-family:"Orbitron",sans-serif;
    font-size:19px;
    margin:0 0 12px;
}

.hp-popup-box p{
    color:#dbe2f4;
    font-size:17px;
    line-height:1.5;
    margin:0 0 22px;
}

.hp-popup-actions{
    display:flex;
    gap:10px;
    justify-content:center;
}

.hp-popup-actions .hp-btn{ flex:1; font-family:"Rajdhani",sans-serif; }

.hp-popup :focus-visible{ outline:2px solid var(--hp-cyan); outline-offset:3px; }

.hp-spinner{
    width:38px;
    height:38px;
    margin:0 auto 16px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#FFC83D;
    animation:hpSpin .9s linear infinite;
}

@keyframes hpSpin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
    .hp-spinner{ animation-duration:3s; }
}

a.hp-play{ text-decoration:none; display:inline-flex; align-items:center; }

/*==================================================
    PROJECT WALLETS (home) + PRESALE PAGE
==================================================*/
.hp-wallets{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }

.hp-wallet{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
    color:inherit; text-decoration:none;
    transition:border-color .2s, background .2s;
}
a.hp-wallet:hover{ border-color:rgba(255,215,106,.5); background:rgba(255,215,106,.06); }
.hp-wallet small{ display:flex; flex-direction:column; color:var(--hp-soft); font-size:14px; }
.hp-wallet small em{ font-style:normal; font-size:12px; opacity:.7; }
.hp-wallet strong{ font-family:"Orbitron",sans-serif; font-size:16px; white-space:nowrap; }
.hp-wallet strong span{ font-size:11px; opacity:.7; }

a.hp-brand{ color:inherit; text-decoration:none; }
a.hp-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.hp-presale-stats{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:22px;
}
.hp-presale-stats div{
    display:flex; flex-direction:column; gap:2px;
    padding:12px; border-radius:12px;
    border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
}
.hp-presale-stats small{ color:var(--hp-soft); font-size:13px; }
.hp-presale-stats strong{ font-family:"Orbitron",sans-serif; font-size:18px; }

#buy{ scroll-margin-top:90px; }

@media (max-width:700px){
    .hp-presale-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/*==================================================
    STAKE + SWAP PAGES
==================================================*/
.st-tiers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:6px 0 16px; }
.st-tier{
    display:flex; flex-direction:column; gap:4px; align-items:center;
    padding:12px 8px; border-radius:14px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14); background:rgba(12,10,26,.55); color:inherit; font:inherit;
    transition:border-color .2s, box-shadow .2s;
}
.st-tier strong{ font-size:16px; }
.st-tier span{ color:#ffd76a; font-weight:700; }
.st-tier small{ font-size:12px; opacity:.75; }
.st-tier.active{ border-color:rgba(255,200,61,.7); box-shadow:0 0 18px rgba(255,200,61,.18); }

.st-boost{ margin:0 0 10px; }
.st-table-wrap{ overflow-x:auto; margin-bottom:18px; }
.st-table{ width:100%; border-collapse:collapse; font-size:14px; }
.st-table th, .st-table td{ padding:8px 6px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap; }
.st-table th{ font-size:12px; opacity:.7; font-weight:600; }
.st-table small{ opacity:.7; }
.st-table a{ color:#7fd8ff; }

.sw-token{ display:block; margin-top:6px; font-size:14px; opacity:.85; }
.sw-flip{ width:100%; margin:4px 0 14px; }
.sw-slip{ display:flex; gap:8px; }
.sw-slip button{
    flex:1; padding:8px; border-radius:10px; cursor:pointer; font:inherit; color:inherit;
    border:1px solid rgba(255,255,255,.14); background:rgba(12,10,26,.55);
}
.sw-slip button.active{ border-color:rgba(255,200,61,.7); color:#ffd76a; }
.sw-high{ color:#ff8a5c; }

@media (max-width:560px){
    .st-tiers{ grid-template-columns:1fr; }
}

/*==================================================
    BATCH F — two-column pages (Stake, Swap)
    info on the left, the action box on the right,
    fits one screen on desktop (no page scroll)
==================================================*/
.hp-split{
    max-width:1240px;
    margin:0 auto;
    padding:22px clamp(16px,3vw,40px);
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    gap:28px;
    align-items:start;
    min-height:calc(100vh - 64px - 58px);
}
.hp-split-info h1{
    font-size:clamp(30px,3.4vw,44px);
    font-weight:800;
    text-shadow:0 0 24px rgba(138,92,255,.5);
    margin-bottom:10px;
}
.hp-split-info .hp-hero-sub{ font-size:17px; max-width:60ch; margin-bottom:16px !important; }
.hp-split-info h3{ font-size:15px; margin:0 0 8px; }
.hp-split-panel{ position:sticky; top:84px; }
.hp-split-panel .hp-card{ padding:20px; }
.hp-split-panel .hp-card h3{ margin-bottom:12px; }
.hp-foot-slim{ padding:14px clamp(16px,4vw,48px); font-size:13px; }

.st-live{
    padding:14px 16px;
    border-radius:16px;
    background:linear-gradient(170deg, rgba(40,22,90,.6), rgba(10,14,30,.9));
    border:1px solid rgba(138,92,255,.45);
    box-shadow:0 0 30px rgba(138,92,255,.18);
    margin-bottom:16px;
}
.st-live-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-family:"Orbitron",sans-serif; font-size:13px; letter-spacing:1px; color:var(--hp-soft); }
.st-live-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.sw-live-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.st-live-grid > div{ display:flex; flex-direction:column; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.st-live-grid small{ color:var(--hp-soft); font-size:12px; }
.st-live-grid strong{ font-family:"Orbitron",sans-serif; font-size:16px; }
.st-live-apy{ border-color:rgba(255,200,61,.5) !important; background:rgba(255,200,61,.08) !important; }
.st-live-apy strong{ color:var(--hp-gold); font-size:20px; }

.st-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px; }
.st-tier-list{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.st-tier-row{ display:flex; justify-content:space-between; gap:10px; padding:5px 10px; border-radius:8px; font-size:14px; background:rgba(255,255,255,.03); }
.st-tier-row strong{ font-family:"Orbitron",sans-serif; font-size:13px; }
.st-tier-row.now{ background:rgba(255,200,61,.12); box-shadow:inset 3px 0 0 var(--hp-gold); }
.st-tier-row.now strong{ color:var(--hp-gold); }
.st-rules{ font-size:14px; }
.st-rules li{ margin-bottom:4px; }

.st-mine{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:6px; }
.st-mine > div{ display:flex; flex-direction:column; padding:8px; border-radius:10px; background:var(--hp-panel-2); }
.st-mine small{ color:var(--hp-soft); font-size:11px; }
.st-mine strong{ font-family:"Orbitron",sans-serif; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.st-mine-reward strong{ color:#7fffb0; }
.st-lots{ display:flex; flex-direction:column; gap:4px; max-height:96px; overflow-y:auto; margin:6px 0 12px; }
.st-lot{ display:flex; justify-content:space-between; font-size:13px; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.03); }
.st-lot em{ font-style:normal; color:var(--hp-soft); }
.st-lot.open em{ color:#7fffb0; font-weight:700; }
.st-tabs{ display:flex; gap:6px; margin-bottom:12px; }
.st-tab{ flex:1; padding:9px; border-radius:10px; border:1px solid var(--hp-line); background:rgba(255,255,255,.03); color:var(--hp-soft); font-weight:700; font-size:15px; cursor:pointer; }
.st-tab.active{ color:#fff; border-color:rgba(255,200,61,.6); background:rgba(255,200,61,.1); }
.st-wait{ color:var(--hp-soft); font-size:15px; margin-bottom:8px; }
.sw-mode{ font-family:"Rajdhani",sans-serif; font-size:12px; padding:2px 8px; border-radius:999px; background:rgba(0,229,255,.12); color:var(--hp-cyan); vertical-align:middle; }
.sw-mode:empty{ display:none; }
.sw-h3{ margin-top:4px !important; }

@media (max-width:960px){
    .hp-split{ grid-template-columns:minmax(0,1fr); min-height:0; }
    .hp-split-panel{ position:static; order:-1; }      /* phones: the action box first */
}
@media (max-width:560px){
    .st-live-grid{ grid-template-columns:1fr 1fr; }
    .st-two{ grid-template-columns:1fr; }
    .st-mine{ grid-template-columns:1fr 1fr; }
}

/*==================================================
    BATCH F — home page motion (home-fx.js)
    Light: CSS + one small canvas. Off with
    "reduce motion" on the phone / computer.
==================================================*/
.hp-hero{ overflow:hidden; }
#hpFx{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    opacity:.85;
}
.hp-hero-inner{ position:relative; z-index:1; }

/* title: slow neon shimmer + a rare flicker */
.hp-hero h1.hp-fx-title{
    background:linear-gradient(100deg, #fff 0%, #cdb8ff 30%, #7fe9ff 50%, #cdb8ff 70%, #fff 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 18px rgba(138,92,255,.55));
    animation:hpShimmer 7s linear infinite, hpFlicker 9s steps(1) infinite;
}
@keyframes hpShimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
@keyframes hpFlicker{
    0%,100%{ opacity:1; }
    92.0%{ opacity:1; } 92.4%{ opacity:.55; } 92.8%{ opacity:1; } 93.4%{ opacity:.7; } 93.8%{ opacity:1; }
}

/* HUD glow breathing */
.hp-hud{ animation:hpBreath 4.5s ease-in-out infinite; }
@keyframes hpBreath{
    0%,100%{ box-shadow:0 0 44px rgba(138,92,255,.28), inset 0 0 30px rgba(0,229,255,.06); }
    50%{ box-shadow:0 0 64px rgba(138,92,255,.45), inset 0 0 36px rgba(0,229,255,.12); }
}

/* buttons: light sweep on hover */
.hp-btn, .hp-play{ position:relative; overflow:hidden; }
.hp-btn::after, .hp-play::after{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
}
.hp-btn:hover::after, .hp-play:hover::after{ left:120%; }

/* sections slide in on scroll */
.hp-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.hp-reveal.in{ opacity:1; transform:none; }

/* steps lift on hover */
.hp-step{ transition:transform .25s ease, box-shadow .25s ease; }
.hp-step:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(138,92,255,.2); }

/* rarity cards: float + rarity glow + tilt on hover */
.hp-rarity{ --glow:138,92,255; transition:transform .3s ease; }
.hp-rarity:nth-child(1){ --glow:170,180,200; }
.hp-rarity:nth-child(2){ --glow:53,255,150; }
.hp-rarity:nth-child(3){ --glow:0,170,255; }
.hp-rarity:nth-child(4){ --glow:170,90,255; }
.hp-rarity:nth-child(5){ --glow:255,190,40; }
.hp-rarity:nth-child(6){ --glow:255,70,110; }
.hp-rarity:nth-child(7){ --glow:0,240,255; }
.hp-rarity img{
    box-shadow:0 0 16px rgba(var(--glow),.35);
    animation:hpFloat 5s ease-in-out infinite;
    transition:box-shadow .3s ease;
}
.hp-rarity:nth-child(2n) img{ animation-delay:-1.2s; }
.hp-rarity:nth-child(3n) img{ animation-delay:-2.5s; }
.hp-rarity:hover img{ box-shadow:0 0 30px rgba(var(--glow),.8); }
.hp-rarity:hover{ transform:translateY(-6px) scale(1.03); }
@keyframes hpFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* numbers count up once (home-fx.js adds the class) */
.hp-count{ transition:color .3s ease; }
.hp-count.counting{ color:var(--hp-cyan); }

@media (prefers-reduced-motion:reduce){
    #hpFx{ display:none; }
    .hp-hero h1.hp-fx-title, .hp-hud, .hp-rarity img{ animation:none; }
    .hp-reveal{ opacity:1; transform:none; transition:none; }
    .hp-btn::after, .hp-play::after{ display:none; }
}

/*==================================================
    BATCH H — swap boxes (like a DEX), stake pool
==================================================*/
.sw-box{
    padding:14px 16px;
    border-radius:18px;
    background:rgba(8,10,24,.75);
    border:1px solid var(--hp-line);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.sw-box:focus-within{ border-color:rgba(255,200,61,.6); box-shadow:0 0 18px rgba(255,200,61,.15); }
.sw-box-top{ display:flex; justify-content:space-between; align-items:center; color:var(--hp-soft); font-size:14px; margin-bottom:6px; }
.sw-box-top small{ font-size:12px; }
.sw-box-row{ display:flex; align-items:center; gap:10px; }
.sw-box-row input{
    flex:1; min-width:0; background:none; border:none; outline:none;
    color:#fff; font-family:"Orbitron",sans-serif; font-size:clamp(22px,3.2vw,30px); padding:0;
}
.sw-box-row input::-webkit-outer-spin-button, .sw-box-row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sw-out{ flex:1; min-width:0; font-family:"Orbitron",sans-serif; font-size:clamp(22px,3.2vw,30px); color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-coin{
    flex:none; padding:7px 14px; border-radius:99px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
    font-family:"Orbitron",sans-serif; font-size:14px; color:#fff;
}
.sw-box-foot{ display:flex; justify-content:flex-end; margin-top:6px; }
.sw-max{ background:none; border:1px solid rgba(255,200,61,.5); color:var(--hp-gold); border-radius:8px; padding:2px 10px; font-size:12px; cursor:pointer; }
.sw-flip-btn{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; margin:-10px auto; position:relative; z-index:2;
    border-radius:12px; border:4px solid #0b0d1e; background:#1c1f3a; color:#fff;
    font-size:20px; cursor:pointer; transition:transform .25s ease, background .2s ease;
}
.sw-flip-btn:hover{ transform:rotate(180deg); background:#2a2f55; }
.sw-box-out{ margin-bottom:12px; }
.sw-details{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:14px; }
.sw-details > div{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--hp-soft); }
.sw-details strong{ color:#fff; font-family:"Orbitron",sans-serif; font-size:13px; }
.sw-details .sw-slip{ display:flex; gap:4px; }

.st-live-pool strong{ color:#7fffb0; }
.st-live-pool strong.st-low{ color:#ff8a8a; }

/*------------------ Launch tab (launch-gate.js) ------------------*/
/* presale / stake / swap stay invisible until the launch check is done */
html.nb-gate body{ visibility:hidden; }
html.nb-gate .hp-bar{ visibility:visible; }
.hp-soon-badge{
    margin-left:6px; padding:1px 7px; border-radius:20px;
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--hp-gold); background:rgba(255,200,61,.12); border:1px solid rgba(255,200,61,.35);
}
.hp-locked{ cursor:not-allowed !important; opacity:.6; pointer-events:auto; }
.hp-tabs a.hp-locked:hover{ color:var(--hp-soft); background:none; }
.hp-btn.hp-locked{ filter:grayscale(.6); box-shadow:none !important; }
.hp-road-date{ display:block; margin-top:2px; font-size:13px; color:var(--hp-soft); }
.nb-gate-wait{ visibility:visible; position:fixed; left:50%; top:45%; transform:translate(-50%,-50%); margin:0; padding:14px 20px;
    max-width:90vw; text-align:center; color:var(--hp-soft); background:var(--hp-panel); border:1px solid var(--hp-line); border-radius:12px; }