/* =========================================================
   AURENGIS — HOW IT WORKS
========================================================= */

:root {
  --how-bg: #04111b;
  --how-bg-soft: #061622;

  --how-border: rgba(255, 255, 255, 0.14);

  --how-gold: #d9a24c;
  --how-gold-light: #e7b864;

  --how-blue: #2ea8ff;
  --how-cyan: #45ddff;

  --how-text: #f6f4ef;

  --how-muted:
    rgba(235, 239, 241, 0.78);
}


/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

.desktop-nav .active {
  color: white;
}

.desktop-nav .active::after {
  width: 100%;

  background:
    var(--how-gold);
}


/* =========================================================
   COMMON
========================================================= */

.how-container {
  width:
    min(calc(100% - 64px), 1480px);

  margin-inline: auto;
}


.how-kicker {
  margin: 0;

  color:
    var(--how-gold-light);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.05em;
}


.section-heading {
  margin-bottom: 32px;
}


.section-heading.centered {
  text-align: center;
}


.section-heading h2 {
  margin:
    10px 0 0;

  color: white;

  font-size:
    clamp(30px, 3vw, 40px);

  font-weight: 500;

  line-height: 1.12;
}


.heading-line {
  width: 62px;
  height: 3px;

  margin:
    18px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--how-gold),
      transparent
    );
}


/* =========================================================
   HERO
========================================================= */

.how-hero {
  position: relative;

  min-height: 650px;

  overflow: hidden;

  background:
    #030d15;
}


.how-hero-media {
  position: absolute;

  inset: 0;

  overflow: hidden;
}


.how-hero-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position:
    center center;

  filter:
    brightness(1.15)
    contrast(1.03)
    saturate(1.07);

  transform:
    scale(1.01);
}


/* =========================================================
   LIGHTER HERO OVERLAY

   IMPORTANT:
   This is intentionally much lighter than before.
========================================================= */

.how-hero-overlay {
  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,

      rgba(2, 8, 14, 0.62) 0%,

      rgba(2, 8, 14, 0.48) 20%,

      rgba(2, 8, 14, 0.27) 35%,

      rgba(2, 8, 14, 0.08) 55%,

      rgba(2, 8, 14, 0.03) 78%,

      rgba(2, 8, 14, 0.10) 100%
    ),

    linear-gradient(
      180deg,

      rgba(1, 7, 12, 0.07) 0%,

      rgba(1, 7, 12, 0.02) 55%,

      rgba(3, 13, 21, 0.63) 100%
    );
}


.how-hero-vignette {
  position: absolute;

  inset: 0;

  pointer-events: none;

  box-shadow:

    inset 0 0 130px
    rgba(0, 0, 0, 0.23);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.how-hero-inner {
  position: relative;

  z-index: 3;

  width:
    min(calc(100% - 90px), 1500px);

  min-height: 650px;

  margin-inline: auto;

  display: flex;

  align-items: center;
}


.how-hero-copy {
  width:
    min(470px, 44vw);
}


.how-hero-copy h1 {
  margin:
    15px 0 0;

  color: white;

  font-size:
    clamp(53px, 5vw, 77px);

  font-weight: 500;

  line-height: 1.02;

  letter-spacing:
    -0.045em;

  text-shadow:

    0 2px 8px
    rgba(0, 0, 0, 0.55),

    0 10px 30px
    rgba(0, 0, 0, 0.28);
}


.how-hero-description {
  max-width: 430px;

  margin:
    24px 0 0;

  color:
    rgba(255, 255, 255, 0.93);

  font-size: 17px;

  line-height: 1.6;

  text-shadow:

    0 2px 9px
    rgba(0, 0, 0, 0.65);
}


/* =========================================================
   HERO BUTTON
========================================================= */

.how-hero-button {
  min-height: 48px;

  display:
    inline-flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  margin-top: 29px;

  padding:
    0 23px;

  color:
    var(--how-gold-light);

  border:
    1px solid
    rgba(217, 162, 76, 0.72);

  border-radius: 5px;

  background:
    rgba(2, 11, 18, 0.60);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  font-size: 14px;

  font-weight: 600;

  transition:

    background 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}


.how-hero-button:hover {
  color:
    #07131d;

  background:
    var(--how-gold-light);

  transform:
    translateY(-2px);

  box-shadow:

    0 8px 24px
    rgba(217, 162, 76, 0.22);
}


/* =========================================================
   PROCESS SECTION
========================================================= */

.process-section {
  padding:
    56px 0 30px;

  background:

    radial-gradient(
      circle at 50% 0%,
      #09202e 0%,
      #061722 42%,
      #04111b 100%
    );
}


.process-card-grid {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;
}


/* =========================================================
   PROCESS CARDS
========================================================= */

.process-card {
  position: relative;

  min-height: 330px;

  padding:
    26px 27px 25px;

  background:

    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.013)
    );

  border:
    1px solid
    var(--how-border);

  border-radius: 8px;

  transition:

    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.process-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(217, 162, 76, 0.55);

  box-shadow:

    0 18px 32px
    rgba(0, 0, 0, 0.22);
}


.process-number {
  width: 31px;
  height: 31px;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    #0b1720;

  background:
    var(--how-gold-light);

  border-radius:
    50%;

  font-size: 13px;

  font-weight: 700;
}


