/* ==========================================================================
   RT-HERO-V5
   Connected Territory V5-A
   Premium Mediterranean rural-tech identity layer.
   ========================================================================== */

.hero__background {
  overflow: hidden;

  background-color: #5cbcc8 !important;
  background-image: url("/assets/rt-hero-connected-v5a.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

/* Neutralise previous pseudo-layers from neural-bg-v0.css */
.hero__background::before,
.hero__background::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* Preserve readability with a more premium central focus */
.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(7, 58, 73, .22) 0%,
      rgba(7, 58, 73, .14) 24%,
      rgba(7, 58, 73, .06) 44%,
      rgba(7, 58, 73, .02) 66%,
      rgba(255, 255, 255, 0) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255, 255, 255, .02) 0%,
      rgba(8, 56, 74, .02) 52%,
      rgba(8, 56, 74, .05) 100%
    ) !important;
}

/* Text hierarchy */
.hero__content h1,
.hero__content h2,
.hero__content p,
.hero__content a {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .16),
    0 3px 18px rgba(0, 0, 0, .10);
}

/* Glass-like services strip */
.services {
  background:
    linear-gradient(
      90deg,
      rgba(6, 35, 46, .68),
      rgba(9, 51, 64, .57),
      rgba(6, 35, 46, .68)
    ) !important;

  border-top: 1px solid rgba(236, 255, 248, .10);
  border-bottom: 1px solid rgba(236, 255, 248, .06);
  box-shadow:
    0 14px 40px rgba(11, 70, 84, .14),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Slightly refine the main contact line if present in current DOM */
.hero__content a[href^="mailto:"],
.hero__content .hero__email {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .12),
    0 2px 20px rgba(255, 255, 255, .14);
}

/* Mobile safety */
@media (max-width: 991.98px) {
  .hero__background {
    background-position: 58% center !important;
  }

  .services {
    box-shadow:
      0 10px 28px rgba(11, 70, 84, .12),
      inset 0 1px 0 rgba(255, 255, 255, .03);
  }
}


/* ==========================================================================
   RT-CONNECTED-TERRITORY-V5B
   Premium territory + independent infrastructure layer.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FAR — territorial layer
   -------------------------------------------------------------------------- */

.hero__background {
  overflow: hidden;

  background-color: #53afc0 !important;

  background-image:
    url("/assets/rt-hero-terrain-v5b.svg") !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;
}


/* --------------------------------------------------------------------------
   MID — backbone / hubs
   -------------------------------------------------------------------------- */

.hero__background::before {
  content: "" !important;

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    url("/assets/rt-infrastructure-v5b.svg") !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;

  opacity: .92;

  transform:
    translate3d(0, 0, 0);

  transform-origin:
    center center;

  will-change:
    opacity;

  animation:
    rt-v5b-infrastructure-breathe
    8.5s
    ease-in-out
    infinite
    alternate;
}


/* --------------------------------------------------------------------------
   Premium ambient depth
   -------------------------------------------------------------------------- */

.hero__background::after {
  content: "" !important;

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 16% 24%,
      rgba(190, 255, 229, .13) 0%,
      rgba(190, 255, 229, 0) 31%
    ),

    radial-gradient(
      ellipse at 81% 18%,
      rgba(255, 232, 169, .16) 0%,
      rgba(255, 232, 169, 0) 28%
    ),

    radial-gradient(
      ellipse at 81% 77%,
      rgba(190, 253, 245, .10) 0%,
      rgba(190, 253, 245, 0) 29%
    );

  opacity: .65;

  mix-blend-mode:
    screen;

  animation:
    rt-v5b-ambient-breathe
    13s
    ease-in-out
    infinite
    alternate;
}


/* --------------------------------------------------------------------------
   Keep the information core clean.
   -------------------------------------------------------------------------- */

.hero__overlay {
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgba(5, 52, 67, .26) 0%,
      rgba(5, 57, 72, .16) 23%,
      rgba(5, 63, 78, .07) 43%,
      rgba(7, 73, 89, .018) 63%,
      rgba(255, 255, 255, 0) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.015) 0%,
      rgba(5,48,64,.018) 54%,
      rgba(5,48,64,.050) 100%
    ) !important;
}


