/* ============================================================
   ZAZIN — Main Stylesheet
   Modern redesign: dark cosmic theme, Solana purple accents, clean layout
   ============================================================ */

/* --- Fonts --- */
@font-face {
    font-family: 'Russo One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../font/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2') format('woff2'),
         url('../font/Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2') format('woff2'),
         url('../font/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2') format('woff2');
}
@font-face {
    font-family: 'Geometria';
    src: url('../font/Geometria.woff2') format('woff2'),
         url('../font/Geometria.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geometria';
    src: url('../font/Geometria-Heavy.woff2') format('woff2'),
         url('../font/Geometria-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IcoMoon';
    src: url('../font/icomoonc580.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- CSS Variables --- */
:root {
    --gold:        #E020D3;
    --gold-light:  #ff44ee;
    --gold-dark:   #a800a0;
    --purple:      #8F3ED9;
    --purple-light:#b36df1;
    --dark:        #090a1a;
    --dark2:       #0f0f22;
    --dark3:       #151625;
    --white:       #ffffff;
    --white70:     rgba(255,255,255,0.7);
    --white30:     rgba(255,255,255,0.3);
    --green:       #a3ff12;
    --border:      rgba(224,32,211,0.2);
    --radius:      16px;
    --shadow-gold: 0 0 40px rgba(224,32,211,0.2);
    --shadow-purple: 0 0 40px rgba(224,32,211,0.3);
    --transition:  0.3s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Russo One', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--white70);
    background-color: var(--dark);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Russo One', sans-serif;
    color: var(--gold);
    margin: 0 0 20px;
    line-height: 1.25;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
h1 { font-size: clamp(36px, 6vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2.5vw, 30px); }

p { margin: 0 0 20px; }

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; display: block; }

ul { list-style: none; margin: 0; padding: 0; }

/* --- Preloader --- */
#preloader {
    position: fixed;
    inset: 0;
    background: var(--dark);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}
#preloader::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 2px solid rgba(143,62,217,0.78);
    box-shadow:
        inset 0 0 22px rgba(143,62,217,0.2),
        0 0 24px rgba(143,62,217,0.36),
        0 0 46px rgba(91,35,178,0.28);
    pointer-events: none;
}
.preloader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.preloader-inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(190px, 23vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,68,238,0.2) 0 34%, rgba(143,62,217,0.12) 35% 52%, transparent 68%),
        conic-gradient(from 90deg, transparent 0 18%, rgba(255,224,138,0.55), transparent 44% 100%);
    filter: blur(6px);
    transform: translate(-50%, -58%);
    animation: preloaderAura 2.4s linear infinite;
    pointer-events: none;
}
#preloader img {
    position: relative;
    z-index: 1;
    width: clamp(150px, 18vw, 240px);
    filter:
        drop-shadow(0 14px 22px rgba(0,0,0,0.48))
        drop-shadow(0 0 20px rgba(255,68,238,0.46))
        drop-shadow(0 0 34px rgba(255,224,138,0.25));
    animation: pulse 1.4s ease-in-out infinite;
}
.preloader-bar {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(224,32,211,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 16px rgba(224,32,211,0.18);
}
.preloader-bar span {
    position: absolute;
    inset: 1px auto 1px 1px;
    width: 38%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(143,62,217,0.15), var(--gold), var(--gold-light), rgba(255,255,255,0.86));
    box-shadow:
        0 0 10px rgba(255,68,238,0.62),
        0 0 18px rgba(143,62,217,0.3);
    animation: preloaderSlide 1.55s ease-in-out infinite;
}
.preloader-text {
    position: relative;
    z-index: 1;
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(255,68,238,0.68),
        0 0 18px rgba(255,224,138,0.34);
    animation: preloaderText 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.74; transform: scale(0.94); }
}
@keyframes preloaderText {
    0%, 100% { opacity: 0.62; }
    50% { opacity: 1; }
}
@keyframes preloaderAura {
    0% {
        transform: translate(-50%, -58%) rotate(0deg) scale(0.98);
        opacity: 0.72;
    }
    50% {
        transform: translate(-50%, -58%) rotate(180deg) scale(1.04);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -58%) rotate(360deg) scale(0.98);
        opacity: 0.72;
    }
}
@keyframes preloaderSlide {
    0% {
        transform: translateX(-110%);
    }
    50% {
        transform: translateX(72%);
    }
    100% {
        transform: translateX(250%);
    }
}

