:root{
  --pink:#F35588;
  --teal:#20B2AA;
  --navy:#294F6D;

  --text:#10283a;
  --muted:#4e6b80;
  --border:#e6eef5;
  --shadow2: 0 10px 24px rgba(16,40,58,.08);
}

html, body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 16% 6%, rgba(32,178,170,.14), transparent 62%),
    radial-gradient(900px 600px at 86% 14%, rgba(243,85,136,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(41,79,109,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfdff 55%, #ffffff);
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

a{
  color:inherit;
}

.container{
  width:min(1120px, 92vw);
  margin:0 auto;
}

.shell-blob{
  position:fixed;
  transform:translate(-50%,-50%);
  opacity:.55;
  animation:shellFloat 10s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
  filter:blur(.2px);
}

.shell-blob--one{
  left:14%;
  top:18%;
  width:520px;
  height:520px;
  background: radial-gradient(circle at 30% 30%, rgba(243,85,136,.85), rgba(243,85,136,.12) 58%, transparent 72%);
  border-radius: 43% 57% 63% 37% / 42% 44% 56% 58%;
}

.shell-blob--two{
  left:88%;
  top:16%;
  width:460px;
  height:460px;
  background: radial-gradient(circle at 40% 35%, rgba(32,178,170,.85), rgba(32,178,170,.10) 58%, transparent 72%);
  border-radius: 58% 42% 36% 64% / 48% 63% 37% 52%;
  animation-delay:-3s;
}

.shell-blob--three{
  left:70%;
  top:92%;
  width:560px;
  height:560px;
  background: radial-gradient(circle at 35% 35%, rgba(243,85,136,.55), rgba(32,178,170,.10) 55%, transparent 75%);
  border-radius: 40% 60% 55% 45% / 52% 42% 58% 48%;
  animation-delay:-6s;
  opacity:.45;
}

@keyframes shellFloat{
  0%,100%{ transform: translate(-50%,-50%) rotate(0deg) scale(1); }
  50%{ transform: translate(-50%,-54%) rotate(7deg) scale(1.04); }
}