/* ==========================================================================
   Desa Konoha Landing Page - Responsive Styles
   ========================================================================== */

/* Large Tablets & Small Desktops */
@media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-text { max-width: 100%; }
    .hero-cta, .hero-trust { justify-content: center; }
    .hero-visual { height: 400px; }
    .features-grid { grid-template-columns: repeat(3, 1fr); }
    .steps-container { grid-template-columns: repeat(2, 1fr); }
    .step-connector { display: none; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* Tablets */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-menu {
        position: fixed; top: 70px; left: 0; right: 0;
        background: var(--cloud-white); flex-direction: column;
        padding: 24px; gap: 16px; box-shadow: var(--shadow-lg);
        transform: translateY(-100%); opacity: 0; visibility: hidden;
        transition: var(--transition-base);
    }
    .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .hero { min-height: auto; padding: 120px 0 60px; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; max-width: 280px; }
    .hero-trust { flex-direction: column; align-items: center; }
    .hero-visual, .sun, .cloud, .scroll-indicator { display: none; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stat-card { padding: 24px 12px; }
    .stat-number, .stat-suffix { font-size: 36px; }

    /* Leaderboard mobile adjustments */
    .leaderboard-item {
        padding: 12px 16px;
        gap: 12px;
    }
    .leaderboard-rank {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .leaderboard-name {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .farmer-role {
        font-size: 0.7rem;
        padding: 1px 6px;
    }
    .farmer-actual-name {
        font-size: 0.9rem;
    }
    .leaderboard-farm {
        display: none;
    }
    .leaderboard-money {
        font-size: 0.85rem;
    }

    .feature-tabs { overflow-x: auto; padding-bottom: 16px; flex-wrap: nowrap; }
    .tab-btn { flex-shrink: 0; }
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .steps-container { grid-template-columns: 1fr; gap: 24px; }
    .step { display: flex; align-items: center; text-align: left; padding: 16px; background: var(--cloud-white); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); }
    .step-number { position: relative; top: auto; left: auto; transform: none; margin-right: 16px; }
    .step-icon { font-size: 32px; margin-bottom: 0; margin-right: 16px; }

    .testimonial-slider { padding: 0; }
    .slider-btn { display: none; }
    .testimonial-card { padding: 24px; }

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-logo { justify-content: center; }
    .social-links { justify-content: center; }

    .floating-cta span { display: none; }
    .floating-cta { padding: 12px 20px; }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature-card { display: flex; align-items: flex-start; text-align: left; padding: 20px; gap: 16px; }
    .feature-icon { font-size: 32px; margin-bottom: 0; flex-shrink: 0; }
    .feature-badge { position: relative; top: auto; right: auto; display: inline-block; margin-bottom: 8px; }
}