@media (max-width: 900px) {
  :root {
    --section-spacing: 4.5rem;
  }

  .hero-layout,
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-visual {
    max-width: 560px;
  }

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

  .site-nav {
    gap: var(--space-3);
  }
}

@media (max-width: 600px) {
  :root {
    --header-height: 64px;
    --section-spacing: 3.5rem;
  }

  .container {
    width: min(calc(100% - 2rem), var(--container-width));
  }

  .projects-grid,
  .services-grid,
  .skills-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-block: var(--space-12);
  }

  .hero-title {
    letter-spacing: -0.02em;
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  .header-inner {
    gap: var(--space-3);
  }

  .site-nav {
    flex-wrap: wrap;
  }

  .contact-panel {
    padding: var(--space-5);
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .md-hidden {
    display: none;
  }

  .sm-text-center {
    text-align: center;
  }

  .sm-w-full {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 480px) {
  .hero-side {
    padding: 24px 0 40px;
  }

  .code-card {
    transform: none;
  }

  .code-body {
    padding: 18px 12px;
    font-size: var(--text-xs);
  }

  .ln {
    width: 24px;
  }

  .hero-note {
    right: 0;
    bottom: 8px;
    padding: 9px 12px;
  }
}

@media (max-width: 1000px) {
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .skills-section {
    padding: 65px 0;
  }

  .skills-container {
    width: min(100% - 32px, 1056px);
  }

  .skills-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .skill-card {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .experience-education-content {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .cta-section {
    display: flex;
    flex-direction: column;

    min-height: auto;
    gap: 30px;

    padding: 35px 25px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .cta-shape {
    display: none;
  }

  .cta-content {
    padding: 0;
  }

  .cta-content h2 {
    font-size: 1.8rem;
  }

  .cta-content p {
    font-size: 0.85rem;
  }

  .cta-visual {
    width: 100%;
    padding: 22px 0 0;

    border-top: 1px solid var(--color-border);
  }

  .cta-steps {
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .ai-launcher {
    right: 18px;
    bottom: 18px;
  }

  .ai-panel {
    right: 12px;
    bottom: 86px;

    width: calc(100% - 24px);
    height: min(620px, calc(100dvh - 110px));
  }
}

@media (max-width: 380px) {
  .ai-panel {
    right: 8px;
    bottom: 76px;
    width: calc(100% - 16px);
  }

  .ai-header {
    padding-inline: 12px;
  }

  .ai-chat {
    padding: 13px;
  }
}

/* Responsive */
@media (max-width: 1000px) {
  html[lang="fa"] .projects-grid,
  html[lang="fa"] .skills-grid,
  html[lang="fa"] .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  html[lang="fa"] .header {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }

  html[lang="fa"] .menuBar_header {
    order: 3;
    flex: 1 0 100%;
  }

  html[lang="fa"] .menuBar {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
  }

  html[lang="fa"] .header_main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  html[lang="fa"] .left_header_main,
  html[lang="fa"] .right_header_main {
    width: 100%;
    flex: 0 0 auto;
  }

  html[lang="fa"] .hero-side {
    max-width: 440px;
    margin-inline: auto;
  }

  html[lang="fa"] .about-section {
    flex-direction: column;
  }

  html[lang="fa"] .cta-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: auto;
    margin-block-start: 0;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  html[lang="fa"] .cta-shape {
    display: none;
  }

  html[lang="fa"] .cta-content,
  html[lang="fa"] .cta-visual {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
    padding: 0;
  }

  html[lang="fa"] .cta-visual {
    padding-block-start: var(--space-6);
    border-top: 1px solid var(--color-border);
  }

  html[lang="fa"] .ai-launcher {
    left: 18px;
    bottom: 18px;
  }

  html[lang="fa"] .ai-panel {
    left: 12px;
    bottom: 86px;
    width: calc(100% - 24px);
  }

  html[lang="fa"] {
    scroll-padding-top: 8rem;
  }
}

@media (max-width: 600px) {
  html[lang="fa"] .projects-grid,
  html[lang="fa"] .skills-grid,
  html[lang="fa"] .services-grid {
    grid-template-columns: 1fr;
  }

  html[lang="fa"] .menuBar {
    column-gap: var(--space-3);
    font-size: 0.8rem;
  }

  html[lang="fa"] .titleName {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
  }

  html[lang="fa"] .about-details {
    padding: var(--space-4);
  }

  html[lang="fa"] .footer-content {
    text-align: center;
  }

  html[lang="fa"] .ai-panel {
    left: 12px;
    bottom: 86px;
    width: calc(100% - 24px);
    height: min(620px, calc(100dvh - 110px));
  }
}

@media (max-width: 380px) {
  html[lang="fa"] .ai-launcher {
    left: 12px;
  }

  html[lang="fa"] .ai-panel {
    left: 8px;
    bottom: 76px;
    width: calc(100% - 16px);
  }
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding-block: 20px;
  }
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px 10px;
  }
}

@keyframes siteFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.language-enter {
  animation: siteFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  body.language-enter {
    animation: none;
  }
}