/* --- Firefly canvas --- */
#firefly-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* --- Global background --- */
.site-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(224,32,211,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 80%,  rgba(224,32,211,0.08) 0%, transparent 60%),
        var(--dark);
    z-index: -1;
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0;
    transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
    background: rgba(6,6,14,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--border);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 24px;
    max-width: 100%;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        rgba(6,6,14,0.36);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.11),
        0 10px 28px rgba(0,0,0,0.22),
        0 0 22px rgba(143,62,217,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.navbar-logo img {
    height: 38px;
    width: auto;
}
.navbar-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: 48px;
    flex: 1;
}
.navbar-links a:not(.btn) {
    position: relative;
    padding: 9px 2px;
    font-family: 'Geometria', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.94);
    text-shadow:
        0 0 8px rgba(255,255,255,0.5),
        0 0 18px rgba(143,62,217,0.58),
        0 2px 8px rgba(0,0,0,0.65);
    transition: color var(--transition), text-shadow var(--transition), transform var(--transition);
}
.navbar-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 2px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), rgba(143,62,217,0.82), transparent);
    box-shadow: 0 0 10px rgba(143,62,217,0.55);
    transition: left var(--transition), right var(--transition), opacity var(--transition);
    opacity: 0;
}
.navbar-links a:not(.btn):hover {
    color: var(--white);
    transform: translateY(-1px);
    text-shadow:
        0 0 10px rgba(255,255,255,0.78),
        0 0 24px rgba(143,62,217,0.92),
        0 0 36px rgba(191,126,255,0.56),
        0 2px 8px rgba(0,0,0,0.7);
}
.navbar-links a:not(.btn):hover::after {
    left: 0;
    right: 0;
    opacity: 1;
}
.navbar-links .btn { margin-left: auto; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    font-family: 'Russo One', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    text-decoration: none;
}
.btn-gold {
    background: var(--gold);
    color: #000;
}
.btn-gold:hover {
    background: var(--gold-light);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(224,32,211,0.35);
}
.btn-outline {
    background: rgba(224,32,211,0.15);
    color: var(--white);
    border: 1px solid rgba(224,32,211,0.5);
    box-shadow: 0 0 12px rgba(224,32,211,0.2);
}
.btn-outline:hover {
    background: rgba(224,32,211,0.3);
    border-color: rgba(224,32,211,0.8);
    box-shadow: 0 0 20px rgba(224,32,211,0.4);
    transform: translateY(-3px);
}
.btn-ghost {
    background: rgba(224,32,211,0.15);
    color: var(--white);
    border: 1px solid rgba(224,32,211,0.5);
    box-shadow: 0 0 12px rgba(224,32,211,0.2);
}
.btn-ghost:hover {
    background: rgba(224,32,211,0.3);
    border-color: rgba(224,32,211,0.8);
    box-shadow: 0 0 20px rgba(224,32,211,0.4);
    transform: translateY(-3px);
}

/* Mobile hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px 10px;
    background: rgba(224,32,211,0.12);
    border: 1px solid rgba(224,32,211,0.3);
    border-radius: 8px;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 1001;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all var(--transition);
}

/* Mobile menu — slide-in panel from right */
.mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 80vw);
    height: 100%;
    background: rgba(9, 10, 26, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    z-index: 1001;
    padding: 90px 40px 40px;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
    pointer-events: none;
}
.mobile-menu.open {
    transform: translateX(0);
    pointer-events: all;
}

