:root {
  --blue: #171b83;
  --green: #53cf5d;
  --line: rgba(255, 255, 255, 0.92);
  --line-size: 1px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--blue);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
}

.page-shell {
  min-height: 100svh;
  overflow: hidden;
  background: var(--blue) url("assets/icons/BG.png") center / cover fixed;
}

.hero-grid {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(220px, 1.18fr) minmax(280px, 1.62fr) minmax(280px, 1.06fr);
  grid-template-rows: minmax(260px, 34vh) minmax(290px, 34vh) minmax(260px, 32vh);
}

.panel,
.mosaic-cell,
.decor-cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: var(--line-size) solid var(--line);
  border-bottom: var(--line-size) solid var(--line);
  animation: lineBreath 6s ease-in-out infinite;
}

.panel-wave-top img {
  width: min(58vw, 400px);
  max-width: none;
  position: absolute;
  animation: waveDrift 10s ease-in-out infinite;
  transform-origin: top left;
}

.brand-panel {
  display: grid;
  place-items: center;
  overflow: visible;
  padding: clamp(28px, 5vw, 70px);
  z-index: 3;
}

.brand-logo {
  width: clamp(200px, 36vw, 300px);
  animation: brandBreathe 5.5s ease-in-out infinite;
}

.primary-cta {
  width: clamp(240px, 25vw, 390px);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 5;
  animation: ctaGlow 2.8s ease-in-out infinite;
  transition: filter 180ms ease, transform 180ms ease;
}

.cta-bar {
  width: 100%;
}

.cta-text {
  width: 72%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.primary-cta:hover,
.primary-cta:focus-visible {
  filter: brightness(1.12);
  transform: translate(-50%, 50%) scale(1.03);
  outline: none;
}

.decor-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.decor-cell {
  display: grid;
  place-items: center;
}

.decor-cell img,
.nav-decor img,
.mosaic-cell img {
  animation: iconFloat 6.5s ease-in-out infinite;
  will-change: transform;
}

.decor-cell:nth-child(2) img,
.mosaic-cell:nth-child(3n) img {
  animation-delay: -1.8s;
}

.decor-cell:nth-child(3) img,
.mosaic-cell:nth-child(4n) img {
  animation-delay: -3.2s;
}

.decor-green {
  background: var(--green);
}

.spark {
  width: clamp(82px, 7vw, 100px);
  animation-name: slowSpin;
  animation-duration: 18s;
  animation-timing-function: linear;
}

.ruh {
  width: clamp(160px, 13vw, 160px);
}

.cross {
  width: clamp(58px, 5vw, 50px);
}

.dots-blue {
  width: clamp(142px, 14vw, 230px);
}

.nav-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr 1.55fr 1.05fr 0.95fr;
  align-items: stretch;
}

.nav-panel > * {
  display: grid;
  place-items: center;
  min-width: 0;
  border-right: 0;
}

.nav-decor:first-child {
  border-right: var(--line-size) solid var(--line);
}

.nav-decor:last-child {
  border-left: var(--line-size) solid var(--line);
}

.nav-decor img {
  width: clamp(70px, 6vw, 50px);
}

.nav-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 45px);
  cursor: pointer;
  animation: clickableIdle 4.8s ease-in-out infinite;
  transition: background 180ms ease, transform 180ms ease, filter 180ms ease;
}

.nav-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(83, 207, 93, 0.02) 34%,
    rgba(83, 207, 93, 0.16) 50%,
    rgba(83, 207, 93, 0.02) 66%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-120%);
  animation: clickableSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

.nav-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(38px, 6vw, 70px);
  width: min(52%, 240px);
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(83, 207, 93, 0.65);
  opacity: 0.42;
  transform: translateX(-50%) scaleX(0.58);
  transform-origin: center;
  animation: clickableLine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.nav-card:hover,
.nav-card:focus-visible {
  background: rgba(83, 207, 93, 0.08);
  filter: brightness(1.08);
  transform: translateY(-5px);
  outline: none;
}

