:root {
  --Text-Secondary: #ffffff;
  --bg: #5E65B7;
  --maxw: 1100px;
  --page-bg-image: url('/svg/background/BG-overlay.svg');
  --page-bg-opacity: 1;
  --accent: rgba(127, 255, 212, 1);

}

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--Text-Secondary);
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: grid;
  place-items: start center;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: var(--page-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: var(--page-bg-opacity);
  pointer-events: none;
}

.wrap {
  width: min(92vw, var(--maxw));
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.content {
  place-self: center;
  margin: 0;
}

.hero-title {
  color: var(--Text-Secondary);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.05;
  word-wrap: break-word;
  margin: 0 0 18px;
}

.hero-subtitle {
  color: var(--Text-Secondary);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  word-wrap: break-word;
}

.hero-copy {
  color: var(--Text-Secondary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  word-wrap: break-word;
  max-width: 100ch;
  margin: 0 auto;
  opacity: 0.9;
  opacity: 0.9;
}

nav.links {
  align-self: end;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: max(clamp(12px, 3vh, 24px), env(safe-area-inset-bottom));
}



nav.links a {
  color: var(--Text-Secondary);
  padding: 10px 14px;
  border-radius: none;
  text-decoration: none;
  display: inline-block;

  transition:
  transform 0.2s ease,
  opacity 0.2s ease,
  color 0.25s ease,
}

nav.links a:hover,
nav.links a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);

  color: var(--accent);
}


.hero-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px auto 18px;
}

.hero-logo {
  width: clamp(180px, 40vw, 352.155px);
  height: auto;
  max-height: 100px;
}

.hero-img {
  width: clamp(180px, 42vw, 348px);
  height: clamp(180px, 42vw, 348px);
  border-radius: 44.78px;
  object-fit: cover;       
  display: block;
}

.hero-title { margin-top: 6px; }


.gap-large {
  width: 100%;
  height: clamp(16px, 6vw, 56px);
}


@media (max-width: 720px) {
  .hero-media { gap: 12px; margin: 18px auto 14px; }
  .hero-title   { font-size: 44px; }
  .hero-subtitle{ font-size: 28px; }
}

@media (max-width: 420px) {
  .hero-media { gap: 10px; margin: 14px auto 12px; }
  .hero-title   { font-size: 34px; }
  .hero-subtitle{ font-size: 22px; }
}