/* Hero-only art direction. Existing page tokens and section styles remain intact. */
#hero { background: #030812; color: #f2f6ff; min-height: min(850px, 100svh); padding: 10rem 0 5.5rem; isolation: isolate; }
#hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #030812 5%, transparent 80%), linear-gradient(#539cff05 1px, transparent 1px), linear-gradient(90deg, #539cff05 1px, transparent 1px); background-size: auto, 80px 80px, 80px 80px; mask-image: linear-gradient(transparent, black 30%, transparent); }
#hero .hero-section__glow {
  inset: 25% -10% -15%; width: auto; height: auto;
  border-radius: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 24% 22% at 53% 64%, rgba(34, 162, 213, .075), transparent 100%),
    radial-gradient(ellipse 42% 34% at 43% 70%, rgba(27, 93, 229, .12), transparent 100%),
    radial-gradient(ellipse 48% 46% at 62% 59%, rgba(13, 48, 115, .13), transparent 100%);
  filter: blur(32px);
  transform-origin: 50% 68%;
  animation: hero-atmosphere 16s ease-in-out infinite alternate;
}
#hero .hero__grid { grid-template-columns: 1fr 1fr; gap: 0; }
#hero .hero__content { position: relative; z-index: 2; }
#hero .hero__eyebrow { color: #99b5ce; font-size: .62rem; font-weight: 600; letter-spacing: .14em; margin-bottom: 1.7rem; }
#hero h1 { font-size: clamp(2.6rem, 4.25vw, 3.9rem); line-height: 1.16; letter-spacing: -.052em; color: #f2f6ff; margin-bottom: 1.65rem; max-width: none; }
#hero .hero-line { white-space: normal; }
#hero h1 .hero-accent { color: #42b8ff; background: linear-gradient(105deg, #448aff, #68deef); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hero .hero__lead { color: #9caec3; font-size: 1rem; line-height: 1.9; max-width: 30rem; margin-bottom: 2rem; }
#hero .hero__actions { gap: .85rem; margin-bottom: .65rem; }
/* Reassurance line sized to fit the space the actions margin gave back. */
#hero .hero__microcopy { margin: 0 0 .95rem; color: #8b9fb7; font-size: .78rem; line-height: 1.4; }
#hero .btn { border-radius: 7px; min-height: 3.3rem; padding: .9rem 1.35rem; font-size: .85rem; transition: background .22s, box-shadow .22s, border-color .22s; }
#hero .btn-primary { background: #2475eb; border: 1px solid #448dff; color: white; box-shadow: 0 5px 30px #1464ff25; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }
#hero .btn-primary:hover { background: #3185f7; box-shadow: 0 5px 35px #1464ff45; }
#hero .hero__arrow { display: inline-block; margin-left: 1.2rem; font-size: 1.2rem; transition: transform .22s; }
#hero .btn-primary:hover .hero__arrow { transform: translate(2px, -2px); }
#hero .btn-secondary { color: #c1d6f2; border: 1px solid #28496e; background: #0b182760; }
#hero .btn-secondary:hover { background: #183555; border-color: #448dff; }
#hero a:focus-visible { outline: 2px solid #84e5ff; outline-offset: 5px; }
#hero .hero__assurances { gap: .8rem 1.2rem; color: #8b9fb7; font-size: .68rem; font-weight: 500; }
#hero .hero__assurances li { display: flex; align-items: center; gap: .35rem; }
#hero .hero__assurances li span { display: inline-block; color: #54bfed; transition: transform .2s; }
#hero .hero__assurances li:hover span { transform: translate(2px, -2px); }
#hero .hero__visual { display: block; height: 510px; min-width: 0; position: relative; }
.hero__canvas { position: absolute; inset: -10% -12%; pointer-events: none; }
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero__fallback { position: absolute; inset: 18% 8%; border-radius: 37% 63% 58% 42% / 65% 34% 66% 35%; background: radial-gradient(ellipse at 30% 30%, #147ad03a, transparent 60%); box-shadow: inset 1px 1px 45px #29baff24; transform: rotate(-25deg); opacity: .65; }
.hero__visual.is-rendered .hero__fallback { opacity: 0; transition: opacity 1s; }
.hero__visual-caption { position: absolute; bottom: 1rem; left: 12%; right: 6%; display: flex; align-items: center; gap: .6rem; font-size: .55rem; letter-spacing: .16em; color: #7994b3; }
.hero__signal { width: 4px; height: 4px; border-radius: 50%; background: #5bdaef; box-shadow: 0 0 9px #5bdaef; }
.hero__coordinate { margin-left: auto; color: #54708d; }
.hero__footer { position: absolute; bottom: 1.7rem; left: 0; right: 0; display: flex; justify-content: space-between; border-top: 1px solid #77baff12; padding-top: 1.2rem; font-size: .52rem; letter-spacing: .15em; color: #658099; }
.hero__footer > span:last-child { display: flex; gap: 1.2rem; }
.header__menu a { position: relative; }
.header__menu a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.header__menu a:hover::after, .header__menu a:focus-visible::after { transform: scaleX(1); }
@keyframes hero-atmosphere { from { transform: translate(-1%, 1%) scale(.97); opacity: .72; } to { transform: translate(1%, -1%) scale(1.035); opacity: 1; } }
@media (max-width: 1024px) { #hero { padding-top: 8rem; } #hero h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); } #hero .hero__eyebrow { font-size: .54rem; } #hero .hero__visual { height: 450px; } }
@media (max-width: 768px) {
  #hero { min-height: auto; padding: 7rem 0 4.5rem; }
  #hero .hero__grid { grid-template-columns: 1fr; gap: .5rem; }
  #hero h1 { font-size: clamp(2.25rem, 8.8vw, 3.8rem); max-width: 19ch; }
  #hero .hero__eyebrow { font-size: .52rem; letter-spacing: .1em; margin-bottom: 1.3rem; }
  #hero .hero__lead { font-size: .93rem; max-width: 34rem; }
  #hero .hero__visual { height: 300px; width: min(100%, 430px); justify-self: center; }
  #hero .hero__actions { width: 100%; flex-wrap: wrap; }
  #hero .hero__actions .btn { width: auto; flex: 1 0 auto; justify-content: center; }
  #hero .hero__assurances { display: flex; gap: .8rem; font-size: .61rem; }
  .hero__visual-caption { bottom: 0; }
  .hero__footer { font-size: .43rem; }
}
@media (prefers-reduced-motion: reduce) { #hero *, #hero *::before { animation: none !important; transition: none !important; } #hero .btn-primary { transform: none; } }
/* Pre-paint cinematic gate. Without JS these classes never exist. */
html.intro-pending, html.intro-playing { overflow: hidden !important; }
html.intro-pending body, html.intro-playing body { overflow: hidden !important; background: #030812; }
.intro-pending .site-header, .intro-pending .hero__content,
.intro-pending .hero__visual-caption, .intro-pending .hero__footer,
.intro-pending .hero__fallback, .intro-pending .hero-section__glow,
.intro-pending .skip-link,
:is(.intro-pending, .intro-playing) #main-content > section:not(#hero),
:is(.intro-pending, .intro-playing) .site-footer,
:is(.intro-pending, .intro-playing) .whatsapp-button,
:is(.intro-pending, .intro-playing) .back-to-top { visibility: hidden; }
:is(.intro-pending, .intro-playing) #hero::before,
:is(.intro-pending, .intro-playing) #hero::after { opacity: 0; }
.intro-pending .hero__canvas, .intro-playing .hero__canvas {
  position: fixed; inset: auto; left: 50%; top: 50%;
  width: 100vw; height: 100svh;
  transform: translate(-50%, -50%); z-index: 10;
}
/* Continuous dark-blue handoff; identical color on both sides of the seam. */
#hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: clamp(240px, 34vw, 420px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(3, 8, 18, 0) 0%,
    rgba(5, 13, 28, .28) 25%,
    rgba(7, 18, 36, .7) 60%,
    #091529 100%);
}
#hero + #technologies {
  background: linear-gradient(180deg, #091529 0%, #0a1427 22%, #0b1223 58%, var(--surface-dark) 100%);
}