.nav-card:hover img,
.nav-card:focus-visible img {
  filter: brightness(1.08);
}

.nav-card:hover::before,
.nav-card:focus-visible::before {
  opacity: 1;
  animation-duration: 1.8s;
}

.nav-card:hover::after,
.nav-card:focus-visible::after {
  opacity: 0.9;
  transform: translateX(-50%) scaleX(1);
}

.nav-card img {
  width: auto;
  height: clamp(104px, 9vw, 146px);
  max-width: 92%;
  object-fit: contain;
}

.nav-card-wide img {
  width: auto;
  height: clamp(104px, 9vw, 146px);
  max-width: 92%;
  object-fit: contain;
}

.mosaic {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  grid-template-rows: repeat(2, minmax(130px, 1fr));
}

.mosaic-cell {
  display: grid;
  place-items: center;
  min-height: 130px;
}

.mosaic-cell img {
  width: clamp(50px, 5vw, 58px);
}

.green-cell {
  background: var(--green);
}

.green-cell img {
  width: clamp(76px, 7vw, 104px);
}

.edge-wave {
  position: absolute;
  right: -64px;
  width: clamp(360px, 34vw, 310px) !important;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  animation: cornerWave 9s ease-in-out infinite;
  transform-origin: bottom right;
}

.ruh-small {
  width: clamp(112px, 12vw, 178px) !important;
}

@keyframes lineBreath {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.86);
  }
  50% {
    border-color: rgba(255, 255, 255, 1);
  }
}

@keyframes brandBreathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.012);
  }
}

@keyframes ctaGlow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

@keyframes clickableIdle {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

@keyframes clickableSweep {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-120%);
  }
  72% {
    opacity: 0.85;
  }
  88%,
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes clickableLine {
  0%,
  100% {
    opacity: 0.32;
    transform: translateX(-50%) scaleX(0.5);
  }
  50% {
    opacity: 0.72;
    transform: translateX(-50%) scaleX(0.86);
  }
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes waveDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -20px, 0) scale(1.015);
  }
}

@keyframes cornerWave {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-12px, -12px, 0) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 980px) {
  .page-shell {
    overflow: visible;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(220px, auto) minmax(280px, auto) minmax(430px, auto) auto;
  }

  .panel-wave-top {
    min-height: 220px;
  }

  .brand-panel {
    min-height: 280px;
  }

  .decor-grid {
    grid-column: 1 / -1;
    min-height: 360px;
  }

  .nav-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-decor:last-child {
    display: none;
  }

  .nav-card-wide {
    grid-column: span 2;
  }

  .nav-card img,
  .nav-card-wide img {
    height: clamp(112px, 17vw, 146px);
    max-width: 86%;
  }

  .mosaic {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-grid {
    display: block;
    min-height: 0;
  }

  .panel-wave-top {
    min-height: 185px;
  }

  .panel-wave-top img {
    width: 125vw;
    left: -44vw;
    top: -16px;
  }

  .brand-panel {
    min-height: 290px;
    padding: 34px 24px 58px;
  }

  .brand-logo {
    width: min(82vw, 400px);
  }

  .primary-cta {
    width: min(74vw, 330px);
  }

  .decor-grid {
    min-height: 300px;
  }

  .nav-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-panel > * {
    min-height: 170px;
    border-right: 0;
    border-left: 0;
    border-bottom: var(--line-size) solid var(--line);
  }

  .nav-decor {
    min-height: 130px;
  }

  .nav-decor:last-child {
    display: grid;
  }

  .nav-card-wide {
    grid-column: auto;
  }

  .nav-card img,
  .nav-card-wide img {
    width: auto;
    height: clamp(104px, 28vw, 132px);
    max-width: 86vw;
  }

  .mosaic {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .mosaic-cell {
    min-height: 150px;
  }

  .edge-wave {
    right: -170px;
    bottom: -135px;
    width: 420px !important;
  }
}