.process-card-icon {
  min-height: 68px;

  display: flex;

  align-items: center;

  margin-top: 16px;

  color:
    var(--how-gold);

  font-size: 44px;

  font-family:

    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}


.process-card h3 {
  margin:
    4px 0 0;

  color: white;

  font-size: 20px;

  font-weight: 500;
}


.process-card p {
  margin:
    13px 0 0;

  color:
    var(--how-muted);

  font-size: 14px;

  line-height: 1.55;
}


.process-arrow {
  position: absolute;

  right: -17px;

  top: 47%;

  z-index: 5;

  color:
    var(--how-gold);

  font-size: 26px;
}


/* =========================================================
   AGILE PANEL
========================================================= */

.agile-panel {
  min-height: 110px;

  display: grid;

  grid-template-columns:
    95px 1fr;

  align-items: center;

  gap: 20px;

  margin-top: 16px;

  padding:
    18px 35px;

  background:

    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.012)
    );

  border:
    1px solid
    var(--how-border);

  border-radius: 7px;
}


.agile-icon {
  color:
    var(--how-gold);

  font-size: 58px;

  text-align: center;
}


.agile-content h3 {
  margin: 0;

  color: white;

  font-size: 20px;

  font-weight: 500;
}


.agile-content p {
  margin:
    8px 0 0;

  color:
    var(--how-muted);

  font-size: 14px;
}


/* =========================================================
   TECHNOLOGY SECTION
========================================================= */

.technology-process-section {
  padding:
    45px 0 40px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 50% 22%,
      rgba(15, 50, 69, 0.23),
      transparent 37%
    ),

    linear-gradient(
      180deg,
      #04111b,
      #020c14
    );
}


/* =========================================================
   TECHNOLOGY IMAGE GRID
========================================================= */

.technology-image-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   TECHNOLOGY IMAGE CARD
========================================================= */

.technology-image-card {
  position: relative;

  min-width: 0;

  perspective:
    1100px;
}


.technology-image-shell {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    3 / 2;

  border-radius: 10px;

  isolation: isolate;

  background:
    #03111c;

  border:
    1px solid
    rgba(217, 162, 76, 0.26);

  box-shadow:

    0 14px 35px
    rgba(0, 0, 0, 0.23),

    inset 0 0 0 1px
    rgba(255, 255, 255, 0.025);

  transform:
    translateZ(0)
    scale(1);

  transition:

    transform 480ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    border-color 420ms ease,

    box-shadow 420ms ease;
}


/* =========================================================
   IMAGE
========================================================= */

.technology-image-shell img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transform:
    scale(1.001);

  filter:

    brightness(0.94)
    contrast(1.04)
    saturate(1.03);

  transition:

    transform 750ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),

    filter 600ms ease;
}


/* =========================================================
   FUTURISTIC LIGHT FIELD
========================================================= */

.technology-image-shell::before {
  content: "";

  position: absolute;

  z-index: 3;

  inset: -35%;

  pointer-events: none;

  opacity: 0;

  background:

    radial-gradient(
      circle at 30% 30%,
      rgba(48, 179, 255, 0.30),
      transparent 22%
    ),

    radial-gradient(
      circle at 75% 70%,
      rgba(217, 162, 76, 0.25),
      transparent 26%
    );

  transform:
    rotate(-12deg)
    scale(0.82);

  transition:

    opacity 500ms ease,

    transform 900ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}


/* =========================================================
   MOVING LIGHT SWEEP
========================================================= */

.technology-image-shell::after {
  content: "";

  position: absolute;

  z-index: 4;

  top: -60%;

  left: -55%;

  width: 34%;
  height: 220%;

  pointer-events: none;

  opacity: 0;

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(109, 215, 255, 0.06),

      rgba(255, 220, 146, 0.27),

      rgba(109, 215, 255, 0.08),

      transparent
    );

  transform:
    rotate(18deg);

  filter:
    blur(3px);
}


/* =========================================================
   TECHNOLOGY HOVER
========================================================= */

.technology-image-card:hover
.technology-image-shell {

  z-index: 20;

  transform:

    translateY(-7px)
    scale(1.055);

  border-color:
    rgba(232, 184, 100, 0.77);

  box-shadow:

    0 24px 58px
    rgba(0, 0, 0, 0.44),

    0 0 22px
    rgba(46, 168, 255, 0.15),

    0 0 42px
    rgba(217, 162, 76, 0.13),

    inset 0 0 18px
    rgba(65, 180, 255, 0.07);
}


.technology-image-card:hover
.technology-image-shell img {

  transform:
    scale(1.085);

  filter:

    brightness(1.07)
    contrast(1.06)
    saturate(1.10);
}


.technology-image-card:hover
.technology-image-shell::before {

  opacity: 1;

  transform:

    rotate(4deg)
    scale(1.08);
}


.technology-image-card:hover
.technology-image-shell::after {

  opacity: 1;

  animation:
    aurengis-light-sweep
    1.15s
    cubic-bezier(
      0.19,
      1,
      0.22,
      1
    )
    forwards;
}


/* =========================================================
   SCAN LINE
========================================================= */

