/* css/style.css */

/* --- 1. Variables & Theme --- */
:root {
    /* Brand Colors */
    --primary: #0A68F5;
    --primary-glow: rgba(10, 104, 245, 0.6);
    --accent-green: #05C46B;
    --accent-red: #FF4507;
    
    /* Backgrounds */
    --bg-deep: #050507;
    --bg-surface: rgba(255, 255, 255, 0.03);
    
    /* Text */
    --text-main: #FFFFFF;
    --text-muted: #9CA3AF;
    
    /* Glassmorphism settings */
    --glass-bg: rgba(20, 25, 40, 0.6);
    --blur: 16px;
}

/* --- 2. Global Reset & Layout --- */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-deep);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

.ambient-glow {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none;
    background: 
        radial-gradient(circle at 15% 15%, rgba(10, 104, 245, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(5, 196, 107, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(10, 104, 245, 0.08) 0%, transparent 50%);
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* --- 3. Header (High Visibility Glass) --- */
header {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(10, 104, 245, 0.15);
    transition: all 0.3s ease;
}

header:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(10, 104, 245, 0.25);
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text {
    font-size: 1.5rem; font-weight: 800; color: var(--text-main);
    letter-spacing: -1px; display: inline-block;
}
.logo-text span { 
    color: var(--primary); display: inline-block;
    text-shadow: 0 0 15px var(--primary-glow);
}

.nav-menu { display: flex; gap: 32px; }
.nav-menu a {
    font-size: 0.95rem; color: #e2e8f0;
    font-weight: 500; position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.nav-menu a:hover { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.nav-menu a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--primary); transition: 0.3s;
    box-shadow: 0 0 8px var(--primary);
}
.nav-menu a:hover::after { width: 100%; }

.btn-launch {
    background: linear-gradient(135deg, var(--primary), #004ecb);
    padding: 10px 24px; border-radius: 50px; color: white;
    font-weight: 600; font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(10, 104, 245, 0.4);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; gap: 8px;
}
.btn-launch:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(10, 104, 245, 0.6);
    border-color: #fff;
}

/* --- 4. Hero Section --- */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 160px 5% 80px; max-width: 1400px; margin: 0 auto;
}
.hero-content {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%;
}
.hero-text h1 {
    font-size: 4.2rem; line-height: 1.1; font-weight: 800; margin-bottom: 24px; letter-spacing: -2px;
}
.hero-text p {
    font-size: 1.25rem; color: var(--text-muted); margin-bottom: 40px; max-width: 520px; line-height: 1.7;
}
.hero-btns { display: flex; gap: 16px; }
.btn-outline {
    padding: 12px 30px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-main); font-weight: 600; background: rgba(255,255,255,0.05);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--text-main); }