/* Backdrop overlay */
.mobile-menu::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.mobile-menu.open::before {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-link {
    display: block;
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-shadow:
        0 0 8px rgba(255,255,255,0.38),
        0 0 18px rgba(224,32,211,0.5),
        0 2px 8px rgba(0,0,0,0.65);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color var(--transition), padding-left var(--transition), text-shadow var(--transition);
}
.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: var(--white);
    text-shadow:
        0 0 10px rgba(255,255,255,0.7),
        0 0 24px rgba(255,68,238,0.85),
        0 0 36px rgba(143,62,217,0.55),
        0 2px 8px rgba(0,0,0,0.7);
    padding-left: 8px;
}
.mobile-menu .btn {
    margin-top: 28px;
    width: 100%;
    justify-content: center;
}
.mobile-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--white70);
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    line-height: 1;
    transition: all var(--transition);
}
.mobile-close:hover {
    color: var(--white);
    background: var(--gold);
    border-color: var(--gold);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(143,62,217,0.15) 0%, transparent 65%);
    pointer-events: none;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(56px, 7vw, 96px);
    align-items: center;
}
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
        rgba(224,32,211,0.1);
    border: 1px solid #ff44ee;
    border-radius: 100px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 0 18px rgba(163,255,18,0.08),
        0 0 22px rgba(224,32,211,0.18);
    font-size: 12px;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.88);
    margin-bottom: 34px;
    text-transform: uppercase;
    overflow: hidden;
}
.hero-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(163,255,18,0.16), transparent);
    animation: badgeSweep 3.4s ease-in-out infinite;
    transform: translateX(-120%);
    pointer-events: none;
}
.hero-badge span.dot {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow:
        0 0 8px rgba(163,255,18,0.95),
        0 0 18px rgba(163,255,18,0.45);
    animation: livePulse 1.6s ease-in-out infinite;
}
.hero-badge {
    isolation: isolate;
}
.hero-badge span.dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(163,255,18,0.45);
    border-radius: 50%;
    animation: liveRing 1.6s ease-out infinite;
}
@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.82;
        transform: scale(0.86);
    }
}
@keyframes liveRing {
    0% {
        opacity: 0.55;
        transform: scale(0.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}
@keyframes badgeSweep {
    0%, 45% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}
.hero-title {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.22em;
    font-family: 'Science Gothic', 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 5vw, 60px);
    margin-bottom: 48px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--gold);
    text-shadow:
        1.2px 0 0 rgba(0,0,0,0.9),
        -1.2px 0 0 rgba(0,0,0,0.9),
        0 1.2px 0 rgba(0,0,0,0.9),
        0 -1.2px 0 rgba(0,0,0,0.9),
        0 0 18px rgba(224,32,211,0.58),
        0 8px 24px rgba(0,0,0,0.78);
    -webkit-text-stroke: 1.15px rgba(0,0,0,0.88);
    paint-order: stroke fill;
}
.hero-title .gold {
    color: var(--gold);
    text-shadow:
        1.2px 0 0 rgba(0,0,0,0.9),
        -1.2px 0 0 rgba(0,0,0,0.9),
        0 1.2px 0 rgba(0,0,0,0.9),
        0 -1.2px 0 rgba(0,0,0,0.9),
        0 0 18px rgba(224,32,211,0.58),
        0 8px 24px rgba(0,0,0,0.78);
}
.hero-signature .sig-word {
    display: inline-flex;
}
.hero-signature .sig-word.white {
    color: #ffffff;
    text-shadow:
        1.2px 0 0 rgba(0,0,0,0.9),
        -1.2px 0 0 rgba(0,0,0,0.9),
        0 1.2px 0 rgba(0,0,0,0.9),
        0 -1.2px 0 rgba(0,0,0,0.9),
        0 0 18px rgba(255,255,255,0.35),
        0 8px 24px rgba(0,0,0,0.78);
}
.hero-signature .sig-word > span {
    position: relative;
    display: inline-block;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    overflow: hidden;
    transform: translateY(6px);
    filter: blur(2px);
}
.hero-signature.signature-ready .sig-word > span {
    animation: signatureLetter 0.72s cubic-bezier(.2,.9,.25,1) forwards;
    animation-delay: calc(0.36s + (var(--i) * 0.085s));
}
.hero-signature .sig-word > span::before {
    content: "";
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: -45%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.88), rgba(255,68,238,0.56), transparent);
    filter: blur(1px);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.hero-signature.signature-ready .sig-word > span::before {
    animation: signatureInk 0.72s cubic-bezier(.2,.9,.25,1) forwards;
    animation-delay: calc(0.36s + (var(--i) * 0.085s));
}
.hero-signature::after {
    content: "";
    position: absolute;
    left: 0.04em;
    right: 0.12em;
    bottom: -0.1em;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.58), rgba(255,68,238,0.72), transparent);
    box-shadow:
        0 0 10px rgba(255,68,238,0.34),
        0 0 20px rgba(143,62,217,0.18);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-signature.signature-ready::after {
    animation: signatureStroke 0.92s ease forwards;
    animation-delay: 1.08s;
}
@keyframes signatureLetter {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(6px);
        filter: blur(2px);
    }
    45% {
        opacity: 1;
        clip-path: inset(0 42% 0 0);
        transform: translateY(1px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes signatureStroke {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}
@keyframes signatureInk {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(-18deg);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(340%) skewX(-18deg);
    }
}

.hero-desc {
    position: relative;
    font-family: 'Geometria', sans-serif;
    font-size: 16px;
    color: var(--white70);
    margin-bottom: 46px;
    max-width: 540px;
    line-height: 1.8;
    font-weight: normal;
    text-wrap: pretty;
}
.hero-desc-signature {
    opacity: 0;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transform: translateY(8px);
    filter: blur(2px);
    text-shadow:
        0 0 10px rgba(255,255,255,0.16),
        0 0 18px rgba(224,32,211,0.24);
    animation: descSignature 0.95s cubic-bezier(.2,.9,.25,1) forwards;
    animation-delay: 1.28s;
}
.hero-desc-signature::before {
    content: "";
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: -28%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), rgba(255,68,238,0.42), transparent);
    filter: blur(1px);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    animation: descSignatureInk 0.9s cubic-bezier(.2,.9,.25,1) forwards;
    animation-delay: 1.32s;
}
@keyframes descSignature {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(8px);
        filter: blur(2px);
    }
    48% {
        opacity: 1;
        clip-path: inset(0 36% 0 0);
        transform: translateY(2px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        filter: blur(0);
    }
}
@keyframes descSignatureInk {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(-18deg);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(620%) skewX(-18deg);
    }
}

