/* =========================================
   ROOT
========================================= */

:root {
    --bg: #030303;
    --bg-soft: #080504;
    --card: #0c0805;
    --card-2: #120a05;

    --orange: #ff5a00;
    --orange-light: #ffb300;
    --yellow: #ffc629;
    --gold: #d99616;

    --red: #ff2100;

    --text: #fff;
    --muted: #a7a7a7;

    --border: rgba(255, 101, 0, 0.35);

    --glow:
        0 0 5px rgba(255, 72, 0, .8),
        0 0 15px rgba(255, 72, 0, .35);

    --container: 1320px;
}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 50% 0%,
            rgba(90, 18, 0, .18),
            transparent 30%),
        #020202;

    color: var(--text);

    font-family: "Rajdhani", sans-serif;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

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

.container {
    width: min(calc(100% - 40px),
            var(--container));

    margin-inline: auto;
}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--orange),
            var(--yellow));

    border-radius: 10px;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 72px;

    background: rgba(0, 0, 0, .95);

    border-bottom: 1px solid rgba(255, 83, 0, .4);

    box-shadow:
        0 1px 20px rgba(255, 45, 0, .12);

    backdrop-filter: blur(15px);
}

.nav-inner {
    height: 100%;

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

    gap: 25px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 170px;
}

.logo-symbol {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-family: Orbitron, sans-serif;
    font-size: 25px;
    font-weight: 900;

    color: #fff;

    border: 2px solid var(--orange);

    background:
        radial-gradient(circle,
            #ff7b00,
            #7c1600 65%,
            #110000);

    box-shadow:
        0 0 10px #ff4d00,
        inset 0 0 10px #ffb000;
}

.logo-text {
    display: flex;
    flex-direction: column;

    font-family: Orbitron, sans-serif;

    line-height: 1;
}

.logo-text strong {
    color: #ffb52b;

    font-size: 20px;

    text-shadow:
        0 0 8px rgba(255, 125, 0, .6);
}

.logo-text small {
    color: #b9811d;

    text-align: center;

    font-size: 9px;

    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 27px;

    flex: 1;
}

.nav-menu a {
    position: relative;

    font-size: 14px;
    font-weight: 500;

    color: #ddd;

    transition: .3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--orange-light);

    text-shadow: 0 0 8px var(--orange);
}

.nav-menu a.active::after {
    content: "";

    position: absolute;

    width: 28px;
    height: 2px;

    bottom: -12px;
    left: 50%;

    transform: translateX(-50%);

    background: var(--orange);

    box-shadow: 0 0 8px var(--orange);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 28px;

    border-radius: 6px;

    color: white;

    font-family: Orbitron, sans-serif;
    font-size: 13px;
    font-weight: 700;

    background:
        linear-gradient(135deg,
            #ff2700,
            #ff7600 55%,
            #ff9c00);

    border: 1px solid #ff7600;

    box-shadow:
        0 0 8px rgba(255, 66, 0, .8),
        inset 0 0 8px rgba(255, 255, 255, .15);

    transition: .3s ease;
}

.btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 15px rgba(255, 76, 0, 1),
        0 0 35px rgba(255, 76, 0, .35);
}

.btn-small {
    min-height: 40px;
    padding: 0 20px;
}

.btn-outline {
    background:
        linear-gradient(rgba(10, 7, 3, .95),
            rgba(10, 7, 3, .95));

    border-color: rgba(255, 120, 0, .55);
}

.mobile-menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    color: #ff9b00;

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 5px;

    font-size: 22px;

    cursor: pointer;
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    min-height: 510px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(125, 23, 0, .22),
            transparent 28%),
        radial-gradient(circle at 50% 100%,
            rgba(255, 44, 0, .08),
            transparent 35%);
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(rgba(255, 85, 0, .5) 1px,
            transparent 1px);

    background-size: 65px 65px;

    opacity: .12;
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr) minmax(400px, 1.1fr);

    align-items: center;

    min-height: 510px;
}

.hero-content {
    padding-block: 50px;
}

.hero h1 {
    font-family: Orbitron, sans-serif;

    font-size: clamp(38px,
            4.5vw,
            64px);

    line-height: 1.05;

    letter-spacing: -1px;

    font-weight: 900;

    color: #ffca54;

    text-shadow:
        2px 2px 0 #5b2100,
        0 0 8px rgba(255, 113, 0, .4);
}

.hero h1 span {
    color: #f7a900;
}

.hero-subtitle {
    margin-top: 18px;

    color: #eee;

    font-size: clamp(18px,
            2vw,
            23px);

    line-height: 1.25;
}