.monitor-wrapper { perspective: 1200px; width: 100%; animation: floatMonitor 6s ease-in-out infinite; }
@keyframes floatMonitor { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.monitor-bezel {
    background: #111; border-radius: 16px; padding: 12px 12px 0 12px;
    border: 1px solid #333; box-shadow: 0 0 0 1px #000, 0 40px 80px rgba(0,0,0,0.5);
    transform: rotateY(-10deg) rotateX(5deg); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero:hover .monitor-bezel { transform: rotateY(0) rotateX(0) scale(1.02); }
.monitor-screen {
    background: #0f0f13; border-radius: 4px 4px 0 0; aspect-ratio: 16/10; overflow: hidden; position: relative;
    background-image: linear-gradient(180deg, #18181e 1px, transparent 1px); background-size: 100% 40px;
}
.ui-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 50px; border-right: 1px solid #222; }
.ui-chart { position: absolute; left: 50px; top: 0; right: 250px; bottom: 0; }
.ui-orderbook { position: absolute; top: 0; right: 0; bottom: 0; width: 250px; border-left: 1px solid #222; background: #121216; }
.candle { position: absolute; width: 8px; border-radius: 2px; box-shadow: 0 0 8px rgba(0,0,0,0.3); }
.c-green { background: var(--accent-green); }
.c-red { background: var(--accent-red); }

/* --- Ticker & Stats --- */
.ticker-bar {
    background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 14px 0; overflow: hidden; white-space: nowrap;
}
.ticker-track { display: inline-block; animation: scroll 20s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; margin-right: 60px; font-weight: 600; font-size: 0.95rem; }
.val-up { color: var(--accent-green); } .val-down { color: var(--accent-red); }

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.stats-section {
    padding: 80px 5%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center;
}
.stat-card h3 { 
    font-size: 2.3rem; font-weight: 800; margin-bottom: 8px; 
    background: linear-gradient(to right, #fff, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Feature Grid --- */
.features { padding: 100px 5%; max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 80px; }
.section-head h2 { font-size: 2.8rem; margin-bottom: 16px; font-weight: 700; }
.section-head span { color: var(--primary); text-shadow: 0 0 20px rgba(10,104,245,0.3); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.f-card {
    background: var(--bg-surface); padding: 40px 30px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s;
}
.f-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.08); border-color: var(--primary); }
.f-icon {
    width: 50px; height: 50px; border-radius: 12px; background: rgba(10,104,245,0.1); display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.4rem; margin-bottom: 24px;
}

/* --- Deep Dive --- */
.deep-dive { padding: 100px 5%; max-width: 1200px; margin: 0 auto; }
.dd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 120px; }
.dd-row.reverse { direction: rtl; } .dd-row.reverse .dd-text { direction: ltr; }
.dd-visual {
    height: 350px; background: radial-gradient(circle at center, rgba(10,104,245,0.08), transparent 70%);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; position: relative; display: flex; align-items: center; justify-content: center;
}
.css-shield {
    font-size: 10rem; color: transparent; -webkit-text-stroke: 2px var(--primary); filter: drop-shadow(0 0 25px var(--primary-glow)); animation: pulse 3s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; filter: drop-shadow(0 0 35px var(--primary-glow)); } }
.css-chart-art { width: 70%; height: 60%; display: flex; align-items: flex-end; justify-content: space-between; }
.bar { width: 15%; background: var(--primary); border-radius: 4px 4px 0 0; opacity: 0.7; }

/* --- Steps --- */
.steps-section { padding: 100px 5%; background: linear-gradient(180deg, transparent, rgba(10,104,245,0.03)); }
.steps-container { max-width: 1200px; margin: 0 auto; }
.step-cards { display: flex; gap: 30px; margin-top: 60px; }
.step-card {
    flex: 1; padding: 40px; background: #0a0a0e; border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; position: relative; overflow: hidden; transition: 0.3s;
}
.step-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-5px); }
.step-num { font-size: 5rem; font-weight: 900; color: rgba(255, 255, 255, 0.100); position: absolute; top: 10px; right: 30px; }

/* --- Download --- */
.access-section { padding: 100px 5%; max-width: 1200px; margin: 0 auto; }
.access-box {
    background: linear-gradient(110deg, #101015, #08080a); border-radius: 40px; padding: 80px 60px; border: 1px solid rgba(255,255,255,0.08);
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; position: relative; overflow: hidden;
}
.access-box::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); opacity: 0.2; pointer-events: none;
}
.web-option {
    background: rgba(10, 104, 245, 0.1); border: 1px solid rgba(10, 104, 245, 0.3); padding: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.devices-visual { position: relative; height: 400px; }
.css-laptop {
    position: absolute; bottom: 40px; right: 0; width: 380px; height: 220px; background: #000; border: 4px solid #333; border-radius: 12px 12px 0 0; z-index: 1;
}
.css-phone {
    position: absolute; bottom: 0; right: 300px; width: 130px; height: 260px; background: #000; border: 4px solid #333; border-radius: 24px; z-index: 2; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; justify-content: center; overflow: hidden;
}
.css-phone-screen { width: 100%; height: 100%; background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* --- FAQ --- */
.faq-section { padding: 100px 5%; max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
.faq-q { padding: 20px 0; font-size: 1.2rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; }
.faq-a { padding-bottom: 20px; color: var(--text-muted); display: none; line-height: 1.6; }
.faq-item.active .faq-a { display: block; }
.faq-item.active .faq-q i { transform: rotate(180deg); transition: 0.3s; }

/* --- Footer --- */
footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 80px 5%; background: #020203; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.f-col h5 { font-size: 1.1rem; margin-bottom: 24px; color: white; }
.f-col a { display: block; color: var(--text-muted); margin-bottom: 12px; }
.f-col a:hover { color: var(--primary); }

@media (max-width: 1024px) {
    .hero-content { display: flex; flex-direction: column; text-align: center; }
    .hero-text { order: 2; }
    .monitor-wrapper { order: 1; width: 100%; max-width: 600px; margin: 0 auto; }
    .hero-btns { justify-content: center; }
    .stats-section { grid-template-columns: 1fr 1fr; gap: 30px; }
    .feature-grid { grid-template-columns: 1fr; }
    .dd-row, .dd-row.reverse { grid-template-columns: 1fr; direction: ltr; text-align: center; }
    .access-box { grid-template-columns: 1fr; text-align: center; }
    .devices-visual { display: none; }
    .step-cards { flex-direction: column; }
    .web-option { flex-direction: column; gap: 20px; text-align: center; }
}

@media (max-width: 768px) {
    .nav-menu { display: none; }
    header { padding: 12px 20px; width: 95%; }
    .logo-text { font-size: 1.2rem; }
    .footer-inner { grid-template-columns: 1fr; }
    .hero-text h1 { font-size: 2.8rem; }
}

/* PC */
.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* */
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
/*  */
.f-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.f-col a {
    display: block;
    text-decoration: none;
    transition: color 0.2s;
}

/*  */
@media (max-width: 992px) {
    .footer-inner {
        grid-template-columns: repeat(2, 1fr); /* */
        gap: 30px;
    }
}

/*  */
@media (max-width: 576px) {
    .footer-inner {
        grid-template-columns: 1fr; /*  */
        text-align: center; /*  */
    }
    
    .f-col {
        align-items: center; 
    }
}

/* --- logo main --- */
.brand-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 5;
}
.brand-overlay img { width: 100%; height: 100%; }



/* --- mp4 Overlay Text Optimization --- */
.video-container { 
    position: relative; 
    width: 100%; 
    height: 120vh; 
    overflow: hidden; 
}


.video-container.v-dark::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(5, 5, 7, 0.4) 0%, rgba(5, 5, 7, 0.7) 100%);
    z-index: 2;
}

