/* One continuous atmosphere, rather than alternating full-width section panels. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { background: #050c1b !important; min-width: 320px; }
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 76% 56% at 84% 12%, rgba(28, 72, 160, .24), transparent 76%),
    radial-gradient(ellipse 72% 68% at 6% 82%, rgba(11, 85, 162, .17), transparent 80%),
    linear-gradient(125deg, #071229 0%, #061023 52%, #070d1e 100%);
}
body > #app { position: relative; z-index: 1; }
main#home { background: transparent !important; overflow: clip; }
/* These rules intentionally override older per-section gradients, which made
   sharp horizontal seams on desktop and mobile while scrolling. */
main#home > .hero,
main#home > .section,
main#home > .section.alt,
main#home > #services,
main#home > #projects,
main#home > #service-demos,
main#home > #why-roventa,
main#home > #approach,
main#home > #contact.contact-constellation,
main#home > #showreel {
  background: transparent !important;
  background-color: transparent !important;
  border-block: 0 !important;
  box-shadow: none !important;
}
main#home > .hero { isolation: isolate; }
main#home > .hero::before {
  mask-image: linear-gradient(to bottom, transparent, black 24%, black 73%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%, black 73%, transparent 100%);
}
#services::before, #projects::before, #service-demos::before,
#approach::before, #contact::before {
  mask-image: linear-gradient(to bottom, transparent 16%, #000 35%, #000 65%, transparent 84%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 35%, #000 65%, transparent 84%);
}
#why-roventa .value-ambient,
#contact .contact-depth {
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
/* The footer is part of the same flowing canvas; only UI cards retain borders. */
#app > .foot { background: transparent !important; border-top: 0 !important; }
.footer-contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 17px; font-size: 12px; color: #b2d3f2; }
.footer-contacts a:hover { color: #68eaff; }
main#home > section { scroll-margin-top: 82px; }

/* Touch and safe-area refinements shared by iPhone, Android, and desktop. */
img, video, svg { max-width: 100%; }
button, .btn, .filter, a { touch-action: manipulation; }
@media (max-width: 850px) {
  .links.show { background: #081326f5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  main#home > section { scroll-margin-top: 76px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  .hero .scene { max-width: 100%; }
  .wrap, .contact-layout, .value-layout, .feature { min-width: 0; }
  .hero .actions .btn { min-height: 44px; }
  .section { overflow-wrap: anywhere; }
  .footer-contacts { margin: 18px 0; }
}
@supports (padding: env(safe-area-inset-left)) {
  .navin { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}