@font-face {
  font-family: "Denim INK";
  src: url("/assets/DenimINK-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Denim INK";
  src: url("/assets/DenimINK-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color: #052323;
  background: #f6f6f6;
  font-family: "Denim INK", Arial, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.landing-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 22%, rgba(10, 100, 120, .22), transparent 28rem),
    linear-gradient(135deg, #052323 0%, #06343a 58%, #0a6478 150%);
  color: #fff;
}

.landing-shell {
  min-height: 100vh;
  padding: clamp(1.5rem, 5vmin, 4rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}

.brand-line {
  position: absolute;
  width: min(52vw, 45rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 44% 56% 62% 38% / 42% 34% 66% 58%;
  top: -20rem;
  right: -13rem;
  transform: rotate(22deg);
}

.landing-header, .landing-content, .landing-footer { position: relative; z-index: 1; }

.landing-header { display: flex; align-items: center; gap: 1.1rem; }
.wordmark { width: clamp(9rem, 17vw, 14rem); height: auto; }
.service-label { border-left: 1px solid rgba(255,255,255,.55); padding-left: 1rem; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; }

.landing-content { align-self: center; max-width: 50rem; padding: 5rem 0; }
.eyebrow { color: #c8c8c8; font-size: .88rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
h1 { font-size: clamp(2.45rem, 7vw, 6.2rem); font-weight: 600; letter-spacing: -.045em; line-height: .94; margin: 0 0 2rem; }
.intro { font-size: clamp(1.15rem, 2vw, 1.52rem); line-height: 1.35; max-width: 37rem; margin: 0 0 1rem; }
.support { color: #c8c8c8; line-height: 1.45; margin: 0; }
a { color: #fff; text-underline-offset: .18em; }
a:hover, a:focus-visible { color: #ffff64; }
.landing-footer { align-self: end; font-size: .95rem; }

@media (max-width: 560px) {
  .landing-header { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .service-label { border-left: 0; border-top: 1px solid rgba(255,255,255,.55); padding: .6rem 0 0; }
  .landing-content { padding: 3.5rem 0; }
}