.staking-page {
    overflow: hidden;
}

.staking-hero {
    position: relative;
    isolation: isolate;
    min-height: 510px;
    display: flex;
    align-items: center;
    margin-top: -2rem;
    padding: 7rem 0 4.5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(34, 211, 238, 0.16);
    background: radial-gradient(circle at 21% 10%, rgba(11, 133, 232, 0.2), transparent 35%), radial-gradient(circle at 76% 70%, rgba(126, 58, 237, 0.2), transparent 38%), linear-gradient(120deg, #050b1d 0%, #07142d 48%, #080a20 100%);
}

.staking-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.36;
    background-image: linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.staking-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: 3.5rem;
}

.staking-hero-copy { animation: staking-rise 0.8s ease-out both; }
.staking-eyebrow { color: #65e9ff; border-color: rgba(101, 233, 255, 0.28); background: rgba(17, 91, 156, 0.19); }
.staking-hero h1 { margin: 1.15rem 0; max-width: 690px; font-size: clamp(2.55rem, 6.2vw, 5.25rem); line-height: 0.98; letter-spacing: -0.065em; }
.staking-hero h1 span { background: linear-gradient(100deg, #62e8ff 4%, #258aff 55%, #bd65ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.staking-hero p { color: var(--text-muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.staking-hero p strong { color: #65e9ff; }

.staking-soon-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 610px;
    margin-top: 1.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 14px;
    color: var(--text-muted);
    background: rgba(4, 16, 40, 0.62);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.staking-soon-notice strong { color: #fff; }
.pulse-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 999px; background: #23d6f6; box-shadow: 0 0 0 0 rgba(35, 214, 246, 0.7); animation: staking-pulse 2s infinite; }

.staking-visual { position: relative; min-height: 355px; display: grid; place-items: center; animation: staking-rise 0.85s 0.1s ease-out both; }
.visual-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(100, 221, 255, 0.34); }
.ring-a { width: 310px; height: 310px; border-top-color: #5eeaff; border-bottom-color: #a35cff; animation: staking-spin 14s linear infinite; }
.ring-b { width: 238px; height: 238px; border-style: dashed; border-color: rgba(178, 116, 255, 0.48); animation: staking-spin-reverse 10s linear infinite; }
.sst-coin { z-index: 1; width: 154px; height: 154px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: radial-gradient(circle at 33% 26%, #90f4ff, #1477e7 45%, #201058 100%); box-shadow: 0 0 0 13px rgba(26, 150, 255, 0.08), 0 0 60px rgba(32, 163, 255, 0.46), inset 0 0 30px rgba(255, 255, 255, 0.25); animation: coin-float 4s ease-in-out infinite; }
.sst-coin span { font-size: 2.45rem; font-weight: 900; line-height: 1; letter-spacing: -0.09em; color: #fff; }
.sst-coin small { margin-top: 0.3rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: #b6f6ff; }
.visual-pill { position: absolute; z-index: 2; padding: 0.68rem 0.88rem; border: 1px solid rgba(130, 225, 255, 0.35); border-radius: 999px; color: #dffaff; background: rgba(6, 18, 47, 0.82); box-shadow: 0 10px 28px rgba(0,0,0,.28); font: 700 0.7rem/1 var(--font-mono, monospace); letter-spacing: 0.06em; }
.visual-pill i { color: #51e5ff; margin-right: 0.35rem; }
.pill-top { top: 30px; right: 4%; animation: floating-pill 4.5s 0.4s ease-in-out infinite; }
.pill-bottom { left: -2%; bottom: 27px; animation: floating-pill 5.5s ease-in-out infinite reverse; }
.staking-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(4px); opacity: 0.62; }
.orb-one { width: 360px; height: 360px; top: -150px; left: -100px; background: rgba(0, 188, 255, 0.18); animation: orb-drift 12s ease-in-out infinite; }
.orb-two { width: 420px; height: 420px; right: -120px; bottom: -220px; background: rgba(133, 71, 255, 0.18); animation: orb-drift 14s ease-in-out infinite reverse; }

.launch-price-card { overflow: hidden; position: relative; border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(135deg, rgba(48, 34, 8, 0.92), rgba(11, 20, 43, 0.98)); }
.launch-price-card::after { content: '$10'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-size: clamp(5rem, 16vw, 11rem); font-weight: 900; letter-spacing: -0.1em; color: rgba(251, 191, 36, 0.07); pointer-events: none; }
.lock-flow-card { position: relative; overflow: hidden; border-color: rgba(91, 196, 255, 0.26); }
.lock-flow-card::before { content: ''; position: absolute; width: 180px; height: 180px; right: -75px; top: -82px; border: 1px solid rgba(54, 214, 255, 0.24); border-radius: 50%; box-shadow: 0 0 0 28px rgba(54,214,255,.035), 0 0 0 56px rgba(54,214,255,.025); }
.lock-option-card { position: relative; overflow: hidden; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.lock-option-card:hover { z-index: 1; transform: translateY(-7px); border-color: rgba(70, 224, 255, 0.65); box-shadow: 0 20px 38px rgba(4, 101, 177, 0.24); }
.featured-lock { border-color: rgba(34, 211, 238, 0.65) !important; background: linear-gradient(150deg, rgba(9, 48, 82, 0.92), rgba(18, 18, 62, 0.96)); box-shadow: 0 0 0 1px rgba(50, 212, 255, 0.12), 0 14px 34px rgba(5, 102, 173, 0.2); }
.featured-lock::after { content: 'FEATURED'; position: absolute; top: 13px; right: -29px; width: 106px; padding: 0.3rem 0; transform: rotate(38deg); text-align: center; color: #001b2a; background: #64e8ff; font-size: 0.56rem; font-weight: 900; letter-spacing: .08em; }

.earn-panel, .milestone-panel, .next-step-panel { margin: 2rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(88, 210, 255, 0.25); border-radius: 20px; background: linear-gradient(135deg, rgba(10, 26, 57, 0.88), rgba(19, 16, 61, 0.8)); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16); }
.earn-panel-heading h2, .milestone-heading h2, .next-step-heading h2 { margin: .65rem 0 1.4rem; font-size: clamp(1.3rem, 3vw, 2rem); }
.earn-reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.earn-reward-card { display: flex; gap: 1rem; padding: 1.2rem; border: 1px solid rgba(137, 209, 255, 0.2); border-radius: 16px; background: rgba(4, 13, 34, 0.56); transition: transform .25s ease, border-color .25s ease; }
.earn-reward-card:hover { transform: translateY(-4px); border-color: rgba(87, 229, 255, .55); }
.reward-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; font-size: 1.25rem; }
.gift-icon { color: #ffd45d; background: rgba(255, 193, 63, .13); }.team-icon { color: #58dfff; background: rgba(43, 197, 255, .14); }
.earn-reward-card span, .earn-reward-card small { display: block; color: var(--text-muted); font-size: .84rem; }.earn-reward-card strong { display: block; margin: .2rem 0 .45rem; color: #fff; font-size: 1.35rem; }.earn-reward-card em { color: #57dfff; font-style: normal; }

.milestone-panel { overflow: hidden; position: relative; border-color: rgba(91, 227, 255, .3); }.milestone-panel::after { content: ''; position: absolute; width: 330px; height: 330px; right: -160px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(49, 205, 255, .16), transparent 68%); }
.milestone-steps { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.milestone-step { flex: 1; text-align: center; color: #fff; font-size: clamp(.83rem, 1.8vw, 1rem); line-height: 1.4; text-transform: uppercase; }.milestone-step b { color: #6eeaff; font-size: 1.4em; }.milestone-icon { width: 62px; height: 62px; margin: 0 auto .7rem; display: grid; place-items: center; border-radius: 19px; color: #5be6ff; font-size: 1.55rem; background: rgba(16, 145, 221, .16); border: 1px solid rgba(99, 230, 255, .26); }.milestone-icon.gold { color: #ffd051; background: rgba(223, 156, 22, .14); }.milestone-icon.purple { color: #c092ff; background: rgba(140, 77, 255, .14); }.milestone-arrow { color: #4bdcf9; animation: milestone-arrow 1.6s ease-in-out infinite; }.milestone-panel p { position: relative; z-index: 1; margin: 1.25rem 0 0; color: var(--text-dim); text-align: center; font-size: .8rem; }

.next-step-panel { border-color: rgba(250, 128, 155, .24); background: linear-gradient(135deg, rgba(48, 18, 44, .74), rgba(12, 28, 60, .92)); }.next-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }.next-step-grid > div { display: flex; min-height: 145px; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; text-align: center; background: rgba(7, 12, 35, .43); }.next-step-grid i { color: #70eaff; font-size: 1.55rem; }.next-step-grid strong { color: #fff; font-size: .94rem; }.next-step-grid span { color: var(--text-muted); font-size: .77rem; }
.staking-security-note { display: flex; align-items: center; gap: .7rem; margin: 2rem 0 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 110, 129, .25); border-radius: 14px; color: var(--text-muted); background: rgba(80, 18, 35, .22); }.staking-security-note i { color: #ff6a80; font-size: 1.25rem; }.staking-security-note strong { color: #fff; }

@keyframes staking-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes staking-spin { to { transform: rotate(360deg); } }
@keyframes staking-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes coin-float { 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes staking-pulse { 70% { box-shadow: 0 0 0 11px rgba(35,214,246,0); } 100% { box-shadow: 0 0 0 0 rgba(35,214,246,0); } }
@keyframes floating-pill { 50% { transform: translateY(-9px); } }
@keyframes orb-drift { 50% { transform: translate(45px, 30px) scale(1.13); } }
@keyframes milestone-arrow { 50% { transform: translateX(6px); opacity: .5; } }

@media (max-width: 760px) {
    .staking-hero { min-height: unset; padding: 5.5rem 0 3.5rem; }
    .staking-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .staking-hero h1 { font-size: clamp(2.45rem, 12vw, 3.7rem); }
    .staking-visual { min-height: 285px; transform: scale(0.82); margin: -22px 0 -34px; }
    .pill-top { right: -4%; }
    .pill-bottom { left: -8%; }
    .launch-price-card::after { right: 1%; font-size: 7rem; }
    .earn-reward-grid, .next-step-grid { grid-template-columns: 1fr; }
    .milestone-steps { align-items: stretch; flex-direction: column; }.milestone-arrow { transform: rotate(90deg); }.milestone-arrow { animation-name: milestone-arrow-mobile; }
}

@keyframes milestone-arrow-mobile { 50% { transform: rotate(90deg) translateX(6px); opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
    .staking-hero-copy, .staking-visual, .sst-coin, .visual-ring, .staking-orb, .visual-pill, .pulse-dot { animation: none !important; }
}