/* --------------------------------------------------------------------------
   More premium service panel.
   Geometry remains unchanged.
   -------------------------------------------------------------------------- */

.services {
  background:
    linear-gradient(
      100deg,
      rgba(4, 29, 39, .69) 0%,
      rgba(6, 46, 58, .58) 48%,
      rgba(4, 30, 40, .67) 100%
    ) !important;

  border:
    1px solid
    rgba(230, 255, 249, .085);

  box-shadow:
    0 16px 46px
      rgba(8, 62, 75, .15),

    inset 0 1px 0
      rgba(255, 255, 255, .045);

  backdrop-filter:
    blur(7px)
    saturate(112%);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(112%);
}


/* --------------------------------------------------------------------------
   Micro-motion only.
   Infrastructure itself does not wander.
   -------------------------------------------------------------------------- */

@keyframes rt-v5b-infrastructure-breathe {

  0% {
    opacity: .82;
  }

  48% {
    opacity: .95;
  }

  100% {
    opacity: .87;
  }
}


@keyframes rt-v5b-ambient-breathe {

  0% {
    opacity: .48;
  }

  100% {
    opacity: .72;
  }
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero__background::before,
  .hero__background::after {
    animation: none !important;
  }

  .hero__background::before {
    opacity: .88;
  }

  .hero__background::after {
    opacity: .58;
  }
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .hero__background {
    background-position:
      54% center !important;
  }

  .hero__background::before {
    background-position:
      54% center !important;

    opacity: .72;
  }

  .hero__background::after {
    opacity: .48;
  }

  .services {
    backdrop-filter:
      blur(5px)
      saturate(108%);

    -webkit-backdrop-filter:
      blur(5px)
      saturate(108%);
  }
}



/* ==========================================================================
   RT-PREMIUM-BACKBONE-V5C

   Open asymmetric territorial backbone.
   No orbital loop.
   Hierarchical hubs + subtle infrastructure flow.
   ========================================================================== */

.hero__background::before {
  content: "" !important;

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    url("/assets/rt-infrastructure-v5c.svg") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  opacity: .88;

  animation:
    rt-v5c-infrastructure-breathe
    12s
    ease-in-out
    infinite
    alternate !important;
}


/*
 * Less ambient wash than V5-B:
 * infrastructure should now provide the visual structure.
 */
.hero__background::after {
  opacity: .52 !important;

  animation:
    rt-v5c-ambient-breathe
    17s
    ease-in-out
    infinite
    alternate !important;
}


/*
 * Premium glass panel: slightly lighter and more transparent
 * so the territorial infrastructure remains perceptible around it.
 */