.technology-light-scan {
  position: absolute;

  z-index: 5;

  left: 0;

  top: -20%;

  width: 100%;

  height: 2px;

  opacity: 0;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(58, 184, 255, 0.35),

      rgba(255, 204, 107, 0.90),

      rgba(58, 184, 255, 0.35),

      transparent
    );

  box-shadow:

    0 0 9px
    rgba(68, 188, 255, 0.65),

    0 0 18px
    rgba(217, 162, 76, 0.32);
}


.technology-image-card:hover
.technology-light-scan {

  opacity: 1;

  animation:
    aurengis-scan
    1.25s
    ease-in-out
    forwards;
}


/* =========================================================
   FUTURISTIC CORNERS
========================================================= */

.technology-corner {
  position: absolute;

  z-index: 6;

  width: 20px;
  height: 20px;

  pointer-events: none;

  opacity: 0;

  transition:

    opacity 280ms ease,

    width 400ms ease,

    height 400ms ease;
}


.corner-tl {
  top: 8px;
  left: 8px;

  border-top:
    2px solid
    var(--how-gold);

  border-left:
    2px solid
    var(--how-gold);
}


.corner-tr {
  top: 8px;
  right: 8px;

  border-top:
    2px solid
    var(--how-cyan);

  border-right:
    2px solid
    var(--how-cyan);
}


.corner-bl {
  bottom: 8px;
  left: 8px;

  border-bottom:
    2px solid
    var(--how-cyan);

  border-left:
    2px solid
    var(--how-cyan);
}


.corner-br {
  bottom: 8px;
  right: 8px;

  border-bottom:
    2px solid
    var(--how-gold);

  border-right:
    2px solid
    var(--how-gold);
}