.contract-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        rgba(224,32,211,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 0 22px rgba(224,32,211,0.22),
        0 8px 26px rgba(0,0,0,0.24);
    font-size: 13px;
    color: var(--white70);
    margin-bottom: 42px;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.contract-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-110%);
    transition: transform 0.65s ease;
}
.contract-box:hover {
    border-color: rgba(255,255,255,0.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 30px rgba(224,32,211,0.36),
        0 10px 30px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}
.contract-box:hover::before {
    transform: translateX(110%);
}
.contract-box .label {
    position: relative;
    z-index: 1;
    color: #090a1a;
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 7px;
    padding: 4px 8px;
    box-shadow: 0 0 12px rgba(224,32,211,0.34);
    letter-spacing: 0.08em;
    font-size: 11px;
    text-transform: uppercase;
}
.contract-box .label.contract-label-btn {
    color: var(--white);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 30% 20%, rgba(163,255,18,0.24), transparent 42%),
        rgba(224,32,211,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 9px;
    padding: 7px 12px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 14px rgba(224,32,211,0.26);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(255,68,238,0.65);
}
.contract-box .addr {
    position: relative;
    z-index: 1;
    color: var(--white);
    word-break: break-all;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-shadow:
        0 0 8px rgba(255,255,255,0.22),
        0 0 16px rgba(224,32,211,0.42);
}
.contract-box a.addr:hover {
    color: var(--gold-light);
    text-shadow:
        0 0 10px rgba(255,255,255,0.32),
        0 0 20px rgba(255,68,238,0.68);
}
.hero-content .contract-box {
    gap: 9px;
    padding: 8px 12px;
    margin-bottom: 38px;
    border-radius: 9px;
}
.hero-content .contract-box .label.contract-label-btn {
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 10px;
}
.hero-content .contract-box .addr {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.hero-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.hero-btns-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
}
.hero-btns-row--solo .btn {
    min-width: 200px;
}
.hero-btns .btn {
    width: 168px;
    min-height: 48px;
    padding: 10px 14px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}
.hero-btns .btn-img {
    justify-content: center;
}
.hero-btns .btn img {
    width: 22px;
    height: 22px;
}

.hero-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    transform: translateY(56px);
}
.hero-image-wrap::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224,32,211,0.25) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}
.hero-img {
    width: 100%;
    max-width: min(520px, 92%);
    animation: float 6s ease-in-out infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 50px rgba(224,32,211,0.5));
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-22px); }
}

/* ============================================================
   SECTION STRUCTURE
   ============================================================ */
.section {
    position: relative;
    padding: 100px 0;
    z-index: 1;
}
.section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}
.section-label img {
    height: 24px;
    width: auto;
    display: inline-block;
}
.section-label span {
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
}
.section-title {
    text-align: center;
    margin-bottom: 14px;
    font-size: clamp(28px, 4vw, 48px);
    color: #642f93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow:
        1.5px 0 0 rgba(255,255,255,0.95),
        -1.5px 0 0 rgba(255,255,255,0.95),
        0 1.5px 0 rgba(255,255,255,0.95),
        0 -1.5px 0 rgba(255,255,255,0.95),
        1.2px 1.2px 0 rgba(255,255,255,0.88),
        -1.2px -1.2px 0 rgba(255,255,255,0.88),
        1.2px -1.2px 0 rgba(255,255,255,0.88),
        -1.2px 1.2px 0 rgba(255,255,255,0.88),
        0 0 6px rgba(255,255,255,0.55),
        0 0 18px rgba(255,68,238,0.9),
        0 0 34px rgba(143,62,217,0.72),
        0 4px 14px rgba(0,0,0,0.9);
    -webkit-text-stroke: 2.2px rgba(255,255,255,0.95);
    paint-order: stroke fill;
}
.section-divider {
    width: 74px;
    height: 1px;
    margin: 0 auto 48px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.78), rgba(143,62,217,0.78), transparent);
    box-shadow:
        0 0 8px rgba(255,255,255,0.24),
        0 0 16px rgba(143,62,217,0.36);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-text p {
    font-family: 'Geometria', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    color: var(--white70);
    margin-bottom: 18px;
    font-weight: normal;
}
.about-text p strong { color: var(--gold); }

.about-img-wrap {
    position: relative;
}
.about-img-wrap img {
    border-radius: var(--radius);
    width: 100%;
    filter: drop-shadow(0 0 40px rgba(224,32,211,0.4));
}

/* ============================================================
   ROADMAP
   ============================================================ */
.roadmap-section { background: linear-gradient(180deg, transparent 0%, rgba(13,13,30,0.6) 50%, transparent 100%); }

.roadmap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.roadmap-phases {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.roadmap-phases::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 32px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dark3);
    border: 2px solid var(--gold);
    box-shadow:
        0 0 14px rgba(224,32,211,0.75),
        0 0 28px rgba(143,62,217,0.45);
    z-index: 2;
    animation: roadmapLineDot 3.8s ease-in-out infinite;
}
@keyframes roadmapLineDot {
    0% {
        top: 32px;
        opacity: 0;
        transform: scale(0.82);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    88% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        top: calc(100% - 32px);
        opacity: 0;
        transform: scale(0.82);
    }
}