.hero-buttons {
    display: flex;
    gap: 13px;

    margin-top: 24px;
}

.contract-box {
    width: min(100%, 330px);

    margin-top: 24px;
}

.contract-box label {
    display: block;

    margin-bottom: 4px;

    color: #8e8e8e;

    font-size: 11px;
}

.contract-input {
    height: 38px;

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

    padding: 0 10px;

    border: 1px solid rgba(255, 120, 0, .35);

    border-radius: 5px;

    background: rgba(5, 5, 5, .9);

    color: #ddd;

    font-size: 13px;

    box-shadow:
        inset 0 0 12px rgba(255, 70, 0, .06);
}

.contract-input button {
    color: #ffa800;

    background: none;

    border: none;

    cursor: pointer;

    font-size: 17px;
}

.follow {
    margin-top: 13px;
}

.follow>span {
    display: block;

    margin-bottom: 7px;

    color: #aaa;

    font-size: 11px;
}

.socials {
    display: flex;
    gap: 15px;
}

.socials a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 110, 0, .55);

    border-radius: 50%;

    color: #ffad00;

    background:
        radial-gradient(circle,
            rgba(255, 76, 0, .17),
            transparent);

    box-shadow:
        0 0 9px rgba(255, 65, 0, .2);

    transition: .3s ease;
}

.socials a:hover {
    color: white;

    background: #e94400;

    box-shadow:
        0 0 15px #ff4900;
}


/* =========================================
   HERO VISUAL
========================================= */

.hero-visual {
    position: relative;

    min-height: 490px;

    display: grid;
    place-items: center;
}

.coin-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 83, 0, .27),
            transparent 65%);

    filter: blur(20px);
}

.burning-coin {
    position: relative;
    z-index: 3;

    width: min(360px, 75vw);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #fff2a1,
            #e79b0a 25%,
            #6e2300 48%,
            #f8aa00 75%,
            #fff3a0);

    padding: 9px;

    box-shadow:
        0 0 10px #ff9d00,
        0 0 30px #ff5700,
        0 0 65px rgba(255, 67, 0, .65);
}

