@import url('reset.css');
@import url('fonts.css');
@import url('variables.css');
@import url('layout.css');
@import url('nav.css');
@import url('hero.css');
@import url('about.css');
@import url('learning.css');
@import url('how.css');
@import url('pricing.css');
@import url('reviews.css');
@import url('faq.css');
@import url('contact.css');
@import url('modal-calendly.css');
@import url('modal-policy.css');
@import url('footer.css');


button.cta,
a.cta {
  display: inline-block;
  background: #fc0303;
  color: #ffffff;
  font-weight: bold;
  font-family: var(--main-font);
  font-size: var(--main-size);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  border: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease;
}
button.cta:hover,
a.cta:hover {
  background: #ff0000;
  color: #000;
}
button.cta:active,
a.cta:active {
  background: #e00000;
}
html {
  background: var(--doodle-bg) center/var(--doodle-size) repeat;
}

body {
  position: relative;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--doodle-bg);
  background-size: var(--doodle-size);
  background-repeat: repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0); /* forza rendering GPU su Safari */
  will-change: transform;
}