.phase {
    position: relative;
    padding: 28px 28px 28px 52px;
    border-left: 2px solid var(--border);
    margin-left: 16px;
    transition: border-color var(--transition);
}
.phase:hover { border-color: var(--gold); }
.phase::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 32px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dark3);
    border: 2px solid var(--border);
    transition: border-color var(--transition), background var(--transition);
}
.phase:hover::before {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: 0 0 16px rgba(224,32,211,0.5);
}
.phase.animated::before {
    animation: roadmapDotSlide 0.75s ease-out both;
}
@keyframes roadmapDotSlide {
    0% {
        opacity: 0;
        transform: translateY(-34px) scale(0.75);
        box-shadow: 0 0 0 rgba(224,32,211,0);
    }
    70% {
        opacity: 1;
        transform: translateY(4px) scale(1.08);
        box-shadow: 0 0 18px rgba(224,32,211,0.55);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 12px rgba(224,32,211,0.35);
    }
}

.phase-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow:
        0 0 1px rgba(0,0,0,0.95),
        1px 0 0 rgba(0,0,0,0.85),
        -1px 0 0 rgba(0,0,0,0.85),
        0 1px 0 rgba(0,0,0,0.85),
        0 -1px 0 rgba(0,0,0,0.85),
        0 4px 8px rgba(0,0,0,0.98),
        0 0 24px rgba(224,32,211,0.95),
        0 0 38px rgba(143,62,217,0.72);
    -webkit-text-stroke: 0.55px rgba(0,0,0,0.85);
    paint-order: stroke fill;
}
.phase.animated .phase-label {
    animation: phaseLabelReveal 0.9s ease both;
    animation-delay: 0.18s;
}
@keyframes phaseLabelReveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
        letter-spacing: 0.3em;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: 0.2em;
    }
}
.phase h3 {
    font-size: 20px;
    margin-bottom: 14px;
    color: var(--white);
}
.phase ul { display: flex; flex-direction: column; gap: 6px; }
.phase ul li {
    font-family: 'Geometria', sans-serif;
    font-size: 15px;
    color: var(--white70);
    padding-left: 22px;
    position: relative;
    font-weight: normal;
}
.phase ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--gold);
}

.phase ul li::before {
    content: '';
    display: block;
    left: 1px;
    top: 0.72em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0 18%, transparent 20%),
        linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--purple) 100%);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.42),
        0 0 8px rgba(255,255,255,0.26),
        0 0 12px rgba(224,32,211,0.82),
        0 0 22px rgba(143,62,217,0.38);
    transform: translateY(-50%) rotate(45deg);
}

.roadmap-img img {
    width: 100%;
    border-radius: var(--radius);
    filter: drop-shadow(0 0 40px rgba(224,32,211,0.4));
}

/* ============================================================
   TOKENOMICS
   ============================================================ */
.tokenomics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.token-stats { display: flex; flex-direction: column; gap: 20px; }

.token-stat {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.token-stat:hover {
    background: rgba(224,32,211,0.05);
    border-color: rgba(224,32,211,0.3);
    transform: translateX(4px);
}
.token-stat-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 30% 20%, rgba(163,255,18,0.32), transparent 38%),
        rgba(224,32,211,0.14);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 18px rgba(224,32,211,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.token-stat-icon::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(255,68,238,0.75), rgba(163,255,18,0.5));
    opacity: 0.22;
}
.token-stat-icon svg {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 7px rgba(255,68,238,0.75));
    transition: transform var(--transition);
}
.token-stat:nth-child(1) .token-stat-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 32% 18%, rgba(163,255,18,0.34), transparent 40%),
        rgba(143,62,217,0.18);
}
.token-stat:nth-child(2) .token-stat-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 30% 18%, rgba(255,255,255,0.2), transparent 35%),
        rgba(224,32,211,0.18);
}
.token-stat:nth-child(3) .token-stat-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 30% 18%, rgba(255,138,42,0.42), transparent 40%),
        rgba(224,32,211,0.16);
}
.token-stat:nth-child(4) .token-stat-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        radial-gradient(circle at 30% 18%, rgba(105,226,255,0.34), transparent 40%),
        rgba(143,62,217,0.18);
}
.token-stat:hover .token-stat-icon {
    border-color: rgba(163,255,18,0.36);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 24px rgba(224,32,211,0.38),
        0 0 12px rgba(163,255,18,0.18);
}
.token-stat:hover .token-stat-icon svg {
    transform: scale(1.06);
}
.token-stat-info .label {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.token-stat-info .value {
    font-size: 20px;
    color: var(--white);
    letter-spacing: 0.02em;
}

.tokenomics-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tokenomics-img-wrap::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224,32,211,0.12) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}
.tokenomics-img {
    width: 100%;
    max-width: 460px;
    animation: float 7s ease-in-out infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 40px rgba(224,32,211,0.4));
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-section {
    margin: 48px 0 64px;
    padding: 112px 0;
}
.partners-title {
    text-align: center;
    margin-bottom: 48px;
}
.partners-carousel {
    position: relative;
    overflow: hidden;
    padding: 12px 0;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.partners-carousel + .partners-carousel {
    margin-top: 28px;
}
.partners-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 52px;
    width: max-content;
    animation: partnersMarquee 46s linear infinite;
}
.partners-carousel:hover .partners-grid {
    animation-play-state: paused;
}
.partners-carousel-reverse .partners-grid {
    animation-duration: 52s;
    animation-direction: reverse;
}
@keyframes partnersMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 26px));
    }
}
.partner-item {
    opacity: 0.55;
    filter: grayscale(1) brightness(1.3);
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
}
.partner-item:hover {
    opacity: 1;
    filter: grayscale(0) brightness(1);
    transform: translateY(-3px);
}
.partner-item img {
    max-height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}
