/* ============================================
   XEVORA — Main stylesheet entry
   ============================================ */
@import url('base.css');
@import url('header-hero.css');
@import url('services-process.css');
@import url('projects.css');
@import url('pricing.css');
@import url('blog.css');
@import url('about.css');
@import url('contact-footer.css');

/* ============================================
   Tilt interaction (applies to [data-tilt] elements)
   ============================================ */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s var(--ease-soft);
}

/* ============================================
   Final responsive polish
   ============================================ */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .hero-title { letter-spacing: -0.02em; }
  .btn { padding: 13px 20px; font-size: 14px; }
}

/* Prevent layout shift / smoother section transitions */
section { position: relative; }

/* ============================================
   Mobile section spacing — tighten vertical rhythm
   ============================================ */
@media (max-width: 640px) {
  .projects { padding: 64px 0 80px; }
  .pricing { padding: 64px 0 80px; }
  .blog { padding: 64px 0 80px; }
  .about { padding: 64px 0 80px; }
  .contact { padding: 80px var(--gutter) 90px; }
  .process { padding: 56px 0 72px; }

  .projects-list,
  .blog-grid,
  .calculator { margin-top: 40px; }
  .process-track { margin-top: 40px; }

  .about-visual { margin-bottom: 8px; }
}

/* Print fallback: kill animations */
@media print {
  .grain, .cursor-glow, .preloader, .hero-grid-bg, .hero-x-watermark { display: none !important; }
}