/* =========================================
   stylemobi.css — Dedicated mobile layout
   Targets phones/tablets. Desktop styles live in style.css.
   Date: 2025-08-25
   ========================================= */
@media (max-width: 1024px) {
  .nav-container { padding: 0 1rem; }
  .section { padding: 6rem 1.25rem; }
  .hero-container { gap: 2rem; }
}

@media (max-width: 768px) {
  :root { --radius: 16px; }
  html, body { overflow-x: hidden; }
  .section { padding: 3.25rem 1rem; }

  /* Navbar */
  .navbar {
    position: sticky; top: 0; z-index: 1000;
    backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--bg-primary), transparent 30%);
    border-bottom: 1px solid var(--border-color);
    min-height: 60px; padding: .5rem 0;
  }
  .nav-container { padding: 0 .75rem; gap: 1rem; }
  .nav-brand { font-size: 1.05rem; }
  .nav-toggle { display: inline-flex; }
  .nav-menu { display: none; }
  .nav-menu.active {
    display: flex; position: fixed; inset: 64px 12px auto 12px;
    flex-direction: column; gap: .25rem; padding: .5rem;
    border: 1px solid var(--border-color); border-radius: var(--radius);
    background: var(--bg-card); box-shadow: var(--shadow-card);
  }
  .nav-link { padding: .9rem 1rem; border-radius: 12px; }

  /* Hero */
  .hero { padding-top: 18px; min-height: unset; }
  .hero-container { display: grid; grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .hero-visual { order: -1; }
  .hero-card {
    margin-inline: auto; width: min(94vw, 640px);
    padding: 1.1rem; border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, color-mix(in oklab, var(--bg-card), #000 6%), var(--bg-card));
    box-shadow: var(--shadow-card);
  }
  .hero-avatar { width: clamp(160px, 45vw, 260px); height: clamp(160px, 45vw, 260px); border-radius: 50%; margin-inline: auto; }
  .hero-title { font-size: clamp(1.4rem, 5.5vw, 2.1rem); letter-spacing: .5px; margin: .25rem 0 .35rem; }
  .hero-description { font-size: clamp(.95rem, 1.2vw + .85rem, 1.05rem); opacity: .9; }
  .hero-buttons { margin-top: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero-buttons .btn { width: 100%; justify-content: center; padding: .85rem 1rem; border-radius: 12px; }
  .hero-stats { margin-top: .85rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
  .stat-item { padding: .9rem .6rem; border-radius: 12px; }
  .stat-number { font-size: 1.4rem; }

  /* Projects → carousel */
  .projects-grid { display: grid; }
  .projects-carousel {
    margin-top: .5rem; display: flex; gap: .9rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .5rem;
  }
  .project-card { scroll-snap-align: center; min-width: 86vw; border-radius: var(--radius); }
  .project-image { height: clamp(140px, 40vw, 180px); }
  .project-content { padding: 1rem; }
  .project-title { font-size: 1.05rem; }
  .project-tag { font-size: .85rem; padding: .3rem .7rem; }

  /* Skills → accordion */
  .skills-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .skill-category { border-radius: var(--radius); padding: .75rem .9rem; }
  .skill-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
  .skill-toggle { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-color); }
  .skill-list { overflow: hidden; max-height: 0; transition: max-height .28s ease; }
  .skill-category.is-open .skill-list { max-height: 480px; }
  .skill-icon { width: 52px; height: 52px; font-size: 1.25rem; }

  /* Contact */
  .contact-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
  .contact-card, .contact-form { border-radius: var(--radius); padding: 1rem; }
  .contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
  .contact-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer { padding: 1.25rem; font-size: .95rem; }

  /* Performance */
  .bg-shapes, .particle, .floating-particles { display: none !important; }
  .matrix-column { font-size: 10px; line-height: 1.1; opacity: .3; }
}

@media (max-width: 480px) {
  .navbar { min-height: 64px; padding: .5rem 0; }
  .nav-menu.active { inset: 60px 8px auto 8px; }
  .hero-avatar { width: 180px; height: 180px; }
  .hero-buttons { gap: .6rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .btn { padding: .85rem 1.2rem; font-size: .95rem; }
  .project-image { height: 140px; }
  .project-tag { padding: .3rem .6rem; font-size: .8rem; }
}

@media (max-width: 360px) {
  .nav-menu.active { inset: 56px 6px auto 6px; }
  .stat-item { padding: 1rem; }
}