.partner-item img.partner-logo-meteora {
    max-height: 46px;
    max-width: 150px;
}
.partner-item img.partner-logo-raydium {
    filter: grayscale(1) brightness(3.85) contrast(0.68) opacity(1) drop-shadow(0 0 10px rgba(255,255,255,0.26));
}
.partner-item img.partner-logo-metamask {
    max-height: 30px;
    max-width: 104px;
    filter: grayscale(1) brightness(3.95) contrast(0.66) opacity(1) drop-shadow(0 0 10px rgba(255,255,255,0.26));
}
.partner-item img.partner-logo-mexc {
    max-height: 34px;
    max-width: 132px;
    filter: grayscale(1) brightness(3.85) contrast(0.68) opacity(1) drop-shadow(0 0 10px rgba(255,255,255,0.26));
}
.partner-item:hover img.partner-logo-raydium,
.partner-item:hover img.partner-logo-metamask,
.partner-item:hover img.partner-logo-mexc {
    filter: grayscale(0) brightness(1) contrast(1) opacity(1);
}

/* ============================================================
   SOCIAL / FOOTER
   ============================================================ */
.footer {
    padding: 80px 0 40px;
    text-align: center;
}
.social-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 34px;
}
.social-label img { height: 52px; }
.social-label span {
    font-size: 24px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(255,224,138,0.28),
        0 0 18px rgba(255,68,238,0.34);
}
.social-heading {
    position: relative;
    font-size: clamp(22px, 3vw, 36px);
    color: #642f93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow:
        1.5px 0 0 rgba(255,255,255,0.95),
        -1.5px 0 0 rgba(255,255,255,0.95),
        0 1.5px 0 rgba(255,255,255,0.95),
        0 -1.5px 0 rgba(255,255,255,0.95),
        1.2px 1.2px 0 rgba(255,255,255,0.88),
        -1.2px -1.2px 0 rgba(255,255,255,0.88),
        1.2px -1.2px 0 rgba(255,255,255,0.88),
        -1.2px 1.2px 0 rgba(255,255,255,0.88),
        0 0 6px rgba(255,255,255,0.55),
        0 0 18px rgba(255,68,238,0.9),
        0 0 34px rgba(143,62,217,0.72),
        0 4px 14px rgba(0,0,0,0.9);
    -webkit-text-stroke: 2.2px rgba(255,255,255,0.95);
    paint-order: stroke fill;
    margin-bottom: 34px;
}
.social-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 74px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.78), rgba(143,62,217,0.78), transparent);
    box-shadow:
        0 0 8px rgba(255,255,255,0.24),
        0 0 16px rgba(143,62,217,0.36);
    transform: translateX(-50%);
}
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--white);
    transition: all var(--transition);
}
.social-link img {
    height: 26px;
    width: 26px;
    object-fit: contain;
}
.social-link:hover {
    background: rgba(224,32,211,0.08);
    border-color: rgba(224,32,211,0.4);
    color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(224,32,211,0.12);
}

.footer-contract {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(860px, 100%);
    margin: 0 auto 26px;
    padding: 18px 22px;
    overflow: hidden;
    border: 1px solid rgba(191,126,255,0.72);
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,68,238,0.22), transparent 34%),
        radial-gradient(circle at 82% 100%, rgba(143,62,217,0.3), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
        rgba(18,10,38,0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 0 24px rgba(143,62,217,0.12),
        0 0 28px rgba(143,62,217,0.42),
        0 14px 34px rgba(0,0,0,0.34);
    font-size: 14px;
    color: var(--white70);
    line-height: 1.4;
    flex-wrap: wrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.footer-contract::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), rgba(255,68,238,0.18), transparent);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}