.technology-image-card:hover
.technology-corner {

  width: 29px;
  height: 29px;

  opacity: 0.92;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aurengis-light-sweep {

  0% {
    left: -55%;
  }

  100% {
    left: 125%;
  }

}


@keyframes aurengis-scan {

  0% {
    top: -5%;

    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 0.8;
  }

  100% {
    top: 105%;

    opacity: 0;
  }

}


/* =========================================================
   FINAL CTA
========================================================= */

.how-final-cta {
  padding-top: 38px;

  text-align: center;
}


.how-final-cta p {
  margin: 0;

  color: white;

  font-size: 18px;
}


.how-final-button {
  min-width: 220px;

  min-height: 50px;

  display:
    inline-flex;

  align-items: center;

  justify-content: center;

  gap: 42px;

  margin-top: 16px;

  padding:
    0 26px;

  color:
    #101820;

  background:

    linear-gradient(
      135deg,
      #e3b35c,
      #c98d3a
    );

  border-radius: 5px;

  font-size: 14px;

  font-weight: 600;

  transition:

    transform 180ms ease,

    box-shadow 180ms ease,

    filter 180ms ease;
}


.how-final-button:hover {

  transform:
    translateY(-3px);

  filter:
    brightness(1.06);

  box-shadow:

    0 12px 28px
    rgba(213, 157, 68, 0.24);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1250px) {

  .process-card-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .process-arrow {
    display: none;
  }

  .technology-image-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .how-hero {
    min-height: 610px;
  }

  .how-hero-inner {
    min-height: 610px;

    width:
      calc(100% - 50px);
  }

  .how-hero-copy {
    width:
      min(460px, 58vw);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .how-container {
    width:
      calc(100% - 30px);
  }

  .how-hero {
    min-height: 620px;
  }

  .how-hero-image {

    object-position:
      64% center;

    filter:

      brightness(1.08)
      contrast(1.03)
      saturate(1.05);
  }


  .how-hero-overlay {

    background:

      linear-gradient(
        90deg,

        rgba(2, 8, 14, 0.82) 0%,

        rgba(2, 8, 14, 0.67) 45%,

        rgba(2, 8, 14, 0.24) 100%
      ),

      linear-gradient(
        180deg,

        transparent 0%,

        rgba(3, 13, 21, 0.70) 100%
      );
  }


  .how-hero-inner {
    width:
      calc(100% - 30px);

    min-height: 620px;

    align-items:
      flex-end;

    padding-bottom:
      55px;
  }


  .how-hero-copy {
    width: 100%;
  }


  .how-hero-copy h1 {
    font-size:
      clamp(
        45px,
        12vw,
        60px
      );
  }


  .process-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .technology-image-grid {
    grid-template-columns:
      1fr;
  }


  .technology-image-card:hover
  .technology-image-shell {

    transform:
      translateY(-4px)
      scale(1.025);
  }


  .technology-image-card:hover
  .technology-image-shell img {

    transform:
      scale(1.045);
  }


  .agile-panel {
    grid-template-columns:
      1fr;

    text-align:
      center;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .process-card-grid {
    grid-template-columns:
      1fr;
  }

  .process-card {
    min-height:
      auto;
  }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

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

  .technology-image-shell,
  .technology-image-shell img,
  .technology-image-shell::before,
  .technology-image-shell::after,
  .technology-light-scan {

    animation:
      none !important;

    transition:
      none !important;
  }

}
/* =========================================================
   AURENGIS — TECHNOLOGY CARDS ULTRA INTERACTION
   8 DIFFERENT EFFECTS
========================================================= */

/*
   All cards settle at a larger zoom while hovered.
   The JS below controls entering/leaving classes.
*/

.technology-image-card {
  z-index: 1;
}

.technology-image-card.is-active {
  z-index: 100;
}

.technology-image-card .technology-image-shell {
  transform-origin: center center;
  will-change: transform, filter, box-shadow;
}

.technology-image-card .technology-image-shell img {
  will-change: transform, filter;
}


/* =========================================================
   FINAL HOVER STATE — ALL CARDS
========================================================= */

.technology-image-card.is-active .technology-image-shell {
  transform:
    translateY(-11px)
    scale(1.125);

  border-color:
    rgba(238, 187, 93, 0.92);

  box-shadow:
    0 34px 75px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(36, 166, 255, 0.20),
    0 0 42px rgba(35, 170, 255, 0.13),
    0 0 55px rgba(219, 164, 75, 0.12),
    inset 0 0 28px rgba(49, 175, 255, 0.07);
}

.technology-image-card.is-active .technology-image-shell img {
  transform: scale(1.07);

  filter:
    brightness(1.10)
    contrast(1.07)
    saturate(1.11)
    blur(0);
}


/* =========================================================
   LIGHT SYSTEM WHILE ACTIVE
========================================================= */

.technology-image-card.is-active
.technology-image-shell::before {
  opacity: 1;

  transform:
    rotate(4deg)
    scale(1.12);
}

.technology-image-card.is-active
.technology-corner {
  width: 33px;
  height: 33px;

  opacity: 1;
}

.technology-image-card.is-active
.technology-light-scan {
  animation:
    aurengis-active-scan
    2.1s
    ease-in-out
    infinite;
}


/* =========================================================
   ENTER / LEAVE COMMON
========================================================= */

.technology-image-card.is-entering
.technology-image-shell,
.technology-image-card.is-leaving
.technology-image-shell {
  animation-duration: 720ms;
  animation-timing-function:
    cubic-bezier(0.16, 1, 0.3, 1);

  animation-fill-mode: both;
}

.technology-image-card.is-entering
.technology-image-shell img,
.technology-image-card.is-leaving
.technology-image-shell img {
  animation-duration: 720ms;
  animation-timing-function:
    cubic-bezier(0.16, 1, 0.3, 1);

  animation-fill-mode: both;
}


/* =========================================================
   CARD 1 — ROTATIONAL BOOT
========================================================= */

.technology-image-card:nth-child(1).is-entering
.technology-image-shell {
  animation-name: tech1-in;
}

.technology-image-card:nth-child(1).is-leaving
.technology-image-shell {
  animation-name: tech1-out;
}


/* =========================================================
   CARD 2 — DIGITAL VIBRATION / POWER-UP
========================================================= */

.technology-image-card:nth-child(2).is-entering
.technology-image-shell {
  animation-name: tech2-in;
}

.technology-image-card:nth-child(2).is-leaving
.technology-image-shell {
  animation-name: tech2-out;
}


/* =========================================================
   CARD 3 — BLUR → FOCUS
========================================================= */

.technology-image-card:nth-child(3).is-entering
.technology-image-shell {
  animation-name: tech3-in;
}

.technology-image-card:nth-child(3).is-entering
.technology-image-shell img {
  animation-name: tech3-image-in;
}

.technology-image-card:nth-child(3).is-leaving
.technology-image-shell {
  animation-name: tech3-out;
}

.technology-image-card:nth-child(3).is-leaving
.technology-image-shell img {
  animation-name: tech3-image-out;
}


/* =========================================================
   CARD 4 — 3D TILT
========================================================= */

.technology-image-card:nth-child(4).is-entering
.technology-image-shell {
  animation-name: tech4-in;
}

.technology-image-card:nth-child(4).is-leaving
.technology-image-shell {
  animation-name: tech4-out;
}


/* =========================================================
   CARD 5 — ENERGY PULSE
========================================================= */

.technology-image-card:nth-child(5).is-entering
.technology-image-shell {
  animation-name: tech5-in;
}

.technology-image-card:nth-child(5).is-leaving
.technology-image-shell {
  animation-name: tech5-out;
}


/* =========================================================
   CARD 6 — HORIZONTAL DIGITAL SHIFT
========================================================= */

.technology-image-card:nth-child(6).is-entering
.technology-image-shell {
  animation-name: tech6-in;
}

.technology-image-card:nth-child(6).is-leaving
.technology-image-shell {
  animation-name: tech6-out;
}


/* =========================================================
   CARD 7 — PERSPECTIVE OPEN
========================================================= */

.technology-image-card:nth-child(7).is-entering
.technology-image-shell {
  animation-name: tech7-in;
}

.technology-image-card:nth-child(7).is-leaving
.technology-image-shell {
  animation-name: tech7-out;
}


/* =========================================================
   CARD 8 — SECURITY LOCK / IMPACT
========================================================= */

.technology-image-card:nth-child(8).is-entering
.technology-image-shell {
  animation-name: tech8-in;
}

.technology-image-card:nth-child(8).is-leaving
.technology-image-shell {
  animation-name: tech8-out;
}


/* =========================================================
   1 — ROTATION
========================================================= */

@keyframes tech1-in {

  0% {
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }

  38% {
    transform:
      translateY(-14px)
      scale(1.145)
      rotate(-2.2deg);
  }

  65% {
    transform:
      translateY(-10px)
      scale(1.115)
      rotate(0.8deg);
  }

  100% {
    transform:
      translateY(-11px)
      scale(1.125)
      rotate(0deg);
  }

}

@keyframes tech1-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125)
      rotate(0deg);
  }

  38% {
    transform:
      translateY(-7px)
      scale(1.08)
      rotate(1.5deg);
  }

  70% {
    transform:
      translateY(-2px)
      scale(1.025)
      rotate(-0.5deg);
  }

  100% {
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }

}


