/* ==========================================================================
   Comprehensive Responsive & Multi-Device Styles
   Breakpoints: 1200px (Desktop), 992px (Laptop/Tablet), 768px (Tablet/Mobile), 480px (Smartphone), 360px (Small Phone)
   ========================================================================== */

/* Large Screens & Desktop (up to 1200px) */
@media (max-width: 1200px) {
    .container {
        padding: 0 32px;
    }
    .hero-title {
        font-size: 3rem;
    }
    .avatar-wrapper {
        width: 320px;
        height: 320px;
    }
}

/* Laptops & Tablets (up to 992px) */
@media (max-width: 992px) {
    section {
        padding: 70px 0;
    }
    .hero-section {
        padding-top: 120px;
        min-height: auto;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .hero-badge, .hero-actions {
        justify-content: center;
    }
    .avatar-container {
        order: -1;
        margin-bottom: 20px;
    }
    .avatar-wrapper {
        width: 260px;
        height: 260px;
    }
    .floating-badge {
        bottom: -10px;
        right: 50%;
        transform: translateX(50%);
        padding: 10px 18px;
        white-space: nowrap;
    }
    .about-card {
        padding: 28px;
    }
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .site_box {
        padding: 28px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
    }
    .btn_social {
        justify-content: center;
    }
}

/* Medium Tablets & Mobile Devices (up to 768px) */
@media (max-width: 768px) {
    header {
        height: 70px;
        padding: 0 20px;
    }
    header label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        font-size: 1.2rem;
    }
    .menu2 {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(9, 6, 22, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 40px;
        transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999;
    }
    header.menu-open .menu2 {
        left: 0;
    }
    .list {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    .list li a {
        font-size: 1.1rem;
        padding: 10px 0;
    }
    .btn_contact {
        margin-top: 10px;
        width: 80%;
        justify-content: center;
    }
    .hero-title {
        font-size: 2.3rem;
    }
    .hero-description {
        font-size: 1rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 26px;
    }
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .contact-wrapper {
        padding: 26px 20px;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .modal-card {
        padding: 24px 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Small Smartphones (up to 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    .hero-title {
        font-size: 1.9rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .btn-primary, .btn-outline {
        width: 100%;
        justify-content: center;
    }
    .avatar-wrapper {
        width: 210px;
        height: 210px;
    }
    .floating-badge {
        font-size: 0.8rem;
        padding: 8px 14px;
        bottom: -15px;
    }
    .floating-badge i {
        font-size: 1.3rem;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
    .faq-header h3 {
        font-size: 1rem;
    }
    .faq-header {
        padding: 16px 18px;
    }
    .faq-content {
        padding: 0 18px 18px 18px;
    }
    .toast-container {
        bottom: 15px;
        right: 15px;
        left: 15px;
    }
    .toast {
        width: 100%;
        font-size: 0.85rem;
        padding: 12px 16px;
    }
}

/* Ultra Small Screens (up to 360px) */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.6rem;
    }
    .avatar-wrapper {
        width: 180px;
        height: 180px;
    }
    .section-title {
        font-size: 1.6rem;
    }
    .tech-tag {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Narrow viewport safeguards and clear form hints. */
html, body { max-width: 100%; }
img, video, iframe { max-width: 100%; }
.container, section, .modal-card, .form-control { min-width: 0; }
.hero-title { font-size: clamp(1.8rem, 7vw, 3.5rem); line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
input::placeholder, textarea::placeholder { color: #9299aa; opacity: 1; }
input:focus::placeholder, textarea:focus::placeholder { color: #b3bac8; }
.faq-item { overflow-anchor: none; }
.faq-header { gap: 12px; }
.faq-header h3 { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .container { width: min(100% - 32px, 100%); }
    .hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .modal-overlay { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
    .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
}
@media (max-width: 380px) {
    .container { width: calc(100% - 24px); }
    .hero-title { font-size: clamp(1.65rem, 8vw, 2rem); }
    .faq-header { padding-left: 14px; padding-right: 14px; }
    .faq-item.active .faq-content { padding-left: 14px; padding-right: 14px; }
}