.footer-contract::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    pointer-events: none;
}
.footer-contract:hover::before {
    transform: translateX(120%);
}
.footer-contract span,
.footer-contract a {
    position: relative;
    z-index: 1;
}
.footer-contract span {
    color: var(--white);
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(255,255,255,0.34),
        0 0 18px rgba(255,68,238,0.58);
}
.footer-contract span::after {
    content: ":";
    color: var(--gold-light);
}
.footer-contract a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.24);
    border: 1px solid #ff44ee;
    color: var(--gold-light);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.035em;
    word-break: break-all;
    text-shadow:
        0 0 10px rgba(255,224,138,0.36),
        0 0 22px rgba(143,62,217,0.44);
}
.footer-contract a:hover {
    color: var(--white);
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
    text-shadow:
        0 0 10px rgba(255,255,255,0.42),
        0 0 22px rgba(255,68,238,0.62);
}

.footer-copy {
    font-family: 'Geometria', sans-serif;
    font-size: 13px;
    color: var(--white30);
    font-weight: normal;
}
.footer-copy a { color: var(--white30); }
.footer-copy a:hover { color: var(--gold); }

.footer-disclaimer {
    font-family: 'Geometria', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    font-weight: normal;
    max-width: 620px;
    margin: 10px auto 0;
    line-height: 1.6;
    text-align: center;
}

.scroll-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--white);
    font-size: 18px;
    margin-bottom: 32px;
    transition: all var(--transition);
    text-decoration: none;
}
.scroll-top:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    transform: translateY(-4px);
}


/* Mobile mascot — hidden on desktop, shown between button rows on mobile */
.hero-mascot-mobile {
    display: none;
}

/* Desktop mascot column — always visible on desktop */
.hero-image-desktop {
    display: flex;
}

/* Botones con imagen */
.btn img {
    height: 22px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(1.3);
}
.btn-img {
    padding: 10px 20px;
}
/* ============================================================
   BUY $ZAZ — Jupiter Swap Section
   ============================================================ */
.buy-section {
    position: relative;
    padding: 100px 0;
    z-index: 1;
}
.buy-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(143,62,217,0.06) 50%, transparent 100%);
    pointer-events: none;
}
.buy-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.buy-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.buy-text p {
    font-family: 'Geometria', sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: var(--white70);
    font-weight: normal;
    margin: 0;
}
.buy-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.buy-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition);
}
.buy-step:hover {
    background: rgba(224,32,211,0.05);
    border-color: rgba(224,32,211,0.3);
    transform: translateX(4px);
}
.buy-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--gold);
    color: #000;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}
.buy-step-text {
    font-family: 'Geometria', sans-serif;
    font-size: 14px;
    color: var(--white70);
    font-weight: normal;
    line-height: 1.55;
}
.buy-step-text strong {
    color: var(--white);
    display: block;
    font-weight: 900;
    margin-bottom: 2px;
}

/* Jupiter iframe container */
.jup-widget-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.jup-iframe-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-height: 520px;
    border-radius: 20px;
    border: 1px solid rgba(224,32,211,0.35);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 0 40px rgba(224,32,211,0.25),
        0 20px 60px rgba(0,0,0,0.5);
    background: #0d0d1a;
    overflow: hidden;
    /* Loading shimmer while Jupiter initializes */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide the loader once Jupiter injects content */
.jup-iframe-box:has(> div) .jup-loading,
.jup-iframe-box:has(iframe) .jup-loading {
    display: none;
}
.jup-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0.5;
    pointer-events: none;
}
.jup-loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(224,32,211,0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: jup-spin 0.8s linear infinite;
}
@keyframes jup-spin { to { transform: rotate(360deg); } }
.jup-loading-text {
    font-family: 'Geometria', sans-serif;
    font-size: 12px;
    color: var(--white70);
    letter-spacing: 0.08em;
}
.jup-iframe-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--purple), transparent);
    z-index: 10;
    pointer-events: none;
}
/* Jupiter injects a div directly — make it fill the container */
.jup-iframe-box > div {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
}
.jup-iframe-box iframe {
    display: block;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px;
    border: none;
    border-radius: 0;
}
.jup-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-family: 'Geometria', sans-serif;
    font-size: 11px;
    color: var(--white70);
    font-weight: normal;
    letter-spacing: 0.08em;
}
.jup-badge img {
    height: 16px;
    width: auto;
}