/* =========================================================
   2 — VIBRATION
========================================================= */

@keyframes tech2-in {

  0% {
    transform:
      translate(0, 0)
      scale(1);
  }

  18% {
    transform:
      translate(-5px, -5px)
      scale(1.07);
  }

  28% {
    transform:
      translate(6px, -9px)
      scale(1.10);
  }

  38% {
    transform:
      translate(-4px, -12px)
      scale(1.13);
  }

  48% {
    transform:
      translate(3px, -10px)
      scale(1.12);
  }

  58% {
    transform:
      translate(-2px, -11px)
      scale(1.128);
  }

  100% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

}

@keyframes tech2-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

  18% {
    transform:
      translate(3px, -8px)
      scale(1.095);
  }

  30% {
    transform:
      translate(-4px, -6px)
      scale(1.075);
  }

  42% {
    transform:
      translate(3px, -4px)
      scale(1.055);
  }

  58% {
    transform:
      translate(-2px, -2px)
      scale(1.025);
  }

  100% {
    transform:
      translate(0, 0)
      scale(1);
  }

}


/* =========================================================
   3 — BLUR / FOCUS
========================================================= */

@keyframes tech3-in {

  0% {
    transform:
      translateY(0)
      scale(1);
  }

  45% {
    transform:
      translateY(-9px)
      scale(1.15);
  }

  100% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

}

@keyframes tech3-image-in {

  0% {
    filter:
      brightness(0.75)
      blur(8px)
      saturate(0.6);

    transform:
      scale(1.15);
  }

  50% {
    filter:
      brightness(1.18)
      blur(2px)
      saturate(1.2);

    transform:
      scale(1.09);
  }

  100% {
    filter:
      brightness(1.10)
      blur(0)
      saturate(1.11);

    transform:
      scale(1.07);
  }

}

@keyframes tech3-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }

}

@keyframes tech3-image-out {

  0% {
    filter:
      brightness(1.10)
      blur(0)
      saturate(1.11);

    transform:
      scale(1.07);
  }

  45% {
    filter:
      brightness(0.90)
      blur(4px)
      saturate(0.8);

    transform:
      scale(1.04);
  }

  100% {
    filter:
      brightness(0.94)
      blur(0)
      saturate(1.03);

    transform:
      scale(1);
  }

}


/* =========================================================
   4 — 3D TILT
========================================================= */

@keyframes tech4-in {

  0% {
    transform:
      perspective(900px)
      rotateX(0deg)
      rotateY(0deg)
      scale(1);
  }

  40% {
    transform:
      perspective(900px)
      translateY(-13px)
      rotateX(7deg)
      rotateY(-8deg)
      scale(1.14);
  }

  68% {
    transform:
      perspective(900px)
      translateY(-11px)
      rotateX(-2deg)
      rotateY(3deg)
      scale(1.12);
  }

  100% {
    transform:
      perspective(900px)
      translateY(-11px)
      rotateX(0deg)
      rotateY(0deg)
      scale(1.125);
  }

}

@keyframes tech4-out {

  0% {
    transform:
      perspective(900px)
      translateY(-11px)
      scale(1.125);
  }

  45% {
    transform:
      perspective(900px)
      translateY(-6px)
      rotateX(-5deg)
      rotateY(6deg)
      scale(1.07);
  }

  100% {
    transform:
      perspective(900px)
      translateY(0)
      rotateX(0deg)
      rotateY(0deg)
      scale(1);
  }

}


/* =========================================================
   5 — ENERGY PULSE
========================================================= */

@keyframes tech5-in {

  0% {
    transform:
      scale(1);

    box-shadow:
      0 0 0 rgba(45, 173, 255, 0);
  }

  32% {
    transform:
      translateY(-9px)
      scale(1.08);

    box-shadow:
      0 0 45px rgba(47, 174, 255, 0.40);
  }

  55% {
    transform:
      translateY(-14px)
      scale(1.15);

    box-shadow:
      0 0 80px rgba(217, 162, 76, 0.35);
  }

  100% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

}

@keyframes tech5-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

  50% {
    transform:
      translateY(-4px)
      scale(1.06);

    box-shadow:
      0 0 35px rgba(48, 174, 255, 0.23);
  }

  100% {
    transform:
      scale(1);

    box-shadow:
      0 0 0 rgba(0, 0, 0, 0);
  }

}


/* =========================================================
   6 — HORIZONTAL SHIFT
========================================================= */

@keyframes tech6-in {

  0% {
    transform:
      translateX(0)
      scale(1);
  }

  25% {
    transform:
      translateX(12px)
      translateY(-5px)
      scale(1.07);
  }

  48% {
    transform:
      translateX(-8px)
      translateY(-12px)
      scale(1.14);
  }

  70% {
    transform:
      translateX(3px)
      translateY(-10px)
      scale(1.12);
  }

  100% {
    transform:
      translateX(0)
      translateY(-11px)
      scale(1.125);
  }

}

