/* =========================================
   RESPONSIVE.CSS – CLEAN / 2025
   ========================================= */

/* --------------------------
   TABLET: 768px
--------------------------- */
@media (max-width: 768px) {
     nav .page-links {
          gap: 1rem;
     }

     nav a {
          font-size: 0.9rem;
     }

     h1 {
          font-size: 2rem;
     }

     h3 {
          font-size: 1.2rem;
     }

     .badge {
          font-size: 0.85rem;
          padding: 0.45rem 0.9rem;
     }

     .accordion-header {
          font-size: 1rem;
     }

     section {
          margin: 2.5rem auto;
          padding: 1.5rem 1.2rem;
     }
}

/* --------------------------
   MOBILE: 640px
--------------------------- */
@media (max-width: 640px) {
     header {
          padding: 0.7rem 0;
     }

     nav {
          flex-direction: column;
          gap: 0.6rem;
          text-align: center;
          padding: 0 1rem;
     }

     nav img {
          width: 35px;
          height: 35px;
     }

     nav .page-links {
          justify-content: center;
          gap: 0.5rem;
     }

     nav a {
          padding: 0.5rem 0.9rem;
          font-size: 0.85rem;
     }

     .tech-badges {
          justify-content: center;
     }

     .cta-container {
          flex-direction: column;
          align-items: stretch;
     }

     .btn-primary {
          justify-content: center;
     }

     .social-links {
          padding: 0 1rem;
     }

     .scroll-top {
          bottom: 1.5rem;
          right: 1.5rem;
          width: 45px;
          height: 45px;
     }
}

/* --------------------------
   SMALL MOBILE: 480px
--------------------------- */
@media (max-width: 480px) {
     header {
          padding: 0.6rem 0;
     }

     nav {
          padding: 0 0.8rem;
     }

     nav img {
          width: 32px;
          height: 32px;
     }

     nav .page-links {
          gap: 0.4rem;
     }

     nav a {
          padding: 0.45rem 0.8rem;
          font-size: 0.8rem;
     }

     h1 {
          font-size: 1.8rem;
     }

     h3 {
          font-size: 1.1rem;
     }

     section {
          padding: 1.5rem 1rem;
          margin: 2rem auto;
     }

     .accordion-header {
          font-size: 0.95rem;
          padding: 0.8rem 1rem;
     }

     .accordion-content {
          padding: 0 1rem 1rem;
          font-size: 0.95rem;
     }

     .services-list li {
          font-size: 0.95rem;
     }

     .btn-primary {
          padding: 0.8rem 1.2rem;
          font-size: 0.95rem;
     }

     .social-link {
          padding: 0.9rem 1rem;
          font-size: 0.95rem;
     }

     .section-avatar {
          width: 70px;
          height: 70px;
     }

     footer {
          padding: 1.5rem 1rem;
          font-size: 0.85rem;
     }
}

/* --------------------------
   TINY: 360px
--------------------------- */
@media (max-width: 360px) {
     header {
          padding: 0.5rem 0;
     }

     nav img {
          width: 30px;
          height: 30px;
     }

     nav a {
          font-size: 0.75rem;
          padding: 0.4rem 0.7rem;
     }

     h1 {
          font-size: 1.6rem;
     }

     .icon {
          width: 20px;
          height: 20px;
     }

     .badge {
          padding: 0.4rem 0.8rem;
          font-size: 0.8rem;
     }

     .accordion-header {
          font-size: 0.9rem;
     }

     .scroll-top {
          width: 40px;
          height: 40px;
          bottom: 1rem;
          right: 1rem;
     }

     .scroll-top svg {
          width: 20px;
          height: 20px;
     }
}

/* --------------------------
   EXTRA TINY: 320px
--------------------------- */
@media (max-width: 320px) {
     h1 {
          font-size: 1.5rem;
     }

     h3 {
          font-size: 1rem;
     }

     section {
          padding: 1rem 0.8rem;
     }

     nav {
          padding: 0 0.8rem;
     }
}