:root {
  --navy: #071A7A;
  --orange: #FF4D3C;
  --violet: #6D28D9;
  --magenta: #FF0F7B;
  --paper: #FAFBFF;
  --text-soft: #56628D;
  --display: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --body: "Avenir Next", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  min-width: 320px;
  min-height: 320px;
  background: var(--paper);
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 320px;
  color: var(--navy);
  background:
    radial-gradient(circle at 90% 12%, rgba(109,40,217,.045), transparent 30rem),
    radial-gradient(circle at 96% 82%, rgba(255,77,60,.035), transparent 23rem),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.page-shell {
  width: 100%;
  min-height: max(320px, 100svh);
  height: max(320px, 100svh);
  padding: clamp(24px, 5vw, 80px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand-mark {
  position: relative;
  width: min(76vw, 1160px);
  padding: clamp(4px, .55vw, 8px) clamp(14px, 3.5vw, 58px);
  background: rgba(250, 251, 255, .92);
  border-radius: clamp(14px, 1.6vw, 24px);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: clamp(3px, .45vw, 7px);
  background: linear-gradient(105deg, var(--navy), var(--violet), var(--magenta), var(--orange), var(--navy));
  background-size: 280% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .page-shell {
    padding: 28px clamp(24px, 6vw, 52px);
  }

  .brand-mark {
    width: min(84vw, 760px);
  }
}

@media (max-width: 560px) {
  .page-shell {
    padding: 22px 24px;
  }

  .brand-mark {
    width: 100%;
    padding: 4px 14px;
  }
}

@media (max-height: 640px) {
  .page-shell {
    align-items: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-mark::after {
    animation: borderFlow 9s linear infinite;
  }

  .brand-logo {
    animation: logoIn .7s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes logoIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes borderFlow {
    from { background-position: 0% 50%; }
    to { background-position: 280% 50%; }
  }
}