.services {
  background:
    linear-gradient(
      100deg,
      rgba(4, 28, 37, .64) 0%,
      rgba(6, 46, 57, .53) 48%,
      rgba(4, 29, 39, .63) 100%
    ) !important;

  border:
    1px solid
    rgba(233, 255, 249, .095);

  box-shadow:
    0 16px 48px
      rgba(6, 58, 70, .14),

    inset 0 1px 0
      rgba(255, 255, 255, .05);

  backdrop-filter:
    blur(7px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(115%);
}


@keyframes rt-v5c-infrastructure-breathe {

  0% {
    opacity: .80;
  }

  48% {
    opacity: .91;
  }

  100% {
    opacity: .84;
  }
}


@keyframes rt-v5c-ambient-breathe {

  0% {
    opacity: .42;
  }

  100% {
    opacity: .58;
  }
}


@media (prefers-reduced-motion: reduce) {

  .hero__background::before,
  .hero__background::after {
    animation: none !important;
  }

  .hero__background::before {
    opacity: .85 !important;
  }

  .hero__background::after {
    opacity: .48 !important;
  }
}


@media (max-width: 991.98px) {

  .hero__background::before {
    background-position:
      54% center !important;

    opacity: .72;
  }
}



/* ==========================================================================
   RT-TERRITORIAL-MESH-V5D

   Branched, local and hierarchical territory.
   Replaces orbital infrastructure by three open corridors.
   ========================================================================== */

.hero__background::before {
  content: "" !important;

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    url("/assets/rt-infrastructure-v5d.svg") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  opacity: .86;

  animation:
    rt-v5d-mesh-breathe
    14s
    ease-in-out
    infinite
    alternate !important;
}


/*
 * Ambient layer steps back.
 * V5-D topology becomes the structural visual language.
 */
.hero__background::after {
  opacity: .43 !important;

  animation:
    rt-v5d-ambient-breathe
    21s
    ease-in-out
    infinite
    alternate !important;
}


/*
 * Slightly more transparent central glass.
 * The mesh remains visible around the information core,
 * but never competes with typography.
 */
.services {
  background:
    linear-gradient(
      100deg,
      rgba(4, 30, 39, .62) 0%,
      rgba(5, 45, 55, .51) 48%,
      rgba(4, 29, 38, .61) 100%
    ) !important;

  border:
    1px solid
    rgba(232, 248, 239, .085);

  box-shadow:
    0 17px 50px
      rgba(7, 55, 66, .13),

    inset 0 1px 0
      rgba(255, 255, 255, .045);

  backdrop-filter:
    blur(7px)
    saturate(112%);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(112%);
}


@keyframes rt-v5d-mesh-breathe {

  0% {
    opacity: .78;
  }

  50% {
    opacity: .88;
  }

  100% {
    opacity: .82;
  }
}


@keyframes rt-v5d-ambient-breathe {

  0% {
    opacity: .34;
  }

  100% {
    opacity: .47;
  }
}


@media (prefers-reduced-motion: reduce) {

  .hero__background::before,
  .hero__background::after {
    animation: none !important;
  }

  .hero__background::before {
    opacity: .83 !important;
  }

  .hero__background::after {
    opacity: .39 !important;
  }
}


@media (max-width: 991.98px) {

  .hero__background::before {
    background-position:
      55% center !important;

    opacity: .70 !important;
  }

  .hero__background::after {
    opacity: .35 !important;
  }
}



/* ==========================================================================
   RT-LOCAL-FABRIC-V5E
   Segmented, branched and hierarchical territorial infrastructure.
   ========================================================================== */

.hero__background::before {
  content: "" !important;

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    url("/assets/rt-infrastructure-v5e.svg") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  opacity: .88;

  animation:
    rt-v5e-fabric-breathe
    15s
    ease-in-out
    infinite
    alternate !important;
}


/*
 * Reduce atmospheric competition.
 * Topology must now carry the composition.
 */
.hero__background::after {
  opacity: .35 !important;

  animation:
    rt-v5e-ambient-breathe
    23s
    ease-in-out
    infinite
    alternate !important;
}


@keyframes rt-v5e-fabric-breathe {

  0% {
    opacity: .81;
  }

  50% {
    opacity: .90;
  }

  100% {
    opacity: .84;
  }
}


@keyframes rt-v5e-ambient-breathe {

  0% {
    opacity: .28;
  }

  100% {
    opacity: .39;
  }
}


@media (prefers-reduced-motion: reduce) {

  .hero__background::before,
  .hero__background::after {
    animation: none !important;
  }

  .hero__background::before {
    opacity: .85 !important;
  }

  .hero__background::after {
    opacity: .32 !important;
  }
}


@media (max-width: 991.98px) {

  .hero__background::before {
    background-position:
      55% center !important;

    opacity: .72 !important;
  }

  .hero__background::after {
    opacity: .27 !important;
  }
}



/* ==========================================================================
   RT-LIVING-FABRIC-V5F
   Premium depth without geometry mutation.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Runtime state
   -------------------------------------------------------------------------- */

.hero {
  --rt-infra-x: 0px;
  --rt-infra-y: 0px;

  --rt-pointer-x: 50%;
  --rt-pointer-y: 50%;

  --rt-pointer-alpha: 0;

  --rt-infra-opacity: .70;
}


/* --------------------------------------------------------------------------
   MID PLANE
   Same V5-E geometry, behaviour-enhanced V5-F rendering.
   -------------------------------------------------------------------------- */

.hero__background::before {
  content: "" !important;

  position: absolute;

  /*
   * Small bleed prevents exposed edges
   * during ±7 px parallax.
   */
  inset: -1.4% !important;

  pointer-events: none;

  background-image:
    url("/assets/rt-infrastructure-v5f.svg") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center center !important;

  background-size:
    cover !important;

  opacity:
    var(--rt-infra-opacity, .70) !important;

  transform:
    translate3d(
      var(--rt-infra-x, 0px),
      var(--rt-infra-y, 0px),
      0
    )
    scale(1.014);

  transform-origin:
    center center;

  /*
   * No global breathing anymore.
   * Hubs themselves carry hierarchy.
   */
  animation:
    none !important;

  will-change:
    transform,
    opacity;
}


/* --------------------------------------------------------------------------
   LOCAL PRESENCE FIELD
   Subtle, diffuse, never a spotlight.
   -------------------------------------------------------------------------- */

.hero__background::after {
  content: "" !important;

  position: absolute;
  inset: 0 !important;

  pointer-events: none;

  background:

    radial-gradient(
      circle 230px at
      var(--rt-pointer-x, 50%)
      var(--rt-pointer-y, 50%),

      rgba(
        255,
        244,
        207,
        var(--rt-pointer-alpha, 0)
      )
      0%,

      rgba(
        212,
        250,
        240,
        var(--rt-pointer-alpha, 0)
      )
      19%,

      rgba(
        183,
        235,
        235,
        0
      )
      70%
    ),

    radial-gradient(
      ellipse at 17% 23%,
      rgba(183, 246, 226, .075) 0%,
      rgba(183, 246, 226, 0) 31%
    ),

    radial-gradient(
      ellipse at 82% 18%,
      rgba(247, 226, 167, .085) 0%,
      rgba(247, 226, 167, 0) 28%
    ),

    radial-gradient(
      ellipse at 80% 78%,
      rgba(188, 241, 235, .055) 0%,
      rgba(188, 241, 235, 0) 29%
    ) !important;

  opacity: 1 !important;

  mix-blend-mode:
    screen;

  animation:
    none !important;
}


/* --------------------------------------------------------------------------
   The information plane remains immobile.
   -------------------------------------------------------------------------- */

.hero__overlay,
.hero__content {
  transform: none !important;
}


/* --------------------------------------------------------------------------
   Glass panel refinement.
   No geometry change.
   -------------------------------------------------------------------------- */

.services {
  background:
    linear-gradient(
      100deg,
      rgba(3, 29, 38, .60) 0%,
      rgba(6, 46, 56, .49) 48%,
      rgba(3, 29, 38, .59) 100%
    ) !important;

  border:
    1px solid
    rgba(231, 248, 240, .080);

  box-shadow:
    0 18px 52px
      rgba(6, 53, 64, .125),

    inset 0 1px 0
      rgba(255, 255, 255, .045);

  backdrop-filter:
    blur(7px)
    saturate(114%);

  -webkit-backdrop-filter:
    blur(7px)
    saturate(114%);
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero {
    --rt-infra-x: 0px;
    --rt-infra-y: 0px;

    --rt-pointer-alpha: 0;

    --rt-infra-opacity: .78;
  }

  .hero__background::before {
    transform:
      scale(1.014) !important;

    opacity:
      .78 !important;
  }
}


/* --------------------------------------------------------------------------
   Coarse pointer / mobile
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

  .hero {
    --rt-infra-x: 0px;
    --rt-infra-y: 0px;

    --rt-pointer-alpha: 0;

    --rt-infra-opacity: .70;
  }

  .hero__background::before {
    transform:
      scale(1.014) !important;
  }
}


@media (max-width: 991.98px) {

  .hero__background::before {
    background-position:
      55% center !important;

    opacity:
      .70;
  }
}