@keyframes tech6-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

  35% {
    transform:
      translateX(-8px)
      translateY(-7px)
      scale(1.08);
  }

  65% {
    transform:
      translateX(5px)
      translateY(-2px)
      scale(1.03);
  }

  100% {
    transform:
      translateX(0)
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   7 — PERSPECTIVE OPEN
========================================================= */

@keyframes tech7-in {

  0% {
    transform:
      perspective(1000px)
      rotateY(-12deg)
      scale(0.97);
  }

  45% {
    transform:
      perspective(1000px)
      translateY(-13px)
      rotateY(5deg)
      scale(1.145);
  }

  100% {
    transform:
      perspective(1000px)
      translateY(-11px)
      rotateY(0deg)
      scale(1.125);
  }

}

@keyframes tech7-out {

  0% {
    transform:
      perspective(1000px)
      translateY(-11px)
      rotateY(0deg)
      scale(1.125);
  }

  45% {
    transform:
      perspective(1000px)
      translateY(-6px)
      rotateY(-6deg)
      scale(1.06);
  }

  100% {
    transform:
      perspective(1000px)
      translateY(0)
      rotateY(0deg)
      scale(1);
  }

}


/* =========================================================
   8 — SECURITY IMPACT
========================================================= */

@keyframes tech8-in {

  0% {
    transform:
      scale(1);
  }

  28% {
    transform:
      translateY(-7px)
      scale(1.08);
  }

  43% {
    transform:
      translateY(-15px)
      scale(1.16);
  }

  55% {
    transform:
      translateY(-9px)
      scale(1.105);
  }

  70% {
    transform:
      translateY(-12px)
      scale(1.135);
  }

  100% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

}

@keyframes tech8-out {

  0% {
    transform:
      translateY(-11px)
      scale(1.125);
  }

  35% {
    transform:
      translateY(-3px)
      scale(1.055);
  }

  50% {
    transform:
      translateY(-6px)
      scale(1.075);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   ACTIVE SCAN
========================================================= */

@keyframes aurengis-active-scan {

  0% {
    top: -5%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  75% {
    opacity: 0.85;
  }

  100% {
    top: 105%;
    opacity: 0;
  }

}


/* =========================================================
   EXTRA LIGHT PULSE
========================================================= */

.technology-image-card.is-active::before {
  content: "";

  position: absolute;

  z-index: -1;

  left: 8%;
  right: 8%;

  bottom: -22px;

  height: 34px;

  opacity: 0.65;

  background:
    radial-gradient(
      ellipse at center,
      rgba(39, 170, 255, 0.32),
      rgba(217, 162, 76, 0.12) 42%,
      transparent 72%
    );

  filter:
    blur(11px);

  animation:
    tech-ground-light
    2.4s
    ease-in-out
    infinite;
}

@keyframes tech-ground-light {

  0%,
  100% {
    opacity: 0.42;

    transform:
      scaleX(0.85);
  }

  50% {
    opacity: 0.80;

    transform:
      scaleX(1.12);
  }

}


/* =========================================================
   MOBILE — DON'T OVER-ZOOM
========================================================= */

@media (max-width: 760px) {

  .technology-image-card.is-active
  .technology-image-shell {

    transform:
      translateY(-6px)
      scale(1.04);
  }

  .technology-image-card.is-active
  .technology-image-shell img {

    transform:
      scale(1.035);
  }

}
/* =========================================================
   AURENGIS — FORCE TECHNOLOGY INTERACTIONS
   Explicitly enabled for this interactive section
========================================================= */

.technology-image-card.is-entering .technology-image-shell,
.technology-image-card.is-leaving .technology-image-shell,
.technology-image-card.is-entering .technology-image-shell img,
.technology-image-card.is-leaving .technology-image-shell img {
  animation-duration: 900ms !important;
  animation-fill-mode: both !important;
  animation-timing-function:
    cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* =========================================================
   1 — ROTATION / ORBIT
========================================================= */

.technology-image-card:nth-child(1).is-entering
.technology-image-shell {
  animation-name: aurengis-card-1-in !important;
}

.technology-image-card:nth-child(1).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-1-out !important;
}

@keyframes aurengis-card-1-in {

  0% {
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }

  35% {
    transform:
      translateY(-16px)
      scale(1.18)
      rotate(-3.5deg);
  }

  60% {
    transform:
      translateY(-11px)
      scale(1.145)
      rotate(1.4deg);
  }

  78% {
    transform:
      translateY(-13px)
      scale(1.165)
      rotate(-0.6deg);
  }

  100% {
    transform:
      translateY(-12px)
      scale(1.16)
      rotate(0deg);
  }
}

@keyframes aurengis-card-1-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16)
      rotate(0deg);
  }

  35% {
    transform:
      translateY(-9px)
      scale(1.11)
      rotate(2.3deg);
  }

  65% {
    transform:
      translateY(-4px)
      scale(1.05)
      rotate(-1deg);
  }

  100% {
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }
}


/* =========================================================
   2 — DIGITAL VIBRATION
========================================================= */

.technology-image-card:nth-child(2).is-entering
.technology-image-shell {
  animation-name: aurengis-card-2-in !important;
}

.technology-image-card:nth-child(2).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-2-out !important;
}

