:root{
  --bg: #080b12;
  --text: #e9eef7;
  --muted: rgba(233,238,247,.68);
  --teal: #37f6ff;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(700px 420px at 50% 30%, rgba(55,246,255,.08), transparent 60%),
    radial-gradient(900px 500px at 50% 85%, rgba(55,246,255,.06), transparent 65%),
    var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.wrap{
  min-height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 40px 18px;
  gap: 10px;
}

/* mark */
.mark{
  width: min(560px, 92vw);
  margin: 0 auto 6px;
}
.mark svg{ width: 100%; height: auto; display: block; }

/* wordmark */
.wordmark{
  margin: 0;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: 0.22em;      /* wide like the logo */
  text-transform: uppercase;
  font-weight: 650;
}

/* tagline */
.tagline{
  margin: 0;
  color: rgba(233,238,247,.55);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

/* contact */
.contact{
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.contact-link{
  color: rgba(233,238,247,.82);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.contact-link:hover{
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* tiny teal “presence” on hover, still simple */
.contact-link:hover{
  text-shadow: 0 0 22px rgba(55,246,255,.18);
}