@media (max-width: 991px) {
    .buy-inner {
        grid-template-columns: 1fr;
    }
    .jup-iframe-box {
        max-width: 100%;
    }
    .jup-widget-wrap {
        order: -1;
    }
}
@media (max-width: 576px) {
    .jup-iframe-box iframe {
        height: 480px;
    }
    .buy-section { padding: 70px 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hero-grid,
    .about-grid,
    .roadmap-grid,
    .tokenomics-grid { grid-template-columns: 1fr; gap: 40px; }

    .hero-grid > *,
    .about-grid > *,
    .roadmap-grid > *,
    .tokenomics-grid > *,
    .token-stat-info,
    .footer-contract > * {
        min-width: 0;
    }
    .hero {
        min-height: auto;
        align-items: flex-start;
        overflow: hidden;
    }
    .hero-content,
    .hero-badge,
    .hero-title,
    .hero-desc,
    .hero-btns,
    .hero-btns-row,
    .contract-box {
        max-width: 100%;
    }
    .hero-title {
        flex-wrap: wrap;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hero-image-wrap { min-height: auto; transform: none; }
    .hero-img { max-width: 380px; margin: 0 auto; }
    .tokenomics-img { max-width: 360px; margin: 0 auto; }

    .about-img-wrap { order: -1; }

    .navbar-links { display: none; }
    .hamburger { display: flex; }

    /* Mascota: ocultar desktop, mostrar móvil desde 991px */
    .hero-image-desktop { display: none; }
    .hero-mascot-mobile { display: block; width: 100%; text-align: center; margin: 16px 0; }
    .hero-mascot-mobile img { width: min(300px, 75vw); margin: 0 auto; filter: drop-shadow(0 0 30px rgba(224,32,211,0.5)); animation: float 6s ease-in-out infinite; }

    /* Fix navbar inner so it doesn't overflow on mobile */
    .navbar-inner {
        padding: 0 16px;
        position: relative;
    }
    .navbar-logo img { height: 34px; }
}

@media (max-width: 576px) {
    .container { padding: 0 16px; }
    .navbar-inner {
        height: 60px;
        padding: 0 16px; /* even padding now that hamburger is inside */
    }
    .navbar-logo img { height: 30px; }
    .section { padding: 70px 0; }
    .hero { padding: 100px 0 56px; }
    .hero-content { align-items: stretch; }
    .hero-badge {
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        padding: 6px 14px;
        margin-bottom: 30px;
    }
    .hero-title {
        display: flex;
        gap: 0.18em;
        font-size: clamp(31px, 12.5vw, 46px);
        line-height: 1.06;
        margin-bottom: 30px;
    }
    .hero-signature .sig-word {
        min-width: 0;
        max-width: 100%;
    }
    .hero-signature .sig-word > span {
        min-width: 0;
    }
    .hero-signature::after { right: 0; }
    .hero-desc {
        font-size: clamp(15px, 4.25vw, 17px);
        line-height: 1.72;
        margin-bottom: 34px;
    }
    .hero-mascot-mobile {
        display: block;
        width: 100%;
        text-align: center;
        margin: 16px 0;
    }
    .hero-mascot-mobile img {
        width: min(280px, 80vw);
        margin: 0 auto;
        filter: drop-shadow(0 0 30px rgba(224,32,211,0.5));
        animation: float 6s ease-in-out infinite;
    }
    .hero-image-desktop {
        display: none;
    }
    /* Fix CA box alignment on mobile — hero and about */
    .contract-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .contract-box .label,
    .contract-box .label.contract-label-btn {
        flex-shrink: 0;
        align-self: center;
    }
    .contract-box .addr {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
    .hero-content .contract-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 32px;
    }
    .hero-content .contract-box .label.contract-label-btn {
        flex-shrink: 0;
        align-self: center;
    }
    .hero-content .contract-box .addr {
        display: block;
        min-width: 0;
        max-width: 100%;
        font-size: clamp(10px, 3vw, 11px);
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
    .hero-btns { flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; }
    .hero-btns-row { flex-wrap: wrap; gap: 10px; }
    .hero-btns .btn {
        width: auto;
        flex: 1 1 calc(50% - 5px);
        min-width: 120px;
        min-height: 54px;
        padding: 12px 10px;
        white-space: normal;
        font-size: 11px;
    }
    /* Buy button always full width */
    .hero-btns-row:first-child .btn-gold {
        flex: 1 1 100%;
    }
    .token-stat {
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px;
    }
    .token-stat-info .value {
        font-size: 18px;
        overflow-wrap: anywhere;
    }
    .phase {
        margin-left: 10px;
        padding: 24px 16px 24px 36px;
    }
    .partners-section {
        margin: 28px 0 44px;
        padding: 70px 0;
    }
    .social-label {
        gap: 14px;
        flex-wrap: wrap;
    }
    .social-label span,
    .social-heading {
        overflow-wrap: anywhere;
    }
    .social-links { flex-direction: column; align-items: stretch; max-width: 300px; margin-left: auto; margin-right: auto; }
    .social-link { justify-content: center; }
    .footer-contract {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .footer-contract span,
    .footer-contract a {
        justify-content: center;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .hero-badge { font-size: 10px; }
}

/* ============================================================
   ICOMOON (scroll-up arrow icon)
   ============================================================ */
.icon-arrow_up::before { content: '↑'; font-style: normal; }

/* ============================================================
   WOW / Animate helpers
   ============================================================ */
.wow { visibility: hidden; }