@keyframes aurengis-card-2-in {

  0% {
    transform:
      translate(0, 0)
      scale(1);
  }

  15% {
    transform:
      translate(-7px, -4px)
      scale(1.06);
  }

  25% {
    transform:
      translate(8px, -8px)
      scale(1.10);
  }

  35% {
    transform:
      translate(-6px, -13px)
      scale(1.14);
  }

  45% {
    transform:
      translate(5px, -10px)
      scale(1.17);
  }

  55% {
    transform:
      translate(-3px, -13px)
      scale(1.15);
  }

  70% {
    transform:
      translate(2px, -11px)
      scale(1.165);
  }

  100% {
    transform:
      translateY(-12px)
      scale(1.16);
  }
}

@keyframes aurengis-card-2-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16);
  }

  20% {
    transform:
      translate(5px, -10px)
      scale(1.13);
  }

  35% {
    transform:
      translate(-6px, -7px)
      scale(1.10);
  }

  50% {
    transform:
      translate(4px, -5px)
      scale(1.07);
  }

  70% {
    transform:
      translate(-2px, -2px)
      scale(1.03);
  }

  100% {
    transform:
      translate(0, 0)
      scale(1);
  }
}


/* =========================================================
   3 — DEFOCUS → ULTRA FOCUS
========================================================= */

.technology-image-card:nth-child(3).is-entering
.technology-image-shell {
  animation-name: aurengis-card-3-in !important;
}

.technology-image-card:nth-child(3).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-3-out !important;
}

.technology-image-card:nth-child(3).is-entering
.technology-image-shell img {
  animation-name: aurengis-card-3-image-in !important;
}

.technology-image-card:nth-child(3).is-leaving
.technology-image-shell img {
  animation-name: aurengis-card-3-image-out !important;
}

@keyframes aurengis-card-3-in {

  0% {
    transform:
      translateY(0)
      scale(1);
  }

  45% {
    transform:
      translateY(-15px)
      scale(1.19);
  }

  100% {
    transform:
      translateY(-12px)
      scale(1.16);
  }
}

@keyframes aurengis-card-3-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16);
  }

  55% {
    transform:
      translateY(-5px)
      scale(1.07);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes aurengis-card-3-image-in {

  0% {
    transform: scale(1.16);

    filter:
      brightness(0.65)
      saturate(0.45)
      blur(12px);
  }

  45% {
    transform: scale(1.10);

    filter:
      brightness(1.22)
      saturate(1.30)
      blur(2px);
  }

  100% {
    transform: scale(1.06);

    filter:
      brightness(1.10)
      saturate(1.12)
      blur(0);
  }
}

@keyframes aurengis-card-3-image-out {

  0% {
    transform: scale(1.06);

    filter:
      brightness(1.10)
      saturate(1.12)
      blur(0);
  }

  50% {
    transform: scale(1.03);

    filter:
      brightness(0.82)
      saturate(0.75)
      blur(6px);
  }

  100% {
    transform: scale(1);

    filter:
      brightness(0.94)
      saturate(1.03)
      blur(0);
  }
}


/* =========================================================
   4 — 3D ROTATION
========================================================= */

.technology-image-card:nth-child(4).is-entering
.technology-image-shell {
  animation-name: aurengis-card-4-in !important;
}

.technology-image-card:nth-child(4).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-4-out !important;
}

@keyframes aurengis-card-4-in {

  0% {
    transform:
      perspective(900px)
      rotateX(0deg)
      rotateY(0deg)
      scale(1);
  }

  38% {
    transform:
      perspective(900px)
      translateY(-15px)
      rotateX(10deg)
      rotateY(-11deg)
      scale(1.19);
  }

  65% {
    transform:
      perspective(900px)
      translateY(-11px)
      rotateX(-3deg)
      rotateY(5deg)
      scale(1.15);
  }

  100% {
    transform:
      perspective(900px)
      translateY(-12px)
      rotateX(0deg)
      rotateY(0deg)
      scale(1.16);
  }
}

@keyframes aurengis-card-4-out {

  0% {
    transform:
      perspective(900px)
      translateY(-12px)
      scale(1.16);
  }

  45% {
    transform:
      perspective(900px)
      translateY(-7px)
      rotateX(-8deg)
      rotateY(9deg)
      scale(1.09);
  }

  100% {
    transform:
      perspective(900px)
      translateY(0)
      rotateX(0deg)
      rotateY(0deg)
      scale(1);
  }
}


/* =========================================================
   5 — ENERGY PULSE
========================================================= */

.technology-image-card:nth-child(5).is-entering
.technology-image-shell {
  animation-name: aurengis-card-5-in !important;
}

.technology-image-card:nth-child(5).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-5-out !important;
}

@keyframes aurengis-card-5-in {

  0% {
    transform: scale(1);

    filter:
      brightness(1);

    box-shadow:
      0 0 0 rgba(54, 177, 255, 0);
  }

  25% {
    transform:
      translateY(-8px)
      scale(1.08);

    filter:
      brightness(1.16);

    box-shadow:
      0 0 45px rgba(54, 177, 255, 0.45);
  }

  50% {
    transform:
      translateY(-17px)
      scale(1.20);

    filter:
      brightness(1.28);

    box-shadow:
      0 0 85px rgba(217, 162, 76, 0.40);
  }

  70% {
    transform:
      translateY(-10px)
      scale(1.145);

    filter:
      brightness(1.08);
  }

  100% {
    transform:
      translateY(-12px)
      scale(1.16);

    filter:
      brightness(1);
  }
}