.coin-inner {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(circle at 45% 40%,
            #150b03,
            #030303 65%);

    border: 3px solid #ffbc25;

    box-shadow:
        inset 0 0 25px #ff6500,
        inset 0 0 60px rgba(255, 55, 0, .35);
}

.coin-b {
    position: relative;
    z-index: 2;

    font-family: Orbitron, sans-serif;

    font-size: 190px;
    font-weight: 900;

    color: #ffae00;

    line-height: 1;

    text-shadow:
        3px 3px 0 #7b3200,
        0 0 15px #ff7800;
}

.flame {
    position: absolute;

    z-index: 3;

    left: 28%;
    top: 13%;

    font-size: 125px;

    transform: rotate(-15deg);

    filter:
        drop-shadow(0 0 8px #ff2500) drop-shadow(0 0 25px #ff7800);
}

.coin-platform {
    position: absolute;

    bottom: 50px;

    width: 390px;
    height: 38px;

    border-radius: 50%;

    border: 2px solid #ff8d00;

    background:
        radial-gradient(ellipse,
            rgba(255, 118, 0, .4),
            rgba(50, 10, 0, .5) 50%,
            transparent 70%);

    box-shadow:
        0 0 10px #ff5a00,
        0 0 25px rgba(255, 72, 0, .6);
}

.platform-glow {
    position: absolute;

    bottom: 37px;

    width: 500px;
    height: 70px;

    background:
        radial-gradient(ellipse,
            rgba(255, 63, 0, .35),
            transparent 65%);

    filter: blur(8px);
}

.particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ff8c00;

    box-shadow:
        0 0 7px #ff4900;
}

.particle-1 {
    left: 5%;
    top: 20%;
}

.particle-2 {
    right: 10%;
    top: 16%;
}

.particle-3 {
    right: 4%;
    top: 48%;
}

.particle-4 {
    left: 16%;
    top: 65%;
}

.particle-5 {
    right: 20%;
    bottom: 20%;
}

.particle-6 {
    left: 30%;
    top: 10%;
}


/* =========================================
   SECTION
========================================= */

.section {
    padding: 10px 0 12px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    margin: 0 auto 10px;

    color: #ffc327;

    font-family: Orbitron, sans-serif;

    text-align: center;
}

.section-title span {
    width: 120px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #ff8c00);

    box-shadow: 0 0 7px #ff6200;
}

.section-title span:last-child {
    background:
        linear-gradient(90deg,
            #ff8c00,
            transparent);
}

.section-title h2 {
    font-size: 18px;

    font-weight: 600;

    white-space: nowrap;
}

.small-title {
    margin-bottom: 15px;
}

.small-title span {
    width: 70px;
}

.small-title h2 {
    font-size: 15px;
}


/* =========================================
   CARDS
========================================= */

.info-card,
.large-card,
.stat-card,
.highlight-card,
.why-card,
.details-box,
.cta-box {
    border: 1px solid var(--border);

    background:
        linear-gradient(145deg,
            rgba(26, 11, 4, .95),
            rgba(5, 4, 3, .98));

    box-shadow:
        inset 0 0 18px rgba(255, 71, 0, .035),
        0 0 8px rgba(255, 62, 0, .08);
}

.info-card {
    min-height: 116px;

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

    flex-direction: column;

    gap: 3px;

    border-radius: 8px;

    text-align: center;
}

.info-card small {
    color: #aaa;

    font-size: 12px;
}

.info-card strong {
    color: #ffe4a2;

    font-size: 15px;
}

.card-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin-bottom: 3px;

    color: #ffad00;

    font-size: 29px;

    filter:
        drop-shadow(0 0 7px #ff4e00);
}

.number-icon {
    width: 37px;
    height: 37px;

    border-radius: 50%;

    border: 2px solid #ff7c00;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================
   OVERVIEW GRID
========================================= */

.overview-grid {
    display: grid;

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

    gap: 8px;
}


/* =========================================
   DISTRIBUTION
========================================= */

.distribution-grid {
    display: grid;

    grid-template-columns:
        1.25fr .9fr;

    gap: 10px;
}

.large-card {
    min-height: 220px;

    padding: 12px 10px;

    border-radius: 7px;
}

.distribution-content {
    display: grid;

    grid-template-columns: 230px 1fr;

    align-items: center;

    gap: 20px;
}

.donut-wrap {
    display: flex;
    justify-content: center;
}

.donut {
    width: 170px;
    height: 170px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(#ff3c00 0deg,
            #ff7800 8deg,
            #ff2800 12deg,
            #ff7b00 360deg);

    position: relative;

    box-shadow:
        0 0 18px rgba(255, 62, 0, .5);
}

.donut::before {
    content: "";

    position: absolute;

    width: 128px;
    height: 128px;

    border-radius: 50%;

    background: #090604;

    box-shadow:
        inset 0 0 15px rgba(255, 65, 0, .2);
}

.donut-center {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.donut-center strong {
    font-size: 16px;
}

.donut-center span {
    font-size: 13px;
}

.donut-center small {
    margin-top: 2px;

    color: #aaa;

    font-size: 9px;
}

.distribution-list {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.distribution-heading {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #ffcb39;

    font-size: 14px;
}

.red-fire {
    color: #ff3d00;

    text-shadow:
        0 0 7px #ff3300;
}

.distribution-item small {
    display: block;

    margin: 4px 0 2px 22px;

    color: #aaa;

    font-size: 11px;
}

.distribution-item p {
    margin-left: 22px;

    color: #ddd;

    font-size: 11px;

    line-height: 1.3;
}


/* =========================================
   LIQUIDITY
========================================= */

.liquidity-card {
    display: flex;
    flex-direction: column;
}

.liquidity-box {
    flex: 1;

    margin: 0 25px 12px;

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

    flex-direction: column;

    border: 1px solid rgba(255, 90, 0, .6);

    border-radius: 30px 30px 22px 22px;

    background:
        radial-gradient(circle at center,
            rgba(255, 77, 0, .18),
            transparent 65%);

    box-shadow:
        0 0 20px rgba(255, 55, 0, .2),
        inset 0 0 15px rgba(255, 75, 0, .1);

    position: relative;

    overflow: hidden;
}

.liquidity-box::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 25px;

    border-top: 2px solid rgba(255, 109, 0, .5);

    pointer-events: none;
}

.pancake-icon {
    font-size: 39px;

    filter:
        drop-shadow(0 0 8px #ff5c00);
}

.liquidity-title {
    margin-top: -4px;

    color: #ffcf52;

    font-size: 14px;
    font-weight: 700;
}

.liquidity-title span {
    color: #ff7b00;
}

.liquidity-amount {
    margin-top: 8px;

    color: #ffe082;

    font-family: Orbitron, sans-serif;

    font-size: 25px;
    font-weight: 700;

    text-align: center;

    line-height: 1.25;

    text-shadow:
        0 0 8px rgba(255, 136, 0, .35);
}

.liquidity-amount span {
    color: #ffdf72;
}

.locked {
    margin-top: 8px;

    color: #999;

    font-size: 10px;
}


/* =========================================
   STATS
========================================= */

.stats-grid {
    display: grid;

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

    gap: 8px;
}

.stat-card {
    min-height: 67px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 8px 20px;

    border-radius: 6px;
}

.stat-icon {
    color: #ff8a00;

    font-size: 28px;

    filter:
        drop-shadow(0 0 7px #ff4500);
}

.stat-card small {
    display: block;

    color: #aaa;

    font-size: 11px;
}

.stat-card strong {
    display: block;

    color: #ffdb67;

    font-family: Orbitron, sans-serif;

    font-size: 15px;
}


/* =========================================
   HIGHLIGHT CARDS
========================================= */

.highlight-grid {
    display: grid;

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

    gap: 8px;

    margin-top: 10px;
}

.highlight-card {
    min-height: 98px;

    display: flex;
    align-items: center;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    border-radius: 7px;

    position: relative;
}

.highlight-icon {
    position: absolute;

    left: 13px;
    top: 25px;

    font-size: 27px;

    filter:
        drop-shadow(0 0 8px #ff3b00);
}

.highlight-card small {
    color: #c87119;

    font-family: Orbitron, sans-serif;

    font-size: 9px;
}

.highlight-card strong {
    margin-top: 4px;

    color: #f4f4f4;

    font-family: Orbitron, sans-serif;

    font-size: 21px;

    text-shadow:
        0 0 8px rgba(255, 115, 0, .25);
}

.highlight-card span {
    color: #ddd;

    font-size: 10px;
}


/* =========================================
   WHY BURNOVA
========================================= */

.why-grid {
    display: grid;

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

    gap: 8px;
}

.why-card {
    min-height: 150px;

    padding: 16px 10px;

    display: flex;
    align-items: center;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    border-radius: 7px;
}

.why-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #ffad00;

    font-size: 34px;

    filter:
        drop-shadow(0 0 8px #ff5100);
}

.why-card h3 {
    margin-top: 6px;

    color: #eee;

    font-size: 13px;

    line-height: 1.15;
}

.why-card p {
    margin-top: 7px;

    color: #aaa;

    font-size: 10px;

    line-height: 1.35;
}


/* =========================================
   DETAILS
========================================= */

.details-box {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 35px;

    padding: 14px 25px;

    border-radius: 7px;
}

.detail-row {
    min-height: 29px;

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

    gap: 20px;

    border-bottom: 1px solid rgba(255, 93, 0, .16);

    color: #aaa;

    font-size: 11px;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    color: #eee;

    text-align: right;

    font-size: 11px;

    font-weight: 500;
}


/* =========================================
   CTA
========================================= */

.cta-section {
    padding: 10px 0 8px;
}

.cta-box {
    min-height: 90px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 10px 30px;

    border-radius: 7px;

    background:
        linear-gradient(90deg,
            rgba(30, 10, 0, .95),
            rgba(10, 5, 2, .95));

    position: relative;

    overflow: hidden;
}

.cta-box::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -80px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 68, 0, .25),
            transparent 65%);
}

.rocket {
    font-size: 53px;

    transform: rotate(-15deg);

    filter:
        drop-shadow(0 0 8px #ff5b00);
}

.cta-content {
    flex: 1;
}

.cta-content h2 {
    color: #ffad00;

    font-family: Orbitron, sans-serif;

    font-size: 25px;

    text-shadow:
        0 0 8px rgba(255, 103, 0, .35);
}

.cta-content p {
    margin-top: 3px;

    color: #ddd;

    font-size: 12px;
}

.cta-button {
    min-width: 210px;

    position: relative;
    z-index: 2;
}


/* =========================================
   FOOTER
========================================= */

.footer {
    padding: 0 0 15px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 8px;

    border-top: 1px solid rgba(255, 93, 0, .1);

    color: #888;

    font-size: 11px;
}

.footer strong {
    color: #aaa;
}

.imgheight{
    height: 390px;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes coinFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes firePulse {
    0%,
    100% {
        transform: scale(1) rotate(-15deg);
    }
    50% {
        transform: scale(1.06) rotate(-12deg);
    }
}

.burning-coin {
    animation: coinFloat 4s ease-in-out infinite;
}

.flame {
    animation: firePulse 1.5s ease-in-out infinite;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {
    .nav-menu {
        gap: 16px;
    }

    .nav-menu a {
        font-size: 12px;
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .highlight-card strong {
        font-size: 17px;
    }

    .highlight-icon {
        position: static;
        margin-bottom: -2px;
    }
}


/* =========================================
   MOBILE NAV (Optimized & Button Cut Fix)
========================================= */

@media (max-width: 850px) {
    .navbar {
        height: 64px;
    }

    .nav-inner {
        padding: 0 10px !important;
        gap: 10px !important;
    }

    .logo {
        min-width: auto !important;
    }

    .imgheight {
        height: 300px;
    }

    .nav-menu {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        padding: 25px;
        gap: 22px;
        background: rgba(4, 3, 2, .98);
        border-bottom: 1px solid rgba(255, 82, 0, .4);
        box-shadow: 0 15px 30px rgba(0, 0, 0, .7);
    }

    .nav-menu.show {
        display: flex;
    }

    .nav-menu a {
        font-size: 15px;
    }

    .nav-menu a.active::after {
        display: none;
    }

    /* Desktop button hide in navbar container for mobile view */
    .navbar > .container > .btn,
    .nav-inner > .btn {
        display: none !important;
    }

    /* Mobile right side action buttons wrapper styling */
    .navbar .nav-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Navbar right side compact button */
    .navbar .btn-small, 
    .navbar .btn {
        padding: 6px 12px !important;
        min-height: 34px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        padding: 50px 0 0;
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .contract-box {
        margin-inline: auto;
    }

    .socials {
        justify-content: center;
    }

    .hero-visual {
        min-height: 410px;
        margin-top: -15px;
    }

    .burning-coin {
        width: min(310px, 72vw);
    }

    .coin-platform {
        width: 320px;
    }

    .distribution-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-box {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 16px;
    }

    .cta-box {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .cta-content {
        flex: initial;
        width: 100%;
    }

    .cta-button {
        width: 100%;
    }

    .rocket {
        display: none;
    }
}


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

@media (max-width: 600px) {
    .container {
        width: min(calc(100% - 24px), var(--container));
    }

    .logo-symbol {
        width: 35px;
        height: 35px;
        font-size: 19px;
    }

    .logo-text strong {
        font-size: 15px;
    }

    .logo-text small {
        display: none; /* Hide (BNV) text on very small screens to save header space */
    }

    .hero h1 {
        font-size: 35px;
        letter-spacing: -.5px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .desktop-only {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: min(100%, 250px);
    }

    .hero-visual {
        min-height: 350px;
    }

    .burning-coin {
        width: 245px;
    }

    .coin-b {
        font-size: 125px;
    }

    .flame {
        font-size: 80px;
    }

    .coin-platform {
        width: 270px;
        bottom: 32px;
    }

    .platform-glow {
        bottom: 20px;
        width: 320px;
    }

    .section {
        padding: 7px 0;
    }

    .section-title {
        gap: 8px;
    }

    .section-title span {
        width: 35px;
    }

    .section-title h2 {
        font-size: 14px;
    }

    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .info-card {
        min-height: 110px;
    }

    .distribution-content {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .donut {
        width: 145px;
        height: 145px;
    }

    .donut::before {
        width: 108px;
        height: 108px;
    }

    .distribution-list {
        padding: 0 8px 8px;
    }

    .liquidity-box {
        margin: 0 8px 10px;
        min-height: 220px;
    }

    .liquidity-amount {
        font-size: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .highlight-grid {
        grid-template-columns: 1fr 1fr;
    }

    .highlight-card {
        min-height: 110px;
    }

    .highlight-card strong {
        font-size: 15px;
    }

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

    .why-card {
        min-height: 160px;
    }

    .why-card h3 {
        font-size: 12px;
    }

    .detail-row {
        min-height: 38px;
        font-size: 10px;
    }

    .detail-row strong {
        font-size: 10px;
        max-width: 48%;
    }

    .cta-content h2 {
        font-size: 18px;
    }

    .footer-inner {
        flex-direction: column;
        gap: 7px;
        text-align: center;
    }
}


/* =========================================
   EXTRA SMALL
========================================= */

@media (max-width: 380px) {
    .hero h1 {
        font-size: 29px;
    }

    .overview-grid,
    .why-grid,
    .highlight-grid {
        grid-template-columns: 1fr;
    }

    .burning-coin {
        width: 215px;
    }

    .coin-b {
        font-size: 110px;
    }

    .imgheight {
        height: 250px;
    }

    .flame {
        font-size: 70px;
    }
}