/* ============================================
   SEBASTIÁN PARRA - MAIN STYLESHEET
   Modular CSS Architecture
   ============================================ */

/* Import all CSS modules in order */
@import url('variables.css');
@import url('base.css');
@import url('overlay.css');
@import url('hero.css');
@import url('help.css');
@import url('form.css');
@import url('responsive.css');

body {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
}

.hero-section {
  /* Ensure height works on iOS */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  
  /* Fix background on iOS */
  background-attachment: scroll; /* Not 'fixed' */
  
  /* Force GPU rendering */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.hero-gradient {
  /* Make sure gradient is visible */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Force GPU rendering */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}