.video-container.v-light::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; 
    z-index: 2;
}

.video-container video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
}

.overlay-content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 3; 
    text-align: center; 
    color: white; 
    width: 90%; 
    max-width: 800px;
}

.overlay-content h1 { 
    font-size: 3.5rem; 
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.2;
    margin-bottom: 16px; 
    
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 0 40px rgba(10, 104, 245, 0.2); 
    word-break: keep-all; 
}

.overlay-content h2 { 
    font-size: 1.4rem; 
    font-weight: 500;
    color: #e2e8f0; 
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

@media (max-width: 768px) {
    .overlay-content h1 { 
        font-size: 2.2rem; 
        line-height: 1.3;
        margin-bottom: 12px;
    }
    .overlay-content h2 { 
        font-size: 1.05rem; 
        line-height: 1.4;
    }
}

.overlay-content h1 { font-size: 2rem; margin: 0; }
.overlay-content h2 { font-size: 1rem; margin: 8px 0 0 0; }

/* ---  (visual-section) --- */
.visual-section { 
    padding: 120px 20px 60px; 
    display: flex; 
    justify-content: center; 
    background: radial-gradient(circle at center, #0b1220, #020205); 
}

/* 420px  */
.visual-inner { 
    max-width: 420px; 
    width: 100%; 
    overflow: hidden;
    background-color: #000; 
}

/*  */
.visual-inner img, 
.visual-inner video { 
    width: 100% !important; 
    height: auto !important; 
    display: block; 
    object-fit: contain; 
}

/* --- why-section --- */
.why-section { 
    text-align: center; 
    padding: 40px 20px 120px; 
}
.why-section h2 { font-size: 2.6rem; font-weight: 800; margin-bottom: 12px; }
.why-section h2 span { color: var(--primary); }
.why-section p { color: var(--text-muted); font-size: 1rem; }

/* ---  --- */

/* 📱  */
@media (max-width: 1024px) {
    .access-section { display: none; }
}

/* 769px */
@media (min-width: 769px) {
    .visual-inner { 
        max-width: 1200px; /* ⭐️ ! */
    }
}


/* payback bar */
.payback-bar-container {
    width: 100%; height: 40px; background-color: #e1e1e1; 
    border-radius: 25px; overflow: hidden; position: relative;
    margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}
.payback-bar {
    height: 100%; width: 0; 
    background: linear-gradient(90deg, #05C46B, #009c44); 
    border-radius: 25px; position: absolute; top: 0; left: 0;
    animation: paybackAnimation 2s ease-out forwards;
}
.payback-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.5rem; color: #fff; font-weight: bold;
}
@keyframes paybackAnimation { 0% { width: 0; } 100% { width: 50%; } }

.reward-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.reward-table th, .reward-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
.reward-table th { color: var(--text-muted); font-weight: 600; }
.reward-table .green { color: var(--accent-green); font-weight: bold; }

.dd-visual.visual-card {
    background: radial-gradient(circle at center, rgba(10,104,245,0.12), transparent 70%);
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center;
}
.animate-left, .animate-right {
    opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-left { transform: translateX(-60px); }
.animate-right { transform: translateX(60px); }
.reveal.active .animate-left, .reveal.active .animate-right { opacity: 1; transform: translateX(0); }
.reveal.active .visual-card { animation: glowIn 1.2s ease forwards; }

@keyframes glowIn {
    0% { box-shadow: 0 0 0 rgba(10,104,245,0); }
    100% { box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 40px rgba(10,104,245,0.25); }
}

@media (max-width: 1024px) {
    .animate-left, .animate-right { transform: translateY(40px); }
}

.visual-hero {
    position: relative; border-radius: 28px; overflow: hidden;
    background: radial-gradient(circle at center, rgba(10,104,245,0.25), rgba(2,2,8,0.9));
    box-shadow: 0 60px 120px rgba(0,0,0,0.7), 0 0 60px rgba(10,104,245,0.35);
}
.visual-hero img { width: 100%; max-width: 420px; display: block; margin: 0 auto; transform: scale(1.05); }
.hero-glow {
    position: absolute; inset: -40%;
    background: radial-gradient(circle, rgba(10,104,245,0.4), transparent 60%);
    animation: pulseGlow 3s ease-in-out infinite; pointer-events: none;
}
@keyframes pulseGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }


/* --- [NEW] Mobile Menu Styles --- */

/* 1. Default state: Hide mobile elements, show desktop elements */  
.hamburger-btn { display: none; }
.mobile-menu { display: none; }
.desktop-nav { display: block; }
.desktop-btn { display: flex; }

/* 2. Hamburger button style (Maintain glassmorphis*/
.hamburger-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    transition: 0.3s;
}
.hamburger-btn:hover { color: var(--primary); }

/* 3. Mobile menu container (Hidden by default) */
.mobile-menu {
    position: fixed;
    top: 90px;/* Consider header height + spacing */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: rgba(20, 25, 40, 0.95); /* Dark background */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    z-index: 999;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    /* Initial animation state (closed) */
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* When the menu is open (when the .active class is added) */
.mobile-menu.active {
    display: block; 
    max-height: 600px; 
    opacity: 1;
    padding: 30px 20px;
}

/* Mobile menu list style */
.m-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.m-nav-list li {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}
.m-nav-list li:last-child { border-bottom: none; }

.m-nav-list a {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-main);
    display: block;
}
.m-nav-list a:hover { color: var(--primary); }

/* Mobile Trade button */
.m-btn-area { margin-top: 20px; }
.mobile-trade-btn {
    width: 100%; /* Full width */
    justify-content: center;
    padding: 16px;
    font-size: 1.1rem;
}

/* 4. Media query (for narrower screens) */
@media (max-width: 1024px) { /* Set slightly wider than the usual 768px */
    
    /* Hide desktop elements */
    .nav-menu, .desktop-nav, .desktop-btn { 
        display: none !important; 
    }

    /* Show mobile hamburger button */
    .hamburger-btn { 
        display: block; 
    }
    
    /* Position mobile menu container */
    .mobile-menu {
        display: block; /* visible but hidden by max-height */
    }
}