@keyframes aurengis-card-5-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16);
  }

  45% {
    transform:
      translateY(-5px)
      scale(1.08);

    box-shadow:
      0 0 55px rgba(46, 168, 255, 0.25);
  }

  100% {
    transform:
      translateY(0)
      scale(1);

    box-shadow:
      0 0 0 rgba(0, 0, 0, 0);
  }
}


/* =========================================================
   6 — DIGITAL GLITCH SHIFT
========================================================= */

.technology-image-card:nth-child(6).is-entering
.technology-image-shell {
  animation-name: aurengis-card-6-in !important;
}

.technology-image-card:nth-child(6).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-6-out !important;
}

@keyframes aurengis-card-6-in {

  0% {
    transform:
      translateX(0)
      scale(1);
  }

  18% {
    transform:
      translateX(16px)
      scaleX(1.035)
      scaleY(0.98);
  }

  33% {
    transform:
      translateX(-12px)
      translateY(-7px)
      scale(1.10);
  }

  48% {
    transform:
      translateX(10px)
      translateY(-14px)
      scale(1.17);
  }

  62% {
    transform:
      translateX(-5px)
      translateY(-11px)
      scale(1.15);
  }

  100% {
    transform:
      translateX(0)
      translateY(-12px)
      scale(1.16);
  }
}

@keyframes aurengis-card-6-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16);
  }

  25% {
    transform:
      translateX(-10px)
      translateY(-8px)
      scale(1.12);
  }

  45% {
    transform:
      translateX(9px)
      translateY(-5px)
      scale(1.08);
  }

  65% {
    transform:
      translateX(-4px)
      translateY(-2px)
      scale(1.035);
  }

  100% {
    transform:
      translateX(0)
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   7 — PERSPECTIVE PORTAL
========================================================= */

.technology-image-card:nth-child(7).is-entering
.technology-image-shell {
  animation-name: aurengis-card-7-in !important;
}

.technology-image-card:nth-child(7).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-7-out !important;
}

@keyframes aurengis-card-7-in {

  0% {
    transform:
      perspective(900px)
      rotateY(-18deg)
      scale(0.93);

    opacity: 0.65;
  }

  45% {
    transform:
      perspective(900px)
      translateY(-16px)
      rotateY(8deg)
      scale(1.20);

    opacity: 1;
  }

  70% {
    transform:
      perspective(900px)
      translateY(-10px)
      rotateY(-2deg)
      scale(1.145);
  }

  100% {
    transform:
      perspective(900px)
      translateY(-12px)
      rotateY(0)
      scale(1.16);
  }
}

@keyframes aurengis-card-7-out {

  0% {
    transform:
      perspective(900px)
      translateY(-12px)
      rotateY(0)
      scale(1.16);
  }

  45% {
    transform:
      perspective(900px)
      translateY(-6px)
      rotateY(-10deg)
      scale(1.07);
  }

  100% {
    transform:
      perspective(900px)
      translateY(0)
      rotateY(0deg)
      scale(1);

    opacity: 1;
  }
}


/* =========================================================
   8 — IMPACT / LOCK
========================================================= */

.technology-image-card:nth-child(8).is-entering
.technology-image-shell {
  animation-name: aurengis-card-8-in !important;
}

.technology-image-card:nth-child(8).is-leaving
.technology-image-shell {
  animation-name: aurengis-card-8-out !important;
}

@keyframes aurengis-card-8-in {

  0% {
    transform:
      translateY(0)
      scale(1);
  }

  32% {
    transform:
      translateY(-16px)
      scale(1.20);
  }

  46% {
    transform:
      translateY(-7px)
      scale(1.12);
  }

  58% {
    transform:
      translateY(-14px)
      scale(1.18);
  }

  72% {
    transform:
      translateY(-10px)
      scale(1.145);
  }

  100% {
    transform:
      translateY(-12px)
      scale(1.16);
  }
}

@keyframes aurengis-card-8-out {

  0% {
    transform:
      translateY(-12px)
      scale(1.16);
  }

  30% {
    transform:
      translateY(-2px)
      scale(1.07);
  }

  48% {
    transform:
      translateY(-7px)
      scale(1.09);
  }

  70% {
    transform:
      translateY(-1px)
      scale(1.025);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   STABLE STATE AFTER INTRO EFFECT
========================================================= */

.technology-image-card.is-active:not(.is-entering):not(.is-leaving)
.technology-image-shell {
  transform:
    translateY(-12px)
    scale(1.16) !important;

  border-color:
    rgba(234, 184, 92, 0.90) !important;

  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.48),
    0 0 25px rgba(46, 168, 255, 0.18),
    0 0 48px rgba(217, 162, 76, 0.13) !important;
}


/* =========================================================
   FORCE SCAN / LIGHTS
========================================================= */

.technology-image-card.is-active
.technology-light-scan {
  animation:
    aurengis-force-scan
    2.4s
    ease-in-out
    infinite !important;
}

@keyframes aurengis-force-scan {

  0% {
    top: -5%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  75% {
    opacity: 0.9;
  }

  100% {
    top: 105%;
    opacity: 0;
  }
}

.technology-image-card.is-active
.technology-corner {
  opacity: 1 !important;

  width: 34px !important;
  height: 34px !important;
}